diff --git a/webapp/src/components/Question.test.js b/webapp/src/components/Question.test.js
index 4ce0480..14378a3 100644
--- a/webapp/src/components/Question.test.js
+++ b/webapp/src/components/Question.test.js
@@ -13,6 +13,25 @@ jest.mock('react-router-dom', () => ({
useNavigate: () => mock,
}));
+async function loadImages(){
+ await act(async () => {
+ fireEvent.load(screen.getAllByRole("img")[0])
+ fireEvent.load(screen.getAllByRole("img")[1])
+ fireEvent.load(screen.getAllByRole("img")[2])
+ fireEvent.load(screen.getAllByRole("img")[3])
+ });
+}
+
+async function waitForTimeBarStart(){
+ await waitFor(() => {
+ const time_bar = screen.getByTestId('time-bar');
+ expect(time_bar).toBeInTheDocument();
+ const widthStyle = time_bar.style.width;
+ const widthValue = parseFloat(widthStyle);
+ expect(widthValue).toBeGreaterThan(0);
+ });
+}
+
describe('Question page', () => {
beforeEach(() => {
mockAxios.reset();
@@ -95,21 +114,8 @@ describe('Question page', () => {
expect(screen.getByText(/Which of the following/i)).toBeInTheDocument();
});
- await act(async () => {
- fireEvent.load(screen.getAllByRole("img")[0])
- fireEvent.load(screen.getAllByRole("img")[1])
- fireEvent.load(screen.getAllByRole("img")[2])
- fireEvent.load(screen.getAllByRole("img")[3])
- });
-
- // Wait for the component to render
- await waitFor(() => {
- const time_bar = screen.getByTestId('time-bar');
- expect(time_bar).toBeInTheDocument();
- const widthStyle = time_bar.style.width;
- const widthValue = parseFloat(widthStyle);
- expect(widthValue).toBeGreaterThan(0);
- });
+ await loadImages()
+ await waitForTimeBarStart()
await act(async () => {
fireEvent.click(screen.getAllByRole("img")[0]);
@@ -153,6 +159,52 @@ describe('Question page', () => {
expect(screen.getByText(/Score/i).textContent).toBe("Score: 0")
})
});
+
+ it('should finish the game and render the report, from which game can be restarted', 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",
+ correctImg: "https://commons.wikimedia.org/wiki/File:Flag_of_Spain.svg"
+ });
+
+ render();
+
+ await waitFor(() => {
+ expect(screen.getByText(/Which of the following/i)).toBeInTheDocument();
+ });
+
+ const questionsPerGame = 10;
+ for(let i=0;i {
+ fireEvent.click(screen.getAllByRole("img")[2]);
+ });
+ }
+
+ await waitFor(() => {
+ expect(screen.queryByText("Game Over!")).toBeInTheDocument()
+ })
+
+ await act(async ()=>{
+ fireEvent.click(screen.getByText("Restart Game"))
+ })
+
+ await waitFor(() => {
+ expect(screen.queryByText(/Which of the following/i)).toBeInTheDocument()
+ })
+ });
});