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.js b/webapp/src/components/HistoricalData/HistoricalView.js index aa868374..32390ba0 100644 --- a/webapp/src/components/HistoricalData/HistoricalView.js +++ b/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}){ ); 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/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}

    + +
    • + ))} + + ); +} \ No newline at end of file diff --git a/webapp/src/components/fragments/NavBar.js b/webapp/src/components/fragments/NavBar.js index cc6d5408..eec3bbfd 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'; @@ -29,10 +28,10 @@ function Navbar() { return (
    +
    - - {t("navBar.title")} - +

    {t("navBar.title")}

    +
    {numQuestion < questions.length ? (
    +

    {questions[numQuestion].getQuestion()}

    @@ -133,12 +135,17 @@ function QuestionComponent({questions, numQuestion, handleClick, t, points}){ ))}
    -

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

    -
    +
    +

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

    +

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

    +
    +
    + ) : ( <>

    {t("questionView.finished_game")}

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

    +
      < RecordList record={creationHistoricalRecord.getRecord().game}/>
    )} diff --git a/webapp/src/components/questionView/QuestionView.test.js b/webapp/src/components/questionView/QuestionView.test.js new file mode 100644 index 00000000..4ad708ac --- /dev/null +++ b/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(); + + }); + 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(); + }); + // 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 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 diff --git a/webapp/src/custom.css b/webapp/src/custom.css index 79849789..daa780fd 100644 --- a/webapp/src/custom.css +++ b/webapp/src/custom.css @@ -17,20 +17,21 @@ left: 0; top: 0; } - +.left-nav{ + display:flex; + align-items: left; + gap: 1em; +} .navbar-container img { - display: flex; - justify-content: space-between; - align-items: center; width: 40px; height: 40px; - margin-right: 10px; } .navbar-text { color: rgb(0, 0, 0); - font-weight: bold; + font-weight: 600; + font-size:1.2em; } @@ -1167,6 +1168,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 { @@ -1179,6 +1186,7 @@ svg { .topPanel { min-width: 0; + width: 100%; } .answerButton { @@ -1193,13 +1201,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 { @@ -1212,7 +1226,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 */ @@ -1233,6 +1247,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;