feat: Adding tests to the new impl. of Game

webapp/src/components/game/Game.js

@@ -1,4 +1,4 @@
-import {HttpStatusCode} from "axios";
+import { HttpStatusCode } from "axios";
 import AuthManager from "components/auth/AuthManager";
 
 const authManager = new AuthManager();
@@ -15,11 +15,25 @@ export async function newGame() {
 }
 
 export async function startRound(gameId) {
-    return await authManager.getAxiosInstance().post(process.env.REACT_APP_API_ENDPOINT + "/games/" + gameId + "/startRound");
+    try {
+        let requestAnswer = await authManager.getAxiosInstance().post(process.env.REACT_APP_API_ENDPOINT + "/games/" + gameId + "/startRound");
+        if (HttpStatusCode.Ok === requestAnswer.status) {
+            return requestAnswer.data;
+        }
+    } catch {
+
+    }
 }
 
 export async function getCurrentQuestion(gameId) {
-    return await authManager.getAxiosInstance().get(process.env.REACT_APP_API_ENDPOINT + "/games/" + gameId + "/question");
+    try {
+        let requestAnswer = await authManager.getAxiosInstance().get(process.env.REACT_APP_API_ENDPOINT + "/games/" + gameId + "/question");
+        if (HttpStatusCode.Ok === requestAnswer.status) {
+            return requestAnswer.data;
+        }
+    } catch {
+
+    }
 }
 
 export async function changeLanguage(gameId, language) {
@@ -34,7 +48,14 @@ export async function changeLanguage(gameId, language) {
 }
 
 export async function answerQuestion(gameId, aId) {
-    return await authManager.getAxiosInstance().post(process.env.REACT_APP_API_ENDPOINT + "/games/" + gameId + "/answer", {answer_id:aId});
+    try {
+        let requestAnswer = await authManager.getAxiosInstance().post(process.env.REACT_APP_API_ENDPOINT + "/games/" + gameId + "/answer", {answer_id:aId});
+        if (HttpStatusCode.Ok === requestAnswer.status) {
+            return requestAnswer.data;
+        }
+    } catch {
+
+    }
 }
 
 export async function getGameDetails(gameId) {
@@ -47,4 +68,3 @@ export async function getGameDetails(gameId) {
 
     }
 }
-

webapp/src/pages/Game.jsx

@@ -204,6 +204,7 @@ export default function Game() {
             <Box bg="white" p={4} borderRadius="md" boxShadow="md" mt={4} mb={4} w="fit-content" shadow="2xl" rounded="1rem" alignItems="center">
                 {loading ? (
                     <Spinner
+                        data-testid="loading-spinner"
                         thickness='4px'
                         speed='0.65s'
                         emptyColor='gray.200'

webapp/src/tests/Game.test.js

@@ -1,79 +1,94 @@
-import React from 'react';
-import { render, fireEvent, screen, act } from '@testing-library/react';
-import { MemoryRouter } from 'react-router';
-import Game from '../pages/Game';
+import React from "react";
+import { render, fireEvent, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
 import { ChakraProvider } from '@chakra-ui/react';
 import theme from '../styles/theme';
-import { getQuestion } from '../components/game/Questions';
-
-jest.mock('react-i18next', () => ({
-  useTranslation: () => {
-    return {
-      t: (str) => str,
-      i18n: {
-        changeLanguage: () => new Promise(() => {}),
-      },
-    }
-  },
-}));
+import { MemoryRouter } from 'react-router';
+import Game from "../pages/Game"; 
+import { HttpStatusCode } from "axios";
+import AuthManager from "components/auth/AuthManager";
+import MockAdapter from "axios-mock-adapter";
 
-jest.mock('../components/game/Questions', () => ({
-  getQuestion: jest.fn(),
-}));
+describe("Game Component", () => {
+  const authManager = new AuthManager();
+  let mockAxios;
 
-describe('Game component', () => {
-  /*
   beforeEach(() => {
-    getQuestion.mockResolvedValue({
-      content: 'Test question',
-      answers: [
-        { id: 1, text: 'Test answer 1', category: 'Test category 1' },
-        { id: 2, text: 'Test answer 2', category: 'Test category 2' },
-      ],
-    });
+    authManager.reset();
+    mockAxios = new MockAdapter(authManager.getAxiosInstance());
   });
 
-  afterEach(() => {
-    jest.restoreAllMocks();
+  afterAll(() => {
+    mockAxios = null;
+    authManager.reset();
   });
-    */
-  test('selects an option when clicked', async () => {
-    /*
-    render(<ChakraProvider theme={theme}><MemoryRouter><Game/></MemoryRouter></ChakraProvider>);
-    const option1Button = await screen.findByTestId('Option1');
 
-    act(() => fireEvent.click(option1Button));
-
-    expect(option1Button).toHaveClass('chakra-button custom-button effect1 css-m4hh83');
-    */
+  it("renders loading spinner initially", () => {
+    const { getByTestId } = render(<ChakraProvider theme={theme}><MemoryRouter><Game/></MemoryRouter></ChakraProvider>);
+    expect(getByTestId("loading-spinner")).toBeInTheDocument();
   });
-    /*
-  test('disables next button when no option is selected', async () => {
-    render(<ChakraProvider theme={theme}><MemoryRouter><Game/></MemoryRouter></ChakraProvider>);
-    const nextButton = await screen.findByTestId('Next');
 
-    expect(nextButton).toBeDisabled();
+  it("renders round number and correct answers count", async () => {
+    const { getByText } = render(<ChakraProvider theme={theme}><MemoryRouter><Game/></MemoryRouter></ChakraProvider>);
+    expect(getByText("game.round1")).toBeInTheDocument();
+    expect(getByText("Correct answers: 0")).toBeInTheDocument();
   });
 
-  test('enables next button when an option is selected', async () => {
-    render(<ChakraProvider theme={theme}><MemoryRouter><Game/></MemoryRouter></ChakraProvider>);
-    const option1Button = await screen.findByTestId('Option1');
-    const nextButton = await screen.findByTestId('Next');
-
-    act(() => fireEvent.click(option1Button));
-
-    expect(nextButton).toBeEnabled();
+  it("displays question and options after loading", async () => {
+    const data = {
+      question: "What is the capital of Spain?",
+      options: ["Madrid", "Barcelona", "Seville", "Valencia"],
+    };
+    mockAxios.onGet().reply(HttpStatusCode.Ok, data);
+    const { container } = render(<ChakraProvider theme={theme}><MemoryRouter><Game/></MemoryRouter></ChakraProvider>);
+    waitFor(() => {
+      expect(container).toHaveTextContent("What is the capital of Spain?");
+      expect(container).toHaveTextContent("Madrid");
+      expect(container).toHaveTextContent("Barcelona");
+      expect(container).toHaveTextContent("Seville");
+      expect(container).toHaveTextContent("Valencia");
+    });
   });
 
-  test('renders ButtonEf component correctly', async () => {
-    render(<ChakraProvider theme={theme}><MemoryRouter><Game/></MemoryRouter></ChakraProvider>);
-    const option2Button = await screen.findByTestId('Option2');
-
-    expect(option2Button).toHaveClass('chakra-button custom-button effect1 css-147pzm2');
-
-    act(() => fireEvent.click(option2Button));
-
-    expect(option2Button).toHaveClass('chakra-button custom-button effect1 css-m4hh83');
+  it("allows selecting an answer and enables next button", async () => {
+    const data = {
+      question: "What is the capital of Spain?",
+      options: ["Madrid", "Barcelona", "Seville", "Valencia"],
+    };
+    mockAxios.onGet().reply(HttpStatusCode.Ok, data);
+    const { container } = render(<ChakraProvider theme={theme}><MemoryRouter><Game/></MemoryRouter></ChakraProvider>);
+    waitFor(() => {
+      const optionButton = container.querySelector("button");
+      fireEvent.click(optionButton);
+      expect(optionButton).toHaveStyle("background-color: green");
+      const nextButton = container.querySelector("button");
+      expect(nextButton).not.toBeDisabled();
+    });
+  });
+  it("displays correct answer after selecting wrong answer", async () => {
+    const data = {
+      question: "What is the capital of Spain?",
+      options: ["Madrid", "Barcelona", "Seville", "Valencia"],
+    };
+    mockAxios.onGet().reply(HttpStatusCode.Ok, data);
+    const { container } = render(<ChakraProvider theme={theme}><MemoryRouter><Game/></MemoryRouter></ChakraProvider>);
+    waitFor(() => {
+      const optionButton = container.querySelector("button");
+      fireEvent.click(optionButton);
+      expect(optionButton).toHaveStyle("background-color: red");
+    });
+  });
+  it("displays correct answer after selecting correct answer", async () => {
+    const data = {
+      question: "What is the capital of Spain?",
+      options: ["Madrid", "Barcelona", "Seville", "Valencia"],
+    };
+    mockAxios.onGet().reply(HttpStatusCode.Ok, data);
+    const { container } = render(<ChakraProvider theme={theme}><MemoryRouter><Game/></MemoryRouter></ChakraProvider>);
+    waitFor(() => {
+      const optionButton = container.querySelector("button");
+      fireEvent.click(optionButton);
+      expect(optionButton).toHaveStyle("background-color: green");
+    });
   });
-  */
 });