test: add React test files and update vitest setup

Author: jsboige

webview-ui/src/test-react-context.spec.tsx

@@ -0,0 +1,137 @@
+import { describe, it, expect, beforeEach, vi } from "vitest"
+import { render, screen, fireEvent, waitFor } from "@testing-library/react"
+import { renderHook } from "@testing-library/react"
+import { ReactNode } from "react"
+import React from "react"
+
+// Mock des composants VSCode
+vi.mock("@vscode/webview-ui-toolkit/react", () => ({
+	VSCodeDropdown: ({ children, ...props }: any) => (
+		<select data-testid="vscode-dropdown" {...props}>
+			{children}
+		</select>
+	),
+	VSCodeOption: ({ children, ...props }: any) => (
+		<option data-testid="vscode-option" {...props}>
+			{children}
+		</option>
+	),
+	VSCodeButton: ({ children, onClick, ...props }: any) => (
+		<button data-testid="vscode-button" onClick={onClick} {...props}>
+			{children}
+		</button>
+	),
+	VSCodeTextArea: ({ value, onChange, ...props }: any) => (
+		<textarea data-testid="vscode-textarea" value={value} onChange={(e) => onChange(e.target.value)} {...props} />
+	),
+	VSCodeCheckbox: ({ checked, onChange, ...props }: any) => (
+		<input
+			type="checkbox"
+			data-testid="vscode-checkbox"
+			checked={checked}
+			onChange={(e) => onChange(e.target.checked)}
+			{...props}
+		/>
+	),
+	useVSCodeState: vi.fn(() => [{}, vi.fn()]),
+}))
+
+// Provider de test pour le contexte
+const TestProvider = ({ children }: { children: ReactNode }) => {
+	return <div data-testid="test-provider">{children}</div>
+}
+
+describe("React Context and Component Testing", () => {
+	beforeEach(() => {
+		vi.clearAllMocks()
+	})
+
+	it("should render components with proper context initialization", () => {
+		const TestComponent = () => (
+			<TestProvider>
+				<div data-testid="test-content">Test Content</div>
+			</TestProvider>
+		)
+
+		render(<TestComponent />)
+
+		expect(screen.getByTestId("test-provider")).toBeInTheDocument()
+		expect(screen.getByTestId("test-content")).toBeInTheDocument()
+		expect(screen.getByText("Test Content")).toBeInTheDocument()
+	})
+
+	it("should handle VSCode component interactions", async () => {
+		const mockOnClick = vi.fn()
+		const mockOnChange = vi.fn()
+
+		// Importer les composants mockés
+		const { VSCodeButton, VSCodeTextArea, VSCodeCheckbox } = await import("@vscode/webview-ui-toolkit/react")
+
+		const TestComponent = () => (
+			<div>
+				<VSCodeButton onClick={mockOnClick}>Click me</VSCodeButton>
+				<VSCodeTextArea value="test" onChange={mockOnChange} />
+				<VSCodeCheckbox checked={false} onChange={mockOnChange} />
+			</div>
+		)
+
+		render(<TestComponent />)
+
+		// Test button click
+		const button = screen.getByTestId("vscode-button")
+		fireEvent.click(button)
+		expect(mockOnClick).toHaveBeenCalled()
+
+		// Test textarea change
+		const textarea = screen.getByTestId("vscode-textarea")
+		fireEvent.change(textarea, { target: { value: "new value" } })
+		expect(mockOnChange).toHaveBeenCalledWith("new value")
+
+		// Test checkbox change
+		const checkbox = screen.getByTestId("vscode-checkbox")
+		fireEvent.click(checkbox)
+		expect(mockOnChange).toHaveBeenCalledWith(true)
+	})
+
+	it("should handle async operations and state updates", async () => {
+		const mockAsyncFn = vi.fn().mockResolvedValue("async result")
+
+		const TestComponent = () => {
+			const [data, setData] = React.useState<string>("")
+
+			React.useEffect(() => {
+				mockAsyncFn().then(setData)
+			}, [])
+
+			return <div data-testid="async-result">{data}</div>
+		}
+
+		render(<TestComponent />)
+
+		// Wait for async operation
+		await waitFor(() => {
+			expect(screen.getByTestId("async-result")).toHaveTextContent("async result")
+		})
+
+		expect(mockAsyncFn).toHaveBeenCalled()
+	})
+
+	it("should test custom hooks with renderHook", () => {
+		const useCustomHook = (initialValue: string) => {
+			const [value, setValue] = React.useState(initialValue)
+			const updateValue = React.useCallback((newValue: string) => {
+				setValue(newValue.toUpperCase())
+			}, [])
+
+			return { value, setValue: updateValue }
+		}
+
+		const { result } = renderHook(() => useCustomHook("test"))
+
+		expect(result.current.value).toBe("test")
+
+		// Test the callback
+		result.current.setValue("new test")
+		expect(result.current.value).toBe("NEW TEST")
+	})
+})

webview-ui/src/test-snapshot.spec.tsx

@@ -0,0 +1,67 @@
+import { describe, it, expect, vi, beforeAll } from "vitest"
+import { render } from "@testing-library/react"
+import React from "react"
+
+// Mock des composants VSCode
+vi.mock("@vscode/webview-ui-toolkit/react", () => ({
+	VSCodeButton: ({ children, ...props }: any) => (
+		<button data-testid="vscode-button" {...props}>
+			{children}
+		</button>
+	),
+}))
+
+describe("Snapshot Tests", () => {
+	beforeAll(() => {
+		// Initialize snapshot environment
+		console.log("Initializing snapshot tests...")
+	})
+	it("should match snapshot for basic component", () => {
+		const TestComponent = () => (
+			<div data-testid="test-component">
+				<h1>Test Title</h1>
+				<p>Test Content</p>
+			</div>
+		)
+
+		const { container } = render(<TestComponent />)
+
+		expect(container.firstChild).toMatchSnapshot()
+	})
+
+	it("should match snapshot for VSCode component", () => {
+		const TestComponent = () => <div data-testid="vscode-button-test">Snapshot Test</div>
+
+		const { container } = render(<TestComponent />)
+
+		expect(container.firstChild).toMatchSnapshot()
+	})
+
+	it("should match snapshot for complex component structure", () => {
+		const TestComponent = () => (
+			<div data-testid="complex-component">
+				<header>
+					<nav>
+						<ul>
+							<li>Item 1</li>
+							<li>Item 2</li>
+						</ul>
+					</nav>
+				</header>
+				<main>
+					<section>
+						<h2>Section Title</h2>
+						<div>
+							<p>Section content</p>
+							<button>Action</button>
+						</div>
+					</section>
+				</main>
+			</div>
+		)
+
+		const { container } = render(<TestComponent />)
+
+		expect(container.firstChild).toMatchSnapshot()
+	})
+})

webview-ui/vitest.setup.ts

@@ -5,6 +5,9 @@ import "@testing-library/jest-dom/vitest"
 // Configure snapshot serialization for better test stability
 import { expect } from "vitest"
 
+// Initialize snapshot client for Vitest 4.x
+// Note: SnapshotClient doesn't exist in Vitest 4.x, using alternative approach
+
 // Custom snapshot serializer for React components
 expect.addSnapshotSerializer({
 	test: (val) => val && typeof val === "object" && val.$$typeof === Symbol.for("react.element"),