test: add tests for: BottomBar, Navbar, SetupGuide and Tasks

frontend/src/components/HomeComponents/BottomBar/__tests__/BottomBar.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import BottomBar from '../BottomBar';
+
+describe('BottomBar Component', () => {
+  const mockSetSelectedProject = jest.fn();
+  const mockSetSelectedStatus = jest.fn();
+  const projects = ['Project A', 'Project B'];
+  const status = ['Status A', 'Status B'];
+
+  test('renders BottomBar component', () => {
+    render(
+      <BottomBar
+        projects={projects}
+        selectedProject={null}
+        setSelectedProject={mockSetSelectedProject}
+        status={status}
+        selectedStatus={null}
+        setSelectedStatus={mockSetSelectedStatus}
+      />
+    );
+
+    expect(screen.getByText('Home')).toBeInTheDocument();
+    expect(screen.getByText('Tasks')).toBeInTheDocument();
+  });
+});

frontend/src/components/HomeComponents/BottomBar/__tests__/bottom-bar-utils.test.ts

@@ -0,0 +1,33 @@
+import { RouteProps, routeList } from '../bottom-bar-utils';
+
+describe('RouteProps interface', () => {
+    it('should have href and label properties', () => {
+        const exampleRoute: RouteProps = { href: '#', label: 'Example' };
+        expect(exampleRoute).toHaveProperty('href');
+        expect(exampleRoute).toHaveProperty('label');
+    });
+});
+
+describe('routeList array', () => {
+    it('should be an array', () => {
+        expect(Array.isArray(routeList)).toBe(true);
+    });
+
+    it('should contain objects with href and label properties', () => {
+        routeList.forEach(route => {
+            expect(route).toHaveProperty('href');
+            expect(route).toHaveProperty('label');
+        });
+    });
+
+    it('should contain correct number of routes', () => {
+        expect(routeList.length).toBe(2);
+    });
+
+    it('should match the predefined routes', () => {
+        expect(routeList).toEqual([
+            { href: "#", label: "Home" },
+            { href: "#tasks", label: "Tasks" },
+        ]);
+    });
+});

frontend/src/components/HomeComponents/Navbar/Navbar.tsx

@@ -23,7 +23,7 @@ export const Navbar = (props: Props) => {
               href="/"
               className="ml-2 font-bold text-xl flex items-center dark:hidden"
             >
-              <img src={logoLight} alt="Logo" className="h-12 min-h-12 min-w-48 mr-0 mt-2 bg-blend-soft-light" />
+              <img src={logoLight} alt="Light-Logo" className="h-12 min-h-12 min-w-48 mr-0 mt-2 bg-blend-soft-light" />
             </a>
             <a
               rel="noreferrer noopener"

frontend/src/components/HomeComponents/Navbar/__tests__/Navbar.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import { Navbar } from '../Navbar';
+import { Props } from '../navbar-utils';
+
+// Mocking the NavbarMobile and NavbarDesktop components
+jest.mock('../NavbarMobile', () => ({
+  NavbarMobile: ({ isOpen }: { isOpen: boolean; setIsOpen: (isOpen: boolean) => void }) => (
+    <div data-testid="navbar-mobile" data-isopen={isOpen} />
+  )
+}));
+
+jest.mock('../NavbarDesktop', () => ({
+  NavbarDesktop: (_props: Props) => <div data-testid="navbar-desktop" />
+}));
+
+// Mocking the logo images
+jest.mock('../../../../assets/logo.png', () => 'logo.png');
+jest.mock('../../../../assets/logo_light.png', () => 'logo_light.png');
+
+describe('Navbar Component', () => {
+  const props: Props = {
+      imgurl: '',
+      email: '',
+      encryptionSecret: '',
+      origin: '',
+      UUID: ''
+  };
+
+  test('renders Navbar component with correct elements', () => {
+    render(<Navbar {...props} />);
+
+    const logoLightImage = screen.getByAltText('Light-Logo');
+    const logoImage = screen.getByAltText('Logo');
+
+    expect(logoLightImage).toBeInTheDocument();
+
+    expect(logoImage).toBeInTheDocument();
+
+    // Check for NavbarDesktop and NavbarMobile components
+    expect(screen.getByTestId('navbar-desktop')).toBeInTheDocument();
+    expect(screen.getByTestId('navbar-mobile')).toBeInTheDocument();
+  });
+
+  test('NavbarMobile component receives correct props', () => {
+    render(<Navbar {...props} />);
+
+    const navbarMobile = screen.getByTestId('navbar-mobile');
+    expect(navbarMobile).toHaveAttribute('data-isopen', 'false');
+  });
+});

frontend/src/components/HomeComponents/Navbar/__tests__/NavbarDesktop.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { NavbarDesktop } from "../NavbarDesktop";
+import { syncTasksWithTwAndDb, Props, routeList } from "../navbar-utils";
+
+// Mock external dependencies
+jest.mock("../navbar-utils", () => ({
+  syncTasksWithTwAndDb: jest.fn(),
+  deleteAllTasks: jest.fn(),
+  handleLogout: jest.fn(),
+  routeList: [
+    { href: "#", label: "Home" },
+    { href: "#tasks", label: "Tasks" },
+    { href: "#setup-guide", label: "Setup Guide" },
+    { href: "#faq", label: "FAQ" },
+  ],
+}));
+
+describe("NavbarDesktop", () => {
+  const mockProps: Props = {
+    imgurl: "http://example.com/image.png",
+    email: "test@example.com",
+    encryptionSecret: "secret",
+    origin: "http://localhost:3000",
+    UUID: "1234-5678",
+  };
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders the navigation links correctly", () => {
+    render(<NavbarDesktop {...mockProps} />);
+
+    routeList.forEach((route) => {
+      expect(screen.getByText(route.label)).toBeInTheDocument();
+    });
+  });
+
+  it("calls syncTasksWithTwAndDb when 'Sync Tasks' is clicked", () => {
+    render(<NavbarDesktop {...mockProps} />);
+    const syncButton = screen.getByText("Sync Tasks");
+
+    fireEvent.click(syncButton);
+
+    expect(syncTasksWithTwAndDb).toHaveBeenCalledWith(mockProps);
+  });
+
+  it("displays user email and handles dropdown menu actions", () => {
+    render(<NavbarDesktop {...mockProps} />);
+  });
+});

