Merge pull request #145 from Arquisoft/develop-test

Develop test

webapp/src/__test__/Menu.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, fireEvent, screen, waitFor, act } from '@testing-library/react';
 import axios from 'axios';
 import Menu from '../views/Menu.jsx';
-import { AuthContext } from "../views/context/AuthContext.jsx";
+import { AuthContext } from "../views/context/AuthContext";
 import {MemoryRouter} from "react-router";
 import { useAuth } from "../App.jsx";
 import '@testing-library/jest-dom';

webapp/src/__test__/components/CustomForm.test.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { render, fireEvent, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import CustomForm from "../../views/components/CustomForm";
+import '@testing-library/jest-dom';
+
+describe("CustomForm component", () => {
+    test("renders form with provided data", () => {
+        const formData = {
+            title: "Test Form",
+            fields: [
+                {
+                    name: "name",
+                    displayed: "Name",
+                    required: true,
+                    value: "",
+                    changeHandler: jest.fn(),
+                },
+                {
+                    name: "email",
+                    displayed: "Email",
+                    required: true,
+                    value: "",
+                    changeHandler: jest.fn(),
+                },
+            ],
+            submitButtonTx: "Send",
+            submit: jest.fn(),
+        };
+
+        const suggestion = {
+            text: "Not sure what to do? Check out our",
+            linkText: "FAQ",
+            link: "/faq",
+        };
+
+        render(
+            <MemoryRouter>
+                <CustomForm formData={formData} suggestion={suggestion} />
+            </MemoryRouter>
+        );
+
+        expect(screen.getByText("Test Form")).toBeInTheDocument();
+
+        expect(screen.getByText("Name")).toBeInTheDocument();
+        expect(screen.getByText("Email")).toBeInTheDocument();
+
+        expect(screen.getByRole("button", { name: "Send" })).toBeInTheDocument();
+
+        expect(screen.getByText("Not sure what to do? Check out our")).toBeInTheDocument();
+        expect(screen.getByText("FAQ")).toBeInTheDocument();
+    });
+
+});

webapp/src/__test__/components/ErrorSnackBar.test.js

@@ -0,0 +1,26 @@
+import React from "react";
+import { render, fireEvent, screen } from "@testing-library/react";
+import ErrorSnackBar from "../../views/components/ErrorSnackBar";
+import { Snackbar } from "@mui/material";
+import '@testing-library/jest-dom';
+
+describe("ErrorSnackBar component", () => {
+    test("renders snackbar with provided error message", () => {
+        const errorMsg = "An error occurred!";
+        const setMsg = jest.fn();
+
+        render(<ErrorSnackBar msg={errorMsg} setMsg={setMsg} />);
+        expect(screen.getByRole("alert")).toBeInTheDocument();
+        expect(screen.getByText(`Error: ${errorMsg}`)).toBeInTheDocument();
+        expect(screen.getByLabelText("close")).toBeInTheDocument();
+        fireEvent.click(screen.getByLabelText("close"));
+        expect(setMsg).toHaveBeenCalledWith("");
+    });
+
+    test("does not render Snackbar when no error message provided", () => {
+        const setMsg = jest.fn();
+
+        render(<ErrorSnackBar msg="" setMsg={setMsg} />);
+        expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+    });
+});

webapp/src/__test__/components/Footer.test.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import Footer from "../../views/components/Footer";
+import '@testing-library/jest-dom';
+
+describe("Footer component", () => {
+    test("renders current year and text", () => {
+        render(<Footer />);
+
+        const currentYear = new Date().getFullYear();
+        expect(screen.getByText(`© ${currentYear} ASW - WIQ05b`)).toBeInTheDocument();
+        expect(screen.getByRole("navigation")).toBeInTheDocument();
+        const appBar = screen.getByRole("navigation");
+        expect(appBar).toHaveStyle({ backgroundColor: "primary" });
+    });
+
+    test("has fixed position at the bottom of the page", () => {
+        render(<Footer />);
+        const appBar = screen.getByRole("navigation");
+        expect(appBar).toHaveStyle({ top: "auto", bottom: 0, position: "fixed" });
+    });
+
+    test("has centered text", () => {
+        render(<Footer />);
+        const toolbar = screen.getByRole("toolbar");
+        expect(toolbar).toHaveStyle({ justifyContent: "center" });
+    });
+});

webapp/src/__test__/components/Loader.test.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import Loader from "../../views/components/Loader";
+import '@testing-library/jest-dom';
+
+describe("Loader component", () => {
+    test("renders loading message and circular progress", () => {
+        render(<Loader />);
+        expect(screen.getByText("Loading, please wait...")).toBeInTheDocument();
+        expect(screen.getByRole("progressbar")).toBeInTheDocument();
+    });
+});

webapp/src/__test__/components/Nav.draft.js

@@ -0,0 +1,73 @@
+/*
+import React from "react";
+import {render, screen, fireEvent, act} from "@testing-library/react";
+import Nav from "../../views/components/Nav";
+import {AuthContext} from "../../views/context/AuthContext";
+import {MemoryRouter} from "react-router";
+import Menu from "../../views/Menu";
+import { useAuth } from "../../App.jsx";
+import axios from "axios";
+import { ConfigContext } from '../../views/context/ConfigContext';
+
+jest.mock('axios');
+jest.mock('../../views/context/AuthContext');
+
+const localStorageMock = (() => {
+    let store = {};
+    return {
+        getItem: key => store[key],
+        setItem: (key, value) => { store[key] = value },
+        removeItem: key => { delete store[key] },
+        clear: () => { store = {} }
+    };
+})();
+
+Object.defineProperty(window, 'localStorage', { value: localStorageMock });
+jest.mock('../../App.jsx', () => ({
+    useAuth: jest.fn().mockReturnValue({
+        getUser: jest.fn().mockReturnValue({
+            token: 'testUser',
+            userId: 'test',
+            username: 'test'
+        }),
+        isAuthenticated: jest.fn().mockReturnValue(true),
+        logout: jest.fn(),
+        setUser: jest.fn()
+    })
+}));
+
+describe("Nav component", () => {
+    const mockAuth = useAuth();
+    test("renders navigation links", async () => {
+        await act(() => render(
+            <AuthContext.Provider value={mockAuth}>
+                <MemoryRouter><Nav/></MemoryRouter>
+            </AuthContext.Provider>
+        ));
+        const homeLink = screen.getByText("Home");
+        const menuLink = screen.getByText("Menu");
+        const aboutLink = screen.getByText("About");
+        const globalRankingLink = screen.getByText("Global Ranking");
+
+        expect(homeLink).toBeInTheDocument();
+        expect(menuLink).toBeInTheDocument();
+        expect(aboutLink).toBeInTheDocument();
+        expect(globalRankingLink).toBeInTheDocument();
+    });
+
+    test("opens user menu on click", async() => {
+        await act(() => render(
+            <AuthContext.Provider value={mockAuth}>
+                    <MemoryRouter><Nav/></MemoryRouter>
+            </AuthContext.Provider>
+        ));
+        const avatarButton = screen.getByLabelText("Open settings");
+        fireEvent.click(avatarButton);
+        const accountMenuItem = screen.getByText("Account");
+        const logoutMenuItem = screen.getByText("Logout");
+
+        expect(accountMenuItem).toBeInTheDocument();
+        expect(logoutMenuItem).toBeInTheDocument();
+    });
+});
+*/

webapp/src/__test__/components/SaveDetails.test.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import SaveDetails from '../../views/components/SaveDetails';
+
+describe('SaveDetails component', () => {
+    const mockSave = {
+        category: 'Test Category',
+        questions: [
+            {
+                statement: 'Test Statement 1',
+                options: ['Option 1', 'Option 2', 'Option 3'],
+                correct: 0,
+                answer: 1,
+                points: 10,
+                time: 30
+            },
+            {
+                statement: 'Test Statement 2',
+                options: ['Option A', 'Option B', 'Option C'],
+                correct: 2,
+                answer: 2,
+                points: 20,
+                time: 45
+            }
+        ]
+    };
+
+    const mockBack = jest.fn();
+
+    beforeEach(() => {
+        render(<SaveDetails save={mockSave} back={mockBack} />);
+    });
+
+    it('renders summary and questions correctly', () => {
+        expect(screen.getByText('Points: 30')).toBeInTheDocument(); // 10 + 20 points
+
+        // Check if each question is rendered correctly
+        const question1 = screen.getByText('1. Test Statement 1');
+        expect(question1).toBeInTheDocument();
+        expect(screen.getByText('Option 1')).toBeInTheDocument();
+        expect(screen.getByText('Option 2')).toBeInTheDocument();
+        expect(screen.getByText('Option 3')).toBeInTheDocument();
+        expect(screen.getByText('Points: 10')).toBeInTheDocument();
+        expect(screen.getByText('Time: 30 s')).toBeInTheDocument();
+
+        const question2 = screen.getByText('2. Test Statement 2');
+        expect(question2).toBeInTheDocument();
+        expect(screen.getByText('Option A')).toBeInTheDocument();
+        expect(screen.getByText('Option B')).toBeInTheDocument();
+        expect(screen.getByText('Option C')).toBeInTheDocument();
+        expect(screen.getByText('Points: 20')).toBeInTheDocument();
+        expect(screen.getByText('Time: 45 s')).toBeInTheDocument();
+    });
+
+    it('calls back function when "Go back" button is clicked', () => {
+        const goBackButton = screen.getByText('Go back');
+        fireEvent.click(goBackButton);
+        expect(mockBack).toHaveBeenCalled();
+    });
+});

webapp/src/__test__/components/SaveList.test.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import axios from 'axios';
+import SaveList from '../../views/components/SaveList';
+import { AuthContext } from "../../views/context/AuthContext";
+import { MemoryRouter } from "react-router";
+
+jest.mock('axios');
+jest.mock('../../views/context/AuthContext');
+
+const localStorageMock = (() => {
+    let store = {};
+    return {
+        getItem: key => store[key],
+        setItem: (key, value) => { store[key] = value },
+        removeItem: key => { delete store[key] },
+        clear: () => { store = {} }
+    };
+})();
+
+Object.defineProperty(window, 'localStorage', { value: localStorageMock });
+
+describe('SaveList component', () => {
+    const mockSaves = [
+        {
+            id: 1,
+            category: 'Test Category 1',
+            createdAt: '2024-04-16T10:00:00Z',
+            questions: [
+                { points: 10 },
+                { points: 20 }
+            ]
+        },
+        {
+            id: 2,
+            category: 'Test Category 2',
+            createdAt: '2024-04-15T10:00:00Z',
+            questions: [
+                { points: 15 },
+                { points: 25 }
+            ]
+        }
+    ];
+
+    beforeEach(() => {
+        axios.mockResolvedValueOnce({ data: { saves: mockSaves, maxPages: 2 } });
+        render(
+            <AuthContext.Provider value={{ getUser: jest.fn().mockReturnValue({ userId: 1, token: 'mockToken' }) }}>
+                <MemoryRouter>
+                    <SaveList />
+                </MemoryRouter>
+            </AuthContext.Provider>
+        );
+    });
+
+    it('renders a list of saves and handles pagination', async () => {
+        // Check if saves are rendered
+        const saveListItems = await screen.findAllByRole('listitem');
+        expect(screen.getByText('Test category 1')).toBeInTheDocument();
+        expect(screen.getByText('Test category 2')).toBeInTheDocument();
+
+        // Click on a save to display details
+        fireEvent.click(saveListItems[0]);
+        await waitFor(() => {
+            expect(screen.getByText('30')).toBeInTheDocument();
+            expect(screen.getByText('40')).toBeInTheDocument();
+        });
+    });
+
+});

webapp/src/__test__/components/ServiceDown.test.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ServiceDownMessage from '../../views/components/ServiceDownMessage';
+
+describe('ServiceDownMessage component', () => {
+    it('renders service down message with reason', () => {
+        const grave = 'path/to/grave.png';
+        const code = 503;
+        const reason = 'Service Unavailable';
+
+        render(<ServiceDownMessage grave={grave} code={code} reason={reason} />);
+
+        const graveImage = screen.getByAltText('Grave');
+        expect(graveImage).toBeInTheDocument();
+        expect(graveImage).toHaveAttribute('src', grave);
+
+        const serviceDownText = screen.getByText('The service seems to be down, please try again later.');
+        expect(serviceDownText).toBeInTheDocument();
+
+        const reasonText = screen.getByText('503: Service Unavailable');
+        expect(reasonText).toBeInTheDocument();
+    });
+
+    it('renders service down message without reason', () => {
+        const grave = 'path/to/grave.png';
+
+        render(<ServiceDownMessage grave={grave} />);
+
+        const graveImage = screen.getByAltText('Grave');
+        expect(graveImage).toBeInTheDocument();
+        expect(graveImage).toHaveAttribute('src', grave);
+
+        const serviceDownText = screen.getByText('The service seems to be down, please try again later.');
+        expect(serviceDownText).toBeInTheDocument();
+    });
+});

webapp/src/views/components/Footer.jsx

@@ -7,8 +7,8 @@ import { Container } from "@mui/material";
 export default function Footer() {
   return (
     <Container sx={{height: "7rem"}}>
-      <AppBar color="primary" sx={{ top: "auto", bottom: 0, position: "fixed" }}>
-        <Toolbar sx={{ justifyContent: "center" }}>
+      <AppBar role="navigation" color="primary" sx={{ top: "auto", bottom: 0, position: "fixed" }}>
+        <Toolbar role="toolbar" sx={{ justifyContent: "center" }}>
           <Typography>&copy; {new Date().getFullYear()} ASW - WIQ05b</Typography>
         </Toolbar>
       </AppBar>