Merge pull request #421 from Arquisoft/Jesus-e2e-Tests

Prueba 1 e2e Tests

webapp/e2e/features/login-form.feature

@@ -0,0 +1,6 @@
+Feature: Login a user
+
+Scenario: An user logs in with valid credentials
+  Given An user is in the login page
+  When I fill the data in the form and press submit
+  Then The user should be redirected to the home page

webapp/e2e/features/play-game.feature

@@ -0,0 +1,18 @@
+Feature: Playing a game
+
+Scenario: Starts a new game
+  Given A logged user in play view
+  When I press "COMENZAR A JUGAR"
+  Then A new game starts
+Scenario: Results are shown
+  Given A logged user in a game
+  When I choose an option
+  Then Show results
+Scenario: Shows the next questions 
+  Given A logged user in a game
+  When I choose an option
+  Then New Question appears
+Scenario: Finish the game
+  Given A logged user in a game
+  When I play until the game ends
+  Then The game is finished

webapp/e2e/features/settings.feature

@@ -0,0 +1,11 @@
+Feature: Changing the game settings
+
+Scenario: A registered user changes the number of questions in the game
+    Given A registered user in the settings view
+    When I change the game settings to 5 questions
+    Then the game settings should be updated 
+
+Scenario: A registered user changes the time limit in the game
+    Given A registered user in the settings view
+    When I change the game settings to 5:30 minutes
+    Then the game settings should be updated 

webapp/e2e/steps/login-form.steps.js

@@ -0,0 +1,51 @@
+const puppeteer = require('puppeteer');
+const { defineFeature, loadFeature }=require('jest-cucumber');
+const setDefaultOptions = require('expect-puppeteer').setDefaultOptions
+const feature = loadFeature('./features/login-form.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('An user logs in with valid credentials', ({given,when,then}) => {
+
+    let username;
+    let password;
+
+    given('An user is in the login page', async () => {
+      username = "jesus"
+      password = "jesus"
+    });
+
+    when('I fill the data in the form and press submit', async () => {
+        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' })
+    });
+
+    then('The user should be redirected to the home page', async () => {
+        await expect(getByText('Hola jesus!')).toBeInTheDocument();
+    });
+  })
+
+  afterAll(async ()=>{
+    browser.close()
+  })
+
+});

webapp/e2e/steps/play-game.steps.js

