Skip to content

Commit

Permalink
Merge pull request #317 from Arquisoft/develop_samuel
Browse files Browse the repository at this point in the history
Internationalization and end-to-end implementation of the challenge
  • Loading branch information
uo288543 authored Apr 23, 2024
2 parents 7a1e3cf + e9141f3 commit d1b1afd
Show file tree
Hide file tree
Showing 19 changed files with 374 additions and 205 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/build.yml
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
name: Build
on:
push:
branches: [master, develop, develop-deploy, develop-teresa]
branches: [master, develop, develop-deploy, develop-teresa, develop_samuel]

pull_request:
types: [opened, synchronize, reopened]
Expand Down
11 changes: 11 additions & 0 deletions webapp/e2e/features/theChallangeGame.feauture
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
Feature: Answer a question

Scenario: Answering a question correctly
Given A question
When I click on the correct answer button
Then The button turns green

Scenario: Answering a question incorrectly
Given A question
When I click on an incorrect answer button
Then The button turns red
139 changes: 139 additions & 0 deletions webapp/e2e/steps/theCallange.steps.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
const puppeteer = require('puppeteer');
const { defineFeature, loadFeature }=require('jest-cucumber');
const setDefaultOptions = require('expect-puppeteer').setDefaultOptions
const feature = loadFeature('./features/theChallangeGame.feauture');

let page;
let browser;

defineFeature(feature, test => {

beforeAll(async () => {

browser = process.env.GITHUB_ACTIONS
? await puppeteer.launch()
: await puppeteer.launch({ headless: false, slowMo: 40 });
page = await browser.newPage();

await page.setRequestInterception(true);

page.on('request', (req) => {
if(req.url().endsWith('/Geography')) {
req.respond({
status: 200,
headers: {
'Access-Control-Allow-Origin': '*'
},
contentType: 'application/json',
body: JSON.stringify([{
question: 'Which is the capital of Spain?',
options: ['Madrid', 'Barcelona', 'Paris', 'London'],
correctAnswer: 'Madrid',
categories: ['Geography'],
language: 'en'
}])
});
} else {
req.continue();
}
});
//Way of setting up the timeout
setDefaultOptions({ timeout: 10000 })


});

beforeEach(async () => {
await page
.goto("http://localhost:3000/theChallengeGame", {
waitUntil: "networkidle0",
})
.catch(() => {});

//"mock" login
await page.evaluate(() => {
localStorage.clear();
localStorage.setItem('sessionId', 'fictitiousSessionId12345');
});

await page
.goto("http://localhost:3000/theChallengeGame", {
waitUntil: "networkidle0",
})
.catch(() => {});
});


test('Answering a question correctly', ({given,when,then}) => {

given('A question', async () => {
const button = await page.$('[data-testid="start-button"]');
await button.click();

//await expect(page.findByText('Which is the capital of Spain?'));
const question = await page.$['data-testid="question"'];
await expect(page).toMatchElement("div", { text: 'Which is the capital of Spain?'.toUpperCase()});
expect(question).not.toBeNull();

const answers = await page.$x('//*[contains(@data-testid, "success") or contains(@data-testid, "failure") or contains(@data-testid, "answer")]');
expect(answers.length).toBe(4);
});

when('I click on the correct answer button', async () => {
const answers = await page.$x('//*[contains(@data-testid, "success") or contains(@data-testid, "failure") or contains(@data-testid, "answer")]');
await answers[0].click();

});

then('The button turns green', async () => {
/*const answerButton = await page.$x('(//*[@data-testid="answer"])[1]');
const textoBoton1 = await page.evaluate(button => button.innerText, answerButton[0]);
const textoBoton2 = await page.evaluate(button => button.innerText, answerButton[1]);
if(textoBoton1 === "Madrid") {
await expect(textoBoton1).toMatch(/Madrid/i);
} else {
await expect(textoBoton2).toMatch(/Madrid/i);
}*/
await expect(page).toMatchElement("button", { style: { color: 'green' } });
});
})

test('Answering a question incorrectly', ({given,when,then}) => {

given('A question', async () => {
const button = await page.$('[data-testid="start-button"]');
await button.click();

//await expect(page.findByText('Which is the capital of Spain?'));
const question = await page.$['data-testid="question"'];
await expect(page).toMatchElement("div", { text: 'Which is the capital of Spain?'.toUpperCase()});
expect(question).not.toBeNull();

const answers = await page.$x('//*[contains(@data-testid, "success") or contains(@data-testid, "failure") or contains(@data-testid, "answer")]');
expect(answers.length).toBe(4);
});

when('I click on an incorrect answer button', async () => {
const answers = await page.$x('//*[contains(@data-testid, "success") or contains(@data-testid, "failure") or contains(@data-testid, "answer")]');
await answers[1].click();
});

then('The button turns red', async () => {
/*const answerButton = await page.$x('(//*[@data-testid="answer"])[2]');
const textoBoton1 = await page.evaluate(button => button.innerText, answerButton[0]);
const textoBoton2 = await page.evaluate(button => button.innerText, answerButton[1]);
if(textoBoton1 !== "Madrid") {
await expect(textoBoton1).not.toMatch(/Madrid/i);
} else {
await expect(textoBoton2).toMatch(/Madrid/i);
}*/
await expect(page).toMatchElement("button", { style: { color: 'red' } });
await expect(page).toMatchElement("button", { style: { color: 'green' } });
});
})

afterAll(async ()=>{
browser.close()
})

});
14 changes: 7 additions & 7 deletions webapp/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion webapp/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"react-i18next": "^14.1.0",
"react-router-dom": "^6.22.1",
"react-scripts": "5.0.1",
"sequelize": "^6.37.2",
"sequelize": "^6.37.3",
"socket.io-client": "^4.7.5",
"sqlite3": "^5.1.7",
"web-vitals": "^3.5.1"
Expand Down
1 change: 1 addition & 0 deletions webapp/src/__tests__/pages/Home.test.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import Home from '../../pages/Home';
import '../../localize/i18n';

