test(tournaments-frontend): Test list tournaments page

web/app/src/pages/Leagues/index.test.tsx

@@ -20,7 +20,7 @@ beforeEach(() => {
  mockApi.prototype.parseError.mockReset()
 })
 
-describe('LeaguesPage', () => {
+describe('LeaguesListPage', () => {
  it('renders leagues from API', async () => {
  const mockLeagues = Array.from({length: 5}, () => fake.league())
 

web/app/src/pages/Tournaments/index.test.tsx

@@ -0,0 +1,87 @@
+import {Api, TournamentsApi} from "../../api";
+import {fake} from '../../test';
+import {render} from "@testing-library/react";
+import {MemoryRouter} from "react-router-dom";
+import TournamentsListPage from "./index";
+
+jest.mock('../../api')
+const mockApi = jest.mocked(Api)
+
+beforeEach(() => {
+ mockApi.prototype.leaguesApi.mockReset()
+ mockApi.prototype.parseError.mockReset()
+})
+
+describe('TournamentsListPage', () => {
+ it('renders tournaments from API', async () => {
+ const mockTournaments = Array.from({length: 5}, () => fake.tournament())
+
+ jest.mocked(TournamentsApi).prototype.tournamentsGet.mockResolvedValue({
+ config: {},
+ data: {
+ tournaments: mockTournaments
+ },
+ headers: {},
+ request: {},
+ status: 200,
+ statusText: "",
+ })
+ mockApi.prototype.tournamentsApi.mockReturnValue(new TournamentsApi())
+
+ const result = render(
+ <MemoryRouter>
+ <TournamentsListPage/>
+ </MemoryRouter>
+ )
+
+ const header = await result.findByText("Tournaments")
+ expect(header).toBeInTheDocument()
+
+ const tournamentCards = await result.findAllByTestId("tournament-card")
+ expect(tournamentCards).toHaveLength(mockTournaments.length)
+
+ mockTournaments.forEach((tournament) => {
+ expect(result.getByText(tournament.name)).toBeInTheDocument()
+ expect(result.getByText(tournament.location!.name)).toBeInTheDocument()
+ })
+ })
+ it('renders error from API', async () => {
+ const mockError = fake.errorResponse()
+ mockApi.prototype.parseError.mockReturnValue(mockError)
+
+ jest.mocked(TournamentsApi).prototype.tournamentsGet.mockRejectedValue(false)
+ mockApi.prototype.tournamentsApi.mockReturnValue(new TournamentsApi())
+
+ const result = render(
+ <MemoryRouter>
+ <TournamentsListPage/>
+ </MemoryRouter>
+ )
+
+ const header = await result.findByText("Tournaments")
+ expect(header).toBeInTheDocument()
+
+ const error = await result.findByText(mockError.detail)
+ expect(error).toBeInTheDocument()
+ })
+ it('shows unknown error when parseError fails', async () => {
+ mockApi.prototype.parseError.mockImplementation((e) => {
+ throw e
+ })
+
+ mockApi.prototype.tournamentsApi.mockReturnValue(new TournamentsApi())
+ jest.mocked(TournamentsApi).prototype.tournamentsGet.mockRejectedValue(false)
+
+ const result = render(
+ <MemoryRouter>
+ <TournamentsListPage/>
+ </MemoryRouter>
+ )
+
+ const header = await result.findByText("Tournaments")
+ expect(header).toBeInTheDocument()
+
+ const error = await result.findByText("Unknown error")
+ expect(error).toBeInTheDocument()
+ })
+})

web/app/src/pages/Tournaments/index.tsx

@@ -101,14 +101,14 @@ export default function TournamentsListPage(props: TournamentListPageProps) {
  textAlign={'center'}
  fontSize={'4xl'}
  fontWeight={'bold'}>
- Leagues
+ Tournaments
  </Heading>
  <Spacer/>
  {auth?.user &&
- <Button data-testid={'create-league'} size={'sm'} onClick={() => {
- navigate('/leagues/create')
+ <Button data-testid={'create-tournament'} size={'sm'} onClick={() => {
+ navigate('/tournaments/create')
  }}>
- Create League
+ Create Tournament
  </Button>
  }
  </HStack>

web/app/src/test/fake/index.ts

@@ -2,3 +2,4 @@ export * from "./user";
 export * from "./league";
 export * from "./errorResponse";
 export * from "./location";
+export * from "./tournament";

web/app/src/test/fake/tournament.ts

@@ -0,0 +1,25 @@
+import {faker} from "@faker-js/faker";
+import {Tournament} from "../../api";
+import * as helpers from "../../helpers";
+import {location} from "./location";
+import {league} from "./league";
+
+export function tournament(): Tournament {
+ const name = faker.hacker.phrase();
+
+ return {
+ name: name,
+ slug: helpers.slugify(name),
+ id: faker.datatype.uuid(),
+ type: "multi_round_tournament",
+ settings: {
+ rounds: 8,
+ games_per_round: 4,
+ lowest_scores_dropped: 3
+ },
+ location: location(),
+ league: league(),
+ created_at: faker.date.recent(5).toISOString(),
+ updated_at: faker.date.recent(1).toISOString()
+ }
+}