diff --git a/src/features/auth/container/login-form/LoginForm.test.tsx b/src/features/auth/container/login-form/LoginForm.test.tsx index 2add16e1..72f83f25 100644 --- a/src/features/auth/container/login-form/LoginForm.test.tsx +++ b/src/features/auth/container/login-form/LoginForm.test.tsx @@ -1,57 +1,64 @@ -import { render, screen } from '@testing-library/react'; +import { render, screen, waitFor } from '@testing-library/react'; import '@testing-library/jest-dom'; import userEvent from '@testing-library/user-event'; import LoginForm from './LoginForm'; -jest.mock('react-hook-form', () => ({ - useForm: () => ({ - register: () => ({}), - handleSubmit: (fn: any) => fn, - formState: { - isSubmitting: false, - errors: {}, - isValid: true, - }, - setError: jest.fn(), - reset: jest.fn(), - }), -})); - -// next/navigation mock jest.mock('next/navigation', () => ({ useRouter: () => ({ replace: jest.fn(), }), useSearchParams: () => null, })); - -describe('LoginForm', () => { - it('폼이 올바르게 렌더링되어야 한다', () => { +describe('LoginForm UI 테스트', () => { + it('로그인 폼의 모든 UI 요소가 올바르게 렌더링되어야 한다', () => { render(); - expect(screen.getByRole('heading', { name: '로그인' })).toBeInTheDocument(); expect(screen.getByLabelText('아이디')).toBeInTheDocument(); expect(screen.getByLabelText('비밀번호')).toBeInTheDocument(); + expect(screen.getByRole('button', { name: '로그인' })).toBeInTheDocument(); + + expect(screen.getByText('회원가입')).toBeInTheDocument(); }); - it('이메일과 비밀번호를 입력할 수 있어야 한다', async () => { + it('입력 필드에 올바른 placeholder가 표시되어야 한다', () => { + render(); + + expect(screen.getByPlaceholderText('이메일')).toBeInTheDocument(); + expect(screen.getByPlaceholderText('비밀번호')).toBeInTheDocument(); + }); +}); + +describe('LoginForm', () => { + it('이메일과 비밀번호를 입력했을 때 로그인 버튼이 활성화되어야 한다', async () => { render(); const emailInput = screen.getByLabelText('아이디'); const passwordInput = screen.getByLabelText('비밀번호'); + const submitButton = screen.getByRole('button', { name: '로그인' }); + + expect(submitButton).toBeDisabled(); await userEvent.type(emailInput, 'test@example.com'); await userEvent.type(passwordInput, 'password123'); expect(emailInput).toHaveValue('test@example.com'); expect(passwordInput).toHaveValue('password123'); + + expect(submitButton).toBeEnabled(); }); - it('로그인 버튼이 제출 가능한 상태여야 한다', () => { + it('유효하지 않은 이메일 형식을 입력하면 에러 메시지가 표시되어야 한다', async () => { render(); - const submitButton = screen.getByRole('button', { name: '로그인' }); - expect(submitButton).toBeEnabled(); + const emailInput = screen.getByLabelText('아이디'); + await userEvent.type(emailInput, 'invalid-email'); + await userEvent.tab(); + + await waitFor(() => { + expect( + screen.getByText('올바른 이메일 형식이 아닙니다.'), + ).toBeInTheDocument(); + }); }); });