// Hacemos un mock del módulo '@mui/material' y su hook useMediaQuery
jest.mock('@mui/material/useMediaQuery', () => ({
Expand Down
3 changes: 2 additions & 1 deletion webapp/src/__tests__/pages/Homepage.test.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import { render, fireEvent, screen } from '@testing-library/react';
import Homepage from '../../pages/Homepage';
import '../../localize/i18n';

// Hacemos un mock del módulo '@mui/material' y su hook useMediaQuery
jest.mock('@mui/material/useMediaQuery', () => ({
Expand All @@ -16,7 +17,7 @@ describe('Homepage', () => {
it('renders video and play button', () => {
render(<Homepage />);
expect(screen.getByTestId('video')).toBeInTheDocument();
expect(screen.getByText('PLAY')).toBeInTheDocument();
expect(screen.getByText("PLAY")).toBeInTheDocument();
});

it('loads game buttons dynamically based on data', async () => {
Expand Down
34 changes: 18 additions & 16 deletions webapp/src/__tests__/pages/Instructions.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,33 @@ import React from 'react';
import { render, fireEvent, screen, waitFor } from '@testing-library/react';
import Instructions from '../../pages/Instructions';
import { BrowserRouter as Router } from 'react-router-dom';
import '../../localize/i18n';

jest.mock('../../data/gameInfo.json', () => ({
__esModule: true,
default: [
{
nombre: "WISE MEN STACK",
nombre: "Wise Men Stack",
descripcion: "The player chooses a topic from five available options and must answer a battery of questions related to it within 60 seconds. For each question, the host provides two options. If the contestant guesses correctly, they win €20; otherwise, they move on to the next question (as the correct answer would be the other option). If the time runs out before the question is fully asked and both possible answers are provided, the contestant may still answer it; however, if the statement hasn't been completed (or the options weren't provided), they cannot answer.",
foto: "../gameImg/foto0.png"
},
{
nombre: "WARM QUESTION",
nombre: "Warm Question",
descripcion: "It consists of ten topics of varied themes. For each correct answer, €100 is earned, and €10 are lost if the contestant passes, does not respond, or answers incorrectly.",
foto: "../gameImg/foto1.jpg"
},
{
nombre: "DISCOVERING CITIES",
nombre: "Discovering Cities",
descripcion: "In the 'Discovering Cities' game mode, the contestant will face a challenge where they will be repeatedly asked questions referring to different cities around the world. To successfully overcome the challenge, the contestant must answer as many questions as possible correctly throughout the test.",
foto: "../gameImg/foto2.png"
},
{
nombre: "THE CHALLENGE",
nombre: "Challenge",
descripcion: "The 'Challenge' game mode is the quintessential game mode, as it allows you to customize the match to your liking. This game mode is tailored for those who wish to practice certain game formats before engaging in our various other game modes.",
foto: "../gameImg/foto3.jpg"
},
{
nombre: "ONLINE MODE",
nombre: "Multiplayer",
descripcion: "Create a room for other player to join and play 1vs1",
foto: "../gameImg/foto3.jpg"
}
Expand Down Expand Up @@ -55,10 +56,10 @@ describe('Instructions component', () => {

fireEvent.click(screen.getAllByRole('button')[0]); // Click the first game button

const gameNames = await screen.findAllByText("WISE MEN STACK"); //Look for the text "WISE MEN STACK"
const gameNames = await screen.findAllByText("Wise Men Stack"); //Look for the text "WISE MEN STACK"
expect(gameNames).toHaveLength(2); // Check the expected number of matches

expect(gameNames[0]).toHaveTextContent("WISE MEN STACK");
expect(gameNames[0]).toHaveTextContent("Wise Men Stack");
});

it('Hides game information when the same game button is clicked again', async () => {
Expand All @@ -71,12 +72,12 @@ describe('Instructions component', () => {
const gameButton = screen.getAllByRole('button')[0]; //Selecciona el primer boton
fireEvent.click(gameButton); // Hace click en el boton indicado

const gameNames = await screen.findAllByText("WISE MEN STACK"); //Finds all components that have the indicated text
const gameNames = await screen.findAllByText("Wise Men Stack"); //Finds all components that have the indicated text
expect(gameNames).toHaveLength(2); // Check the expected number of matches

fireEvent.click(gameButton); // Hide info

const gameNames2 = await screen.findAllByText("WISE MEN STACK"); //Finds all components that have the indicated text
const gameNames2 = await screen.findAllByText("Wise Men Stack"); //Finds all components that have the indicated text
expect(gameNames2).toHaveLength(1); // Check the expected number of matches

await waitFor(() => {
Expand All @@ -93,12 +94,12 @@ describe('Instructions component', () => {

fireEvent.click(screen.getAllByRole('button')[0]); // Display first game info

const gameNames = await screen.findAllByText("WISE MEN STACK"); //Finds all components that have the indicated text
const gameNames = await screen.findAllByText("Wise Men Stack"); //Finds all components that have the indicated text
expect(gameNames).toHaveLength(2); // Check the expected number of matches

fireEvent.click(screen.getAllByRole('button')[1]); // Switch to second game info

const gameName = await screen.findAllByText("WARM QUESTION"); //Finds all components that have the indicated text
const gameName = await screen.findAllByText("Warm Question"); //Finds all components that have the indicated text
expect(gameName).toHaveLength(2); // Check the expected number of matches

await waitFor(() => {
Expand All @@ -109,27 +110,27 @@ describe('Instructions component', () => {

const mockGameData = [
{
nombre: "WISE MEN STACK",
nombre: "Wise Men Stack",
descripcion: "The player chooses a topic from five available options and must answer a battery of questions related to it within 60 seconds. For each question, the host provides two options. If the contestant guesses correctly, they win €20; otherwise, they move on to the next question (as the correct answer would be the other option). If the time runs out before the question is fully asked and both possible answers are provided, the contestant may still answer it; however, if the statement hasn't been completed (or the options weren't provided), they cannot answer.",
foto: "../gameImg/foto0.png"
},
{
nombre: "WARM QUESTION",
nombre: "Warm Question",
descripcion: "It consists of ten topics of varied themes. For each correct answer, €100 is earned, and €10 are lost if the contestant passes, does not respond, or answers incorrectly.",
foto: "../gameImg/foto1.jpg"
},
{
nombre: "DISCOVERING CITIES",
nombre: "Discovering Cities",
descripcion: "In the 'Discovering Cities' game mode, the contestant will face a challenge where they will be repeatedly asked questions referring to different cities around the world. To successfully overcome the challenge, the contestant must answer as many questions as possible correctly throughout the test.",
foto: "../gameImg/foto2.png"
},
{
nombre: "THE CHALLENGE",
nombre: "Challenge",
descripcion: "The 'Challenge' game mode is the quintessential game mode, as it allows you to customize the match to your liking. This game mode is tailored for those who wish to practice certain game formats before engaging in our various other game modes.",
foto: "../gameImg/foto3.jpg"
},
{
nombre: "ONLINE MODE",
nombre: "Multiplayer",
descripcion: "Create a room for other player to join and play 1vs1",
foto: "../gameImg/foto3.jpg"
}
Expand All @@ -142,6 +143,7 @@ describe('Instructions component', () => {
// Click in the game button
fireEvent.click(screen.getAllByRole('button')[index]);

console.log(game.descripcion);
// Verify that the game name and description are in the document
const gameName = await screen.findAllByText(game.nombre);
expect(gameName).toHaveLength(2); // Check the expected number of matches
Expand Down
6 changes: 3 additions & 3 deletions webapp/src/__tests__/pages/Statistics.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -239,9 +239,9 @@ describe('Statistics component', () => {

await screen.findByText('STATISTICS');

fireEvent.click(screen.getByText('Online Mode'));
fireEvent.click(screen.getByText('Multiplayer'));

expect(screen.getByText('Online Mode')).toBeInTheDocument();
expect(screen.getByText('Multiplayer')).toBeInTheDocument();
expect(screen.getByText('Total Points:')).toBeInTheDocument();
expect(screen.getByText('15')).toBeInTheDocument();
expect(screen.getByText('Correctly Answered Questions:')).toBeInTheDocument();
Expand All @@ -253,7 +253,7 @@ describe('Statistics component', () => {
expect(screen.getByText('Games Played:')).toBeInTheDocument();
expect(screen.getAllByText('12'));

fireEvent.click(screen.getByText('Show Questions Record'));
fireEvent.click(screen.getByText("Show Questions Record"));

await screen.findByText('Game 04/11/2024, 14:00');
expect(screen.getByText('What is 1 + 1?')).toBeInTheDocument();
Expand Down
Loading

0 comments on commit d1b1afd

Please sign in to comment.