fix: ESLint 오류 수정 - 사용하지 않는 변수들에 underscore prefix 추가
- AddTransactionButton.tsx: useEffect import 제거 - BudgetProgressCard.tsx: localBudgetData를 _localBudgetData로 변경 - Header.tsx: isMobile을 _isMobile로 변경 - RecentTransactionsSection.tsx: isDeleting을 _isDeleting로 변경 - TransactionCard.tsx: cn import 제거 - ExpenseForm.tsx: useState import 제거 - cacheStrategies.ts: QueryClient, Transaction import 제거 - Analytics.tsx: Separator import 제거, 미사용 변수들에 underscore prefix 추가 - Index.tsx: useMemo import 제거 - Login.tsx: setLoginError를 _setLoginError로 변경 - Register.tsx: useEffect dependency 수정 및 useCallback 추가 - Settings.tsx: toast, handleClick에 underscore prefix 추가 - authStore.ts: setError, setAppwriteInitialized에 underscore prefix 추가 - budgetStore.ts: ranges를 _ranges로 변경 - BudgetProgressCard.test.tsx: waitFor import 제거 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
hansoo
430
src/components/__tests__/LoginForm.test.tsx
Normal file
430
src/components/__tests__/LoginForm.test.tsx
Normal file
@@ -0,0 +1,430 @@
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { describe, expect, it, vi, beforeEach } from 'vitest';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import LoginForm from '../auth/LoginForm';
|
||||
|
||||
// Mock react-router-dom Link component
|
||||
vi.mock('react-router-dom', async () => {
|
||||
const actual = await vi.importActual('react-router-dom');
|
||||
return {
|
||||
...actual,
|
||||
Link: ({ to, children, className }: any) => (
|
||||
<a href={to} className={className} data-testid="forgot-password-link">
|
||||
{children}
|
||||
</a>
|
||||
),
|
||||
};
|
||||
});
|
||||
|
||||
// Wrapper component for Router context
|
||||
const Wrapper = ({ children }: { children: React.ReactNode }) => (
|
||||
<BrowserRouter>{children}</BrowserRouter>
|
||||
);
|
||||
|
||||
describe('LoginForm', () => {
|
||||
const mockSetEmail = vi.fn();
|
||||
const mockSetPassword = vi.fn();
|
||||
const mockSetShowPassword = vi.fn();
|
||||
const mockHandleLogin = vi.fn();
|
||||
|
||||
const defaultProps = {
|
||||
email: '',
|
||||
setEmail: mockSetEmail,
|
||||
password: '',
|
||||
setPassword: mockSetPassword,
|
||||
showPassword: false,
|
||||
setShowPassword: mockSetShowPassword,
|
||||
isLoading: false,
|
||||
isSettingUpTables: false,
|
||||
loginError: null,
|
||||
handleLogin: mockHandleLogin,
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('rendering', () => {
|
||||
it('renders the login form with all fields', () => {
|
||||
render(<LoginForm {...defaultProps} />, { wrapper: Wrapper });
|
||||
|
||||
expect(screen.getByTestId('login-form')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('이메일')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('비밀번호')).toBeInTheDocument();
|
||||
expect(screen.getByText('로그인')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('forgot-password-link')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders email field with correct attributes', () => {
|
||||
render(<LoginForm {...defaultProps} />, { wrapper: Wrapper });
|
||||
|
||||
const emailInput = screen.getByLabelText('이메일');
|
||||
expect(emailInput).toHaveAttribute('type', 'email');
|
||||
expect(emailInput).toHaveAttribute('id', 'email');
|
||||
expect(emailInput).toHaveAttribute('placeholder', 'your@email.com');
|
||||
});
|
||||
|
||||
it('renders password field with correct attributes', () => {
|
||||
render(<LoginForm {...defaultProps} />, { wrapper: Wrapper });
|
||||
|
||||
const passwordInput = screen.getByLabelText('비밀번호');
|
||||
expect(passwordInput).toHaveAttribute('type', 'password');
|
||||
expect(passwordInput).toHaveAttribute('id', 'password');
|
||||
expect(passwordInput).toHaveAttribute('placeholder', '••••••••');
|
||||
});
|
||||
|
||||
it('renders forgot password link', () => {
|
||||
render(<LoginForm {...defaultProps} />, { wrapper: Wrapper });
|
||||
|
||||
const forgotLink = screen.getByTestId('forgot-password-link');
|
||||
expect(forgotLink).toHaveAttribute('href', '/forgot-password');
|
||||
expect(forgotLink).toHaveTextContent('비밀번호를 잊으셨나요?');
|
||||
});
|
||||
});
|
||||
|
||||
describe('form values', () => {
|
||||
it('displays current email value', () => {
|
||||
render(
|
||||
<LoginForm {...defaultProps} email="test@example.com" />,
|
||||
{ wrapper: Wrapper }
|
||||
);
|
||||
|
||||
expect(screen.getByDisplayValue('test@example.com')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('displays current password value', () => {
|
||||
render(
|
||||
<LoginForm {...defaultProps} password="mypassword" />,
|
||||
{ wrapper: Wrapper }
|
||||
);
|
||||
|
||||
expect(screen.getByDisplayValue('mypassword')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls setEmail when email input changes', () => {
|
||||
render(<LoginForm {...defaultProps} />, { wrapper: Wrapper });
|
||||
|
||||
const emailInput = screen.getByLabelText('이메일');
|
||||
fireEvent.change(emailInput, { target: { value: 'test@example.com' } });
|
||||
|
||||
expect(mockSetEmail).toHaveBeenCalledWith('test@example.com');
|
||||
});
|
||||
|
||||
it('calls setPassword when password input changes', () => {
|
||||
render(<LoginForm {...defaultProps} />, { wrapper: Wrapper });
|
||||
|
||||
const passwordInput = screen.getByLabelText('비밀번호');
|
||||
fireEvent.change(passwordInput, { target: { value: 'newpassword' } });
|
||||
|
||||
expect(mockSetPassword).toHaveBeenCalledWith('newpassword');
|
||||
});
|
||||
});
|
||||
|
||||
describe('password visibility toggle', () => {
|
||||
it('shows password as hidden by default', () => {
|
||||
render(<LoginForm {...defaultProps} />, { wrapper: Wrapper });
|
||||
|
||||
const passwordInput = screen.getByLabelText('비밀번호');
|
||||
expect(passwordInput).toHaveAttribute('type', 'password');
|
||||
});
|
||||
|
||||
it('shows password as text when showPassword is true', () => {
|
||||
render(
|
||||
<LoginForm {...defaultProps} showPassword={true} />,
|
||||
{ wrapper: Wrapper }
|
||||
);
|
||||
|
||||
const passwordInput = screen.getByLabelText('비밀번호');
|
||||
expect(passwordInput).toHaveAttribute('type', 'text');
|
||||
});
|
||||
|
||||
it('calls setShowPassword when visibility toggle is clicked', () => {
|
||||
render(<LoginForm {...defaultProps} />, { wrapper: Wrapper });
|
||||
|
||||
// Find the password toggle button (the one that's not the submit button)
|
||||
const buttons = screen.getAllByRole('button');
|
||||
const toggleButton = buttons.find(btn => btn.getAttribute('type') === 'button');
|
||||
|
||||
fireEvent.click(toggleButton!);
|
||||
|
||||
expect(mockSetShowPassword).toHaveBeenCalledWith(true);
|
||||
});
|
||||
|
||||
it('calls setShowPassword with opposite value', () => {
|
||||
render(
|
||||
<LoginForm {...defaultProps} showPassword={true} />,
|
||||
{ wrapper: Wrapper }
|
||||
);
|
||||
|
||||
// Find the password toggle button (the one that's not the submit button)
|
||||
const buttons = screen.getAllByRole('button');
|
||||
const toggleButton = buttons.find(btn => btn.getAttribute('type') === 'button');
|
||||
|
||||
fireEvent.click(toggleButton!);
|
||||
|
||||
expect(mockSetShowPassword).toHaveBeenCalledWith(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('form submission', () => {
|
||||
it('calls handleLogin when form is submitted', () => {
|
||||
render(<LoginForm {...defaultProps} />, { wrapper: Wrapper });
|
||||
|
||||
const form = screen.getByTestId('login-form');
|
||||
fireEvent.submit(form);
|
||||
|
||||
expect(mockHandleLogin).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('does not submit when form is disabled during loading', () => {
|
||||
render(
|
||||
<LoginForm {...defaultProps} isLoading={true} />,
|
||||
{ wrapper: Wrapper }
|
||||
);
|
||||
|
||||
const loginButton = screen.getByText('로그인 중...');
|
||||
expect(loginButton).toBeDisabled();
|
||||
});
|
||||
|
||||
it('does not submit when form is disabled during table setup', () => {
|
||||
render(
|
||||
<LoginForm {...defaultProps} isSettingUpTables={true} />,
|
||||
{ wrapper: Wrapper }
|
||||
);
|
||||
|
||||
const loginButton = screen.getByText('데이터베이스 설정 중...');
|
||||
expect(loginButton).toBeDisabled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('loading states', () => {
|
||||
it('shows loading text when isLoading is true', () => {
|
||||
render(
|
||||
<LoginForm {...defaultProps} isLoading={true} />,
|
||||
{ wrapper: Wrapper }
|
||||
);
|
||||
|
||||
expect(screen.getByText('로그인 중...')).toBeInTheDocument();
|
||||
const submitButton = screen.getByText('로그인 중...').closest('button');
|
||||
expect(submitButton).toBeDisabled();
|
||||
});
|
||||
|
||||
it('shows table setup text when isSettingUpTables is true', () => {
|
||||
render(
|
||||
<LoginForm {...defaultProps} isSettingUpTables={true} />,
|
||||
{ wrapper: Wrapper }
|
||||
);
|
||||
|
||||
expect(screen.getByText('데이터베이스 설정 중...')).toBeInTheDocument();
|
||||
const submitButton = screen.getByText('데이터베이스 설정 중...').closest('button');
|
||||
expect(submitButton).toBeDisabled();
|
||||
});
|
||||
|
||||
it('shows normal text when not loading', () => {
|
||||
render(<LoginForm {...defaultProps} />, { wrapper: Wrapper });
|
||||
|
||||
expect(screen.getByText('로그인')).toBeInTheDocument();
|
||||
const submitButton = screen.getByText('로그인').closest('button');
|
||||
expect(submitButton).not.toBeDisabled();
|
||||
});
|
||||
|
||||
it('isLoading takes precedence over isSettingUpTables', () => {
|
||||
render(
|
||||
<LoginForm {...defaultProps} isLoading={true} isSettingUpTables={true} />,
|
||||
{ wrapper: Wrapper }
|
||||
);
|
||||
|
||||
expect(screen.getByText('로그인 중...')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('error handling', () => {
|
||||
it('does not show error message when loginError is null', () => {
|
||||
render(<LoginForm {...defaultProps} />, { wrapper: Wrapper });
|
||||
|
||||
expect(screen.queryByText(/에러/)).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows regular error message for standard errors', () => {
|
||||
const errorMessage = '잘못된 이메일 또는 비밀번호입니다.';
|
||||
render(
|
||||
<LoginForm {...defaultProps} loginError={errorMessage} />,
|
||||
{ wrapper: Wrapper }
|
||||
);
|
||||
|
||||
expect(screen.getByText(errorMessage)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows CORS/JSON error with special styling and suggestions', () => {
|
||||
const corsError = 'CORS 정책에 의해 차단되었습니다.';
|
||||
render(
|
||||
<LoginForm {...defaultProps} loginError={corsError} />,
|
||||
{ wrapper: Wrapper }
|
||||
);
|
||||
|
||||
expect(screen.getByText(corsError)).toBeInTheDocument();
|
||||
expect(screen.getByText(/다른 CORS 프록시 유형을 시도해 보세요/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/HTTPS URL을 사용하는 Supabase 인스턴스로 변경/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/네트워크 연결 상태를 확인하세요/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('detects JSON errors correctly', () => {
|
||||
const jsonError = 'JSON 파싱 오류가 발생했습니다.';
|
||||
render(
|
||||
<LoginForm {...defaultProps} loginError={jsonError} />,
|
||||
{ wrapper: Wrapper }
|
||||
);
|
||||
|
||||
expect(screen.getByText(jsonError)).toBeInTheDocument();
|
||||
expect(screen.getByText(/다른 CORS 프록시 유형을 시도해 보세요/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('detects network 404 errors correctly', () => {
|
||||
const networkError = '404 Not Found 오류입니다.';
|
||||
render(
|
||||
<LoginForm {...defaultProps} loginError={networkError} />,
|
||||
{ wrapper: Wrapper }
|
||||
);
|
||||
|
||||
expect(screen.getByText(networkError)).toBeInTheDocument();
|
||||
expect(screen.getByText(/네트워크 연결 상태를 확인하세요/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('detects proxy errors correctly', () => {
|
||||
const proxyError = '프록시 서버 응답 오류입니다.';
|
||||
render(
|
||||
<LoginForm {...defaultProps} loginError={proxyError} />,
|
||||
{ wrapper: Wrapper }
|
||||
);
|
||||
|
||||
expect(screen.getByText(proxyError)).toBeInTheDocument();
|
||||
expect(screen.getByText(/다른 CORS 프록시 유형을 시도해 보세요/)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('CSS classes and styling', () => {
|
||||
it('applies correct CSS classes to form container', () => {
|
||||
render(<LoginForm {...defaultProps} />, { wrapper: Wrapper });
|
||||
|
||||
const container = screen.getByTestId('login-form').parentElement;
|
||||
expect(container).toHaveClass('neuro-flat', 'p-8', 'mb-6');
|
||||
});
|
||||
|
||||
it('applies correct CSS classes to email input', () => {
|
||||
render(<LoginForm {...defaultProps} />, { wrapper: Wrapper });
|
||||
|
||||
const emailInput = screen.getByLabelText('이메일');
|
||||
expect(emailInput).toHaveClass('pl-10', 'neuro-pressed');
|
||||
});
|
||||
|
||||
it('applies correct CSS classes to password input', () => {
|
||||
render(<LoginForm {...defaultProps} />, { wrapper: Wrapper });
|
||||
|
||||
const passwordInput = screen.getByLabelText('비밀번호');
|
||||
expect(passwordInput).toHaveClass('pl-10', 'neuro-pressed');
|
||||
});
|
||||
|
||||
it('applies correct CSS classes to submit button', () => {
|
||||
render(<LoginForm {...defaultProps} />, { wrapper: Wrapper });
|
||||
|
||||
const submitButton = screen.getByRole('button', { name: /로그인/ });
|
||||
expect(submitButton).toHaveClass(
|
||||
'w-full',
|
||||
'hover:bg-neuro-income/80',
|
||||
'text-white',
|
||||
'h-auto',
|
||||
'bg-neuro-income',
|
||||
'text-lg'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('accessibility', () => {
|
||||
it('has proper form labels', () => {
|
||||
render(<LoginForm {...defaultProps} />, { wrapper: Wrapper });
|
||||
|
||||
expect(screen.getByLabelText('이메일')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('비밀번호')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('has proper input IDs matching labels', () => {
|
||||
render(<LoginForm {...defaultProps} />, { wrapper: Wrapper });
|
||||
|
||||
const emailInput = screen.getByLabelText('이메일');
|
||||
const passwordInput = screen.getByLabelText('비밀번호');
|
||||
|
||||
expect(emailInput).toHaveAttribute('id', 'email');
|
||||
expect(passwordInput).toHaveAttribute('id', 'password');
|
||||
});
|
||||
|
||||
it('password toggle button has correct type', () => {
|
||||
render(<LoginForm {...defaultProps} />, { wrapper: Wrapper });
|
||||
|
||||
// Find the eye icon button (the one that's not the submit button)
|
||||
const buttons = screen.getAllByRole('button');
|
||||
const toggleButton = buttons.find(button => button.getAttribute('type') === 'button');
|
||||
|
||||
expect(toggleButton).toHaveAttribute('type', 'button');
|
||||
});
|
||||
|
||||
it('submit button has correct type', () => {
|
||||
render(<LoginForm {...defaultProps} />, { wrapper: Wrapper });
|
||||
|
||||
const submitButton = screen.getByText('로그인').closest('button');
|
||||
expect(submitButton).toHaveAttribute('type', 'submit');
|
||||
});
|
||||
});
|
||||
|
||||
describe('edge cases', () => {
|
||||
it('handles empty email and password values', () => {
|
||||
render(
|
||||
<LoginForm {...defaultProps} email="" password="" />,
|
||||
{ wrapper: Wrapper }
|
||||
);
|
||||
|
||||
const emailInput = screen.getByLabelText('이메일');
|
||||
const passwordInput = screen.getByLabelText('비밀번호');
|
||||
|
||||
expect(emailInput).toHaveValue('');
|
||||
expect(passwordInput).toHaveValue('');
|
||||
});
|
||||
|
||||
it('handles very long error messages', () => {
|
||||
const longError = 'A'.repeat(1000);
|
||||
render(
|
||||
<LoginForm {...defaultProps} loginError={longError} />,
|
||||
{ wrapper: Wrapper }
|
||||
);
|
||||
|
||||
expect(screen.getByText(longError)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('handles special characters in email and password', () => {
|
||||
const specialEmail = 'test+tag@example-domain.co.uk';
|
||||
const specialPassword = 'P@ssw0rd!#$%';
|
||||
|
||||
render(
|
||||
<LoginForm {...defaultProps} email={specialEmail} password={specialPassword} />,
|
||||
{ wrapper: Wrapper }
|
||||
);
|
||||
|
||||
expect(screen.getByDisplayValue(specialEmail)).toBeInTheDocument();
|
||||
expect(screen.getByDisplayValue(specialPassword)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('maintains form functionality during rapid state changes', () => {
|
||||
const { rerender } = render(<LoginForm {...defaultProps} />, { wrapper: Wrapper });
|
||||
|
||||
// Rapid state changes
|
||||
rerender(<LoginForm {...defaultProps} isLoading={true} />);
|
||||
rerender(<LoginForm {...defaultProps} isSettingUpTables={true} />);
|
||||
rerender(<LoginForm {...defaultProps} loginError="Error" />);
|
||||
rerender(<LoginForm {...defaultProps} />);
|
||||
|
||||
// Form should still be functional
|
||||
expect(screen.getByTestId('login-form')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('이메일')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('비밀번호')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user