Front end lucia

webapp/src/components/GameMenu/GameMenu.test.js

@@ -2,9 +2,42 @@ import { render, screen } from '@testing-library/react';
 import GameMenu from './GameMenu';
 import { MemoryRouter } from 'react-router-dom';
 
+import { initReactI18next } from 'react-i18next';
+import i18en from 'i18next';
+
+i18en.use(initReactI18next).init({
+    resources: {},
+    lng: 'en',
+    interpolation:{
+        escapeValue: false,
+    }
+});
+global.i18en = i18en;
+/*
 test('renders learn react link', () => {
     render(<MemoryRouter><GameMenu /></MemoryRouter>);
     const linkElement = screen.getByText(/Game Menu/i);
     expect(linkElement).toBeInTheDocument();
+});*/
+
+describe('GameMenu component', () => {
+    it('renders Title for Game Menu view', () => {
+        render(<MemoryRouter><GameMenu /></MemoryRouter>);
+        const text = screen.getByText(i18en.t('gameMenu.title'));
+        expect(text).toBeInTheDocument();
+    });
+
+    it('renders option to create a new Game', () => {
+        render(<MemoryRouter><GameMenu /></MemoryRouter>);
+        const text = screen.getByText(i18en.t('gameMenu.new_game_button'));
+        expect(text).toBeInTheDocument();
+    });
+
+    it('renders option to view historical data', () => {
+        render(<MemoryRouter><GameMenu /></MemoryRouter>);
+        const text = screen.getByText(i18en.t('gameMenu.history_button'));
+        expect(text).toBeInTheDocument();
+    });
 });
 
+

webapp/src/components/HistoricalData/HistoricalView.js

@@ -4,6 +4,8 @@ import HistoryRecordRetriever from './HistoryRecordRetriever';
 import { useUserContext } from '../loginAndRegistration/UserContext'; 
 
 
+import RecordList from './RecordList';
+
 const retriever = new HistoryRecordRetriever();
 
 
@@ -48,19 +50,7 @@ function HistoricalGameElement({record,t}){
       <button className="historicalButton" onClick={handleClick}>{t("historicalView.game")} : {
       (new Date(parseInt(record.date))).toLocaleDateString()} - {record.points} {t("historicalView.points")} </button>
       <ul style={{ display: toggle ? 'block' : 'none' }}>
-      {record.questions.map((question, index) => (<li key={index}>
-            <p>{question.question}</p>
-            <ul>
-              {question.answers.map((answer, answerIndex) => (
-                <li key={answerIndex}>
-                  {answer}
-                  {question.answerGiven === answer && " 👈 "}
-                  {question.correctAnswer === answer && " ✅ "}
-                </li>
-              ))}
-            </ul>
-          </li>
-        ))}
+        <RecordList record={record}/>
       </ul>
     </div>
   );

webapp/src/components/HistoricalData/HistoricalView.test.js

@@ -0,0 +1,24 @@
+import { initReactI18next } from 'react-i18next';
+import i18en from 'i18next';
+
+i18en.use(initReactI18next).init({
+    resources: {},
+    lng: 'en',
+    interpolation:{
+        escapeValue: false,
+    }
+});
+global.i18en = i18en;
+
+describe('Historical View component', () => {
+    it('renders Game Record Buttons', () => {
+        /*render(<MemoryRouter><GameMenu /></MemoryRouter>);
+        const text = screen.getByText(i18en.t('gameMenu.title'));
+        expect(text).toBeInTheDocument();*/
+    });
+    it('clicking Game Record Buttons Record Lists are displayed', () => {
+        /*render(<MemoryRouter><GameMenu /></MemoryRouter>);
+        const text = screen.getByText(i18en.t('gameMenu.title'));
+        expect(text).toBeInTheDocument();*/
+    });
+});

webapp/src/components/HistoricalData/RecordList.js

@@ -0,0 +1,20 @@
+export default function RecordList({record}){
+    return (
+        <>
+        {record.questions.map((question, index) => (
+            <li key={index}>
+                  <p>{question.question}</p>
+                  <ul>
+                    {question.answers.map((answer, answerIndex) => (
+                      <li key={answerIndex}>
+                        {answer}
+                        {question.answerGiven === answer && " 👈 "}
+                        {question.correctAnswer === answer && " ✅ "}
+                      </li>
+                    ))}
+                  </ul>
+                </li>
+              ))}
+        </>
+    );
+}

