test: 비밀번호 변경 폼 테스트 코드 작성

Author: gihwan-dev

src/tests/ChangePassword.test.tsx

@@ -0,0 +1,109 @@
+import supabase from '@/supabase';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { updateUserResponseFixture } from './fixtures/userFixture';
+import { AuthError } from '@supabase/supabase-js';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import ChangePasswordForm from '@/components/ChangePassword/ChangePasswordForm';
+import userEvent from '@testing-library/user-event';
+import { sessionFixture } from './fixtures/sessionFixture';
+import wrapper from './helpers/wrapper';
+
+vi.mock('@/supabase');
+
+describe('ChangePassword', async () => {
+  beforeEach(() => {
+    render(<ChangePasswordForm />, { wrapper });
+  });
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it('비밀번호 변경 요청을 보낼 수 있어야 한다.', async () => {
+    const user = userEvent.setup();
+    vi.mocked(supabase.auth.updateUser).mockResolvedValue({
+      data: {
+        user: updateUserResponseFixture,
+      },
+      error: null,
+    });
+    vi.mocked(supabase.auth.getSession).mockResolvedValue({
+      data: {
+        session: sessionFixture,
+      },
+      error: null,
+    });
+
+    const passwordInput = screen.getByPlaceholderText(/비밀번호/);
+    const submitButton = screen.getByRole('button', { name: /비밀번호/ });
+
+    await act(async () => {
+      await user.type(passwordInput, 'someNewPassword');
+      await user.click(submitButton);
+    });
+
+    expect(supabase.auth.updateUser).toBeCalled();
+  });
+
+  it('비밀번호 변경 성공시 로그인 되었다면 로그아웃 요청을 호출해야 한다.', async () => {
+    const user = userEvent.setup();
+
+    vi.mocked(supabase.auth.updateUser).mockResolvedValue({
+      data: {
+        user: updateUserResponseFixture,
+      },
+      error: null,
+    });
+    vi.mocked(supabase.auth.getSession).mockResolvedValue({
+      data: {
+        session: sessionFixture,
+      },
+      error: null,
+    });
+    vi.mocked(supabase.auth.signOut).mockResolvedValue({
+      error: new Error('some Error') as AuthError,
+    });
+
+    const passwordInput = screen.getByPlaceholderText(/비밀번호/);
+    const submitButton = screen.getByRole('button', { name: /비밀번호/ });
+
+    await act(async () => {
+      await user.type(passwordInput, 'someNewPassword');
+      await user.click(submitButton);
+    });
+
+    await waitFor(() => {});
+
+    expect(supabase.auth.updateUser).toBeCalled();
+    expect(supabase.auth.signOut).toBeCalled();
+  });
+
+  it('비밀번호 변경 실패시 에러 다이얼로그를 보여줄 수있어야 한다.', async () => {
+    const user = userEvent.setup();
+    vi.mocked(supabase.auth.updateUser).mockResolvedValue({
+      data: {
+        user: null,
+      },
+      error: new Error('some error') as AuthError,
+    });
+    vi.mocked(supabase.auth.getSession).mockResolvedValue({
+      data: {
+        session: sessionFixture,
+      },
+      error: null,
+    });
+
+    const passwordInput = screen.getByPlaceholderText(/비밀번호/);
+    const submitButton = screen.getByRole('button', { name: /비밀번호/ });
+
+    await act(async () => {
+      await user.type(passwordInput, 'somePassword');
+      await user.click(submitButton);
+    });
+
+    await waitFor(() => {});
+
+    const errorDialog = screen.queryByText('some error');
+
+    expect(errorDialog).toBeInTheDocument();
+  });
+});

src/tests/fixtures/sessionFixture.ts

@@ -0,0 +1,42 @@
+import { Session } from '@supabase/supabase-js';
+
+export const sessionFixture: Session = {
+  access_token: 'some access token',
+  expires_in: new Date().getTime(),
+  refresh_token: 'some refresh token',
+  token_type: 'jwt',
+  user: {
+    id: '1d7a5662-922e-4167-932d-4dda46f67ef2',
+    aud: 'authenticated',
+    role: 'authenticated',
+    email: '[email protected]',
+    email_confirmed_at: '2024-05-04 04:34:02.297625+00',
+    invited_at: undefined,
+    confirmation_sent_at: '2024-05-04 04:33:46.652098+00',
+    recovery_sent_at: undefined,
+    email_change_sent_at: undefined,
+    last_sign_in_at: '2024-05-04 04:34:31.223951+00',
+    app_metadata: {
+      provider: 'email',
+      providers: ['email'],
+    },
+    user_metadata: {
+      sub: '1d7a5662-922e-4167-932d-4dda46f67ef2',
+      name: '최기환',
+      email: '[email protected]',
+      phone: '01066069806',
+      nickName: 'gihwan-dev',
+      email_verified: false,
+      phone_verified: false,
+    },
+    created_at: '2024-05-04 04:33:46.644465+00',
+    updated_at: '2024-05-04 07:38:32.864951+00',
+    phone: undefined,
+    phone_confirmed_at: undefined,
+    confirmed_at: '2024-05-04 04:34:02.297625+00',
+    is_anonymous: false,
+  },
+  expires_at: new Date().getTime(),
+  provider_refresh_token: 'some provider refresh token',
+  provider_token: 'some provider token',
+};

src/tests/fixtures/userFixture.ts

@@ -0,0 +1,33 @@
+import { User } from '@supabase/supabase-js';
+
+export const updateUserResponseFixture: User = {
+  id: '1d7a5662-922e-4167-932d-4dda46f67ef2',
+  aud: 'authenticated',
+  role: 'authenticated',
+  email: '[email protected]',
+  email_confirmed_at: '2024-05-04 04:34:02.297625+00',
+  invited_at: undefined,
+  confirmation_sent_at: '2024-05-04 04:33:46.652098+00',
+  recovery_sent_at: undefined,
+  email_change_sent_at: undefined,
+  last_sign_in_at: '2024-05-04 04:34:31.223951+00',
+  app_metadata: {
+    provider: 'email',
+    providers: ['email'],
+  },
+  user_metadata: {
+    sub: '1d7a5662-922e-4167-932d-4dda46f67ef2',
+    name: '최기환',
+    email: '[email protected]',
+    phone: '01066069806',
+    nickName: 'gihwan-dev',
+    email_verified: false,
+    phone_verified: false,
+  },
+  created_at: '2024-05-04 04:33:46.644465+00',
+  updated_at: '2024-05-04 07:38:32.864951+00',
+  phone: undefined,
+  phone_confirmed_at: undefined,
+  confirmed_at: '2024-05-04 04:34:02.297625+00',
+  is_anonymous: false,
+};