From 37fe5edb19a961892baa4ea983487161267346f5 Mon Sep 17 00:00:00 2001 From: sergiorodriguezgarcia <113514397+sergiorodriguezgarcia@users.noreply.github.com> Date: Fri, 19 Apr 2024 18:04:07 +0200 Subject: [PATCH 1/6] feat: Counter answers centralized --- webapp/src/pages/Results.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webapp/src/pages/Results.jsx b/webapp/src/pages/Results.jsx index f78281eb..6ab60e96 100644 --- a/webapp/src/pages/Results.jsx +++ b/webapp/src/pages/Results.jsx @@ -14,7 +14,7 @@ export default function Results() {
{t("common.results")} - {`Correct answers: ${correctAnswers}`} + {`Correct answers: ${correctAnswers}`} @@ -193,6 +194,7 @@ export default function Dashboard() { className={"custom-button effect2"} onClick={initializeGameMode} size={"lg"} + id={"resumeBtn"} fontSize={"2xl"} flex="1" > diff --git a/webapp/src/tests/Dashboard.test.js b/webapp/src/tests/Dashboard.test.js index 35fb3c25..0a09e46a 100644 --- a/webapp/src/tests/Dashboard.test.js +++ b/webapp/src/tests/Dashboard.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen, fireEvent, waitFor } from '@testing-library/react'; +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; import Dashboard from '../pages/Dashboard'; import { MemoryRouter } from 'react-router-dom'; import { ChakraProvider } from '@chakra-ui/react'; @@ -7,30 +7,30 @@ 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" }, } }, })); describe('Dashboard', () => { - let mockUserInfo, mockGameModes, mockIsActive, mockNewGame, authManager, mockAxios; - beforeEach(() => { - mockUserInfo = jest.fn().mockResolvedValue({id: 1, username: 'testUser', email: 'test@example.com' }); - mockGameModes = jest.fn().mockResolvedValue({ data: [{ name: "KiWiQ", description: "Test description of the game mode", internal_representation: "KIWIQ_QUEST", icon_name: "FaKiwiBird" }] }); - mockIsActive = true; - mockNewGame = jest.fn().mockResolvedValue(true); + const authManager = new AuthManager(); + let mockAxios; - authManager = new AuthManager(); + beforeEach(() => { + authManager.reset(); mockAxios = new MockAdapter(authManager.getAxiosInstance()); - mockAxios.onAny().reply(HttpStatusCode.Ok); }); afterEach(() => { @@ -38,12 +38,30 @@ describe('Dashboard', () => { }); test('renders Dashboard component with user data and game modes', async () => { - let isActive = jest.fn(); - let userInfo = jest.fn(); - let gameModes = jest.fn(); - isActive.mockResolvedValueOnce(mockIsActive); - userInfo.mockImplementationOnce(mockUserInfo); - gameModes.mockImplementationOnce(mockGameModes); + 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: 'test@example.com' + }); + + mockAxios.onGet(`${api}/games/question-categories`).reply(HttpStatusCode.Ok, [ + { + "name": "Sports", + "description": "Test description of the question category", + "internal_representation": "SPORTS" + } + ]) render( @@ -54,18 +72,39 @@ describe('Dashboard', () => { ); await waitFor(() => { - expect(screen.getByTestId('avatar')).toBeInTheDocument(); expect(screen.getByTestId('Welcome')).toHaveTextContent('common.welcome testUser'); - expect(mockUserInfo).toHaveBeenCalled(); - expect(mockGameModes).toHaveBeenCalled(); + expect(mockAxios.history.get.length).toBeGreaterThan(4); }); }); test('renders Play button when game is active', async () => { - let isActive = jest.fn(); - isActive.mockResolvedValueOnce(mockIsActive); - render( + 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: 'test@example.com' + }); + + mockAxios.onGet(`${api}/games/question-categories`).reply(HttpStatusCode.Ok, [ + { + "name": "Sports", + "description": "Test description of the question category", + "internal_representation": "SPORTS" + } + ]) + + const {container} = render( @@ -74,56 +113,77 @@ describe('Dashboard', () => { ); await waitFor(() => { - expect(screen.getByTestId('Play')).toBeInTheDocument(); + expect(container.querySelector('#play')).toBeInTheDocument(); }); }); test('renders Resume button when game is not active', async () => { - let isActive = jest.fn(); - isActive.mockResolvedValueOnce(false); + mockAxios.onGet(`${api}/games/is-active`).reply(HttpStatusCode.Ok, { + "is_active": false + }); - render( + 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: 'test@example.com' + }); + + mockAxios.onGet(`${api}/games/question-categories`).reply(HttpStatusCode.Ok, [ + { + "name": "Sports", + "description": "Test description of the question category", + "internal_representation": "SPORTS" + } + ]) + + const {container} = render( ); - + + // FIXME: This does not pass await waitFor(() => { - expect(screen.getByTestId('Resume')).toBeInTheDocument(); + expect(container.querySelector('#resumeBtn')).toBeInTheDocument(); }); }); test('clicking Play button initializes a new game', async () => { - let isActive = jest.fn(); - let newGame = jest.fn(); - isActive.mockResolvedValueOnce(mockIsActive); - newGame.mockImplementationOnce(mockNewGame); - - render( - - - - - - ); + mockAxios.onGet(`${api}/games/is-active`).reply(HttpStatusCode.Ok, { + "is_active": false + }); - fireEvent.click(screen.getByTestId('Play')); + mockAxios.onGet(`${api}/games/gamemodes`).reply(HttpStatusCode.Ok, { + name: "KiWiQ", + description: "Test description of the game mode", + internal_representation: "KIWIQ_QUEST", + icon_name: "FaKiwiBird" + }); - await waitFor(() => { - expect(mockNewGame).toHaveBeenCalled(); + mockAxios.onGet(`${api}/users/details`).reply(HttpStatusCode.Ok, { + id: 1, + username: 'testUser', + email: 'test@example.com' }); - }); - test('changing language updates language', async () => { - const mockChangeLanguage = jest.fn(); - const mockI18n = { changeLanguage: mockChangeLanguage }; - jest.mock('react-i18next', () => ({ - useTranslation: () => ({ t: (key) => key, i18n: mockI18n }), - })); + mockAxios.onGet(`${api}/games/question-categories`).reply(HttpStatusCode.Ok, [ + { + "name": "Sports", + "description": "Test description of the question category", + "internal_representation": "SPORTS" + } + ]) - render( + const {container} = render( @@ -131,10 +191,11 @@ describe('Dashboard', () => { ); - fireEvent.click(screen.getByText('EN')); - await waitFor(() => { - expect(mockChangeLanguage).toHaveBeenCalledWith('en'); + fireEvent.click(container.querySelector("#play")); + + expect(mockAxios.history.post.length).toBeGreaterThan(0); }); }); + }); From ce8276af1bd0b7708c34b58dc4f52d9230fe7312 Mon Sep 17 00:00:00 2001 From: sergiorodriguezgarcia <113514397+sergiorodriguezgarcia@users.noreply.github.com> Date: Sun, 21 Apr 2024 11:14:05 +0200 Subject: [PATCH 5/6] fix: Fixing dashboard tests --- webapp/src/tests/Dashboard.test.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/webapp/src/tests/Dashboard.test.js b/webapp/src/tests/Dashboard.test.js index 0a09e46a..f1db8f5a 100644 --- a/webapp/src/tests/Dashboard.test.js +++ b/webapp/src/tests/Dashboard.test.js @@ -80,7 +80,7 @@ describe('Dashboard', () => { test('renders Play button when game is active', async () => { mockAxios.onGet(`${api}/games/is-active`).reply(HttpStatusCode.Ok, { - "is_active": true + "is_active": false }); mockAxios.onGet(`${api}/games/gamemodes`).reply(HttpStatusCode.Ok, { @@ -119,7 +119,7 @@ describe('Dashboard', () => { test('renders Resume button when game is not active', async () => { mockAxios.onGet(`${api}/games/is-active`).reply(HttpStatusCode.Ok, { - "is_active": false + "is_active": true }); mockAxios.onGet(`${api}/games/gamemodes`).reply(HttpStatusCode.Ok, { @@ -151,7 +151,6 @@ describe('Dashboard', () => { ); - // FIXME: This does not pass await waitFor(() => { expect(container.querySelector('#resumeBtn')).toBeInTheDocument(); }); From 4e99eb280acda89882698a3dafcd80649708cf02 Mon Sep 17 00:00:00 2001 From: sergiorodriguezgarcia <113514397+sergiorodriguezgarcia@users.noreply.github.com> Date: Sun, 21 Apr 2024 12:32:55 +0200 Subject: [PATCH 6/6] feat: Adding more tests to the Dashboard --- webapp/src/tests/Dashboard.test.js | 66 ++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) diff --git a/webapp/src/tests/Dashboard.test.js b/webapp/src/tests/Dashboard.test.js index f1db8f5a..51a1a777 100644 --- a/webapp/src/tests/Dashboard.test.js +++ b/webapp/src/tests/Dashboard.test.js @@ -196,5 +196,71 @@ describe('Dashboard', () => { 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: 'test@example.com' + }); + + const {container} = render( + + + + + + ); + + 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: 'test@example.com' + }); + + const {container} = render( + + + + + + ); + + await waitFor(() => { + fireEvent.click(container.querySelector("#play")); + expect(mockAxios.history.post.length).toBeGreaterThan(0); + }); + }); });