// 나쁜 테스트: implementation detail을 검증
test('버튼 클릭 시 setCount가 호출된다', () => {
  const setCount = jest.fn();
  jest.spyOn(React, 'useState').mockReturnValue([0, setCount]);
  render(<Counter />);
  fireEvent.click(screen.getByRole('button'));
  expect(setCount).toHaveBeenCalledWith(1);
});

// 좋은 테스트: 유저가 보는 결과를 검증
test('버튼 클릭 시 카운트가 증가한다', () => {
  render(<Counter />);
  fireEvent.click(screen.getByRole('button'));
  expect(screen.getByText('1')).toBeInTheDocument();
});

// 피해야 할 쿼리
const button = container.querySelector('.submit-btn');
const input = screen.getByTestId('email-input');

// 권장하는 쿼리
const button = screen.getByRole('button', { name: '로그인' });
const input = screen.getByRole('textbox', { name: '이메일' });

// LoginForm.tsx
export function LoginForm({ onSuccess }: { onSuccess: () => void }) {
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const email = formData.get('email') as string;
    const password = formData.get('password') as string;

    setIsLoading(true);
    setError('');

    try {
      const res = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password }),
      });

      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.message || '로그인에 실패했습니다');
      }

      onSuccess();
    } catch (err) {
      setError(err instanceof Error ? err.message : '알 수 없는 오류가 발생했습니다');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">이메일</label>
      <input id="email" name="email" type="email" required />

      <label htmlFor="password">비밀번호</label>
      <input id="password" name="password" type="password" required />

      {error && <p role="alert">{error}</p>}

      <button type="submit" disabled={isLoading}>
        {isLoading ? '로그인 중...' : '로그인'}
      </button>
    </form>
  );
}

// LoginForm.test.tsx
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { LoginForm } from './LoginForm';
import { server } from './mocks/server';
import { http, HttpResponse } from 'msw';

const mockOnSuccess = jest.fn();

beforeEach(() => {
  mockOnSuccess.mockClear();
});

test('이메일과 비밀번호를 입력하고 제출하면 로그인에 성공한다', async () => {
  const user = userEvent.setup();

  server.use(
    http.post('/api/login', () => {
      return HttpResponse.json({ token: 'fake-token' });
    })
  );

  render(<LoginForm onSuccess={mockOnSuccess} />);

  await user.type(screen.getByRole('textbox', { name: '이메일' }), 'test@example.com');
  await user.type(screen.getByLabelText('비밀번호'), 'password123');
  await user.click(screen.getByRole('button', { name: '로그인' }));

  await waitFor(() => {
    expect(mockOnSuccess).toHaveBeenCalledTimes(1);
  });
});

test('잘못된 인증 정보로 로그인하면 에러 메시지가 표시된다', async () => {
  const user = userEvent.setup();

  server.use(
    http.post('/api/login', () => {
      return HttpResponse.json(
        { message: '이메일 또는 비밀번호가 올바르지 않습니다' },
        { status: 401 }
      );
    })
  );

  render(<LoginForm onSuccess={mockOnSuccess} />);

  await user.type(screen.getByRole('textbox', { name: '이메일' }), 'wrong@example.com');
  await user.type(screen.getByLabelText('비밀번호'), 'wrongpassword');
  await user.click(screen.getByRole('button', { name: '로그인' }));

  const alert = await screen.findByRole('alert');
  expect(alert).toHaveTextContent('이메일 또는 비밀번호가 올바르지 않습니다');
  expect(mockOnSuccess).not.toHaveBeenCalled();
});

test('제출 중에는 버튼이 비활성화되고 로딩 텍스트가 표시된다', async () => {
  const user = userEvent.setup();

  server.use(
    http.post('/api/login', async () => {
      await new Promise((resolve) => setTimeout(resolve, 100));
      return HttpResponse.json({ token: 'fake-token' });
    })
  );

  render(<LoginForm onSuccess={mockOnSuccess} />);

  await user.type(screen.getByRole('textbox', { name: '이메일' }), 'test@example.com');
  await user.type(screen.getByLabelText('비밀번호'), 'password123');
  await user.click(screen.getByRole('button', { name: '로그인' }));

  expect(screen.getByRole('button', { name: '로그인 중...' })).toBeDisabled();

  await waitFor(() => {
    expect(screen.getByRole('button', { name: '로그인' })).toBeEnabled();
  });
});

// mocks/handlers.ts
import { http, HttpResponse } from 'msw';

export const handlers = [
  http.get('/api/user', () => {
    return HttpResponse.json({
      id: 1,
      name: '조상현',
      email: 'test@example.com',
    });
  }),

  http.get('/api/products', ({ request }) => {
    const url = new URL(request.url);
    const category = url.searchParams.get('category');

    const products = [
      { id: 1, name: '상품 A', category: 'electronics' },
      { id: 2, name: '상품 B', category: 'clothing' },
    ];

    const filtered = category
      ? products.filter((p) => p.category === category)
      : products;

    return HttpResponse.json(filtered);
  }),
];

// mocks/server.ts
import { setupServer } from 'msw/node';
import { handlers } from './handlers';

export const server = setupServer(...handlers);

// jest.setup.ts 또는 vitest.setup.ts
import { server } from './mocks/server';

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('네트워크 에러 시 적절한 메시지가 표시된다', async () => {
  const user = userEvent.setup();

  server.use(
    http.post('/api/login', () => {
      return HttpResponse.error();
    })
  );

  render(<LoginForm onSuccess={mockOnSuccess} />);

  await user.type(screen.getByRole('textbox', { name: '이메일' }), 'test@example.com');
  await user.type(screen.getByLabelText('비밀번호'), 'password123');
  await user.click(screen.getByRole('button', { name: '로그인' }));

  const alert = await screen.findByRole('alert');
  expect(alert).toHaveTextContent('알 수 없는 오류가 발생했습니다');
});