Add Ui Test

src/App.test.tsx

@@ -4,7 +4,7 @@ import App from "./App";
 import { QueryClient, QueryClientProvider } from "react-query";
 
 test("renders the App", () => {
-  const queryClient = new QueryClient(); // Initialize a new QueryClient
+  const queryClient = new QueryClient();
   render(
     <QueryClientProvider client={queryClient}>
       <App />

src/__mocks__/data/Sources.json

@@ -5,7 +5,7 @@
       "key": "val"
     },
     "description": "",
-    "name": "test-cass",
+    "name": "test-case",
     "schema": "schema321",
     "type": "io.debezium.connector.cassandra.CassandraConnector",
     "vaults": []

src/__test__/unit/moduleMocks.ts

@@ -0,0 +1,17 @@
+import { vi } from 'vitest';
+
+export const mockNavigate = vi.fn();
+
+export const setupMocks = () => {
+  vi.mock("react-router-dom", async () => {
+    const actual = await vi.importActual("react-router-dom");
+    return {
+      ...actual,
+      useNavigate: () => mockNavigate,
+    };
+  });
+
+  vi.mock("./AppContext", () => ({
+    useData: vi.fn(),
+  }));
+};

src/appLayout/AppHeader.test.tsx

@@ -0,0 +1,81 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { expect, test, vi, describe, beforeEach } from "vitest";
+import { MemoryRouter } from "react-router-dom";
+
+// Mocking modules
+vi.mock("react-router-dom", async () => {
+  const actual = await vi.importActual("react-router-dom");
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+vi.mock("./AppContext", () => ({
+  useData: vi.fn(),
+}));
+
+// Mock functions
+const mockNavigate = vi.fn();
+const mockToggleSidebar = vi.fn();
+const mockHandleNotificationBadgeClick = vi.fn();
+const mockGetNotificationBadgeVariant = vi.fn();
+const mockAddNotification = vi.fn();
+
+// Import AppHeader after mocking dependencies
+import AppHeader from "./AppHeader";
+import { useData } from "./AppContext";
+
+// Helper function to render AppHeader
+const renderAppHeader = (darkMode = false) => {
+  vi.mocked(useData).mockReturnValue({
+    navigationCollapsed: false,
+    darkMode,
+    setDarkMode: vi.fn(),
+    updateNavigationCollapsed: vi.fn(),
+  });
+
+  render(
+    <MemoryRouter initialEntries={["/"]}>
+      <AppHeader
+        toggleSidebar={mockToggleSidebar}
+        handleNotificationBadgeClick={mockHandleNotificationBadgeClick}
+        getNotificationBadgeVariant={mockGetNotificationBadgeVariant}
+        addNotification={mockAddNotification}
+      />
+    </MemoryRouter>
+  );
+};
+
+describe("AppHeader", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test("renders the AppHeader component with logo", () => {
+    renderAppHeader();
+    const logoImage = screen.getByAltText("Debezium Logo");
+    expect(logoImage).toBeInTheDocument();
+  });
+
+  test("toggles sidebar when button is clicked", () => {
+    renderAppHeader();
+    const toggleButton = screen.getByLabelText("Global navigation");
+    fireEvent.click(toggleButton);
+    expect(mockToggleSidebar).toHaveBeenCalledTimes(1);
+  });
+
+  test("handles notification badge click", () => {
+    renderAppHeader();
+    const notificationBadge = screen.getByLabelText("Notifications");
+    fireEvent.click(notificationBadge);
+    expect(mockHandleNotificationBadgeClick).toHaveBeenCalledTimes(1);
+  });
+
+  test("navigates to home page when logo is clicked", () => {
+    renderAppHeader();
+    const logoImage = screen.getByAltText("Debezium Logo");
+    fireEvent.click(logoImage);
+    expect(mockNavigate).toHaveBeenCalledWith("/");
+  });
+});

src/appLayout/AppNotification.test.tsx

@@ -0,0 +1,238 @@
+import {
+  render,
+  screen,
+  fireEvent,
+  act,
+  waitFor,
+} from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import AppNotification from "./AppNotification";
+import { NotificationProps } from "./AppNotificationContext";
+
+// Mock notifications
+const mockNotifications: NotificationProps[] = [
+  {
+    key: "1",
+    variant: "info",
+    title: "Test Notification 1",
+    srTitle: "Screen Reader Title 1",
+    description: "This is a test notification",
+    timestamp: "5 minutes ago",
+    isNotificationRead: false,
+  },
+  {
+    key: "2",
+    variant: "success",
+    title: "Test Notification 2",
+    srTitle: "Screen Reader Title 2",
+    description: "This is another test notification",
+    timestamp: "10 minutes ago",
+    isNotificationRead: true,
+  },
+];
+
+describe("AppNotification", () => {
+  const mockSetNotifications = vi.fn();
+  const mockSetDrawerExpanded = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders correctly with notifications", () => {
+    render(
+      <AppNotification
+        notifications={mockNotifications}
+        setNotifications={mockSetNotifications}
+        setDrawerExpanded={mockSetDrawerExpanded}
+      />
+    );
+
+    expect(screen.getByText("Test Notification 1")).toBeDefined();
+    expect(screen.getByText("Test Notification 2")).toBeDefined();
+    expect(screen.getByText("This is a test notification")).toBeDefined();
+    expect(screen.getByText("This is another test notification")).toBeDefined();
+  });
+
+  it("displays correct unread notification count", () => {
+    render(
+      <AppNotification
+        notifications={mockNotifications}
+        setNotifications={mockSetNotifications}
+        setDrawerExpanded={mockSetDrawerExpanded}
+      />
+    );
+
+    expect(screen.getByText("1 unread")).toBeDefined();
+  });
+
+  it("marks a notification as read when clicked", () => {
+    const setNotifications = vi.fn((updater) => {
+      const updatedNotifications = updater(mockNotifications);
+      render(
+        <AppNotification
+          notifications={updatedNotifications}
+          setNotifications={setNotifications}
+          setDrawerExpanded={mockSetDrawerExpanded}
+        />
+      );
+    });
+
+    render(
+      <AppNotification
+        notifications={mockNotifications}
+        setNotifications={setNotifications}
+        setDrawerExpanded={mockSetDrawerExpanded}
+      />
+    );
+
+    expect(screen.getByText("1 unread")).toBeDefined();
+
+    fireEvent.click(screen.getByText("Test Notification 1"));
+
+    expect(setNotifications).toHaveBeenCalled();
+    expect(screen.getByText("0 unread")).toBeDefined();
+  });
+
+  it('removes a notification when "Clear" is clicked', async () => {
+    let currentNotifications = [...mockNotifications];
+    const setNotifications = vi.fn((updater) => {
+      currentNotifications = updater(currentNotifications);
+      rerender(
+        <AppNotification
+          notifications={currentNotifications}
+          setNotifications={setNotifications}
+          setDrawerExpanded={mockSetDrawerExpanded}
+        />
+      );
+    });
+
+    const { rerender } = render(
+      <AppNotification
+        notifications={currentNotifications}
+        setNotifications={setNotifications}
+        setDrawerExpanded={mockSetDrawerExpanded}
+      />
+    );
+
+    expect(screen.getByText("Test Notification 1")).toBeInTheDocument();
+
+    // Open the dropdown for the first notification
+    await act(async () => {
+      fireEvent.click(screen.getAllByLabelText(/Notification \d+ actions/)[0]);
+    });
+
+    // Click the "Clear" option
+    await act(async () => {
+      fireEvent.click(screen.getByText("Clear"));
+    });
+
+    expect(setNotifications).toHaveBeenCalled();
+
+    // Wait for the component to update
+    await waitFor(() => {
+      expect(screen.queryByText("Test Notification 1")).not.toBeInTheDocument();
+    });
+  });
+
+  it('marks all notifications as read when "Mark all read" is clicked', async () => {
+    let currentNotifications = [...mockNotifications];
+    const setNotifications = vi.fn((updater) => {
+      currentNotifications = updater(currentNotifications);
+      rerender(
+        <AppNotification
+          notifications={currentNotifications}
+          setNotifications={setNotifications}
+          setDrawerExpanded={mockSetDrawerExpanded}
+        />
+      );
+    });
+
+    const { rerender } = render(
+      <AppNotification
+        notifications={currentNotifications}
+        setNotifications={setNotifications}
+        setDrawerExpanded={mockSetDrawerExpanded}
+      />
+    );
+
+    // Open the main dropdown
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Notification drawer actions"));
+    });
+
+    // Wait for any pending updates
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    await act(async () => {
+      fireEvent.click(screen.getByText("Mark all read"));
+    });
+
+    expect(setNotifications).toHaveBeenCalled();
+    expect(screen.getByText("0 unread")).toBeDefined();
+    expect(screen.getByText("Test Notification 1")).toBeDefined();
+    expect(screen.getByText("Test Notification 2")).toBeDefined();
+  });
+
+  it('clears all notifications when "Clear all" is clicked', async () => {
+    let currentNotifications = [...mockNotifications];
+    const setNotifications = vi.fn((newNotificationsOrUpdater) => {
+      if (typeof newNotificationsOrUpdater === "function") {
+        currentNotifications = newNotificationsOrUpdater(currentNotifications);
+      } else {
+        currentNotifications = newNotificationsOrUpdater;
+      }
+      rerender(
+        <AppNotification
+          notifications={currentNotifications}
+          setNotifications={setNotifications}
+          setDrawerExpanded={mockSetDrawerExpanded}
+        />
+      );
+    });
+
+    const { rerender } = render(
+      <AppNotification
+        notifications={currentNotifications}
+        setNotifications={setNotifications}
+        setDrawerExpanded={mockSetDrawerExpanded}
+      />
+    );
+
+    expect(screen.getByText("1 unread")).toBeDefined();
+
+    await act(async () => {
+      fireEvent.click(screen.getByLabelText("Notification drawer actions"));
+    });
+
+    await act(async () => {
+      fireEvent.click(screen.getByText("Clear all"));
+    });
+
+    expect(setNotifications).toHaveBeenCalled();
+    await waitFor(() => {
+      expect(screen.getByText("0 unread")).toBeDefined();
+      expect(screen.getByText("No notifications found")).toBeDefined();
+      expect(
+        screen.getByText("There are currently no notifications.")
+      ).toBeDefined();
+    });
+  });
+
+  it("renders empty state when there are no notifications", () => {
+    render(
+      <AppNotification
+        notifications={[]}
+        setNotifications={mockSetNotifications}
+        setDrawerExpanded={mockSetDrawerExpanded}
+      />
+    );
+
+    expect(screen.getByText("No notifications found")).toBeDefined();
+    expect(
+      screen.getByText("There are currently no notifications.")
+    ).toBeDefined();
+  });
+});