test: add App tests

Author: peppescg

src/App.test.tsx

@@ -0,0 +1,69 @@
+import { render } from "@/lib/test-utils";
+import { screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import App from "./App";
+import React from "react";
+
+vi.mock("recharts", async (importOriginal) => {
+  const originalModule = (await importOriginal()) as Record<string, unknown>;
+  return {
+    ...originalModule,
+    ResponsiveContainer: ({ children }: { children: React.ReactNode }) => {
+      return <div data-testid="mock-responsive-container">{children}</div>;
+    },
+  };
+});
+
+describe("App", () => {
+  it("should render header", async () => {
+    render(<App />);
+    expect(screen.getByText(/toggle sidebar/i)).toBeVisible();
+    expect(screen.getByText("Certificates")).toBeVisible();
+    expect(screen.getByText("Help")).toBeVisible();
+    expect(screen.getByRole("banner")).toBeVisible();
+    expect(
+      screen.getByRole("heading", { name: /codeGate dashboard/i }),
+    ).toBeVisible();
+    expect(
+      screen.getByRole("link", {
+        name: /certificate security/i,
+      }),
+    ).toBeVisible();
+    expect(
+      screen.getByRole("link", {
+        name: /continue setup/i,
+      }),
+    ).toBeVisible();
+
+    expect(
+      screen.getByRole("link", {
+        name: /copilot setup/i,
+      }),
+    ).toBeVisible();
+    expect(
+      screen.getByRole("link", {
+        name: /download/i,
+      }),
+    ).toBeVisible();
+    expect(
+      screen.getByRole("link", {
+        name: /documentation/i,
+      }),
+    ).toBeVisible();
+    await waitFor(() =>
+      expect(
+        screen.getByRole("link", { name: /codeGate dashboard/i }),
+      ).toBeVisible(),
+    );
+  });
+
+  it("should render breadcrumb", async () => {
+    render(<App />);
+    await waitFor(() =>
+      expect(
+        screen.getByRole("link", { name: /codeGate dashboard/i }),
+      ).toBeVisible(),
+    );
+    expect(screen.getByRole("link", { name: "Dashboard" })).toBeVisible();
+  });
+});

src/components/Header.tsx

@@ -4,7 +4,7 @@ import { Separator } from "./ui/separator";
 
 export function Header() {
   return (
-    <div className="flex-shrink-0 h-16 px-3 items-center flex w-full bg-teal-25 opacity-1 border-b-blue-200 border-b">
+    <header className="flex-shrink-0 h-16 px-3 items-center flex w-full bg-teal-25 opacity-1 border-b-blue-200 border-b">
       <div className="flex items-center flex-1">
         <SidebarTrigger />
         <Separator orientation="vertical" className="h-8 mx-3" />
@@ -72,6 +72,6 @@ export function Header() {
           </div>
         </div>
       </div>
-    </div>
+    </header>
   );
 }

src/lib/test-utils.tsx

@@ -1,3 +1,4 @@
+import { SidebarProvider } from "@/components/ui/sidebar";
 import { RenderOptions, render } from "@testing-library/react";
 import React from "react";
 import {
@@ -19,7 +20,10 @@ const renderWithProviders = (
   render(
     <MemoryRouter {...options?.routeConfig}>
       <Routes>
-        <Route path={options?.pathConfig ?? "/"} element={children} />
+        <Route
+          path={options?.pathConfig ?? "*"}
+          element={<SidebarProvider>{children}</SidebarProvider>}
+        />
       </Routes>
     </MemoryRouter>,
   );

vitest.config.ts

@@ -40,6 +40,7 @@ export default defineConfig({
         "test?(-*).?(c|m)[jt]s?(x)",
         "**/*{.,-}{test,spec}?(-d).?(c|m)[jt]s?(x)",
         "**/__tests__/**",
+        "**/test-utils.tsx",
         "**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*",
         "**/vitest.{workspace,projects}.[jt]s?(on)",
         "**/.{eslint,mocha,prettier}rc.{?(c|m)js,yml}",

vitest.setup.ts

@@ -5,6 +5,20 @@ import { cleanup } from "@testing-library/react";
 import { afterEach, expect, beforeAll, afterAll, vi } from "vitest";
 import failOnConsole from "vitest-fail-on-console";
 
+class MockEventSource {
+  onmessage: ((event: MessageEvent) => void) | null = null;
+
+  constructor() {}
+
+  close() {}
+
+  triggerMessage(data: string) {
+    if (this.onmessage) {
+      this.onmessage({ data } as MessageEvent);
+    }
+  }
+}
+
 expect.extend(testingLibraryMatchers);
 
 afterEach(() => {
@@ -16,6 +30,17 @@ beforeAll(() => {
     onUnhandledRequest: "error",
   });
 
+  global.window.matchMedia = vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  }));
+
+  global.EventSource = MockEventSource as unknown as typeof EventSource;
+
   global.ResizeObserver = class ResizeObserver {
     disconnect() {
       // do nothing