Fix and update UI components and new test e2e

docker-compose.yml

@@ -4,6 +4,7 @@ services:
     container_name: mongodb-${teamname:-defaultASW}
     image: mongo
     profiles: ["dev", "prod"]
+    restart: always
     volumes:
       - mongodb_data:/data/db
     ports:
@@ -14,6 +15,7 @@ services:
     container_name: authservice-${teamname:-defaultASW}
     image: ghcr.io/arquisoft/wiq_es3a/authservice:latest
     profiles: ["dev", "prod"]
+    restart: always
     build: ./users/authservice
     depends_on:
       - mongodb
@@ -27,6 +29,7 @@ services:
         container_name: generatorservice-${teamname:-defaultASW}
         image: ghcr.io/arquisoft/wiq_es3a/generatorservice:latest
         profiles: ["dev", "prod"]
+        restart: always
         build: ./preguntas/generatorservice
         depends_on:
           - mongodb
@@ -40,6 +43,7 @@ services:
         container_name: questionservice-${teamname:-defaultASW}
         image: ghcr.io/arquisoft/wiq_es3a/questionservice:latest
         profiles: ["dev", "prod"]
+        restart: always
         build: ./preguntas/questionservice
         depends_on:
           - mongodb
@@ -53,6 +57,7 @@ services:
     container_name: userservice-${teamname:-defaultASW}
     image: ghcr.io/arquisoft/wiq_es3a/userservice:latest
     profiles: ["dev", "prod"]
+    restart: always
     build: ./users/userservice
     depends_on:
       - mongodb
@@ -67,6 +72,7 @@ services:
     container_name: statisticsservice-${teamname:-defaultASW}
     image: ghcr.io/arquisoft/wiq_es3a/statisticsservice:latest
     profiles: ["dev", "prod"]
+    restart: always
     build: ./statistics/statisticsservice
     depends_on:
       - mongodb
@@ -81,6 +87,7 @@ services:
     container_name: gatewayservice-${teamname:-defaultASW}
     image: ghcr.io/arquisoft/wiq_es3a/gatewayservice:latest
     profiles: ["dev", "prod"]
+    restart: always
     build: ./gatewayservice
     depends_on:
       - mongodb
@@ -105,6 +112,7 @@ services:
     container_name: webapp-${teamname:-defaultASW}
     image: ghcr.io/arquisoft/wiq_es3a/webapp:latest
     profiles: ["dev", "prod"]
+    restart: always
     build: ./webapp
     depends_on:
       - gatewayservice
@@ -119,6 +127,7 @@ services:
     image: prom/prometheus
     container_name: prometheus-${teamname:-defaultASW}
     profiles: ["dev"]
+    restart: always
     networks:
       - mynetwork
     volumes:
@@ -133,6 +142,7 @@ services:
     image: grafana/grafana
     container_name: grafana-${teamname:-defaultASW}
     profiles: ["dev"]
+    restart: always
     networks:
       - mynetwork
     volumes:

webapp/e2e/features/login-form.feature

@@ -0,0 +1,6 @@
+Feature: Login a created user
+
+Scenario: The user is registered in the site
+  Given An user
+  When I fill the data in the form and press submit
+  Then The home page will appear

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

