From a739b07cc344e0e43edbd9abe8d29abe13feffe0 Mon Sep 17 00:00:00 2001 From: iyanfdezz Date: Tue, 23 Apr 2024 17:44:53 +0200 Subject: [PATCH] Test e2e para responder una pregunta mal en calculadora --- webapp/e2e/features/play-calculator.feature | 6 ++ webapp/e2e/features/play-classic.feature | 2 +- webapp/e2e/steps/play-calculator.steps.js | 65 +++++++++++++++++++++ webapp/e2e/steps/play-classic.steps.js | 28 +++++---- webapp/src/pages/Calculadora/Calculadora.js | 9 +-- webapp/src/pages/Clasico/Clasico.js | 4 +- 6 files changed, 98 insertions(+), 16 deletions(-) create mode 100644 webapp/e2e/features/play-calculator.feature create mode 100644 webapp/e2e/steps/play-calculator.steps.js diff --git a/webapp/e2e/features/play-calculator.feature b/webapp/e2e/features/play-calculator.feature new file mode 100644 index 00000000..43e47198 --- /dev/null +++ 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 \ No newline at end of file diff --git a/webapp/e2e/features/play-classic.feature b/webapp/e2e/features/play-classic.feature index a823f926..46d0bfdd 100644 --- 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 \ No newline at end of file diff --git a/webapp/e2e/steps/play-calculator.steps.js b/webapp/e2e/steps/play-calculator.steps.js new file mode 100644 index 00000000..2f3db9d7 --- /dev/null +++ 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 index d3ffef19..9fd3c658 100644 --- 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 index 3aa83b06..d2319d90 100644 --- a/webapp/src/pages/Calculadora/Calculadora.js +++ b/webapp/src/pages/Calculadora/Calculadora.js @@ -175,7 +175,7 @@ const CalculadoraHumana = () => { {t('pages.humancalculator.finished')}

Tu puntuación: {puntuacion}

- @@ -185,8 +185,8 @@ const CalculadoraHumana = () => { ) : ( - - ¿{operation}? + + {operation} = ? { value={valSubmit} onChange={(e) => setValSubmit(e.target.value)} onKeyDown={handleKeyDown} + data-testid="answer-input" /> - diff --git a/webapp/src/pages/Clasico/Clasico.js b/webapp/src/pages/Clasico/Clasico.js index d1da9374..4803c356 100644 --- a/webapp/src/pages/Clasico/Clasico.js +++ b/webapp/src/pages/Clasico/Clasico.js @@ -279,7 +279,7 @@ const JuegoPreguntas = () => { ) : ( - + {t("pages.classic.question")} {indicePregunta + 1}

{preguntaActual.pregunta}

@@ -294,6 +294,7 @@ const JuegoPreguntas = () => { padding={"1rem"} height={"fit-content"} minHeight={"3rem"} + data-testid={`answer-button-${index}`} > {respuesta} @@ -311,6 +312,7 @@ const JuegoPreguntas = () => { disabled={tiempoRestante === 0 || juegoTerminado} colorScheme="teal" m={2} + data-testid="answer-button" > {t("pages.classic.answer")}