diff --git a/webapp/e2e/features/competitiveGame.feature b/webapp/e2e/features/competitiveGame.feature deleted file mode 100644 index 3062007..0000000 --- a/webapp/e2e/features/competitiveGame.feature +++ /dev/null @@ -1,9 +0,0 @@ -Feature: Game Configurator and Competitive Game functionality - Scenario: Create Competitive Game should go to /questions - Given I am on the game configurator - When I click on new competitive game - Then I am in /questions - Scenario: Create Customized Game should go to /questions - Given I am on the game configurator - When I click on new customized game - Then I am in /questions \ No newline at end of file diff --git a/webapp/e2e/features/gameMenu.feature b/webapp/e2e/features/gameMenu.feature index a156fbb..7006928 100644 --- a/webapp/e2e/features/gameMenu.feature +++ b/webapp/e2e/features/gameMenu.feature @@ -1,8 +1,16 @@ Feature: Game Menu page functionality Scenario: There should be visible three links - Given I am on the game menu - Then three buttons should be visible + Given I am on the game menu + Then three buttons should be visible Scenario: New Game should go to game configurator Given I am on the game menu When I click on New Game Then I should be in the game configurator +Scenario: Ranking should go to ranking view + Given I am on the game menu + When I click on Ranking + Then I should be in the ranking +Scenario: View Historical Data should go to historical data + Given I am on the game menu + When I click on View Historical Data + Then I should be in the historical data \ No newline at end of file diff --git a/webapp/e2e/features/questionGame.feature b/webapp/e2e/features/questionGame.feature new file mode 100644 index 0000000..c836908 --- /dev/null +++ b/webapp/e2e/features/questionGame.feature @@ -0,0 +1,29 @@ +Feature: Game Configurator and Competitive Game functionality + Scenario: Create Competitive Game should go to /questions + Given I am on the game configurator + When I click on new competitive game + Then I am in /questions + Scenario: Create Customized Game should go to /questions + Given I am on the game configurator + When I click on new customized game + Then I am in /questions + Scenario: Create Customized Game of Capital questions + Given I am on the game configurator + When I click select Capital and I create a new customized game + Then I get Capital questions + Scenario: Create Customized Game of Language questions + Given I am on the game configurator + When I click select Language and I create a new customized game + Then I get Language questions + Scenario: Create Customized Game of Population questions + Given I am on the game configurator + When I click select Population and I create a new customized game + Then I get Population questions + Scenario: Create Customized Game of Size questions + Given I am on the game configurator + When I click select Size and I create a new customized game + Then I get Size questions + Scenario: Create Customized Game of Head of Goverment questions + Given I am on the game configurator + When I click select Head of Goverment and I create a new customized game + Then I get Head of Goverment questions \ No newline at end of file diff --git a/webapp/e2e/features/revealAnswers.feature b/webapp/e2e/features/revealAnswers.feature new file mode 100644 index 0000000..4238d58 --- /dev/null +++ b/webapp/e2e/features/revealAnswers.feature @@ -0,0 +1,9 @@ +Feature: Question View answers + Scenario: Create Competitive Game and reveal correct answer color + Given I am on the game configurator and create a competitive game + When I let the counter end + Then Correct Color appears + Scenario: Create Competitive Game and reveal wrong answer colors + Given I am on the game configurator and create a competitive game + When I let the counter end + Then Incorrect Color appears \ No newline at end of file diff --git a/webapp/e2e/steps/competitiveGame.steps.js b/webapp/e2e/steps/competitiveGame.steps.js deleted file mode 100644 index 8bd7682..0000000 --- a/webapp/e2e/steps/competitiveGame.steps.js +++ /dev/null @@ -1,63 +0,0 @@ -const puppeteer = require('puppeteer'); -const { defineFeature, loadFeature } = require('jest-cucumber'); -const setDefaultOptions = require('expect-puppeteer').setDefaultOptions; - -const feature = loadFeature('./features/competitiveGame.feature'); - -const { register, login, logout } = require("../utils"); - -let page; -let browser; - -const email = "testUser1@example.com"; -const username = "testUser1" -const password = "testUserPassword" - -defineFeature(feature, test => { - - beforeAll(async () => { - browser = await puppeteer.launch({ - headless: "new", - slowMo: 40, - defaultViewport: { width: 1920, height: 1080 }, - args: ['--window-size=1920,1080'] - }); - - page = await browser.newPage(); - setDefaultOptions({ timeout: 30000 }); - - await register(page, email, username, password); - }); - - beforeEach(async () => { - await logout(page); - await login(page, username, password); - }) - - test('Create Competitive Game should go to /questions', ({ given,when, then }) => { - given('I am on the game configurator', async () => { - await page.goto('http://localhost:3000/configurator'); - await page.waitForSelector('.GameConfiguratorDiv'); - }); - when('I click on new competitive game', async () => { - await page.click('#competitive'); - }); - then('I am in /questions', async () => { - await expect(page).toMatchElement('.questionContainer'); - }); - }); - - test('Create Customized Game should go to /questions', ({ given,when, then }) => { - given('I am on the game configurator', async () => { - await page.goto('http://localhost:3000/configurator'); - await page.waitForSelector('.GameConfiguratorDiv'); - }); - when('I click on new customized game', async () => { - await page.click('.linkButton'); - }); - then('I am in /questions', async () => { - await expect(page).toMatchElement('.questionContainer'); - }); - }); - -}); diff --git a/webapp/e2e/steps/gameMenu.steps.js b/webapp/e2e/steps/gameMenu.steps.js index 9d00a32..a54bfff 100644 --- a/webapp/e2e/steps/gameMenu.steps.js +++ b/webapp/e2e/steps/gameMenu.steps.js @@ -58,5 +58,29 @@ defineFeature(feature, test => { await expect(page).toMatchElement('.GameConfiguratorDiv'); }); }); + test('Ranking should go to ranking view', ({ given, when, then }) => { + given('I am on the game menu', async () => { + await page.goto('http://localhost:3000/menu'); + await page.waitForSelector('.divMenu'); + }); + when('I click on Ranking', async () => { + await page.click('#ranking'); + }); + then('I should be in the ranking', async () => { + await expect(page).toMatchElement('.table'); + }); + }); + test('View Historical Data should go to historical data', ({ given, when, then }) => { + given('I am on the game menu', async () => { + await page.goto('http://localhost:3000/menu'); + await page.waitForSelector('.divMenu'); + }); + when('I click on View Historical Data', async () => { + await page.click('#historical'); + }); + then('I should be in the historical data', async () => { + await expect(page).toMatchElement('.globalHistoricalView'); + }); + }); }); diff --git a/webapp/e2e/steps/questionGame.steps.js b/webapp/e2e/steps/questionGame.steps.js new file mode 100644 index 0000000..ffb5cbe --- /dev/null +++ b/webapp/e2e/steps/questionGame.steps.js @@ -0,0 +1,150 @@ +const puppeteer = require('puppeteer'); +const { defineFeature, loadFeature } = require('jest-cucumber'); +const setDefaultOptions = require('expect-puppeteer').setDefaultOptions; + +const feature = loadFeature('./features/questionGame.feature'); + +const { register, login, logout } = require("../utils"); + +let page; +let browser; + +const email = "testUser1@example.com"; +const username = "testUser1" +const password = "testUserPassword" + +defineFeature(feature, test => { + + beforeAll(async () => { + browser = await puppeteer.launch({ + headless: "new", + slowMo: 20, + defaultViewport: { width: 1920, height: 1080 }, + args: ['--window-size=1920,1080'] + }); + + page = await browser.newPage(); + setDefaultOptions({ timeout: 30000 }); + + await register(page, email, username, password); + }); + + beforeEach(async () => { + await logout(page); + await login(page, username, password); + }) + + test('Create Competitive Game should go to /questions', ({ given,when, then }) => { + given('I am on the game configurator', async () => { + await page.goto('http://localhost:3000/configurator'); + await page.waitForSelector('.GameConfiguratorDiv'); + }); + when('I click on new competitive game', async () => { + await page.click('#competitive'); + }); + then('I am in /questions', async () => { + await expect(page).toMatchElement('.questionContainer'); + }); + }); + + test('Create Customized Game should go to /questions', ({ given,when, then }) => { + given('I am on the game configurator', async () => { + await page.goto('http://localhost:3000/configurator'); + await page.waitForSelector('.GameConfiguratorDiv'); + }); + when('I click on new customized game', async () => { + await page.click('.linkButton'); + }); + then('I am in /questions', async () => { + await expect(page).toMatchElement('.questionContainer'); + }); + }); + + test('Create Customized Game of Capital questions', ({ given,when, then }) => { + given('I am on the game configurator', async () => { + await page.goto('http://localhost:3000/configurator'); + await page.waitForSelector('.GameConfiguratorDiv'); + }); + when('I click select Capital and I create a new customized game', async () => { + await page.select('#select', 'CAPITAL'); + await page.click('.linkButton');//click on capital + }); + then('I get Capital questions', async () => { + //await expect(page).toMatchElement('.topPanel'); + const questionContainer = await page.$('.topPanel'); + const questionText = await page.evaluate(questionContainer => questionContainer.textContent, questionContainer); + const containsCapital = /Capital/i.test(questionText); + expect(containsCapital).toBe(true); + }); + }); + + test('Create Customized Game of Language questions', ({ given,when, then }) => { + given('I am on the game configurator', async () => { + await page.goto('http://localhost:3000/configurator'); + await page.waitForSelector('.GameConfiguratorDiv'); + }); + when('I click select Language and I create a new customized game', async () => { + await page.select('#select', 'LANGUAGE'); + await page.click('.linkButton'); + }); + then('I get Language questions', async () => { + //await expect(page).toMatchElement('.topPanel'); + const questionContainer = await page.$('.topPanel'); + const questionText = await page.evaluate(questionContainer => questionContainer.textContent, questionContainer); + const containsCapital = /Language/i.test(questionText); + expect(containsCapital).toBe(true); + }); + }); + test('Create Customized Game of Population questions', ({ given,when, then }) => { + given('I am on the game configurator', async () => { + await page.goto('http://localhost:3000/configurator'); + await page.waitForSelector('.GameConfiguratorDiv'); + }); + when('I click select Population and I create a new customized game', async () => { + await page.select('#select', 'POPULATION'); + await page.click('.linkButton'); + }); + then('I get Population questions', async () => { + //await expect(page).toMatchElement('.topPanel'); + const questionContainer = await page.$('.topPanel'); + const questionText = await page.evaluate(questionContainer => questionContainer.textContent, questionContainer); + const containsCapital = /Population/i.test(questionText); + expect(containsCapital).toBe(true); + }); + }); + test('Create Customized Game of Size questions', ({ given,when, then }) => { + given('I am on the game configurator', async () => { + await page.goto('http://localhost:3000/configurator'); + await page.waitForSelector('.GameConfiguratorDiv'); + }); + when('I click select Size and I create a new customized game', async () => { + await page.select('#select', 'SIZE'); + await page.click('.linkButton'); + }); + then('I get Size questions', async () => { + //await expect(page).toMatchElement('.topPanel'); + const questionContainer = await page.$('.topPanel'); + const questionText = await page.evaluate(questionContainer => questionContainer.textContent, questionContainer); + const containsCapital = /Size/i.test(questionText); + expect(containsCapital).toBe(true); + }); + }); + test('Create Customized Game of Head of Goverment questions', ({ given,when, then }) => { + given('I am on the game configurator', async () => { + await page.goto('http://localhost:3000/configurator'); + await page.waitForSelector('.GameConfiguratorDiv'); + }); + when('I click select Head of Goverment and I create a new customized game', async () => { + await page.select('#select', 'HEAD_OF_GOVERMENT'); + await page.click('.linkButton'); + }); + then('I get Head of Goverment questions', async () => { + //await expect(page).toMatchElement('.topPanel'); + const questionContainer = await page.$('.topPanel'); + const questionText = await page.evaluate(questionContainer => questionContainer.textContent, questionContainer); + const containsCapital = /Head of Goverment/i.test(questionText); + expect(containsCapital).toBe(true); + }); + }); + +}); diff --git a/webapp/e2e/steps/revealAnswers.step.js b/webapp/e2e/steps/revealAnswers.step.js new file mode 100644 index 0000000..e09a566 --- /dev/null +++ b/webapp/e2e/steps/revealAnswers.step.js @@ -0,0 +1,92 @@ +const puppeteer = require('puppeteer'); +const { defineFeature, loadFeature } = require('jest-cucumber'); +const setDefaultOptions = require('expect-puppeteer').setDefaultOptions; + +const feature = loadFeature('./features/revealAnswers.feature'); + +const { register, login, logout } = require("../utils"); + +let page; +let browser; + +const email = "testUser2@example.com"; +const username = "testUser2" +const password = "testUserPassword" + +defineFeature(feature, test => { + + beforeAll(async () => { + browser = await puppeteer.launch({ + headless: "new", + slowMo: 20, + defaultViewport: { width: 1920, height: 1080 }, + args: ['--window-size=1920,1080'] + }); + + page = await browser.newPage(); + setDefaultOptions({ timeout: 30000 }); + + await register(page, email, username, password); + }); + + beforeEach(async () => { + await logout(page); + await login(page, username, password); + }) + + test('Create Competitive Game and reveal correct answer color', ({ given,when, then }) => { + given('I am on the game configurator and create a competitive game', async () => { + await page.goto('http://localhost:3000/configurator'); + await page.waitForSelector('.GameConfiguratorDiv'); + await page.click('#competitive'); + }); + when('I let the counter end', async () => { + await page.waitForTimeout(10000); // 10000 milisegundos = 10 segundos + }); + then('Correct Color appears', async () => { + const answerButtons = await page.$$('.answerButton'); + let colorFound = false; + + for (const button of answerButtons) { + const style = await page.evaluate(button => window.getComputedStyle(button).backgroundColor, button); + if (style === 'rgb(110, 242, 110)') { // Verifica si el color es #6EF26E en formato RGB + colorFound = true; + break; + } + } + expect(colorFound).toBe(true); + }); + + }); + + test('Create Competitive Game and reveal wrong answer colors', ({ given,when, then }) => { + given('I am on the game configurator and create a competitive game', async () => { + await page.goto('http://localhost:3000/configurator'); + await page.waitForSelector('.GameConfiguratorDiv'); + await page.click('#competitive'); + }); + when('I let the counter end', async () => { + await page.waitForTimeout(10000); // 10000 milisegundos = 10 segundos + }); + then('Incorrect Color appears', async () => { + const answerButtons = await page.$$('.answerButton'); + let countColor = 0; + + for (const button of answerButtons) { + const style = await page.evaluate(button => window.getComputedStyle(button).backgroundColor, button); + if (style === 'rgb(255, 102, 102)') { // Verifica si el color es #FF6666 en formato RGB + countColor++; + if (countColor === 3) { + break; // Si encuentra tres elementos del color requerido, sale del bucle + } + } + } + expect(countColor).toBe(3); // Verifica si se encontraron exactamente tres elementos con el color requerido + + }); + + }); + + + +}); diff --git a/webapp/e2e/test-environment-setup.js b/webapp/e2e/test-environment-setup.js index 44e73dd..fb3baad 100644 --- a/webapp/e2e/test-environment-setup.js +++ b/webapp/e2e/test-environment-setup.js @@ -291,6 +291,39 @@ async function loadQuestions() { ], "language": "es", "type": "SIZE" + }, + { + "question": "Who is the head of goverment in Spain in 2024?", + "answers": [ + "Pedro Sanchez", + "Trump", + "Macron", + "Paco" + ], + "language": "en", + "type": "HEAD_OF_GOVERMENT" + }, + { + "question": "Who is the head of goverment in France in 2024?", + "answers": [ + "Pedro Sanchez", + "Trump", + "Macron", + "Paco" + ], + "language": "en", + "type": "HEAD_OF_GOVERMENT" + }, + { + "question": "Who is the head of goverment in USA in 2017?", + "answers": [ + "Pedro Sanchez", + "Trump", + "Macron", + "Paco" + ], + "language": "en", + "type": "HEAD_OF_GOVERMENT" }] //No need of loading questions for these tests diff --git a/webapp/src/components/GameMenu/GameMenu.js b/webapp/src/components/GameMenu/GameMenu.js index 70ef4d0..6cd6305 100644 --- a/webapp/src/components/GameMenu/GameMenu.js +++ b/webapp/src/components/GameMenu/GameMenu.js @@ -22,7 +22,7 @@ export default function GameMenu() { function ButtonNewGame({ t }) { return ( - +

{t("gameMenu.new_game_button")}

); @@ -30,7 +30,7 @@ export default function GameMenu() { function ButtonRanking({ t }) { return ( - +

{t("gameMenu.view_ranking")}

diff --git a/webapp/src/components/HistoricalData/ButtonHistoricalData.js b/webapp/src/components/HistoricalData/ButtonHistoricalData.js index 3567146..303d0e6 100644 --- a/webapp/src/components/HistoricalData/ButtonHistoricalData.js +++ b/webapp/src/components/HistoricalData/ButtonHistoricalData.js @@ -1,7 +1,7 @@ import { Link } from "react-router-dom"; export default function ButtonHistoricalData({ t }) { return ( - +

{t("gameMenu.history_button")}

);