webapp/src/components/fragments/NavBar.js

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import Typography from "@mui/material/Typography";
 import { Link } from 'react-router-dom';
 import MenuItem from '@mui/material/MenuItem';
 import Menu from '@mui/material/Menu';
@@ -29,10 +28,10 @@ function Navbar() {
 
   return (
     <div className="navbar-container">
+      <div className='left-nav'>
       <Profile />
-      <Typography variant="h6" gutterBottom className="navbar-text">
-        {t("navBar.title")}
-      </Typography>
+        <h1 className='navbar-text'>{t("navBar.title")}</h1>
+      </div>
       <div className='right-nav'>
         <button className="language-button" onClick={handleLanguageMenuOpen}>{t("navBar.language")}</button>
         <Menu

webapp/src/components/questionView/CreationHistoricalRecord.js

@@ -62,27 +62,3 @@ class CreationHistoricalRecord{
 
 }
 export default CreationHistoricalRecord;
-/*
-// Ejemplo de uso:
-const userId = "userIdentifier";
-const record = new CreationHistoricalRecord(userId);
-
-record.addQuestion(
-    "¿Cuál es el río más largo del mundo?",
-    ["Nilo", "Amazonas", "Yangtsé", "Misisipi"],
-    "Amazonas",
-    "Amazonas"
-);
-
-record.addQuestion(
-    "¿Cuál es el elemento más abundante en la corteza terrestre?",
-    ["Hierro", "Oxígeno", "Silicio", "Aluminio"],
-    "Oxígeno",
-    "Oxígeno"
-);
-
-record.setPoints(2500);
-record.setDate("02/02/24");
-
-const recordRecord = record.getRecord();
-console.log(recordRecord);*/

webapp/src/components/questionView/QuestionView.js

@@ -6,8 +6,7 @@ import React from "react";
 import Countdown from 'react-countdown';
 import {useTranslation} from "react-i18next";
 import $ from 'jquery'; 
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import HistoricalView from '../HistoricalData/HistoricalView';
+import RecordList from '../HistoricalData/RecordList';
 import ButtonHistoricalData from "../HistoricalData/ButtonHistoricalData";
 import { useUserContext } from '../loginAndRegistration/UserContext'; 
 
@@ -37,17 +36,18 @@ function QuestionView(){
     function revealColorsForAnswers(){
         let colorCorrectAnswer='#6EF26E';//green
         let colorIncorrectAnswer='#FF6666'; //red
-        $('.answerButton').each(function() {        
-            let dataValue = $(this).attr('data-value');
+        $('.answerButton').each(function() {
+            var dataValue = $(this).attr('data-value');
             if (dataValue === false || dataValue === "false")
                 $(this).css('background-color', colorIncorrectAnswer); // Cambia el color de fondo del botón actual a rojo
 
             else{
                 $(this).css({
                     'background-color': colorCorrectAnswer,
-                    'text-decoration': 'underline' // Underline the text of the button for correct answers
+                    'text-decoration': 'underline'// Underline the text of the button for correct answers
                 });
             }
+            $(this).css('pointer-events', 'none');
             });
 
     }
@@ -56,7 +56,8 @@ function QuestionView(){
         $('.answerButton').each(function() {
             $(this).css({
                 'background-color': colorOriginal,
-                'text-decoration': 'none' // Remove underline
+                'text-decoration': 'none', // Remove underline
+                'pointer-events': 'auto'
             });
         });
     }
@@ -122,6 +123,7 @@ function QuestionComponent({questions, numQuestion, handleClick, t, points}){
         <>
             {numQuestion < questions.length ? (
                 <div className='questionContainer'>
+
                     <div className='topPanel'>
                         <h2>{questions[numQuestion].getQuestion()}</h2>
                         <div className="countdown">
@@ -133,12 +135,17 @@ function QuestionComponent({questions, numQuestion, handleClick, t, points}){
                             <Answer key={index} text={item} onClick={handleClick.bind(this,item)} dataValue={questions[numQuestion].isCorrect(item)}/>
                         ))}
                     </div>
-                    <p>{t("questionView.question_counter")} {numQuestion+1}</p>
-                </div> 
+                    <div className='bottomPanel'>
+                        <p>{t("questionView.question_counter")} {numQuestion+1}</p>
+                        <p>{points} {t("questionView.point")}</p>
+                    </div>
+                 </div>
+
             ) : (
                 <>
                     <h2>{t("questionView.finished_game")} </h2>
                     <p>{points} {t("questionView.point")}</p>
+                    <ul>< RecordList record={creationHistoricalRecord.getRecord().game}/></ul>
                     <ButtonHistoricalData t={t} />
                 </>
             )}

webapp/src/components/questionView/QuestionView.test.js

@@ -0,0 +1,81 @@
+import { render, screen ,fireEvent } from '@testing-library/react';
+import { initReactI18next } from 'react-i18next';
+import i18en from 'i18next';
+import QuestionView from './QuestionView';
+import { MemoryRouter } from 'react-router-dom';
+import { act } from 'react-dom/test-utils';
+import {queryHelpers, buildQueries} from '@testing-library/react'
+
+jest.mock('./QuestionGenerator', () => require('./mocks/QuestionGenerator'));
+
+i18en.use(initReactI18next).init({
+    resources: {},
+    lng: 'en',
+    interpolation:{
+        escapeValue: false,
+    }
+});
+global.i18en = i18en;
+
+describe('Question View component', () => {
+    it('renders a question',async () => {
+        act(() => {
+            render(<MemoryRouter><QuestionView /></MemoryRouter>);
+
+        });
+        const text = screen.getByText('Please Wait a bit...');
+            expect(text).toBeInTheDocument();
+
+        // Wait for questions to load
+        await waitFor(() => expect(getByText('Mocked Question 1')).toBeInTheDocument());
+        const tituloH2 = screen.getByRole('heading', { level: 2 });
+        expect(tituloH2).toBeInTheDocument();
+    });
+    /*
+    it('renders a question',async () => {
+        act(() => {
+            const { getByText } = render(<MemoryRouter><QuestionView /></MemoryRouter>);
+        });
+        //h2 con la pregunta
+        const tituloH2 = screen.getByRole('heading', { level: 2 });
+        // Verifica si el elemento h2 está presente en el documento
+        expect(tituloH2).toBeInTheDocument();
+    });*/
+    /*
+    it('render a question and 4 buttons for answers', () => {
+        act(() => {
+            render(<MemoryRouter><QuestionView /></MemoryRouter>);
+        });
+        // Busca todos los botones por su rol
+        const botones = screen.getAllByRole('button');
+
+        // Verifica si hay exactamente 4 botones
+        expect(botones.length).toBe(4);
+    });
+    it('shows colors to reveal correct answer', () => {
+        act(() => {
+            render(<MemoryRouter><QuestionView /></MemoryRouter>);
+            fireEvent.click(queryHelpers.queryByAttribute('data-value', 'true'));//clicamos en la respuesta correcta
+        });
+
+        // Clic en un botón de respuesta con data-value=true
+        const correctAnswerButton = queryHelpers.queryByAttribute('data-value', 'true');
+        // Verificar que el botón tenga el color esperado
+        expect(correctAnswerButton).toHaveStyle('background-color: #6EF26E');
+    });
+    it('shows colors to reveal false answer', () => {
+        act(() => {
+            render(<MemoryRouter><QuestionView /></MemoryRouter>);
+            const falseAnswerButtons = (dataValue)=> queryHelpers.queryAllByAttribute('data-value', dataValue)('false');
+            fireEvent.click(falseAnswerButtons.get(0));
+        });
+
+
+        // Obtener el botón de respuesta falso por su atributo data-value
+        const falseAnswerButton = queryHelpers.queryAllByAttribute('data-value', 'false').get(0);
+
+        // Verificar que el botón tenga el color esperado
+        expect(falseAnswerButton).toHaveStyle('background-color:#FF6666');
+
+    });*/
+});

webapp/src/components/questionView/mocks/QuestionGenerator.js

@@ -0,0 +1,20 @@
+export default class QuestionGenerator {
+    async generateQuestions() {
+      return [
+        {
+          getQuestion: () => 'Mocked Question 1',
+          getAnswers: () => ['Mocked Answer 1', 'Mocked Answer 2','Mocked Answer 3', 'Mocked Answer 4'],
+          getCorrectAnswer: () => 'Mocked Answer 1'
+        },
+        {
+            getQuestion: () => 'Mocked Question 2',
+            getAnswers: () => ['Mocked Answer 1', 'Mocked Answer 2','Mocked Answer 3', 'Mocked Answer 4'],
+            getCorrectAnswer: () => 'Mocked Answer 4'
+          },{
+            getQuestion: () => 'Mocked Question 3',
+            getAnswers: () => ['Mocked Answer 1', 'Mocked Answer 2','Mocked Answer 3', 'Mocked Answer 4'],
+            getCorrectAnswer: () => 'Mocked Answer 2'
+          }
+      ];
+    }
+  }