Add frontend unit tests

- Set up Vitest with React Testing Library
- Add comprehensive tests for Button and ListPane components
- Configure TypeScript for test environment
- Add test type declarations

Co-Authored-By: ashwin@anthropic.com <ashwin@anthropic.com>

client/src/components/ListPane.test.tsx

@@ -0,0 +1,54 @@
+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 {}