@@ -0,0 +1,66 @@
+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 => {
+    let username;
+    let password;
+
+    beforeAll(async () => {
+        browser = process.env.GITHUB_ACTIONS
+            ? await puppeteer.launch()
+            : await puppeteer.launch({ headless: false, slowMo: 10 });
+
+        page = await browser.newPage();
+        //Way of setting up the timeout
+        setDefaultOptions({ timeout: 50000 })
+
+        await page
+            .goto("http://localhost:3000/login", {
+                waitUntil: "networkidle0",
+            })
+            .catch(() => { });
+        username = "Prueba"
+        password = "PruebaPSW"
+        await expect(page).toClick("button", { text: "Don't have an account? Register here." });
+        await expect(page).toFill('input[name="name"]', 'Prueba');
+        await expect(page).toFill('input[name="surname"]', 'Prueba');
+        await expect(page).toFill('input[name="username"]', username);
+        await expect(page).toFill('input[name="password"]', password);
+        await expect(page).toFill('input[name="passwordRepeat"]', password);
+        await expect(page).toClick("button", { text: "Registrarse" });
+    });
+
+    test('The user is registered in the site', ({ given, when, then }) => {
+
+        given('An user', async () => {
+            username = "Prueba"
+            password = "PruebaPSW"
+        });
+
+        when('I fill the data in the form and press submit', async () => {
+            await page.waitForSelector('input[name="username"]');
+            await expect(page).toFill('input[name="username"]', username);
+            await expect(page).toFill('input[name="password"]', password);
+            await Promise.all([
+                page.click('button', { text: 'Login' }),
+                page.waitForNavigation({ waitUntil: 'networkidle0' }),
+            ]);
+        });
+
+        then('The home page will appear', async () => {
+            await expect(page).toMatchElement("button", { text: "JUGAR" });
+        });
+    })
+
+    afterAll(async () => {
+        browser.close()
+    })
+
+});

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

