Merge pull request #89 from Arquisoft/87-e2e-test

Finished the issue

.github/workflows/build.yml

@@ -29,4 +29,20 @@ jobs:
       uses: sonarsource/sonarcloud-github-action@master
       env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+  e2e-tests:
+    needs: [unit-tests]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 20
+    - run: npm --prefix questionservice install
+    - run: npm --prefix users/recordservice install
+    - run: npm --prefix users/authservice install
+    - run: npm --prefix users/userservice install
+    - run: npm --prefix gatewayservice install
+    - run: npm --prefix webapp install
+    - run: npm --prefix webapp run build
+    - run: npm --prefix webapp run test:e2e

.github/workflows/release.yml

@@ -29,10 +29,26 @@ jobs:
       env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+  e2e-tests:
+    needs: [unit-tests]
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 20
+    - run: npm --prefix questionservice install
+    - run: npm --prefix users/recordservice install
+    - run: npm --prefix users/authservice install
+    - run: npm --prefix users/userservice install
+    - run: npm --prefix gatewayservice install
+    - run: npm --prefix webapp install
+    - run: npm --prefix webapp run build
+    - run: npm --prefix webapp run test:e2e
   docker-push-webapp:
     name: Push webapp Docker Image to GitHub Packages
     runs-on: ubuntu-latest
-    needs: [unit-tests]
+    needs: [e2e-tests]
     permissions:
       contents: read
       packages: write
@@ -52,7 +68,7 @@ jobs:
   docker-push-authservice:
     name: Push auth service Docker Image to GitHub Packages
     runs-on: ubuntu-latest
-    needs: [unit-tests]
+    needs: [e2e-tests]
     permissions:
       contents: read
       packages: write
@@ -69,7 +85,7 @@ jobs:
   docker-push-userservice:
     name: Push user service Docker Image to GitHub Packages
     runs-on: ubuntu-latest
-    needs: [unit-tests]
+    needs: [e2e-tests]
     permissions:
       contents: read
       packages: write
@@ -86,7 +102,7 @@ jobs:
   docker-push-recordservice:
     name: Push record service Docker Image to GitHub Packages
     runs-on: ubuntu-latest
-    needs: [unit-tests]
+    needs: [e2e-tests]
     permissions:
       contents: read
       packages: write
@@ -103,7 +119,7 @@ jobs:
   docker-push-gatewayservice:
     name: Push gateway service Docker Image to GitHub Packages
     runs-on: ubuntu-latest
-    needs: [unit-tests]
+    needs: [e2e-tests]
     permissions:
       contents: read
       packages: write
@@ -120,7 +136,7 @@ jobs:
   docker-push-questionservice:
     name: Push question service Docker Image to GitHub Packages
     runs-on: ubuntu-latest
-    needs: [unit-tests]
+    needs: [e2e-tests]
     permissions:
       contents: read
       packages: write
@@ -137,7 +153,7 @@ jobs:
   docker-push-questiongenerator:
     name: Push question generator Docker Image to GitHub Packages
     runs-on: ubuntu-latest
-    needs: [unit-tests]
+    needs: [e2e-tests]
     permissions:
       contents: read
       packages: write

webapp/Dockerfile

@@ -14,5 +14,4 @@ RUN npm run build
 RUN npm install serve
 
 #Execute npm run prod to run the server
-CMD [ "npm", "run", "prod" ]
-#CMD ["npm", "start"]
+CMD [ "npm", "run", "prod" ]

webapp/e2e/features/home.feature

@@ -11,6 +11,6 @@ Feature: Home page functionality
 
   Scenario: Closing the text container
     Given I am on the home page
-    When I click on the toggle button to close 
+    When I click on the toggle button to open and then I click it to close 
     Then The text container should be visible
 

webapp/e2e/steps/home.steps.js

