play game e2e test

webapp/e2e/features/playGame.feature

@@ -0,0 +1,6 @@
+Feature: Playing classic game with default settings
+
+Scenario: The user plays a game with default settings
+  Given A logged user
+  When I play with configured settings(2 questions 2 answers)
+  Then 2 questions with 2 answers are asked

webapp/e2e/jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
     testMatch: ["**/steps/*.js"],
-    testTimeout: 30000,
+    testTimeout: 40000,
     setupFilesAfterEnv: ["expect-puppeteer"]
 }

webapp/e2e/steps/playGame.steps.js

@@ -0,0 +1,77 @@
+const puppeteer = require('puppeteer');
+const { defineFeature, loadFeature }=require('jest-cucumber');
+const setDefaultOptions = require('expect-puppeteer').setDefaultOptions
+const feature = loadFeature('./features/playGame.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();
+    //Way of setting up the timeout
+    setDefaultOptions({ timeout: 10000 })
+
+    await page
+      .goto("http://localhost:3000", {
+        waitUntil: "networkidle0",
+      })
+      .catch(() => {});
+  });
+
+  test('The user plays a game with default settings', ({given,when,then}) => {
+
+    given('A logged user', async () => {
+      await login(page);
+    });
+
+    when('I play with configured settings(2 questions 2 answers)', async () => {
+      await expect(page).toClick('button', { text: 'Clásico' })
+      //await expect(page).toClick('button', {text: "-"})
+      for(let i = 0; i < 7; i++){
+        const button = await page.$(`#questionsSpinner-`);
+        button.click();
+        //await expect(page).toClick('button', { id: 'questionsSpinner-' })
+      }
+
+      const button = await page.$(`#questionsSpinner-`);
+      await button.click();
+
+      await expect(page).toClick('button', { text: 'Comenzar Juego' })
+    });
+
+    then('2 questions with 2 answers are asked', async () => {
+        for(let i = 0; i < 2; i++){//Dos preguntas
+            await expect(page).toMatchElement("div", { class: "questionStructure" });//Comprobamos que existe el div de la pregunta
+
+            const button = await page.$(`#option-1`);//Comprobamos que existe la segunda opción
+            expect(button).not.toBeNull();
+
+            const noButton = await page.$(`#option-2`);//Comprobamos que no existe una tercera opción
+            expect(noButton).toBeNull();
+            button.click();//Respondemos la segunda opción
+
+            await new Promise((resolve) => setTimeout(resolve, 2100)); //Esperar a que se muestre la pregunta
+        }
+
+        await expect(page).toMatchElement("h2", { text: "Modos de juego:" });//Volvemos al menú*/
+    });
+  })
+
+  afterAll(async ()=>{
+    browser.close()
+  })
+
+});
+
+async function login(page) {
+    username = "pablo"
+    password = "pabloasw"
+    await expect(page).toFill('input[name="username"]', username);
+    await expect(page).toFill('input[name="password"]', password);
+    await expect(page).toClick('button', { text: 'Iniciar sesión' })
+  }

webapp/e2e/steps/util/Util.js

@@ -0,0 +1,9 @@
+async function login(page) {
+    username = "pablo"
+    password = "pabloasw"
+    await expect(page).toFill('input[name="username"]', username);
+    await expect(page).toFill('input[name="password"]', password);
+    await expect(page).toClick('button', { text: 'Iniciar sesión' })
+}
+
+export default {login};

webapp/src/components/game/GameConfiguration.css

@@ -101,4 +101,8 @@
 
   #numPreguntas{
     width: 2rem;
+  }
+
+  #config .border{
+    margin-bottom: 10rem;
   }

webapp/src/components/game/GameConfiguration.js

@@ -99,7 +99,7 @@ const GameConfiguration = () => {
   return (
     <>
       <Nav />
-      <Container component="main" maxWidth="xl" sx={{ marginTop: 4 }}>
+      <Container id="config" component="main" maxWidth="xl" sx={{ marginTop: 4 }}>
 
         <h2>Configuración de la partida</h2>
 
@@ -148,7 +148,7 @@ const GameConfiguration = () => {
 
         </div>
 
-        <Button onClick={initiateGame} text="Comenzar Juego"/>
+        <Button id="initGame" onClick={initiateGame} text="Comenzar Juego"/>
 
       </Container>
       <Footer />

webapp/src/components/spinner/Spinner.jsx

@@ -36,9 +36,9 @@ class Spinner extends React.Component {
 	render() {
 	  return (
 		<div className="input-number">
-		  <button type="button" onClick={this.decrement}>&minus;</button>
+		  <button id={this.props.id+"-"} type="button" onClick={this.decrement}>&minus;</button>
 		  <span id={this.props.id}>{this.value}</span>
-		  <button type="button" onClick={this.increment}>&#43;</button>     
+		  <button d={this.props.id+"+"} type="button" onClick={this.increment}>&#43;</button>     
 		</div>
 	  )
 	}