From 807837a5107cf9b40205c7cf92fffcfae2a0a7cb Mon Sep 17 00:00:00 2001
From: Mikkel Georgsen <msgeorgsen@gmail.com>
Date: Wed, 1 Apr 2026 02:39:21 +0200
Subject: [PATCH] test(10-02): add SkillBrowser SSR smoke tests

- 4 node-environment tests using renderToStaticMarkup
- Verifies page title, search input, refresh button, and tab labels render
- Mocks react-query, router, context providers for SSR compatibility
---
 ui/src/pages/SkillBrowser.test.tsx | 63 ++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 ui/src/pages/SkillBrowser.test.tsx

diff --git a/ui/src/pages/SkillBrowser.test.tsx b/ui/src/pages/SkillBrowser.test.tsx
new file mode 100644
index 00000000..675d61b7
--- /dev/null
+++ b/ui/src/pages/SkillBrowser.test.tsx
@@ -0,0 +1,63 @@
+// @vitest-environment node
+
+import { describe, expect, it, vi } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+
+// Mock all external dependencies for SSR
+vi.mock("react-router-dom", () => ({
+  Link: ({ to, children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement> & { to: string; children?: React.ReactNode }) => <a href={to} {...props}>{children}</a>,
+  useNavigate: () => () => {},
+}));
+
+vi.mock("@/lib/router", () => ({
+  Link: ({ to, children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement> & { to: string; children?: React.ReactNode }) => <a href={to} {...props}>{children}</a>,
+  useNavigate: () => () => {},
+}));
+
+vi.mock("@tanstack/react-query", () => ({
+  useQuery: () => ({ data: [], isLoading: false, isError: false }),
+  useQueryClient: () => ({ invalidateQueries: () => {} }),
+  useMutation: () => ({ mutate: () => {}, isPending: false }),
+}));
+
+vi.mock("@/context/BreadcrumbContext", () => ({
+  useBreadcrumbs: () => ({ setBreadcrumbs: () => {} }),
+}));
+
+vi.mock("@/context/CompanyContext", () => ({
+  useCompany: () => ({ selectedCompany: { id: "test", name: "Test Workspace", slug: "TST" } }),
+}));
+
+vi.mock("@/context/ToastContext", () => ({
+  useToast: () => ({ pushToast: () => {} }),
+}));
+
+vi.mock("@/context/SidebarContext", () => ({
+  useSidebar: () => ({ isMobile: false }),
+}));
+
+import { SkillBrowser } from "./SkillBrowser";
+
+describe("SkillBrowser", () => {
+  it("renders page title", () => {
+    const html = renderToStaticMarkup(<SkillBrowser />);
+    expect(html).toContain("Skills");
+  });
+
+  it("renders Browse tab content", () => {
+    const html = renderToStaticMarkup(<SkillBrowser />);
+    expect(html).toContain("Search skills");
+  });
+
+  it("renders Refresh registry button", () => {
+    const html = renderToStaticMarkup(<SkillBrowser />);
+    expect(html).toContain("Refresh registry");
+  });
+
+  it("renders tab labels", () => {
+    const html = renderToStaticMarkup(<SkillBrowser />);
+    expect(html).toContain("Browse");
+    expect(html).toContain("Installed");
+    expect(html).toContain("Trending");
+  });
+});