diff --git a/webapp/src/components/RankingList.test.js b/webapp/src/components/RankingList.test.js
index aa792947..29afb616 100644
--- a/webapp/src/components/RankingList.test.js
+++ b/webapp/src/components/RankingList.test.js
@@ -3,6 +3,7 @@ import { render, screen, waitFor, act } from '@testing-library/react';
import RankingList from './RankingList';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
+import exp from 'constants';
jest.mock('axios');
@@ -46,21 +47,19 @@ describe('RankingList', () => {
});
});
- function emptyFunction() {
- return;
- }
-
- it('renders without crashing', async () => {
+ async function renderRankingList() {
await act(async () => {
render();
});
+ }
+
+ it('renders without crashing', async () => {
+ await renderRankingList();
});
test('renders RankingList component and main heading', async () => {
- await act(async () => {
- render();
- });
+ await renderRankingList();
// Check if the main heading is in the document
const heading = screen.getByRole('heading', { name: /Top 3 usuarios con mejor porcentaje de aciertos/i });
@@ -69,9 +68,7 @@ describe('RankingList', () => {
// Test for rendering the column headers
test('renders column headers', async () => {
- await act(async () => {
- render();
- });
+ await renderRankingList();
// Check if the column headers are in the document
const columnHeaders = screen.getAllByRole('columnheader');
@@ -80,9 +77,7 @@ describe('RankingList', () => {
// Test for rendering the table
it('should display the table', async () => {
- await act(async () => {
- render();
- });
+ await renderRankingList();
const table = screen.getByRole('table');
expect(table).toBeInTheDocument();
@@ -90,9 +85,7 @@ describe('RankingList', () => {
test('tests tabla ranking', async () => {
- await act(async () => {
- render();
- });
+ await renderRankingList();
expect(screen.queryByText("Ranking")).toBeInTheDocument();
expect(screen.getByText(/Nombre de Usuario/i)).toBeInTheDocument();
@@ -103,18 +96,14 @@ describe('RankingList', () => {
});
test('show ranking table with content', async () => {
- await act(async () => {
- render();
- });
+ await renderRankingList();
const rows = await screen.findAllByRole('row');
expect(rows).toHaveLength(5);
});
test('show users ordered by "porcentajeAciertos" BY DEFAULT correctly', async () => {
- await act(async () => {
- render();
- });
+ await renderRankingList();
// We wait for the users to be loaded and the table to be updated
let rows = await screen.findAllByRole('row');
@@ -127,16 +116,7 @@ describe('RankingList', () => {
});
- test('show users ordered by "username" correctly', async () => {
- await act(async () => {
- render();
- });
- const usernameHeader = screen.getByRole('columnheader', { name: /Nombre de Usuario/i });
-
- await act(async() => {
- usernameHeader.click(); // DESC
- });
-
+ async function expectOrder(header) {
// We wait for the users to be loaded and the table to be updated
let rows = await screen.findAllByRole('row');
@@ -147,7 +127,7 @@ describe('RankingList', () => {
expect(rows[1]).toHaveTextContent('troll');
await act(async() => {
- usernameHeader.click(); // ASC
+ header.click(); // ASC
});
// We wait for the users to be loaded and the table to be updated
@@ -158,47 +138,32 @@ describe('RankingList', () => {
expect(rows[2]).toHaveTextContent('maría');
expect(rows[3]).toHaveTextContent('pedro');
expect(rows[4]).toHaveTextContent('troll');
+ }
+
+ test('show users ordered by "username" correctly', async () => {
+ await renderRankingList();
+ const usernameHeader = screen.getByRole('columnheader', { name: /Nombre de Usuario/i });
+ await act(async() => {
+ usernameHeader.click(); // DESC
+ });
+
+ expectOrder(usernameHeader);
});
test('show users ordered by "porcentajeAciertos" correctly', async () => {
- await act(async () => {
- render();
- });
+ await renderRankingList();
const porcentajeAciertosHeader = screen.getByRole('columnheader', { name: /Porcentaje de Aciertos/i });
await act(async() => {
porcentajeAciertosHeader.click(); // ASC
});
- // We wait for the users to be loaded and the table to be updated
- let rows = await screen.findAllByRole('row');
-
- // We check if the first row is the one with the username 'troll'
- expect(rows[4]).toHaveTextContent('manuel');
- expect(rows[3]).toHaveTextContent('maría');
- expect(rows[2]).toHaveTextContent('pedro');
- expect(rows[1]).toHaveTextContent('troll');
-
- await act(async() => {
- porcentajeAciertosHeader.click(); // DESC
- });
-
- // We wait for the users to be loaded and the table to be updated
- rows = await screen.findAllByRole('row');
-
- // We check if the first row is the one with the username 'manuel'
- expect(rows[1]).toHaveTextContent('manuel');
- expect(rows[2]).toHaveTextContent('maría');
- expect(rows[3]).toHaveTextContent('pedro');
- expect(rows[4]).toHaveTextContent('troll');
-
+ expectOrder(porcentajeAciertosHeader);
});
test('show users ordered by "preguntasCorrectas" correctly', async () => {
- await act(async () => {
- render();
- });
+ await renderRankingList();
const preguntasCorrectasHeader = screen.getByRole('columnheader', { name: /Preguntas Correctas/i });
await act(async() => {
@@ -229,9 +194,7 @@ describe('RankingList', () => {
});
test('show users ordered by "preguntasFalladas" correctly', async () => {
- await act(async () => {
- render();
- });
+ await renderRankingList();
const preguntasFalladasHeader = screen.getByRole('columnheader', { name: /Preguntas Falladas/i });
await act(async() => {
@@ -262,9 +225,7 @@ describe('RankingList', () => {
});
test('show users ordered by "numeroPartidas" correctly', async () => {
- await act(async () => {
- render();
- });
+ await renderRankingList();
const numPartidasHeader = screen.getByRole('columnheader', { name: /Número de Partidas/i });
await act(async() => {