Add Vitest testing setup and Button component tests (#11)

* Add Vitest testing setup and Button component tests

- Install Vitest and related dependencies
- Configure Vitest with React support
- Create Button component test cases
- Add test scripts to package.json
- Create TESTING.md documentation
- Update test comments to English for consistency

* Update package.json

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Bertrand Yuan <yuanweijie1456@outlook.com>

* Update package.json

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Bertrand Yuan <yuanweijie1456@outlook.com>

* remove TESTING.md for the moment

There are many parts not matched with current content.

Signed-off-by: Bertrand Yuan <me@bertyuan.com>

---------

Signed-off-by: Bertrand Yuan <yuanweijie1456@outlook.com>
Signed-off-by: Bertrand Yuan <me@bertyuan.com>
Co-authored-by: Bertrand Yuan <me@bertyuan.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Bertrand Yuan <bert.yuan@outlook.com>

1 files changed, 62 insertions, 0 deletions

diff --git a/src/components/ui/button.test.tsx b/src/components/ui/button.test.tsx
new file mode 100644
index 0000000..314e9bf
--- /dev/null
+++ b/src/components/ui/button.test.tsx
@@ -0,0 +1,62 @@
+import { describe, test, vi, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { Button } from './button';
+
+// Test Button component rendering
+describe('Button', () => {
+  // Test default button rendering
+  test('renders default button with text', () => {
+    render(<Button>Click Me</Button>);
+    const button = screen.getByText('Click Me');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute('data-slot', 'button');
+  });
+
+  // Test buttons with different variants
+  test('renders button with different variants', () => {
+    const variants = ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'];
+    variants.forEach((variant) => {
+      render(<Button variant={variant as any}>{variant} Variant</Button>);
+      const button = screen.getByText(`${variant} Variant`);
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  // Test buttons with different sizes
+  test('renders button with different sizes', () => {
+    const sizes = ['default', 'sm', 'lg', 'icon'];
+    sizes.forEach((size) => {
+      render(<Button size={size as any}>{size} Size</Button>);
+      const button = screen.getByText(`${size} Size`);
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  // Test button click events
+  test('handles click events', () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click Test</Button>);
+    const button = screen.getByText('Click Test');
+    button.click();
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  // Test disabled state
+  test('renders disabled button', () => {
+    render(<Button disabled>Disabled Button</Button>);
+    const button = screen.getByText('Disabled Button');
+    expect(button).toBeDisabled();
+  });
+
+  // Test asChild property
+  test('renders as a link when asChild is true', () => {
+    render(
+      <Button asChild>
+        <a href="#">As Child Link</a>
+      </Button>
+    );
+    const link = screen.getByText('As Child Link');
+    expect(link).toBeInTheDocument();
+    expect(link.tagName).toBe('A');
+  });
+});