Add frontend unit tests for Button and ListPane components

client/package.json

@@ -18,7 +18,8 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run"
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.0.3",
@@ -40,6 +41,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@types/node": "^22.7.5",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
@@ -50,10 +53,12 @@
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",
     "globals": "^15.9.0",
+    "jsdom": "^26.0.0",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.13",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.7.0",
-    "vite": "^5.4.8"
+    "vite": "^5.4.8",
+    "vitest": "^3.0.0"
   }
 }

client/src/components/ListPane.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import ListPane from "./ListPane";
+import { describe, it, expect, vi } from "vitest";
+
+describe("ListPane", () => {
+  const defaultProps = {
+    items: [
+      { id: 1, name: "Item 1" },
+      { id: 2, name: "Item 2" },
+    ],
+    listItems: vi.fn(),
+    clearItems: vi.fn(),
+    setSelectedItem: vi.fn(),
+    renderItem: (item: { name: string }) => <span>{item.name}</span>,
+    title: "Test List",
+    buttonText: "List Items",
+  };
+
+  it("renders title correctly", () => {
+    render(<ListPane {...defaultProps} />);
+    expect(screen.getByText("Test List")).toBeInTheDocument();
+  });
+
+  it("renders list items using renderItem prop", () => {
+    render(<ListPane {...defaultProps} />);
+    expect(screen.getByText("Item 1")).toBeInTheDocument();
+    expect(screen.getByText("Item 2")).toBeInTheDocument();
+  });
+
+  it("calls listItems when List Items button is clicked", () => {
+    render(<ListPane {...defaultProps} />);
+    fireEvent.click(screen.getByText("List Items"));
+    expect(defaultProps.listItems).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls clearItems when Clear button is clicked", () => {
+    render(<ListPane {...defaultProps} />);
+    fireEvent.click(screen.getByText("Clear"));
+    expect(defaultProps.clearItems).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls setSelectedItem when an item is clicked", () => {
+    render(<ListPane {...defaultProps} />);
+    fireEvent.click(screen.getByText("Item 1"));
+    expect(defaultProps.setSelectedItem).toHaveBeenCalledWith(
+      defaultProps.items[0],
+    );
+  });
+
+  it("disables Clear button when items array is empty", () => {
+    render(<ListPane {...defaultProps} items={[]} />);
+    expect(screen.getByText("Clear")).toBeDisabled();
+  });
+
+  it("respects isButtonDisabled prop for List Items button", () => {
+    render(<ListPane {...defaultProps} isButtonDisabled={true} />);
+    expect(screen.getByText("List Items")).toBeDisabled();
+  });
+});

client/src/components/ui/Button.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Button } from "./button";
+import { describe, it, expect, vi } from "vitest";
+import { createRef } from "react";
+
+describe("Button", () => {
+  it("renders children correctly", () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByText("Click me")).toBeInTheDocument();
+  });
+
+  it("handles click events", () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click me</Button>);
+    fireEvent.click(screen.getByText("Click me"));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("applies different variants correctly", () => {
+    const { rerender } = render(<Button variant="default">Default</Button>);
+    expect(screen.getByText("Default")).toHaveClass("bg-primary");
+
+    rerender(<Button variant="outline">Outline</Button>);
+    expect(screen.getByText("Outline")).toHaveClass("border-input");
+
+    rerender(<Button variant="secondary">Secondary</Button>);
+    expect(screen.getByText("Secondary")).toHaveClass("bg-secondary");
+  });
+
+  it("applies different sizes correctly", () => {
+    const { rerender } = render(<Button size="default">Default</Button>);
+    expect(screen.getByText("Default")).toHaveClass("h-9");
+
+    rerender(<Button size="sm">Small</Button>);
+    expect(screen.getByText("Small")).toHaveClass("h-8");
+
+    rerender(<Button size="lg">Large</Button>);
+    expect(screen.getByText("Large")).toHaveClass("h-10");
+  });
+
+  it("forwards ref correctly", () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(<Button ref={ref}>Button with ref</Button>);
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it("renders as a different element when asChild is true", () => {
+    render(
+      <Button asChild>
+        <a href="#">Link Button</a>
+      </Button>,
+    );
+    expect(screen.getByText("Link Button").tagName).toBe("A");
+  });
+});

client/src/test.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vitest/globals" />
+/// <reference types="@testing-library/jest-dom" />
+
+import "@testing-library/jest-dom";
+
+declare global {
+  namespace Vi {
+    interface JestAssertion<T = any> extends jest.Matchers<void, T> {}
+  }
+}
+
+export {};

client/test/setupTests.ts

@@ -0,0 +1,6 @@
+/// <reference types="vitest/globals" />
+/// <reference types="@testing-library/jest-dom" />
+import "@testing-library/jest-dom/vitest";
+
+// Add any additional test setup, custom matchers, or global mocks here
+// This file runs before each test file

client/tsconfig.app.json

@@ -4,6 +4,7 @@
     "paths": {
       "@/*": ["./src/*"]
     },
+    "types": ["vitest/globals", "@testing-library/jest-dom"],
 
     "target": "ES2020",
     "useDefineForClassFields": true,
@@ -26,5 +27,5 @@
     "noFallthroughCasesInSwitch": true,
     "resolveJsonModule": true
   },
-  "include": ["src"]
+  "include": ["src", "test"]
 }

client/tsconfig.json

@@ -2,7 +2,8 @@
   "files": [],
   "references": [
     { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
+    { "path": "./tsconfig.node.json" },
+    { "path": "./tsconfig.test.json" }
   ],
   "compilerOptions": {
     "baseUrl": ".",

client/tsconfig.test.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "types": ["vitest/globals", "@testing-library/jest-dom"]
+  },
+  "include": ["src/**/*.test.tsx", "src/**/*.test.ts", "test/**/*.ts"]
+}

client/vitest.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import path from "path";
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: "jsdom",
+    globals: true,
+    setupFiles: ["./test/setupTests.ts"],
+    typecheck: {
+      tsconfig: "./tsconfig.test.json",
+    },
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});