generated from Arquisoft/wiq_0
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #272 from Arquisoft/feat/webapp/tests
Tests for dashboard page
- Loading branch information
Showing
3 changed files
with
248 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,37 +1,266 @@ | ||
| import React from 'react'; | ||
| import { render, fireEvent, screen, act, waitFor } from '@testing-library/react'; | ||
| import { MemoryRouter } from 'react-router'; | ||
| import { fireEvent, render, screen, waitFor } from '@testing-library/react'; | ||
| import Dashboard from '../pages/Dashboard'; | ||
| import AuthManager from 'components/auth/AuthManager'; | ||
| import MockAdapter from 'axios-mock-adapter'; | ||
| import { HttpStatusCode } from 'axios'; | ||
| import { MemoryRouter } from 'react-router-dom'; | ||
| import { ChakraProvider } from '@chakra-ui/react'; | ||
| import theme from '../styles/theme'; | ||
| import MockAdapter from 'axios-mock-adapter'; | ||
| import AuthManager from 'components/auth/AuthManager'; | ||
| import { HttpStatusCode } from 'axios'; | ||
| import { __esModule } from '@testing-library/jest-dom/dist/matchers'; | ||
|
|
||
| const api = process.env.REACT_APP_API_ENDPOINT; | ||
|
|
||
| jest.mock('react-i18next', () => ({ | ||
| useTranslation: () => { | ||
| return { | ||
| t: (str) => str, | ||
| i18n: { | ||
| changeLanguage: () => new Promise(() => {}), | ||
| changeLanguage: () => new Promise(() => { }), | ||
| language: "en" | ||
| }, | ||
| } | ||
| }, | ||
| })); | ||
|
|
||
| const authManager = new AuthManager(); | ||
| let mockAxios; | ||
| describe('Dashboard', () => { | ||
|
|
||
| describe('Dashboard component', () => { | ||
| const authManager = new AuthManager(); | ||
| let mockAxios; | ||
|
|
||
| beforeEach(() => { | ||
| authManager.reset(); | ||
| mockAxios = new MockAdapter(authManager.getAxiosInstance()); | ||
| }) | ||
| }); | ||
|
|
||
| afterEach(() => { | ||
| jest.clearAllMocks(); | ||
| }); | ||
|
|
||
| test('renders Dashboard component with user data and game modes', async () => { | ||
| mockAxios.onGet(`${api}/games/is-active`).reply(HttpStatusCode.Ok, { | ||
| "is_active": true | ||
| }); | ||
|
|
||
| mockAxios.onGet(`${api}/games/gamemodes`).reply(HttpStatusCode.Ok, { | ||
| name: "KiWiQ", | ||
| description: "Test description of the game mode", | ||
| internal_representation: "KIWIQ_QUEST", | ||
| icon_name: "FaKiwiBird" | ||
| }); | ||
|
|
||
| mockAxios.onGet(`${api}/users/details`).reply(HttpStatusCode.Ok, { | ||
| id: 1, | ||
| username: 'testUser', | ||
| email: '[email protected]' | ||
| }); | ||
|
|
||
| mockAxios.onGet(`${api}/games/question-categories`).reply(HttpStatusCode.Ok, [ | ||
| { | ||
| "name": "Sports", | ||
| "description": "Test description of the question category", | ||
| "internal_representation": "SPORTS" | ||
| } | ||
| ]) | ||
|
|
||
| render( | ||
| <ChakraProvider theme={theme}> | ||
| <MemoryRouter> | ||
| <Dashboard /> | ||
| </MemoryRouter> | ||
| </ChakraProvider> | ||
| ); | ||
|
|
||
| await waitFor(() => { | ||
| expect(screen.getByTestId('Welcome')).toHaveTextContent('common.welcome testUser'); | ||
| expect(mockAxios.history.get.length).toBeGreaterThan(4); | ||
| }); | ||
| }); | ||
|
|
||
| test('renders Play button when game is active', async () => { | ||
|
|
||
| mockAxios.onGet(`${api}/games/is-active`).reply(HttpStatusCode.Ok, { | ||
| "is_active": false | ||
| }); | ||
|
|
||
| mockAxios.onGet(`${api}/games/gamemodes`).reply(HttpStatusCode.Ok, { | ||
| name: "KiWiQ", | ||
| description: "Test description of the game mode", | ||
| internal_representation: "KIWIQ_QUEST", | ||
| icon_name: "FaKiwiBird" | ||
| }); | ||
|
|
||
| mockAxios.onGet(`${api}/users/details`).reply(HttpStatusCode.Ok, { | ||
| id: 1, | ||
| username: 'testUser', | ||
| email: '[email protected]' | ||
| }); | ||
|
|
||
| mockAxios.onGet(`${api}/games/question-categories`).reply(HttpStatusCode.Ok, [ | ||
| { | ||
| "name": "Sports", | ||
| "description": "Test description of the question category", | ||
| "internal_representation": "SPORTS" | ||
| } | ||
| ]) | ||
|
|
||
| const {container} = render( | ||
| <ChakraProvider theme={theme}> | ||
| <MemoryRouter> | ||
| <Dashboard /> | ||
| </MemoryRouter> | ||
| </ChakraProvider> | ||
| ); | ||
|
|
||
| it('renders dashboard elements correctly', async () => { | ||
| await waitFor(() => { | ||
| expect(container.querySelector('#play')).toBeInTheDocument(); | ||
| }); | ||
| }); | ||
|
|
||
| it('navigates to the game route on "Play" button click', async () => { | ||
| test('renders Resume button when game is not active', async () => { | ||
| mockAxios.onGet(`${api}/games/is-active`).reply(HttpStatusCode.Ok, { | ||
| "is_active": true | ||
| }); | ||
|
|
||
| mockAxios.onGet(`${api}/games/gamemodes`).reply(HttpStatusCode.Ok, { | ||
| name: "KiWiQ", | ||
| description: "Test description of the game mode", | ||
| internal_representation: "KIWIQ_QUEST", | ||
| icon_name: "FaKiwiBird" | ||
| }); | ||
|
|
||
| mockAxios.onGet(`${api}/users/details`).reply(HttpStatusCode.Ok, { | ||
| id: 1, | ||
| username: 'testUser', | ||
| email: '[email protected]' | ||
| }); | ||
|
|
||
| mockAxios.onGet(`${api}/games/question-categories`).reply(HttpStatusCode.Ok, [ | ||
| { | ||
| "name": "Sports", | ||
| "description": "Test description of the question category", | ||
| "internal_representation": "SPORTS" | ||
| } | ||
| ]) | ||
|
|
||
| const {container} = render( | ||
| <ChakraProvider theme={theme}> | ||
| <MemoryRouter> | ||
| <Dashboard /> | ||
| </MemoryRouter> | ||
| </ChakraProvider> | ||
| ); | ||
|
|
||
| await waitFor(() => { | ||
| expect(container.querySelector('#resumeBtn')).toBeInTheDocument(); | ||
| }); | ||
| }); | ||
|
|
||
| test('clicking Play button initializes a new game', async () => { | ||
| mockAxios.onGet(`${api}/games/is-active`).reply(HttpStatusCode.Ok, { | ||
| "is_active": false | ||
| }); | ||
|
|
||
| mockAxios.onGet(`${api}/games/gamemodes`).reply(HttpStatusCode.Ok, { | ||
| name: "KiWiQ", | ||
| description: "Test description of the game mode", | ||
| internal_representation: "KIWIQ_QUEST", | ||
| icon_name: "FaKiwiBird" | ||
| }); | ||
|
|
||
| mockAxios.onGet(`${api}/users/details`).reply(HttpStatusCode.Ok, { | ||
| id: 1, | ||
| username: 'testUser', | ||
| email: '[email protected]' | ||
| }); | ||
|
|
||
| mockAxios.onGet(`${api}/games/question-categories`).reply(HttpStatusCode.Ok, [ | ||
| { | ||
| "name": "Sports", | ||
| "description": "Test description of the question category", | ||
| "internal_representation": "SPORTS" | ||
| } | ||
| ]) | ||
|
|
||
| const {container} = render( | ||
| <ChakraProvider theme={theme}> | ||
| <MemoryRouter> | ||
| <Dashboard /> | ||
| </MemoryRouter> | ||
| </ChakraProvider> | ||
| ); | ||
|
|
||
| await waitFor(() => { | ||
| fireEvent.click(container.querySelector("#play")); | ||
|
|
||
| expect(mockAxios.history.post.length).toBeGreaterThan(0); | ||
| }); | ||
| }); | ||
|
|
||
| test('fetches user data and game modes on component mount', async () => { | ||
| mockAxios.onGet(`${api}/games/is-active`).reply(HttpStatusCode.Ok, { | ||
| "is_active": true | ||
| }); | ||
|
|
||
| mockAxios.onGet(`${api}/games/gamemodes`).reply(HttpStatusCode.Ok, [ | ||
| { | ||
| name: "KiWiQ", | ||
| description: "Test description of the game mode", | ||
| internal_representation: "KIWIQ_QUEST", | ||
| icon_name: "FaKiwiBird" | ||
| } | ||
| ]); | ||
|
|
||
| mockAxios.onGet(`${api}/users/details`).reply(HttpStatusCode.Ok, { | ||
| id: 1, | ||
| username: 'testUser', | ||
| email: '[email protected]' | ||
| }); | ||
|
|
||
| const {container} = render( | ||
| <ChakraProvider theme={theme}> | ||
| <MemoryRouter> | ||
| <Dashboard /> | ||
| </MemoryRouter> | ||
| </ChakraProvider> | ||
| ); | ||
|
|
||
| await waitFor(() => { | ||
| expect(mockAxios.history.get.length).toBe(3); | ||
| }); | ||
| }); | ||
|
|
||
| test('initializes a new game when Play button is clicked', async () => { | ||
| mockAxios.onGet(`${api}/games/is-active`).reply(HttpStatusCode.Ok, { | ||
| "is_active": false | ||
| }); | ||
|
|
||
| mockAxios.onGet(`${api}/games/gamemodes`).reply(HttpStatusCode.Ok, [ | ||
| { | ||
| name: "KiWiQ", | ||
| description: "Test description of the game mode", | ||
| internal_representation: "KIWIQ_QUEST", | ||
| icon_name: "FaKiwiBird" | ||
| } | ||
| ]); | ||
|
|
||
| mockAxios.onGet(`${api}/users/details`).reply(HttpStatusCode.Ok, { | ||
| id: 1, | ||
| username: 'testUser', | ||
| email: '[email protected]' | ||
| }); | ||
|
|
||
| const {container} = render( | ||
| <ChakraProvider theme={theme}> | ||
| <MemoryRouter> | ||
| <Dashboard /> | ||
| </MemoryRouter> | ||
| </ChakraProvider> | ||
| ); | ||
|
|
||
| await waitFor(() => { | ||
| fireEvent.click(container.querySelector("#play")); | ||
| expect(mockAxios.history.post.length).toBeGreaterThan(0); | ||
| }); | ||
| }); | ||
| }); |