frontend/src/components/HomeComponents/Navbar/__tests__/NavbarMobile.test.tsx

@@ -0,0 +1,92 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { NavbarMobile } from "../NavbarMobile";
+import { syncTasksWithTwAndDb, deleteAllTasks, handleLogout, Props, routeList } from "../navbar-utils";
+
+jest.mock("../navbar-utils", () => ({
+  syncTasksWithTwAndDb: jest.fn(),
+  deleteAllTasks: jest.fn(),
+  handleLogout: jest.fn(),
+  routeList: [
+    { href: "#", label: "Home" },
+    { href: "#tasks", label: "Tasks" },
+    { href: "#setup-guide", label: "Setup Guide" },
+    { href: "#faq", label: "FAQ" },
+  ],
+}));
+
+describe("NavbarMobile", () => {
+  const mockProps: Props & { setIsOpen: (isOpen: boolean) => void; isOpen: boolean } = {
+    imgurl: "http://example.com/image.png",
+    email: "test@example.com",
+    encryptionSecret: "secret",
+    origin: "http://localhost:3000",
+    UUID: "1234-5678",
+    setIsOpen: jest.fn(),
+    isOpen: false,
+  };
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders the ModeToggle and Menu button", () => {
+    render(<NavbarMobile {...mockProps} />);
+  });
+
+  it("opens the menu when Menu button is clicked", () => {
+    render(<NavbarMobile {...mockProps} />);
+    const menuButton = screen.getByRole("button", { name: /menu icon/i });
+
+    fireEvent.click(menuButton);
+    expect(mockProps.setIsOpen).toHaveBeenCalledWith(true);
+  });
+
+  it("displays the navigation links and buttons correctly when menu is open", () => {
+    const openProps = { ...mockProps, isOpen: true };
+    render(<NavbarMobile {...openProps} />);
+
+    routeList.forEach((route) => {
+      expect(screen.getByText(route.label)).toBeInTheDocument();
+    });
+    expect(screen.getByText("Github")).toBeInTheDocument();
+    expect(screen.getByText("Sync Tasks")).toBeInTheDocument();
+    expect(screen.getByText("Delete All Tasks")).toBeInTheDocument();
+    expect(screen.getByText("Log out")).toBeInTheDocument();
+  });
+
+  it("closes the menu when a navigation link is clicked", () => {
+    const openProps = { ...mockProps, isOpen: true };
+    render(<NavbarMobile {...openProps} />);
+
+    const homeLink = screen.getByText("Home");
+    fireEvent.click(homeLink);
+    expect(mockProps.setIsOpen).toHaveBeenCalledWith(false);
+  });
+
+  it("calls syncTasksWithTwAndDb when 'Sync Tasks' is clicked", () => {
+    const openProps = { ...mockProps, isOpen: true };
+    render(<NavbarMobile {...openProps} />);
+    const syncButton = screen.getByText("Sync Tasks");
+
+    fireEvent.click(syncButton);
+    expect(syncTasksWithTwAndDb).toHaveBeenCalledWith(openProps);
+  });
+
+  it("calls deleteAllTasks when 'Delete All Tasks' is clicked", () => {
+    const openProps = { ...mockProps, isOpen: true };
+    render(<NavbarMobile {...openProps} />);
+    const deleteButton = screen.getByText("Delete All Tasks");
+
+    fireEvent.click(deleteButton);
+    expect(deleteAllTasks).toHaveBeenCalledWith(openProps);
+  });
+
+  it("calls handleLogout when 'Log out' is clicked", () => {
+    const openProps = { ...mockProps, isOpen: true };
+    render(<NavbarMobile {...openProps} />);
+    const logoutButton = screen.getByText("Log out");
+
+    fireEvent.click(logoutButton);
+    expect(handleLogout).toHaveBeenCalled();
+  });
+});