Merge pull request #96 from Arquisoft/webapp_tests_marco

webapp/src/storeQuestion/App.jsx

@@ -18,7 +18,10 @@ function App() {
         const response = await axios.get(`${apiEndpoint}/history/questions`);
         setPreguntas(response.data);
       } catch (error) {
-        console.error('Error al obtener las preguntas:', error.response.data.error);
+        if('response' in error && 'data' in error.response && 'error' in error.response.data)
+          console.error('Error al obtener las preguntas:', error.response.data.error);
+        else
+          console.error('Error al obtener las preguntas:', error)
       }
     };
 
@@ -66,7 +69,7 @@ function App() {
       <footer className='pagination'>
         <Button text='Primera' onClick={firstPage}/>
         <Button text='Anterior' onClick={prevPage}/>
-        <Button text={currentPage} onClick={refresh} />
+        <Button text={''+currentPage} onClick={refresh} />
         <Button text='Siguiente' onClick={nextPage}/>
         <Button text='Última' onClick={lastPage} />
       </footer>

webapp/src/storeQuestion/test/App.test.jsx

@@ -0,0 +1,100 @@
+import userEvent from '@testing-library/user-event';
+import axios from 'axios';
+import App from '../App';
+import {MemoryRouter} from 'react-router-dom';
+import { render, screen, waitFor,} from '@testing-library/react';
+
+
+jest.mock("axios")
+//const mockAxios = new MockAdapter(axios);
+
+describe('App', () => {
+
+  beforeEach(async() => {
+    const mockQuestions = Array.from({ length: 20 }, (_, index) => ({
+      _id: String(index + 1),
+      pregunta: `Question ${index + 1}`,
+      respuesta_correcta: 'Answer 1',
+      respuestas_incorrectas: ['Answer 2', 'Answer 3', 'Answer 4'],
+      createdAt: '05/04/2024',
+    }));
+
+    // Simula la respuesta de la petición GET
+    axios.get.mockResolvedValueOnce({ data: mockQuestions });
+  });
+
+  test('renders the app title', async() => {
+    await waitFor( () => render(<MemoryRouter><App /></MemoryRouter>));
+    expect(screen.getByText('Almacén de preguntas')).toBeInTheDocument();
+  });
+
+  test('fetches and displays questions', async () => {
+    const { getByText } = render(<MemoryRouter><App /></MemoryRouter>);
+
+    await waitFor(() => {
+      // Verifica que las preguntas se muestren en el componente
+      expect(getByText('Question 1')).toBeInTheDocument();
+      expect(getByText('Question 2')).toBeInTheDocument();
+    });
+
+    // Verifica que se haya llamado axios.get con el endpoint correcto
+    expect(axios.get).toHaveBeenCalledWith('http://localhost:8000/history/questions');
+  });
+
+  test('navigates to the next page', async () => {
+    const { getByText } = render(<MemoryRouter><App /></MemoryRouter>);
+
+    await waitFor(() => {
+      expect(getByText('Question 1')).toBeInTheDocument();
+      expect(getByText('Question 10')).toBeInTheDocument();
+    });
+
+    userEvent.click(getByText('Siguiente'));
+
+    await waitFor(() => {
+      expect(getByText('Question 11')).toBeInTheDocument();
+      expect(getByText('Question 20')).toBeInTheDocument();
+    });
+
+    userEvent.click(getByText('Anterior'));
+
+    await waitFor(() => {
+      expect(getByText('Question 1')).toBeInTheDocument();
+      expect(getByText('Question 10')).toBeInTheDocument();
+    });
+
+    userEvent.click(getByText('Última'));
+
+    await waitFor(() => {
+      expect(getByText('Question 11')).toBeInTheDocument();
+      expect(getByText('Question 20')).toBeInTheDocument();
+    });
+
+    userEvent.click(getByText('Primera'));
+
+    await waitFor(() => {
+      expect(getByText('Question 1')).toBeInTheDocument();
+      expect(getByText('Question 10')).toBeInTheDocument();
+    });
+
+  });
+
+});
+
+test('handles unknown error when fetching questions', async () => {
+  const errorMessage = 'Error fetching questions';
+  axios.get.mockRejectedValueOnce(new Error(errorMessage));
+
+  render(<MemoryRouter><App /></MemoryRouter>);
+
+  expect(axios.get).toHaveBeenCalledWith('http://localhost:8000/history/questions');
+});
+
+test('handles error with response.data.error when fetching questions', async () => {
+  const errorMessage = 'Error fetching questions';
+  axios.get.mockRejectedValueOnce({ response: { data: { error: errorMessage } } });
+
+  render(<MemoryRouter><App /></MemoryRouter>);
+
+  expect(axios.get).toHaveBeenCalledWith('http://localhost:8000/history/questions');
+});

webapp/src/userStats/App.jsx

@@ -72,7 +72,7 @@ function App() {
       <footer className="pagination">
         <Button text='Primera' onClick={firstPage}/>
         <Button text='Anterior' onClick={prevPage}/>
-        <Button text={currentPage} onClick={refresh} />
+        <Button text={''+currentPage} onClick={refresh} />
         <Button text='Siguiente' onClick={nextPage}/>
         <Button text='Última' onClick={lastPage} />
       </footer>

webapp/src/userStats/test/App.test.jsx

@@ -0,0 +1,124 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import axios from 'axios';
+import App from '../App';
+import {MemoryRouter} from 'react-router-dom';
+
+jest.mock('axios');
+
+describe('App', () => {
+    beforeEach(() => {
+        localStorage.setItem('username', 'testuser');
+    })
+
+    afterEach(() => {
+        localStorage.removeItem('username');
+    })
+
+  it('should fetch and display games', async () => {
+    const games = [
+        { id: 1, username: 'testuser', points: 100, questions: [{ title: 'Question 1', answers: ['Answer 1', 'Answer 2', 'Answer 3'], ansIndex: [1,1] }], createdAt: "07/04/2024"},
+        { id: 2, username: 'testuser', points: 0, questions: [{ title: 'Question 2', answers: ['Answer 1', 'Answer 2', 'Answer 3'], ansIndex: [0,1] }], createdAt: "07/04/2024"}
+    ];
+
+    axios.get.mockResolvedValueOnce({ data: games });
+
+    render(<MemoryRouter><App /></MemoryRouter>);
+
+    await waitFor(() => {
+        const elementos = screen.getAllByText('▼');
+
+        // Haz clic en cada elemento encontrado
+        elementos.forEach(elemento => {
+        userEvent.click(elemento);
+        });
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText('Historial de testuser')).toBeInTheDocument();
+      expect(screen.getByText('Question 1')).toBeInTheDocument();
+      expect(screen.getByText('Question 2')).toBeInTheDocument();
+    });
+  });
+
+  it('should navigate to next and previous pages', async () => {
+    const games = Array.from({ length: 20 }, (_, index) => ({
+        _id: String(index + 1),
+        username: 'testuser', 
+        points: 100, 
+        questions: [
+            {
+                 title: `Question ${index+1}`, 
+                 answers: ['Answer 1', 'Answer 2', 'Answer 3'], 
+                 ansIndex: [1,1] 
+            }
+        ], 
+        createdAt: "07/04/2024"
+      }));
+
+    axios.get.mockResolvedValueOnce({ data: games });
+
+    render(<MemoryRouter><App /></MemoryRouter>);
+
+    await waitFor(() => {
+        const elementos = screen.getAllByText('▼');
+
+        // Haz clic en cada elemento encontrado
+        elementos.forEach(elemento => {
+        userEvent.click(elemento);
+        });
+    })
+
+    await waitFor(() => {  
+      expect(screen.getByText('Historial de testuser')).toBeInTheDocument();
+      expect(screen.getByText('Question 1')).toBeInTheDocument();
+      expect(screen.getByText('Question 10')).toBeInTheDocument();
+    });
+
+    const nextPageButton = screen.getByText('Siguiente');
+    const prevPageButton = screen.getByText('Anterior');
+    const firstPageButton = screen.getByText('Primera');
+    const lastPageButton = screen.getByText('Última');
+
+    userEvent.click(nextPageButton);
+
+    await waitFor(() => {
+        expect(screen.getByText('Historial de testuser')).toBeInTheDocument();
+        expect(screen.getByText('Question 11')).toBeInTheDocument();
+        expect(screen.getByText('Question 20')).toBeInTheDocument();
+    });
+
+    userEvent.click(prevPageButton);
+
+    await waitFor(() => {
+        expect(screen.getByText('Historial de testuser')).toBeInTheDocument();
+        expect(screen.getByText('Question 1')).toBeInTheDocument();
+        expect(screen.getByText('Question 10')).toBeInTheDocument();
+    });
+
+    userEvent.click(lastPageButton);
+
+    await waitFor(() => {
+        expect(screen.getByText('Historial de testuser')).toBeInTheDocument();
+        expect(screen.getByText('Question 11')).toBeInTheDocument();
+        expect(screen.getByText('Question 20')).toBeInTheDocument();
+    });
+
+    userEvent.click(firstPageButton);
+
+    await waitFor(() => {
+        expect(screen.getByText('Historial de testuser')).toBeInTheDocument();
+        expect(screen.getByText('Question 1')).toBeInTheDocument();
+        expect(screen.getByText('Question 10')).toBeInTheDocument();
+    });
+  });
+
+  test('handles unknown error when fetching games', async () => {
+    const errorMessage = 'Error fetching games';
+    axios.get.mockRejectedValueOnce(new Error(errorMessage));
+
+    render(<MemoryRouter><App /></MemoryRouter>);
+
+    expect(axios.get).toHaveBeenCalledWith('http://localhost:8000/history/games/testuser');
+  });
+});