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() => {