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>

4 files changed, 95 insertions, 2 deletions

diff --git a/package.json b/package.json
index a3bb1cb..d3155a3 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,10 @@
     "payload:migrate:create": "payload migrate:create",
     "email:build": "email build",
     "email:dev": "email dev -p 3001",
-    "email:export": "email export"
+    "email:export": "email export",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@fuma-comment/react": "^1.2.1",
@@ -88,21 +91,28 @@
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@tailwindcss/postcss": "4.1.18",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/mdx": "2.0.13",
     "@types/node": "22.13.1",
     "@types/pg": "^8.16.0",
     "@types/react": "19.0.8",
     "@types/react-dom": "19.0.3",
     "@types/rss": "^0.0.32",
+    "@vitejs/plugin-react": "^4.2.1",
     "drizzle-kit": "^0.30.6",
     "fast-glob": "^3.3.3",
     "gray-matter": "^4.0.3",
+    "jsdom": "^20.0.0",
     "next-validate-link": "^1.5.2",
     "postcss": "8.5.1",
     "react-email": "^4.0.2",
     "tailwindcss": "4.1.18",
     "tsx": "^4.19.3",
-    "typescript": "5.7.3"
+    "typescript": "5.7.3",
+    "vitest": "^3.0.0",
+    "@vitest/coverage-v8": "^3.0.0"
   },
   "ct3aMetadata": {
     "initVersion": "7.39.0"
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');
+  });
+});
diff --git a/src/test/setup.ts b/src/test/setup.ts
new file mode 100644
index 0000000..bb02c60
--- /dev/null
+++ b/src/test/setup.ts
@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..ec36e8c
--- /dev/null
+++ b/vite.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',
+    setupFiles: './src/test/setup.ts',
+    include: ['**/*.test.tsx', '**/*.test.ts'],
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});