@@ -10,32 +10,61 @@ let browser;
 defineFeature(feature, test => {
 
   beforeAll(async () => {
-    browser = await puppeteer.launch({ headless: false }); 
+      browser = await puppeteer.launch({
+      slowMo: 20,
+      defaultViewport: { width: 1920, height: 1080 },
+      args: ['--window-size=1920,1080']
+    });
+
     page = await browser.newPage();
     setDefaultOptions({ timeout: 10000 });
   });
 
+  test('The text container is initially visible', ({ given, then }) => {
+    given('I am on the home page', async () => {
+      await page.goto('http://localhost:3000/home'); 
+      await page.waitForSelector('.general');
+    });
+
+    then('The text container should be visible', async () => {
+      await expect(page).toMatchElement('.text-container.visible');
+    });
+  });
+
   test('Opening the text container', ({ given, when, then }) => {
     given('I am on the home page', async () => {
       await page.goto('http://localhost:3000/home'); 
       await page.waitForSelector('.general');
     });
 
     when('I click on the toggle button to open', async () => {
-      await page.click('#toggleOpen');
+      await page.click('label[for="toggleOpen"]');
     });
 
     then('The text container should be hidden', async () => {
       await expect(page).toMatchElement('.text-container.hidden');
     });
-/*
-    when('I click on the toggle button to close', async () => {
-      await page.click('#toggleClose');
+  });
+
+  test('Closing the text container', ({ given, when, then }) => {
+    given('I am on the home page', async () => {
+      await page.goto('http://localhost:3000/home'); 
+      await page.waitForSelector('.general');
+    });
+
+    when('I click on the toggle button to open and then I click it to close', async () => {
+
+      await page.click('label[for="toggleOpen"]');
+
+      // Wait for label to be render, visible : true
+      await page.waitForSelector(`label[for="toggleClose"]`, {visible: true});
+      await page.click('label[for="toggleClose"]');
+
     });
 
     then('The text container should be visible', async () => {
       await expect(page).toMatchElement('.text-container.visible');
-    });*/
+    });
   });
 
   afterAll(async () => {

webapp/e2e/steps/register-form.steps.js → webapp/e2e/steps/register-form.steps.txt

@@ -1,3 +1,5 @@
+WAIT UNTIL REGISTER IS FINALIZED (Add email)
+
 const puppeteer = require('puppeteer');
 const { defineFeature, loadFeature }=require('jest-cucumber');
 const setDefaultOptions = require('expect-puppeteer').setDefaultOptions

webapp/src/components/HistoricalData/HistoricalView.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import {useTranslation} from "react-i18next";
 import HistoryRecordRetriever from './HistoryRecordRetriever';
 import { useUserContext } from '../loginAndRegistration/UserContext'; 
@@ -10,23 +10,26 @@ const retriever = new HistoryRecordRetriever();
 
 
 export default function HistoricalView() {
-  const [records, setRecords]= useState([]);
+  const [records, setRecords]= useState(null);
   const[t] = useTranslation("global");
   const {user} = useUserContext();
 
-    const getRecords = async ()=>{
-          try {
-              var jsonRecords = await retriever.getRecords(user.username); 
-              var recordsArray = jsonRecords.games;
-              setRecords(recordsArray);
-          } catch (error) {
-              console.log(error);
-          }
+  const getRecords = async ()=>{
+        try {
+            var jsonRecords = await retriever.getRecords(user.username); 
+            var recordsArray = jsonRecords.games;
+            setRecords(recordsArray);
+        } catch (error) {
+            console.log(error);
+        }
   }
-  useEffect(() => {getRecords()}, []);
+
+  if(records === null)
+    getRecords();
+
   return (
     <div className='globalHistoricalView'>
-      {(records && records.length != 0) ? records.map((record, index) => (
+      {(records && records.length !== 0) ? records.map((record, index) => (
         <HistoricalGameElement key={index} record={record} t={t} />
       )): <p>{t("historicalView.no_games_played")}</p>}
     </div>

webapp/src/components/Home/Home.js

@@ -26,8 +26,8 @@ function Home() {
       <figure id="welcomeMessage">
         <figcaption>
           <h1>
-            <label htmlFor="toggleOpen" title={t("home.clickOpen")} id={t("home.clickOpen")}></label>
-            <label htmlFor="toggleClose" title={t("home.clickClose")} id={t("home.click")}>✖</label>
+            <label htmlFor="toggleOpen" title={t("home.clickOpen")}></label>
+            <label htmlFor="toggleClose" title={t("home.clickClose")}>✖</label>
             <b>
               W
               <Link to="/instructions" title={t("home.how_to_play")}>

webapp/src/components/questionView/CreationHistoricalRecord.js

@@ -11,7 +11,7 @@ class CreationHistoricalRecord{
     }
 
     addQuestion(statement, answers, answerGiven, correctAnswer, numQuestion) {
-        if(this.record.game.questions.length == numQuestion){
+        if(this.record.game.questions.length === numQuestion){
             this.record.game.questions.push({
                 question: statement,
                 answers: answers,

webapp/src/components/questionView/QuestionView.js

@@ -1,6 +1,6 @@
 import QuestionGenerator from './QuestionGenerator';
 import CreationHistoricalRecord from './CreationHistoricalRecord';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import "../../custom.css";
 import React from "react";
 import Countdown from 'react-countdown';
@@ -15,7 +15,7 @@ const questionGenerator = new QuestionGenerator();
 var points = 0;
 function QuestionView(){
     const [numQuestion, setnumQuestion] = useState(-1);
-    const [questions, setQuestions] = useState([]);
+    const [questions, setQuestions] = useState(null);
     const[t, i18n] = useTranslation("global");
     const {user} = useUserContext();
 
@@ -62,7 +62,7 @@ function QuestionView(){
         });
     }
     function computePointsForQuestion(correctAnswer, answerGiven){
-        if(answerGiven==correctAnswer){
+        if(answerGiven===correctAnswer){
             points+=100;
         }else if(points-50>=0){
             points-=50;
@@ -98,7 +98,9 @@ function QuestionView(){
 
     }
 
-    useEffect(() => {generateQuestions(numQuestion)}, []);
+    if(questions === null)
+        generateQuestions(numQuestion)
+
 
     return (
     <div className="question-view-container">