tests rankingList

webapp/src/components/Login.test.js

@@ -15,70 +15,3 @@ describe('Login Component', () => {
     expect(loginButton).toBeInTheDocument();
   });
 });
-
-/*import React from 'react';
-import { render, fireEvent, screen, waitFor, act } from '@testing-library/react';
-import axios from 'axios';
-import MockAdapter from 'axios-mock-adapter';
-import Login from './Login';
-
-const mockAxios = new MockAdapter(axios);
-
-describe('Login component', () => {
-  beforeEach(() => {
-    mockAxios.reset();
-  });
-
-  it('should log in successfully', async () => {
-    render(<Login setLogged={() => {}} />);
-
-    const usernameInput = screen.getByLabelText(/Username/i);
-    const passwordInput = screen.getByLabelText(/Password/i);
-    const loginButton = screen.getByRole('button', { name: /Iniciar sesión/i });
-
-    // Mock the axios.post request to simulate a successful response
-    mockAxios.onPost('http://localhost:8000/login').reply(200, { createdAt: '2024-01-01T12:34:56Z' });
-
-    // Simulate user input
-    await act(async () => {
-        fireEvent.change(usernameInput, { target: { value: 'testUser' } });
-        fireEvent.change(passwordInput, { target: { value: 'testPassword' } });
-        fireEvent.click(loginButton);
-      });
-
-    // Verify that the user information is displayed
-    const welcomeMessage = await waitFor(() => screen.getByText(/Hola testUser!/i));
-    expect(welcomeMessage).toBeInTheDocument();
-    const accountCreationMessage = await waitFor(() => screen.getByText(/Tu cuenta fue creada el 1\/1\/2024/i));
-    expect(accountCreationMessage).toBeInTheDocument();
-  });
-
-
-  it('should handle error when logging in', async () => {
-    render(<Login setLogged={() => {}} />);
-
-    const usernameInput = screen.getByLabelText(/Username/i);
-    const passwordInput = screen.getByLabelText(/Password/i);
-    const loginButton = screen.getByRole('button', { name: /Iniciar sesión/i });
-
-    // Mock the axios.post request to simulate an error response
-    mockAxios.onPost('http://localhost:8000/login').reply(401, { error: 'Unauthorized' });
-
-    // Simulate user input
-    fireEvent.change(usernameInput, { target: { value: 'testUser' } });
-    fireEvent.change(passwordInput, { target: { value: 'testPassword' } });
-
-    // Trigger the login button click
-    fireEvent.click(loginButton);
-
-    // Wait for the error Snackbar to be open
-    await waitFor(() => {
-      expect(screen.getByText(/Error: Unauthorized/i)).toBeInTheDocument();
-    });
-
-    // Verify that the user information is not displayed
-    expect(screen.queryByText(/Hola testUser!/i)).toBeNull();
-    expect(screen.queryByText(/Tu cuenta fue creada el/i)).toBeNull();
-  });
-});
-*/

webapp/src/components/RankingList.js

@@ -61,7 +61,7 @@ const RankingList = () => {
 
   return (
     <div>
-      <h2>Top 3 usurios con mejor porcentaje de aciertos</h2>
+      <h2>Top 3 usuarios con mejor porcentaje de aciertos</h2>
       <div style={{ display: 'flex', justifyContent: 'space-around', marginBottom: '20px' }}>
         {topThreeUsers.map((user, index) => (
           <div key={index} style={{ width: '30%', padding: '20px', backgroundColor: index === 0 ? '#ffd700' : index === 1 ? '#c0c0c0' : '#cd7f32', color: 'white', textAlign: 'center', borderRadius: '10px', boxShadow: '0 4px 8px 0 rgba(0,0,0,0.2)', transition: '0.3s', border: '1px solid #ddd' }}>

webapp/src/components/RankingList.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import RankingList from './RankingList';
+
+describe('RankingList', () => {
+  it('renders without crashing', () => {
+    render(<RankingList />);
+  });
+
+
+  test('renders RankingList component and main heading', () => {
+    render(<RankingList />);
+
+    // Check if the main heading is in the document
+    const heading = screen.getByRole('heading', { name: /Top 3 usuarios con mejor porcentaje de aciertos/i });
+    expect(heading).toBeInTheDocument();
+  });
+
+  // Test for rendering the column headers
+test('renders column headers', () => {
+    render(<RankingList />);
+
+    // Check if the column headers are in the document
+    const columnHeaders = screen.getAllByRole('columnheader');
+    expect(columnHeaders).not.toHaveLength(0);
+  });
+
+  // Test for rendering the table
+  it('should display the table', () => {
+    render(<RankingList />);
+
+    const table = screen.getByRole('table');
+    expect(table).toBeInTheDocument();
+  });
+  // Test for rendering the table headers
+  test('renders table headers', () => {
+    render(<RankingList />);
+
+    // Check if the table headers are in the document
+    const usernameHeader = screen.getByRole('columnheader', { name: /Nombre de Usuario/i });
+    const percentageHeader = screen.getByRole('columnheader', { name: /Porcentaje de Aciertos/i });
+    const correctQuestionsHeader = screen.getByRole('columnheader', { name: /Preguntas Correctas/i });
+    const failedQuestionsHeader = screen.getByRole('columnheader', { name: /Preguntas Falladas/i });
+    const numPartidasHeader = screen.getByRole('columnheader', { name: /Número de Partidas/i });
+
+    expect(usernameHeader).toBeInTheDocument();
+    expect(percentageHeader).toBeInTheDocument();
+    expect(correctQuestionsHeader).toBeInTheDocument();
+    expect(failedQuestionsHeader).toBeInTheDocument();
+    expect(numPartidasHeader).toBeInTheDocument();
+  });
+
+});