refactor: use native dialog

e2e/score-and-results.spec.ts

@@ -1,80 +1,90 @@
-import { test, expect } from "@playwright/test";
+import { test, expect, Page } from "@playwright/test";
 import htmlQuizQuestions from "../src/data/html-quiz";
 import {
   correctModalResponses,
   incorrectModalResponses
 } from "../src/data/modal-responses";
 
+interface QuizQuestion {
+  Question: string;
+  Answer: string;
+  Distractor1: string;
+  Distractor2?: string; // Optional distractor, if present
+}
+
+type ModalResponses = string[];
+
+const isDefined = <T>(value: T | undefined): value is T => {
+  return value !== undefined;
+};
+
 test.beforeEach(async ({ page }) => {
   await page.goto("/#/quizzes");
 });
 
-test("should show 'success' modal after selecting the correct option", async ({
-  page
-}) => {
-  await page.getByRole("button", { name: "HTML" }).click();
-
-  await page.getByRole("button", { name: "10", exact: true }).click();
-
+async function selectQuizCategory(
+  page: Page,
+  category: string,
+  questionCount: string
+) {
+  await page.getByRole("button", { name: category }).click();
+  await page.getByRole("button", { name: questionCount, exact: true }).click();
   await expect(page.getByText("Points: 0")).toBeVisible();
+}
 
-  const question = await page.locator("legend").textContent();
-  // Find the question inside questions of the category
+async function getQuestionData(question: string): Promise<QuizQuestion> {
   const questionData = htmlQuizQuestions.find(({ Question }) =>
     question.includes(Question)
   );
-
-  if (!questionData) {
-    console.log("Question not found.");
+  if (!isDefined(questionData)) {
+    throw new Error("Question not found in the quiz data.");
   }
-
-  const answer = questionData.Answer;
-
-  await page.getByRole("button", { name: answer }).click();
-  await page.getByRole("button", { name: "Submit", exact: true }).click();
-
+  return questionData;
+}
+
+async function verifyModalResponse(
+  page: Page,
+  expectedResponses: ModalResponses,
+  expectedPoints: string
+) {
   const dialog = page.getByRole("dialog");
+  await expect(dialog).toBeVisible();
+
   const message = await dialog.getByRole("heading", { level: 2 }).textContent();
-  const isMessageInExpectedSet = correctModalResponses.some(response =>
-    message.includes(response)
+  const isMessageInExpectedSet = expectedResponses.some(response =>
+    message?.includes(response)
   );
 
-  await expect(dialog).toBeVisible();
   expect(isMessageInExpectedSet).toEqual(true);
-  await expect(dialog.getByText("Points: 1")).toBeVisible();
-});
+  await expect(dialog.getByText(`Points: ${expectedPoints}`)).toBeVisible();
+}
 
-test("should show 'failure' modal after selecting the wrong option", async ({
+test("should show 'success' modal after selecting the correct option", async ({
   page
 }) => {
-  await page.getByRole("button", { name: "HTML" }).click();
+  await selectQuizCategory(page, "HTML", "10");
 
-  await page.getByRole("button", { name: "10", exact: true }).click();
+  const question = await page.locator("legend").textContent();
+  const questionData = await getQuestionData(question || "");
 
-  await expect(page.getByText("Points: 0")).toBeVisible();
+  const answer = questionData.Answer;
+  await page.getByRole("button", { name: answer }).click();
+  await page.getByRole("button", { name: "Submit", exact: true }).click();
 
-  const question = await page.locator("legend").textContent();
-  // Find the question inside questions of the category
-  const questionData = htmlQuizQuestions.find(({ Question }) =>
-    question.includes(Question)
-  );
+  await verifyModalResponse(page, correctModalResponses, "1");
+});
 
-  if (!questionData) {
-    console.log("Question not found.");
-  }
+test("should show 'failure' modal after selecting the wrong option", async ({
+  page
+}) => {
+  await selectQuizCategory(page, "HTML", "10");
 
-  const distractor = questionData.Distractor1;
+  const question = await page.locator("legend").textContent();
+  const questionData = await getQuestionData(question || "");
 
-  await page.getByRole("button", { name: distractor }).click();
+  const distractor = questionData.Distractor1;
+  await page.getByRole("button", { name: distractor, exact: true }).click();
   await page.getByRole("button", { name: "Submit", exact: true }).click();
 
-  const dialog = page.getByRole("dialog");
-  const message = await dialog.getByRole("heading", { level: 2 }).textContent();
-  const isMessageInExpectedSet = incorrectModalResponses.some(response =>
-    message.includes(response)
-  );
-
-  await expect(dialog).toBeVisible();
-  expect(isMessageInExpectedSet).toEqual(true);
-  await expect(dialog.getByText("Points: 0")).toBeVisible();
+  await verifyModalResponse(page, incorrectModalResponses, "0");
 });

index.html

@@ -26,20 +26,6 @@
     />
     <meta name="twitter:url" content="https://developerquiz.org" />
 
-    <!--Bootstrap links-->
-    <link
-      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
-      crossorigin="anonymous"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
-      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
-      crossorigin="anonymous"
-    />
-
     <!--Font Awesome icons-->
     <link
       rel="stylesheet"
@@ -66,15 +52,9 @@
   </head>
 
   <body>
-    <div id="modal"></div>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--Bootstrap script-->
-    <script
-      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
-      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
-      crossorigin="anonymous"
-    ></script>
+
     <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

package.json

@@ -9,7 +9,6 @@
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.0.0",
-    "bootstrap": "^5.1.3",
     "react": "^18.2.0",
     "react-confetti": "^6.1.0",
     "react-dom": "^18.2.0",