refactor: better to use test id instead of tag locator

shootermv · Aug 11, 2024 · f5b7b85 · f5b7b85
1 parent c87dba6
commit f5b7b85
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/e2e/score-and-results.spec.ts b/e2e/score-and-results.spec.ts
@@ -13,13 +13,11 @@ test("should show 'success' modal after selecting the correct option", async ({
   await page.getByRole("button", { name: "10", exact: true }).click();
 
   // get points num before answering the question
-  const pointsHeader = await page.$(".quiz-text");
-  const pointsText = await pointsHeader.textContent();
-  expect(pointsText).toContain("Points: 0");
+  await expect(page.locator(".quiz-text")).toContainText("Points: 0");
 
   // find which option is correct
   // 1. get the qusetion text
-  const legend = await page.$("legend");
+  const legend = await page.locator("legend");
   const questionText = await legend.textContent();
   // 2. find the question inside questions of the category
   const questionData = htmlQuizQuestions.find(({ Question }) =>
@@ -39,14 +37,12 @@ test("should show 'success' modal after selecting the correct option", async ({
 
   await expect(page.getByRole("dialog")).toBeVisible();
 
-  const modalDialog = await page.$(".modal-dialog");
+  const modalDialog = await page.getByRole("dialog");
   // get the contents of modal-text
-  const modalHeading = await modalDialog.$("h2");
+  const modalHeading = await modalDialog.locator("h2");
 
   const modalHeadingText = await modalHeading.textContent();
   expect(modalHeadingText).toContain("💡");
 
-  const modalPointsHeading = await modalDialog.$("h3");
-  const modalPointsHeadingText = await modalPointsHeading.textContent();
-  expect(modalPointsHeadingText).toBe("Points: 1");
+  await expect(page.getByTestId("modal-points")).toHaveText("Points: 1");
 });
diff --git a/src/components/QuizModal.tsx b/src/components/QuizModal.tsx
@@ -25,7 +25,9 @@ const QuizModal: React.FC<QuizQuestion> = QuizQuestion => {
             <h2 className="modal-text">
               {answerIcon} {QuizQuestion.message}
             </h2>
-            <h3 className="modal-text">Points: {QuizQuestion.points}</h3>
+            <h3 className="modal-text" data-testid="modal-points">
+              Points: {QuizQuestion.points}
+            </h3>
           </Modal.Title>
         </Modal.Header>
         <Modal.Body>