From 675def7744b970a3be53695293f4b1ae7b4a3da8 Mon Sep 17 00:00:00 2001 From: uo289267 Date: Wed, 3 Apr 2024 21:39:43 +0200 Subject: [PATCH 1/4] Changed a bit the view of the navBar --- webapp/src/components/fragments/NavBar.js | 6 +++--- webapp/src/custom.css | 13 +++++++------ 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/webapp/src/components/fragments/NavBar.js b/webapp/src/components/fragments/NavBar.js index f941719c..5b9b5308 100644 --- a/webapp/src/components/fragments/NavBar.js +++ b/webapp/src/components/fragments/NavBar.js @@ -26,10 +26,10 @@ function Navbar() { return (
+
- - {t("navBar.title")} - +

{t("navBar.title")}

+
Date: Wed, 3 Apr 2024 22:41:57 +0200 Subject: [PATCH 2/4] Added changes on view shown after playing the game --- .../HistoricalData/HistoricalView.js | 18 +++---------- .../components/HistoricalData/RecordList.js | 20 ++++++++++++++ webapp/src/components/fragments/NavBar.js | 1 - .../questionView/CreationHistoricalRecord.js | 24 ----------------- .../components/questionView/QuestionView.js | 20 +++++++++----- webapp/src/custom.css | 27 +++++++++++++++++-- 6 files changed, 62 insertions(+), 48 deletions(-) create mode 100644 webapp/src/components/HistoricalData/RecordList.js diff --git a/webapp/src/components/HistoricalData/HistoricalView.js b/webapp/src/components/HistoricalData/HistoricalView.js index cd57787f..19366492 100644 --- a/webapp/src/components/HistoricalData/HistoricalView.js +++ b/webapp/src/components/HistoricalData/HistoricalView.js @@ -1,6 +1,8 @@ import React, {useEffect, useState } from 'react'; import {useTranslation} from "react-i18next"; import HistoryRecordRetriever from './HistoryRecordRetriever'; +import RecordList from './RecordList'; + const retriever = new HistoryRecordRetriever(); @@ -38,21 +40,9 @@ function HistoricalGameElement({record,t}){ return (
- +
    - {record.questions.map((question, index) => (
  • -

    {question.question}

    -
      - {question.answers.map((answer, answerIndex) => ( -
    • - {answer} - {question.answerGiven === answer && " 👈 "} - {question.correctAnswer === answer && " ✅ "} -
      • - ))} -
    -
    • - ))} +
); diff --git a/webapp/src/components/HistoricalData/RecordList.js b/webapp/src/components/HistoricalData/RecordList.js new file mode 100644 index 00000000..fe100a0a --- /dev/null +++ b/webapp/src/components/HistoricalData/RecordList.js @@ -0,0 +1,20 @@ +export default function RecordList({record}){ + return ( + <> + {record.questions.map((question, index) => ( +
  • +

    {question.question}

    +
      + {question.answers.map((answer, answerIndex) => ( +
    • + {answer} + {question.answerGiven === answer && " 👈 "} + {question.correctAnswer === answer && " ✅ "} +
      • + ))} +
    +
    • + ))} + + ); +} \ No newline at end of file diff --git a/webapp/src/components/fragments/NavBar.js b/webapp/src/components/fragments/NavBar.js index 5b9b5308..4437ef9f 100644 --- a/webapp/src/components/fragments/NavBar.js +++ b/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'; diff --git a/webapp/src/components/questionView/CreationHistoricalRecord.js b/webapp/src/components/questionView/CreationHistoricalRecord.js index d89f1209..e7c6903e 100644 --- a/webapp/src/components/questionView/CreationHistoricalRecord.js +++ b/webapp/src/components/questionView/CreationHistoricalRecord.js @@ -34,27 +34,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);*/ \ No newline at end of file diff --git a/webapp/src/components/questionView/QuestionView.js b/webapp/src/components/questionView/QuestionView.js index 43354f9a..17dce797 100644 --- a/webapp/src/components/questionView/QuestionView.js +++ b/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"; const creationHistoricalRecord = new CreationHistoricalRecord(); @@ -44,9 +43,10 @@ function QuestionView(){ 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'); }); } @@ -55,7 +55,8 @@ function QuestionView(){ $('.answerButton').each(function() { $(this).css({ 'background-color': colorOriginal, - 'text-decoration': 'none' // Remove underline + 'text-decoration': 'none', // Remove underline + 'pointer-events': 'auto' }); }); } @@ -115,6 +116,7 @@ function QuestionComponent({questions, numQuestion, handleClick, t, points}){ <> {numQuestion < questions.length ? (
    +

    {questions[numQuestion].getQuestion()}

    @@ -126,15 +128,19 @@ function QuestionComponent({questions, numQuestion, handleClick, t, points}){ ))}
    -

    {t("questionView.question_counter")} {numQuestion+1}

    -
    +
    +

    {t("questionView.question_counter")} {numQuestion+1}

    +

    {points} {t("questionView.point")}

    +
    +
    + ) : ( <> {creationHistoricalRecord.setDate(Date.now())} {creationHistoricalRecord.setPoints(points)} - {console.log(creationHistoricalRecord.getRecord())}

    {t("questionView.finished_game")}

    {points} {t("questionView.point")}

    +
      < RecordList record={creationHistoricalRecord.getRecord().game}/>
    )} diff --git a/webapp/src/custom.css b/webapp/src/custom.css index 6bc0fa79..94426fb0 100644 --- a/webapp/src/custom.css +++ b/webapp/src/custom.css @@ -1103,6 +1103,12 @@ svg { gap: 1em; width: fit-content; width: 500px; /* Establecer un ancho fijo */ + align-items: center; /* Centrar horizontalmente */ + justify-content: center; /* Centrar verticalmente */ + position: fixed; /* Posición fija para centrar en la ventana */ + left: 50%; + top: 50%; + transform: translate(-50%, -50%); /* Mover el elemento hacia atrás en la mitad de su tamaño */ } .answerPanel { @@ -1115,6 +1121,7 @@ svg { .topPanel { min-width: 0; + width: 100%; } .answerButton { @@ -1129,13 +1136,19 @@ svg { color: black; font-weight: 700; margin: 0.5em; - width: 100%; max-width: 200px; } .questionContainer p, span{ font-size: 20px; } + +.bottomPanel{ + display: flex; + justify-content: space-between; + +} + /*------------------------------Historical--------------------------------------------*/ /* Estilos para los botones */ .historicalButton { @@ -1148,7 +1161,7 @@ svg { border-radius: 0.3em; font-weight: bold; cursor: pointer; - margin-bottom: 0.2em; /* Agrega espacio entre los botones */ + margin: 1em; } /* Estilos para los divs dentro de centered-div */ @@ -1169,6 +1182,16 @@ svg { align-self: center; margin:auto; } +.divMenu { + display: flex; + flex-direction: column; /* Colocar los elementos en una columna */ + align-items: center; /* Centrar horizontalmente */ + justify-content: center; /* Centrar verticalmente */ + position: fixed; /* Posición fija para centrar en la ventana */ + left: 50%; + top: 50%; + transform: translate(-50%, -50%); /* Mover el elemento hacia atrás en la mitad de su tamaño */ +} .linkButton { display: flex; From 5bfc9c1b6a5d2f4cb5228c716dce2db427e49e60 Mon Sep 17 00:00:00 2001 From: uo289267 Date: Thu, 4 Apr 2024 22:06:01 +0200 Subject: [PATCH 3/4] Started jest tests --- .../src/components/GameMenu/GameMenu.test.js | 33 ++++++++++ .../HistoricalData/HistoricalView.test.js | 24 +++++++ .../components/questionView/QuestionView.js | 1 - .../questionView/QuestionView.test.js | 65 +++++++++++++++++++ 4 files changed, 122 insertions(+), 1 deletion(-) create mode 100644 webapp/src/components/HistoricalData/HistoricalView.test.js create mode 100644 webapp/src/components/questionView/QuestionView.test.js diff --git a/webapp/src/components/GameMenu/GameMenu.test.js b/webapp/src/components/GameMenu/GameMenu.test.js index 5498ca93..265e27a4 100644 --- a/webapp/src/components/GameMenu/GameMenu.test.js +++ b/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(); const linkElement = screen.getByText(/Game Menu/i); expect(linkElement).toBeInTheDocument(); +});*/ + +describe('GameMenu component', () => { + it('renders Title for Game Menu view', () => { + render(); + const text = screen.getByText(i18en.t('gameMenu.title')); + expect(text).toBeInTheDocument(); + }); + + it('renders option to create a new Game', () => { + render(); + const text = screen.getByText(i18en.t('gameMenu.new_game_button')); + expect(text).toBeInTheDocument(); + }); + + it('renders option to view historical data', () => { + render(); + const text = screen.getByText(i18en.t('gameMenu.history_button')); + expect(text).toBeInTheDocument(); + }); }); + diff --git a/webapp/src/components/HistoricalData/HistoricalView.test.js b/webapp/src/components/HistoricalData/HistoricalView.test.js new file mode 100644 index 00000000..cb176e6d --- /dev/null +++ b/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(); + const text = screen.getByText(i18en.t('gameMenu.title')); + expect(text).toBeInTheDocument();*/ + }); + it('clicking Game Record Buttons Record Lists are displayed', () => { + /*render(); + const text = screen.getByText(i18en.t('gameMenu.title')); + expect(text).toBeInTheDocument();*/ + }); +}); \ No newline at end of file diff --git a/webapp/src/components/questionView/QuestionView.js b/webapp/src/components/questionView/QuestionView.js index 17dce797..8a29e8fd 100644 --- a/webapp/src/components/questionView/QuestionView.js +++ b/webapp/src/components/questionView/QuestionView.js @@ -95,7 +95,6 @@ function QuestionView(){ return (
    - {/*Nav*/} {numQuestion >= 0 ? :

    Please Wait a bit...

    } diff --git a/webapp/src/components/questionView/QuestionView.test.js b/webapp/src/components/questionView/QuestionView.test.js new file mode 100644 index 00000000..fffe0619 --- /dev/null +++ b/webapp/src/components/questionView/QuestionView.test.js @@ -0,0 +1,65 @@ +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' + + +i18en.use(initReactI18next).init({ + resources: {}, + lng: 'en', + interpolation:{ + escapeValue: false, + } +}); +global.i18en = i18en; + +describe('Question View component', () => { + it('renders a question', () => { + act(() => { + render(); + }); + //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(); + }); + // 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(); + 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(); + 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'); + + }); +}); \ No newline at end of file From 4467576528929fbbba6f5a2cfa3414f9ab99c20b Mon Sep 17 00:00:00 2001 From: uo289267 Date: Sat, 6 Apr 2024 18:29:41 +0200 Subject: [PATCH 4/4] added new test mock tries --- .../components/questionView/QuestionView.js | 2 +- .../questionView/QuestionView.test.js | 22 ++++++++++++++++--- .../questionView/mocks/QuestionGenerator.js | 20 +++++++++++++++++ 3 files changed, 40 insertions(+), 4 deletions(-) create mode 100644 webapp/src/components/questionView/mocks/QuestionGenerator.js diff --git a/webapp/src/components/questionView/QuestionView.js b/webapp/src/components/questionView/QuestionView.js index 8a29e8fd..26c2f590 100644 --- a/webapp/src/components/questionView/QuestionView.js +++ b/webapp/src/components/questionView/QuestionView.js @@ -36,7 +36,7 @@ function QuestionView(){ let colorCorrectAnswer='#6EF26E';//green let colorIncorrectAnswer='#FF6666'; //red $('.answerButton').each(function() { - var dataValue = $(this).data('value'); + 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 diff --git a/webapp/src/components/questionView/QuestionView.test.js b/webapp/src/components/questionView/QuestionView.test.js index fffe0619..4ad708ac 100644 --- a/webapp/src/components/questionView/QuestionView.test.js +++ b/webapp/src/components/questionView/QuestionView.test.js @@ -6,6 +6,7 @@ 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: {}, @@ -17,15 +18,30 @@ i18en.use(initReactI18next).init({ global.i18en = i18en; describe('Question View component', () => { - it('renders a question', () => { + it('renders a question',async () => { act(() => { render(); + + }); + 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(); }); //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(); @@ -61,5 +77,5 @@ describe('Question View component', () => { // Verificar que el botón tenga el color esperado expect(falseAnswerButton).toHaveStyle('background-color:#FF6666'); - }); + });*/ }); \ No newline at end of file diff --git a/webapp/src/components/questionView/mocks/QuestionGenerator.js b/webapp/src/components/questionView/mocks/QuestionGenerator.js new file mode 100644 index 00000000..4dec7679 --- /dev/null +++ b/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' + } + ]; + } + } \ No newline at end of file