@@ -0,0 +1,120 @@
+const puppeteer = require('puppeteer');
+const { defineFeature, loadFeature }=require('jest-cucumber');
+const setDefaultOptions = require('expect-puppeteer').setDefaultOptions
+const feature = loadFeature('./features/play-game.feature');
+const {textVerifyByXpath}=require('../steps_testUtils');
+
+let page;
+let browser;
+
+defineFeature(feature, test => {
+  const username = "testUserPlayGame"
+  const password = "testUserPlayGame"
+  beforeAll(async () => {
+    browser = process.env.GITHUB_ACTIONS
+      ? await puppeteer.launch()
+      : await puppeteer.launch({ headless: false, slowMo: 1 });
+    page = await browser.newPage();
+    setDefaultOptions({ timeout: 10000 })
+
+    await page
+      .goto("http://localhost:3000", {
+        waitUntil: "networkidle0",
+      })
+      .catch(() => {});
+    await expect(page).toClick("button", { text: "¿No tienes cuenta? Registrate aqui." });
+    await expect(page).toFill('input[name="username"]', username);
+    await expect(page).toFill('input[name="password"]', password);
+    await expect(page).toClick('button', { text: 'Añadir usuario' })
+    await page.waitForNavigation();
+  });
+  beforeEach(async()=>{
+    await page
+        .goto("http://localhost:3000", {
+          waitUntil: "networkidle0",
+        })
+        .catch(() => {});
+        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' })
+  });
+  afterAll(async ()=>{
+    browser.close();
+  });
+  test('Starts a new game', ({given,when,then}) => {
+    given('A logged user in play view', async () => {
+        await expect(getByText('Hola '+ username +'!')).toBeInTheDocument();
+    });
+
+    when('I press "COMENZAR A JUGAR"', async () => {
+        await expect(page).toClick('button', { text: 'COMENZAR A JUGAR' })
+    });
+    then('A new game starts', async () => {
+      await page.waitForTimeout(3000);
+      await expect(getByText('Pregunta Número 1')).toBeInTheDocument();
+    });
+  });
+
+
+  test('Results are shown', ({given,when,then}) => {
+    let buttonColor;
+    given('A logged user in a game', async () => {
+      await expect(page).toClick('button', { text: 'COMENZAR A JUGAR' })
+    });
+    when('I choose an option', async () => {
+      buttonColor = await page.waitForSelector('.MuiGrid-root:nth-child(1) > .MuiButtonBase-root').backgroundColor;
+      await expect(page).toClick('.MuiGrid-root:nth-child(1) > .MuiButtonBase-root')
+    });
+    then('Show results', async () => {
+      const changedButton = await page.waitForSelector('.MuiGrid-root:nth-child(1) > .MuiButtonBase-root').backgroundColor 
+      !== buttonColor;
+      expect(changedButton).toBe(true);
+    });
+  });
+
+
+  test('Shows the next questions',({given,when,then})=>{
+    let text;
+    given('A logged user in a game',async()=>{
+        await expect(page).toClick('button', { text: 'COMENZAR A JUGAR' })
+    });
+    when('I choose an option',async()=>{
+        await expect(page).toClick('.MuiGrid-root:nth-child(1) > .MuiButtonBase-root')
+    });
+    then('New Question appears',async()=>{
+        await expect(getByText('Pregunta Número 2')).toBeInTheDocument();
+    });
+  });
+
+  test('Finish the game',({given,when,then})=>{
+    given('A logged user in a game',async()=>{
+        await expect(page).toClick('button', { text: 'COMENZAR A JUGAR' })
+    });
+    when('I play while the game is finished',async()=>{
+        await expect(getByText('Pregunta Número 1')).toBeInTheDocument();
+        await expect(page).toClick('.MuiGrid-root:nth-child(1) > .MuiButtonBase-root')
+        await waitFor(() => expect(getByText('Pregunta Número 2')).toBeInTheDocument());
+        await expect(page).toClick('.MuiGrid-root:nth-child(1) > .MuiButtonBase-root')
+        await waitFor(() => expect(getByText('Pregunta Número 3')).toBeInTheDocument());
+        await expect(page).toClick('.MuiGrid-root:nth-child(1) > .MuiButtonBase-root')
+        await waitFor(() => expect(getByText('Pregunta Número 4')).toBeInTheDocument());
+        await expect(page).toClick('.MuiGrid-root:nth-child(1) > .MuiButtonBase-root')
+        await waitFor(() => expect(getByText('Pregunta Número 5')).toBeInTheDocument());
+        await expect(page).toClick('.MuiGrid-root:nth-child(1) > .MuiButtonBase-root')
+        await waitFor(() => expect(getByText('Pregunta Número 6')).toBeInTheDocument());
+        await expect(page).toClick('.MuiGrid-root:nth-child(1) > .MuiButtonBase-root')
+        await waitFor(() => expect(getByText('Pregunta Número 7')).toBeInTheDocument());
+        await expect(page).toClick('.MuiGrid-root:nth-child(1) > .MuiButtonBase-root')
+        await waitFor(() => expect(getByText('Pregunta Número 8')).toBeInTheDocument());
+        await expect(page).toClick('.MuiGrid-root:nth-child(1) > .MuiButtonBase-root')
+        await waitFor(() => expect(getByText('Pregunta Número 9')).toBeInTheDocument());
+        await expect(page).toClick('.MuiGrid-root:nth-child(1) > .MuiButtonBase-root')
+        await waitFor(() => expect(getByText('Pregunta Número 10')).toBeInTheDocument());
+        await expect(page).toClick('.MuiGrid-root:nth-child(1) > .MuiButtonBase-root')
+
+    });
+    then('The game is finished',async()=>{
+        await expect(getByText('¡Gracias por jugar!')).toBeInTheDocument();
+    });
+  })
+});

webapp/e2e/steps/settings.steps.js