@@ -11,10 +11,10 @@ defineFeature(feature, test => {
   beforeAll(async () => {
     browser = process.env.GITHUB_ACTIONS
       ? await puppeteer.launch()
-      : await puppeteer.launch({ headless: false, slowMo: 100 });
+      : await puppeteer.launch({ headless: false });
     page = await browser.newPage();
     //Way of setting up the timeout
-    setDefaultOptions({ timeout: 10000 })
+    setDefaultOptions({ timeout: 30000 })
 
     await page
       .goto("http://localhost:3000/login", {
@@ -29,22 +29,25 @@ defineFeature(feature, test => {
     let password;
 
     given('An unregistered user', async () => {
-      username = "pablo"
-      password = "pabloasw"
+      username = "Prueba"
+      password = "PruebaPSW"
       await expect(page).toClick("button", { text: "Don't have an account? Register here." });
     });
 
     when('I fill the data in the form and press submit', async () => {
-     // await expect(page).toFill('input[name="name"]', 'pepe');
-     // await expect(page).toFill('input[name="surname"]', 'Garcia');
-     // await expect(page).toFill('input[name="username"]', username);
-      //await expect(page).toFill('input[name="password"]', password);
-      //await expect(page).toFill('input[name="passwordRepeat"]', password);
-      //await expect(page).toClick('button', { text: 'Registrarse' })
+      await expect(page).toFill('input[name="name"]', 'Prueba');
+      await expect(page).toFill('input[name="surname"]', 'Prueba');
+      await expect(page).toFill('input[name="username"]', username);
+      await expect(page).toFill('input[name="password"]', password);
+      await expect(page).toFill('input[name="passwordRepeat"]', password);
+      await Promise.all([
+        page.click('button', { text: 'Registrarse' }),
+        page.waitForNavigation({ waitUntil: 'networkidle0' }),
+      ]);
     });
 
     then('A confirmation message should be shown in the screen', async () => {
-        //await expect(page).toMatchElement("div", { text: "User added successfully" });
+        await expect(page).toMatchElement("h1", { text: "Login" });
     });
   })
 

webapp/src/components/Inicio.js

@@ -7,6 +7,7 @@ import AddUser from './register/AddUser';
 import Link from '@mui/material/Link';
 import './login/Login.css';
 
+
 function Inicio() {
     const [showLogin, setShowLogin] = useState(true);
 
@@ -23,7 +24,7 @@ function Inicio() {
       {showLogin ? <Login /> : <AddUser />}
       <Typography component="div" align="center" sx={{ marginTop: 2 }}>
         {showLogin ? (
-          <Link name="gotoregister" component="button" variant="body2" onClick={handleToggleView}>
+          <Link name="gotoregister" component="button" color={'#ffffff'} variant="body2" onClick={handleToggleView}>
             Don't have an account? Register here.
           </Link>
         ) : (

webapp/src/components/QuizGame.js

@@ -20,7 +20,7 @@ const QuizGame = () => {
     const [error, setError] = useState(null); 
     const [isToastVisible, setIsToastVisible] = useState(false);
     const [isFinished, setIsFinished] = useState(false);
-    const gatewayEndpoint = process.env.GATEWAY_SERVICE_URL || 'http://localhost:8000';
+
 
     const [buttonsDisabled, setButtonsDisabled] = useState(false);
 

webapp/src/components/login/AuthProvider.js

@@ -1,4 +1,3 @@
-import axios from "axios";
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
 
 const AuthContext = createContext();

webapp/src/components/login/Login.js

@@ -1,9 +1,8 @@
 // src/components/Login.js
-import React, { useState, useEffect  } from 'react';
+import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
 import './Login.css';
-import logo from '../logo.png'
 import { useAuth } from "./AuthProvider";
 
 
@@ -12,7 +11,7 @@ const Login = () => {
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const [loginSuccess, setLoginSuccess] = useState(false);
-  
+
   const [openSnackbar, setOpenSnackbar] = useState(false);
 
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
@@ -23,20 +22,19 @@ const Login = () => {
   const loginUser = async () => {
     try {
 
-      if(username.trim().length ===0 || password.trim().length===0)
-      {
+      if (username.trim().length === 0 || password.trim().length === 0) {
         setError("No se permite dejar espacios en blanco");
-        return;  
+        return;
       }
 
-      let res= await axios.post(`${apiEndpoint}/login`, { username, password });
+      let res = await axios.post(`${apiEndpoint}/login`, { username, password });
 
 
       // Extract data from the response
       setToken(res.data.token);
       setUsuario(res.data.username);
       console.log(res);
-      
+
       setLoginSuccess(true);
 
       setOpenSnackbar(true);
@@ -45,12 +43,10 @@ const Login = () => {
     }
   };
 
-  const checkForm = () =>
-  {
-    if(username.trim().length ===0 || password.trim().length===0)
-    {
+  const checkForm = () => {
+    if (username.trim().length === 0 || password.trim().length === 0) {
       setError("No se permite dejar espacios en blanco");
-      return;  
+      return;
     }
   };
 
@@ -67,56 +63,55 @@ const Login = () => {
       localStorage.setItem('username', username);
     }
   }, [loginSuccess],
-   );
-  
-  
+  );
+
+
   return (
     <Container component="main" maxWidth="xs" sx={{ marginTop: 8 }}>
-       <div className='logo-container' >
-         <img src={logo} alt='Logo wiq'></img>
-       </div>
-
-        <div className="login-container">
-
-           <div className='text'>
+
+
+      <div className="login-container">
+        <div className='text'>
           <Typography component="h1" variant="h5" >
             Login
           </Typography>
-          </div>
-          <div className="underline"></div>
+        </div>
+        <div className="underline"></div>
         <div className='input'>
-          <TextField 
+          <TextField
             margin="normal"
             fullWidth
             label="Username"
+            name='username'
             id="input"
             value={username}
             onChange={(e) => setUsername(e.target.value)}
           />
-          </div>
-          <div className='input'>
+        </div>
+        <div className='input'>
           <TextField
             margin="normal"
             fullWidth
             label="Password"
             type="password"
+            name = "password"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             id="input"
           />
-          </div>
-          <div className="underline"></div>
-          <div className='button'>
+        </div>
+        <div className="underline"></div>
+        <div className='button'>
           <Button variant="contained" color="primary" onClick={loginUser}>
             Login
           </Button>
-          </div>
-          <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="Login successful" />
-          {error && (
-            <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
-          )}
         </div>
-
+        <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="Login successful" />
+        {error && (
+          <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
+        )}
+      </div>
+
     </Container>
   );
 };