From e8c9a76c5b53e2ab21ec3c71f85752ec82676bd5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20Fern=C3=A1ndez=20Noriega?= Date: Wed, 17 Apr 2024 11:05:48 +0200 Subject: [PATCH] Question tests extended --- webapp/src/components/Question.test.js | 115 +++++++++++++++++++++---- 1 file changed, 96 insertions(+), 19 deletions(-) diff --git a/webapp/src/components/Question.test.js b/webapp/src/components/Question.test.js index b7657c7..7cd653f 100644 --- a/webapp/src/components/Question.test.js +++ b/webapp/src/components/Question.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { render, fireEvent, screen, waitFor, act } from '@testing-library/react'; +import { render, fireEvent, screen, waitFor, act, getByRole, getAllByRole } from '@testing-library/react'; import Question from './Question'; import useAuthUser from 'react-auth-kit/hooks/useAuthUser'; import MockAdapter from 'axios-mock-adapter'; @@ -14,33 +14,35 @@ jest.mock('react-router-dom', () => ({ })); describe('Question page', () => { - beforeEach(() => { - mockAxios.reset(); - }); + beforeEach(() => { + mockAxios.reset(); + }); - it('should render a flags question if category is flags', async () => { + it('should render a question of flag images if type is image and category is flags', async () => { useAuthUser.mockReturnValue({ username: 'testUser' }); mockAxios.onGet('http://localhost:8000/imgs/flags/question').reply(200, { question: "Which of the following flags belongs to Spain?", - images:["SpainImage","EnglandImage","PolandImage","GermanyImage"] + images:["https://commons.wikimedia.org/wiki/File:Flag_of_Spain.svg" + ,"https://commons.wikimedia.org/wiki/File:Flag_of_England.svg" + ,"https://commons.wikimedia.org/wiki/File:Flag_of_Poland.svg" + ,"https://commons.wikimedia.org/wiki/File:Flag_of_Germany.svg"] }); render(); await waitFor(() => { - expect(screen.getByText(/Which of the following flags belongs to/i)).toBeInTheDocument(); - expect(screen.getByText(/Score/i)).toBeInTheDocument(); + expect(screen.getByText(/Which of the following flags belongs to/i)).toBeInTheDocument(); + expect(screen.getByText(/Score/i)).toBeInTheDocument(); + expect(screen.getByText(/Score/i).textContent).toBe("Score: 0") + let imgs = [] + imgs = screen.getAllByRole("button") + expect(imgs.length).toBe(4) }); - - let imgs = [] - imgs = screen.getAllByRole("button") - expect(imgs.length).toBe(4) }); - - it('should render a flags question if category is foods', async () => { + it('should render a question of food images if type is image and category is foods', async () => { useAuthUser.mockReturnValue({ username: 'testUser' }); mockAxios.onGet('http://localhost:8000/imgs/foods/question').reply(200, @@ -52,13 +54,88 @@ describe('Question page', () => { render(); await waitFor(() => { - expect(screen.getByText(/Which of the following images corresponds to/i)).toBeInTheDocument(); - expect(screen.getByText(/Score/i)).toBeInTheDocument(); + expect(screen.getByText(/Which of the following images corresponds to/i)).toBeInTheDocument(); + expect(screen.getByText(/Score/i)).toBeInTheDocument(); + expect(screen.getByText(/Score/i).textContent).toBe("Score: 0") + let imgs = [] + imgs = screen.getAllByRole("button") + expect(imgs.length).toBe(4) + }); + }); + + it('should handle a fetching question error', async () => { + useAuthUser.mockReturnValue({ username: 'testUser' }); + + mockAxios.onGet('http://localhost:8000/imgs/foods/question').networkError(); + + render(); + }); + + it('should update the score if the answer is correct', async () => { + useAuthUser.mockReturnValue({ username: 'testUser' }); + + mockAxios.onGet('http://localhost:8000/imgs/flags/question').reply(200, + { + question: "Which of the following flags belongs to Spain?", + images:["https://commons.wikimedia.org/wiki/File:Flag_of_Spain.svg" + ,"https://commons.wikimedia.org/wiki/File:Flag_of_England.svg" + ,"https://commons.wikimedia.org/wiki/File:Flag_of_Poland.svg" + ,"https://commons.wikimedia.org/wiki/File:Flag_of_Germany.svg"] + }); + + mockAxios.onPost('http://localhost:8000/imgs/answer').reply(200, + { + correct: "true" + }); + + render(); + + await waitFor(() => { + expect(screen.getByText(/Score/i).textContent).toBe("Score: 0") + expect(screen.getByText(/Which of the following/i)).toBeInTheDocument(); + }); + + await act(async () => { + fireEvent.click(screen.getAllByRole("img")[0]); + }); + + await waitFor(() => { + expect(screen.getByText(/Score/i).textContent).toBe("Score: 1") + }) + }); + + it('should not update the score if the answer is incorrect', async () => { + useAuthUser.mockReturnValue({ username: 'testUser' }); + + mockAxios.onGet('http://localhost:8000/imgs/flags/question').reply(200, + { + question: "Which of the following flags belongs to Spain?", + images:["https://commons.wikimedia.org/wiki/File:Flag_of_Spain.svg" + ,"https://commons.wikimedia.org/wiki/File:Flag_of_England.svg" + ,"https://commons.wikimedia.org/wiki/File:Flag_of_Poland.svg" + ,"https://commons.wikimedia.org/wiki/File:Flag_of_Germany.svg"] + }); + + mockAxios.onPost('http://localhost:8000/imgs/answer').reply(200, + { + correct: "false", + associate: "Poland" + }); + + render(); + + await waitFor(() => { + expect(screen.getByText(/Score/i).textContent).toBe("Score: 0") + expect(screen.getByText(/Which of the following/i)).toBeInTheDocument(); }); - let imgs = [] - imgs = screen.getAllByRole("button") - expect(imgs.length).toBe(4) + await act(async () => { + fireEvent.click(screen.getAllByRole("img")[2]); + }); + + await waitFor(() => { + expect(screen.getByText(/Score/i).textContent).toBe("Score: 0") + }) }); });