@@ -0,0 +1,110 @@
+const puppeteer = require('puppeteer');
+const { defineFeature, loadFeature }=require('jest-cucumber');
+const setDefaultOptions = require('expect-puppeteer').setDefaultOptions
+const feature = loadFeature('./features/settings.feature');
+const {textVerifyByXpath}=require('../steps_testUtils');
+
+let page;
+let browser;
+
+defineFeature(feature, test => {
+  const username = "testUserSettings"
+  const password = "testUserSettings"
+  beforeAll(async () => {
+    browser = process.env.GITHUB_ACTIONS
+      ? await puppeteer.launch()
+      : await puppeteer.launch({ headless: false, slowMo: 1 });
+    page = await browser.newPage();
+    setDefaultOptions({ timeout: 10000 })
+
+    await page
+      .goto("http://localhost:3000", {
+        waitUntil: "networkidle0",
+      })
+      .catch(() => {});
+    await expect(page).toClick("button", { text: "¿No tienes cuenta? Registrate aqui." });
+    await expect(page).toFill('input[name="username"]', username);
+    await expect(page).toFill('input[name="password"]', password);
+    await expect(page).toClick('button', { text: 'Añadir usuario' })
+    await page.waitForNavigation();
+  });
+  beforeEach(async()=>{
+    await page
+        .goto("http://localhost:3000", {
+          waitUntil: "networkidle0",
+        })
+        .catch(() => {});
+        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' })
+  });
+  afterAll(async ()=>{
+    browser.close();
+  });
+
+
+  test('A registered user changes the number of questions', ({given,when,then}) => {
+    given('A registered user in the play view', async () => {
+        await expect(page).toClick('button', { text: 'AJUSTES DE PARTIDA' });
+    });
+
+    when('I change the game settings to 5 questions', async () => {
+        await page.waitForSelector('.MuiSlider-root');
+        changeSliderValueTo5();
+    });
+    then('the game settings should be updated', async () => {
+        await expect(page).toClick('button', { text: 'JUGAR' });
+        await expect(page).toClick('button', { text: 'COMENZAR A JUGAR' })
+        await expect(getByText('Pregunta Número 1')).toBeInTheDocument();
+        await expect(page).toClick('.MuiGrid-root:nth-child(1) > .MuiButtonBase-root')
+        await waitFor(() => expect(getByText('Pregunta Número 2')).toBeInTheDocument());
+        await expect(page).toClick('.MuiGrid-root:nth-child(1) > .MuiButtonBase-root')
+        await waitFor(() => expect(getByText('Pregunta Número 3')).toBeInTheDocument());
+        await expect(page).toClick('.MuiGrid-root:nth-child(1) > .MuiButtonBase-root')
+        await waitFor(() => expect(getByText('Pregunta Número 4')).toBeInTheDocument());
+        await expect(page).toClick('.MuiGrid-root:nth-child(1) > .MuiButtonBase-root')
+        await waitFor(() => expect(getByText('Pregunta Número 5')).toBeInTheDocument());
+        await expect(page).toClick('.MuiGrid-root:nth-child(1) > .MuiButtonBase-root')
+        await expect(getByText('¡Gracias por jugar!')).toBeInTheDocument();
+    });
+
+    test('A registered user changes the number of questions', ({given,when,then}) => {
+        given('A registered user in the play view', async () => {
+            await expect(page).toClick('button', { text: 'AJUSTES DE PARTIDA' });
+        });
+
+        when('I change the game settings to 5:30 minutes', async () => {
+            await expect(page).toClick('button', { text: 'DURACIÓN DE PARTIDA' });
+            await expect(page).toFill('input[name="Minutos"]', 5);
+            await expect(page).toFill('input[name="Segundos"]', 30);
+        });
+        then('the game settings should be updated', async () => {
+            await expect(page).toClick('button', { text: 'JUGAR' });
+            await expect(page).toClick('button', { text: 'COMENZAR A JUGAR' })
+            await expect(getByText('¡Tiempo restante 05:30!')).toBeInTheDocument();
+        });
+
+    });
+  });
+
+  async function changeSliderValueTo5() {
+    const slider = await page.$('.MuiSlider-root');
+
+    const sliderRect = await slider.boundingBox();
+
+    const sliderMidX = sliderRect.x + sliderRect.width / 2;
+    const sliderMidY = sliderRect.y + sliderRect.height / 2;
+
+    const initialValue = 10;
+    const targetValue = 5;
+    const steps = (initialValue - targetValue) / 5;
+
+    await page.mouse.move(sliderMidX, sliderMidY);
+    await page.mouse.down();
+    for (let i = 0; i < steps; i++) {
+        await page.mouse.move(sliderMidX - 50, sliderMidY, { steps: 10 });
+    }
+    await page.mouse.up();
+  }
+});
+