file-starter/src/client/__integration_tests__/components/Button.integration.test.tsx

import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { TestWrapper } from '../../__test_utils__/test-render';

// 假设有一个简单的Button组件
function Button({ onClick, children }: { onClick: () => void; children: React.ReactNode }) {
  return (
    <button
      onClick={onClick}
      className="bg-blue-500 text-white px-4 py-2 rounded"
      data-testid="test-button"
    >
      {children}
    </button>
  );
}

describe('Button Component Integration Tests', () => {
  it('应该渲染按钮并显示正确的文本', () => {
    render(
      <TestWrapper>
        <Button onClick={() => {}}>Click Me</Button>
      </TestWrapper>
    );

    const button = screen.getByTestId('test-button');
    expect(button).toBeInTheDocument();
    expect(button).toHaveTextContent('Click Me');
  });

  it('应该在点击时调用onClick处理函数', async () => {
    const user = userEvent.setup();
    const handleClick = vi.fn();

    render(
      <TestWrapper>
        <Button onClick={handleClick}>Click Me</Button>
      </TestWrapper>
    );

    const button = screen.getByTestId('test-button');
    await user.click(button);

    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  it('应该具有正确的样式类', () => {
    render(
      <TestWrapper>
        <Button onClick={() => {}}>Click Me</Button>
      </TestWrapper>
    );

    const button = screen.getByTestId('test-button');
    expect(button).toHaveClass('bg-blue-500');
    expect(button).toHaveClass('text-white');
    expect(button).toHaveClass('px-4');
    expect(button).toHaveClass('py-2');
    expect(button).toHaveClass('rounded');
  });
});