A small portion of newly added unit testing code

3 files changed, 76 insertions, 0 deletions

diff --git a/src/components/ui/button.test.tsx b/src/components/ui/button.test.tsx
index f8bd3a9..a15e0a0 100644
--- a/src/components/ui/button.test.tsx
+++ b/src/components/ui/button.test.tsx
@@ -66,4 +66,40 @@ describe('Button', () => {
     expect(link).toBeInTheDocument();
     expect(link.tagName).toBe('A');
   });
+
+  // Test custom className merging
+    test('merges custom className correctly', () => {
+      render(<Button className="my-custom-test-class">Custom Class</Button>);
+      const button = screen.getByText('Custom Class');
+
+      // It should have the newly added class
+      expect(button).toHaveClass('my-custom-test-class');
+      // It should also retain the base classes defined in cva
+      expect(button).toHaveClass('inline-flex', 'items-center');
+    });
+
+  // Test native HTML props forwarding
+    test('passes native HTML attributes correctly', () => {
+      render(
+        <Button type="submit" aria-label="Submit Form" data-testid="submit-btn">
+          Submit
+        </Button>
+      );
+      const button = screen.getByTestId('submit-btn');
+
+      expect(button).toHaveAttribute('type', 'submit');
+      expect(button).toHaveAttribute('aria-label', 'Submit Form');
+    });
+
+  // Optimized: Test buttons with different variants by checking classes
+    test('applies specific classes for different variants', () => {
+      render(<Button variant="destructive">Destructive</Button>);
+      const destructiveButton = screen.getByText('Destructive');
+      // Verify that the specific Tailwind class from cva is applied
+      expect(destructiveButton).toHaveClass('bg-destructive', 'text-white');
+
+      render(<Button variant="outline">Outline</Button>);
+      const outlineButton = screen.getByText('Outline');
+      expect(outlineButton).toHaveClass('border', 'bg-background');
+    });
 });
diff --git a/src/components/ui/card.test.tsx b/src/components/ui/card.test.tsx
index aba3d00..0c29c5d 100644
--- a/src/components/ui/card.test.tsx
+++ b/src/components/ui/card.test.tsx
@@ -36,5 +36,29 @@ describe('Card', () => {
     expect(screen.getByText('Content')).toHaveAttribute('data-slot', 'card-content');
     expect(screen.getByText('Footer')).toHaveAttribute('data-slot', 'card-footer');
   });
+
+  test('appends custom class names correctly', () => {
+    render(
+      <Card className="my-custom-card-class">
+        <CardContent className="my-custom-content-class">Content</CardContent>
+      </Card>
+    );
+
+    const cardElement = screen.getByText('Content').parentElement; // 或者直接给 Card 加个 data-testid
+    expect(cardElement).toHaveClass('my-custom-card-class');
+    expect(screen.getByText('Content')).toHaveClass('my-custom-content-class');
+  });
+
+  test('passes standard HTML attributes to the DOM node', () => {
+    render(
+      <Card id="test-card" aria-label="Test Card">
+        <CardContent data-testid="content-id">Content</CardContent>
+      </Card>
+    );
+
+    const cardElement = screen.getByLabelText('Test Card');
+    expect(cardElement).toHaveAttribute('id', 'test-card');
+    expect(screen.getByTestId('content-id')).toBeInTheDocument();
+  });
 });
 
diff --git a/src/components/ui/input.test.tsx b/src/components/ui/input.test.tsx
index aabe76f..036352b 100644
--- a/src/components/ui/input.test.tsx
+++ b/src/components/ui/input.test.tsx
@@ -1,6 +1,8 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, test } from 'vitest';
 import { Input } from './input';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
 
 describe('Input', () => {
   test('renders an input with the expected slot attribute', () => {
@@ -18,5 +20,19 @@ describe('Input', () => {
     expect(input).toHaveAttribute('type', 'password');
     expect(input).toBeDisabled();
   });
+
+  test('handles user typing and triggers onChange event', async () => {
+    const user = userEvent.setup();
+    const handleChange = vi.fn();
+
+    render(<Input aria-label="Username" onChange={handleChange} />);
+    const input = screen.getByLabelText('Username');
+
+    await user.type(input, 'hello world');
+
+    expect(input).toHaveValue('hello world');
+    expect(handleChange).toHaveBeenCalled();
+    expect(handleChange).toHaveBeenCalledTimes(11);
+  });
 });