Merge pull request #19 from ThamannaHarish/complaient

Complaient

Author: shadil-rayyan

__test__/__snapshots__/bottomnavbar.test.tsx.snap

@@ -0,0 +1,62 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BottomNavBar Component matches snapshot 1`] = `
+<DocumentFragment>
+  <nav
+    class="fixed left-6 right-6 bottom-8 border-t border-gray-300 bg-[var(--main)] text-foreground rounded-2xl"
+  >
+    <ul
+      class="flex items-center justify-around py-2"
+    >
+      <li
+        class="flex flex-col items-center"
+      >
+        <button
+          class="focus:outline-none"
+          type="button"
+        >
+          <div
+            data-testid="home-icon"
+          />
+        </button>
+      </li>
+      <li
+        class="flex flex-col items-center"
+      >
+        <button
+          class="focus:outline-none"
+          type="button"
+        >
+          <div
+            data-testid="book-icon"
+          />
+        </button>
+      </li>
+      <li
+        class="flex flex-col items-center"
+      >
+        <button
+          class="focus:outline-none"
+          type="button"
+        >
+          <div
+            data-testid="calendar-icon"
+          />
+        </button>
+      </li>
+      <li
+        class="flex flex-col items-center"
+      >
+        <button
+          class="focus:outline-none"
+          type="button"
+        >
+          <div
+            data-testid="money-icon"
+          />
+        </button>
+      </li>
+    </ul>
+  </nav>
+</DocumentFragment>
+`;

__test__/bottomnavbar.test.tsx

@@ -0,0 +1,71 @@
+import { render, screen } from "@testing-library/react";
+import BottomNavBar from "@/components/bottomNavbar";
+import { Book, Calendar2, Home2, Money } from "iconsax-react";
+
+// Mock the icons to verify they're rendered
+jest.mock("iconsax-react", () => ({
+  Book: jest.fn(() => <div data-testid="book-icon" />),
+  Calendar2: jest.fn(() => <div data-testid="calendar-icon" />),
+  Home2: jest.fn(() => <div data-testid="home-icon" />),
+  Money: jest.fn(() => <div data-testid="money-icon" />),
+}));
+
+describe("BottomNavBar Component", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders without crashing", () => {
+    render(<BottomNavBar />);
+    expect(screen.getByRole("navigation")).toBeInTheDocument();
+  });
+
+  it("has correct styling classes", () => {
+    render(<BottomNavBar />);
+    const nav = screen.getByRole("navigation");
+
+    expect(nav).toHaveClass("fixed");
+    expect(nav).toHaveClass("bottom-8");
+    expect(nav).toHaveClass("rounded-2xl");
+    expect(nav).toHaveClass("bg-[var(--main)]");
+  });
+
+  it("renders all navigation items", () => {
+    render(<BottomNavBar />);
+
+    const listItems = screen.getAllByRole("listitem");
+    expect(listItems).toHaveLength(4);
+
+    const buttons = screen.getAllByRole("button");
+    expect(buttons).toHaveLength(4);
+  });
+
+  it("renders correct icons for each nav item", () => {
+    render(<BottomNavBar />);
+
+    expect(Home2).toHaveBeenCalled();
+    expect(Book).toHaveBeenCalled();
+    expect(Calendar2).toHaveBeenCalled();
+    expect(Money).toHaveBeenCalled();
+
+    // Verify icon props
+    const homeIconProps = (Home2 as jest.Mock).mock.calls[0][0];
+    expect(homeIconProps.size).toBe("32");
+    expect(homeIconProps.color).toBe("var(--text)");
+  });
+
+  it("has accessible buttons", () => {
+    render(<BottomNavBar />);
+
+    const buttons = screen.getAllByRole("button");
+    buttons.forEach((button) => {
+      expect(button).toHaveAttribute("type", "button");
+      expect(button).toHaveClass("focus:outline-none");
+    });
+  });
+
+  it("matches snapshot", () => {
+    const { asFragment } = render(<BottomNavBar />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

__test__/home.test.tsx

@@ -0,0 +1,63 @@
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import ResponsiveDashboard from "@/components/home/ResponsiveDashboard";
+
+describe("ResponsiveDashboard", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders without crashing", () => {
+    render(<ResponsiveDashboard />);
+    expect(screen.getByTestId("quick-actions")).toBeInTheDocument();
+    expect(screen.getByTestId("timetable-block")).toBeInTheDocument();
+  });
+
+  it("has correct layout structure", () => {
+    const { container } = render(<ResponsiveDashboard />);
+
+    // Check main container classes
+    const mainContainer = container.querySelector(".min-h-screen");
+    expect(mainContainer).toBeInTheDocument();
+
+    // Check max-width container
+    const maxWidthContainer = container.querySelector(".max-w-7xl");
+    expect(maxWidthContainer).toBeInTheDocument();
+
+    // Check flex container for md screens
+    const flexContainer = container.querySelector(".md\\:flex");
+    expect(flexContainer).toBeInTheDocument();
+  });
+
+  it("applies responsive classes correctly", () => {
+    const { container } = render(<ResponsiveDashboard />);
+
+    // Check section has responsive height classes
+    const section = container.querySelector("section");
+    expect(section).toHaveClass(
+      "h-[64vh]",
+      "sm:h-[55vh]",
+      "md:h-full",
+      "md:w-1/2",
+    );
+  });
+
+  it("renders both child components", () => {
+    render(<ResponsiveDashboard />);
+
+    // Verify both components are rendered
+    expect(screen.getByTestId("quick-actions")).toBeInTheDocument();
+    expect(screen.getByTestId("timetable-block")).toBeInTheDocument();
+  });
+
+  it("has proper semantic HTML structure", () => {
+    const { container } = render(<ResponsiveDashboard />);
+
+    // Check for semantic elements
+    const main = container.querySelector("main");
+    const section = container.querySelector("section");
+
+    expect(main).toBeInTheDocument();
+    expect(section).toBeInTheDocument();
+  });
+});