Started jest tests

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.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/questionView/QuestionView.js

@@ -95,7 +95,6 @@ function QuestionView(){
 
     return (
     <div className="question-view-container">
-        {/*Nav*/}
         {numQuestion >= 0 ? 
         <QuestionComponent t={t} questions={questions} numQuestion={numQuestion} handleClick={handleClick} points={points}/> :
         <h1>Please Wait a bit...</h1> }

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(<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');
+
+    });
+});