Test e2e para responder una pregunta mal en calculadora

Arquisoft · Apr 23, 2024 · a739b07 · a739b07
1 parent 6b2b003
commit a739b07
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 16 deletions.
diff --git a/webapp/e2e/features/play-calculator.feature b/webapp/e2e/features/play-calculator.feature
@@ -0,0 +1,6 @@
+Feature: Answering a question
+
+Scenario: The user can answer a question on Human Calculator mode
+  Given A logged-in user
+  When I play on Human Calculator mode and answer incorrectly
+  Then The game ends
diff --git a/webapp/e2e/features/play-classic.feature b/webapp/e2e/features/play-classic.feature
@@ -1,6 +1,6 @@
 Feature: Answering a question
 
-Scenario: The user can answer a question
+Scenario: The user can answer a question on Classic mode
   Given A logged-in user
   When I play on Classic mode and click on an answer
   Then The right answer should be colored green
diff --git a/webapp/e2e/steps/play-calculator.steps.js b/webapp/e2e/steps/play-calculator.steps.js
@@ -0,0 +1,65 @@
+const puppeteer = require("puppeteer");
+const { defineFeature, loadFeature } = require("jest-cucumber");
+const setDefaultOptions = require("expect-puppeteer").setDefaultOptions;
+const { expect } = require("expect-puppeteer");
+
+const feature = loadFeature("./features/play-calculator.feature");
+
+let page;
+let browser;
+
+defineFeature(feature, (test) => {
+  beforeAll(async () => {
+    browser = process.env.GITHUB_ACTIONS
+      ? await puppeteer.launch()
+      : await puppeteer.launch({ headless: false, slowMo: 100 });
+    page = await browser.newPage();
+    setDefaultOptions({ timeout: 10000 });
+
+    await page.goto("http://localhost:3000", {
+      waitUntil: "networkidle0",
+    });
+  });
+
+  test("The user can answer a question on Human Calculator mode", ({ given, when, then }) => {
+    given("A logged-in user", async () => {
+
+      await page.type("#login-username", "testuser");
+      await page.type("#login-password", "Testpassword1");
+      await page.click("button", { text: "Login" });
+      await page.waitForNavigation();
+    });
+
+    when("I play on Human Calculator mode and answer incorrectly", async () => {
+
+      await page.click('[data-testid="calculator"]');
+      await page.waitForNavigation();
+
+      await page.waitForSelector('[data-testid="operation"]');
+
+      const operation = await page.evaluate(() => {
+        return document.querySelector('[data-testid="operation"]').textContent;
+      });
+
+      const answer = -1;
+
+      await page.type('[data-testid="answer-input"]', answer.toString());
+
+      await page.click('[data-testid="submit-button"]');
+    });
+
+    then("The game ends", async () => {
+      await page.waitForSelector('[data-testid="game-over"]');
+
+      const gameOverMessage = await page.evaluate(() => {
+        return document.querySelector('[data-testid="game-over"]').textContent;
+      });
+
+      expect(gameOverMessage).toContain("¡Juego terminado!");
+    });
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+});
diff --git a/webapp/e2e/steps/play-classic.steps.js b/webapp/e2e/steps/play-classic.steps.js
@@ -21,7 +21,7 @@ defineFeature(feature, (test) => {
     });
   });
 
-  test("The user can answer a question", ({ given, when, then }) => {
+  test("The user can answer a question on Classic mode", ({ given, when, then }) => {
     given("A logged-in user", async () => {
 
       await page.type("#login-username", "testuser");
@@ -31,7 +31,7 @@ defineFeature(feature, (test) => {
     });
 
     when("I play on Classic mode and click on an answer", async () => {
-      await page.click('[data-testid="classic-mode"]');
+      await page.click('[data-testid="classic"]');
       await page.waitForNavigation();
 
       await page.waitForSelector('[data-testid="question"]');
@@ -40,15 +40,23 @@ defineFeature(feature, (test) => {
     });
 
     then("The right answer should be colored green", async () => {
-      await page.waitForTimeout(3000);
-
-      const correctAnswerColor = await page.evaluate(() => {
-        const answerButton = document.querySelector('[data-testid="answer-button"]');
-        return window.getComputedStyle(answerButton).getPropertyValue("background-color");
+        await page.waitForTimeout(3000);
+
+        const answerButtons = await page.$$('[data-testid^="answer-button"]');
+        let isGreen = false;
+
+        for (const button of answerButtons) {
+          const buttonColor = await button.evaluate((el) => {
+            return window.getComputedStyle(el).getPropertyValue("background-color");
+          });
+          if (buttonColor === "rgb(16, 255, 0)") {
+            isGreen = true;
+            break;
+          }
+        }
+
+        expect(isGreen).toBe(true);
       });
-
-      expect(correctAnswerColor).toMatch("rgb(16, 255, 0)");
-    });
   });
 
   afterAll(async () => {

diff --git a/webapp/src/pages/Calculadora/Calculadora.js b/webapp/src/pages/Calculadora/Calculadora.js
@@ -175,7 +175,7 @@ const CalculadoraHumana = () => {
               <Heading as="h2">{t('pages.humancalculator.finished')}</Heading>
               <p p={2}>Tu puntuación: {puntuacion}</p>
               <Flex flexDirection={"column"}>
-                <Button onClick={handleRepetirJuego} colorScheme="teal" m={2}>
+                <Button onClick={handleRepetirJuego} colorScheme="teal" m={2} data-testid="play-again-button">
                   {t('pages.humancalculator.playAgain')}
                 </Button>
                 <Link to="/home" style={{ marginLeft: "10px" }}>
@@ -185,17 +185,18 @@ const CalculadoraHumana = () => {
             </Box>
           ) : (
             <Box>
-              <Heading as="h2" mb={4}>
-                ¿{operation}?
+              <Heading as="h2" mb={4} data-testid="operation">
+                {operation} = ?
               </Heading>
               <Input
                 type="number"
                 title="number"
                 value={valSubmit}
                 onChange={(e) => setValSubmit(e.target.value)}
                 onKeyDown={handleKeyDown}
+                data-testid="answer-input"
               />
-              <Button mt={3} onClick={() => handleAnswer(Number(valSubmit))}>
+              <Button mt={3} onClick={() => handleAnswer(Number(valSubmit))} data-testid="submit-button">
                 {" "}
                 Enviar{" "}
               </Button>

diff --git a/webapp/src/pages/Clasico/Clasico.js b/webapp/src/pages/Clasico/Clasico.js
@@ -279,7 +279,7 @@ const JuegoPreguntas = () => {
             </Box>
           ) : (
             <Box>
-              <Heading as="h2" mb={4}>
+              <Heading as="h2" mb={4} data-testid="question">
                 {t("pages.classic.question")} {indicePregunta + 1}
               </Heading>
               <p>{preguntaActual.pregunta}</p>
@@ -294,6 +294,7 @@ const JuegoPreguntas = () => {
                     padding={"1rem"}
                     height={"fit-content"}
                     minHeight={"3rem"}
+                    data-testid={`answer-button-${index}`}
                   >
                     {respuesta}
                   </Button>
@@ -311,6 +312,7 @@ const JuegoPreguntas = () => {
                   disabled={tiempoRestante === 0 || juegoTerminado}
                   colorScheme="teal"
                   m={2}
+                  data-testid="answer-button"
                 >
                   {t("pages.classic.answer")}
                 </Button>