test: add test for checking wrong answer

e2e/score-and-results.spec.ts

@@ -1,6 +1,9 @@
 import { test, expect } from "@playwright/test";
 import htmlQuizQuestions from "../src/data/html-quiz";
-import { correctModalResponses } from "../src/data/modal-responses";
+import {
+  correctModalResponses,
+  incorrectModalResponses
+} from "../src/data/modal-responses";
 
 test.beforeEach(async ({ page }) => {
   await page.goto("/#/quizzes");
@@ -49,3 +52,47 @@ test("should show 'success' modal after selecting the correct option", async ({
 
   await expect(page.getByTestId("modal-points")).toHaveText("Points: 1");
 });
+
+test("should show 'failure' modal after selecting the WRONG option", async ({
+  page
+}) => {
+  await page.getByRole("button", { name: "HTML" }).click();
+
+  await page.getByRole("button", { name: "10", exact: true }).click();
+
+  // get points num before answering the question
+  await expect(page.locator(".quiz-text")).toContainText("Points: 0");
+
+  // find which option is correct
+  // 1. get the question text
+  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 }) =>
+    questionText.includes(Question)
+  );
+
+  if (!questionData) {
+    console.log("QUESTION NOT FOUND IN LIST!!!");
+  }
+  // 3. find the 'Distractor' option
+  const questionDistractor = questionData.Distractor1;
+  // 4. select correct option
+  await page.getByRole("button", { name: questionDistractor }).click();
+
+  // Click the submit button
+  await page.getByRole("button").nth(4).click();
+
+  await expect(page.getByRole("dialog")).toBeVisible();
+
+  const modalDialog = await page.getByRole("dialog");
+
+  // get the contents of modal-text
+  const failureLocator = await modalDialog.locator("h2");
+  let failureText = await failureLocator.textContent();
+  failureText = failureText.replace("😔", "").replace(" ", "");
+
+  expect(incorrectModalResponses).toContain(failureText);
+
+  await expect(page.getByTestId("modal-points")).toHaveText("Points: 0");
+});