start

src/components/register/__tests__/mobile-form.test.tsx

@@ -0,0 +1,49 @@
+import { renderWithClient } from '../../../utils/test/react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { mockFailureResponse } from '../../../mocks/server';
+import { mockedMobile } from '../../../mocks/data';
+import * as tempUserAPI from '../../../api/temp-user';
+import userEvent from '@testing-library/user-event';
+import { waitFor } from '@testing-library/react';
+import MobileForm from '../mobile-form';
+
+describe('MobileForm component', () => {
+  const mockedHandleSubmit = jest.fn();
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+    jest.restoreAllMocks();
+  });
+
+  test('successful render component', async () => {
+    mockFailureResponse();
+
+    const result = renderWithClient(<MobileForm onSubmit={mockedHandleSubmit} />, MemoryRouter);
+    expect(await result.findByTestId('mobile-form')).toBeInTheDocument();
+    expect(await result.findByText('تایید')).toBeInTheDocument();
+  });
+
+  test('call register user function with correct arguments', async () => {
+    const createTempUser = jest.spyOn(tempUserAPI, 'createTempUser');
+
+    const result = renderWithClient(<MobileForm onSubmit={mockedHandleSubmit} />, MemoryRouter);
+    const user = userEvent.setup();
+    await user.type(result.getByTestId('mobile-field'), mockedMobile);
+    await user.click(await result.getByRole('button', { name: /تایید/i }));
+
+    await waitFor(() => expect(createTempUser).toHaveBeenCalledWith({ mobile: mockedMobile }));
+    await waitFor(() => expect(mockedHandleSubmit).toHaveBeenCalled());
+  });
+
+  test('form errors', async () => {
+    const result = renderWithClient(<MobileForm onSubmit={mockedHandleSubmit} />, MemoryRouter);
+    const mobileField = await result.getByTestId('mobile-field');
+    const user = userEvent.setup();
+    await user.type(mobileField, mockedMobile.substring(2));
+    await user.tab();
+
+    expect(await result.getByTestId('mobile-field-error')).toHaveTextContent(
+      'لطفا یک شماره تلفن همراه معتبر وارد نمایید.'
+    );
+  });
+});

src/components/register/__tests__/register-content.test.tsx

@@ -0,0 +1,72 @@
+import { renderWithClient } from '../../../utils/test/react-query';
+import RegisterContent from '../register-content';
+import {
+  mockedAuthKey,
+  mockedMobile,
+  mockedRestrictedMobile,
+  mockedSmsKey
+} from '../../../mocks/data';
+import userEvent from '@testing-library/user-event';
+import { waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { act } from '@testing-library/react-hooks';
+import { DEFAULT_TIME_LEFT } from '../sms-key/resend-view';
+
+describe('RegisterContent component', () => {
+  test('successful render component step 1', async () => {
+    const result = renderWithClient(<RegisterContent />, MemoryRouter);
+    expect(await result.findByTestId('mobile-form')).toBeInTheDocument();
+    expect(await result.findByText('تایید')).toBeInTheDocument();
+  });
+
+  test('successful render component step 2', async () => {
+    const result = renderWithClient(<RegisterContent startStep={1} defaultMobile={mockedMobile} />);
+    expect(await result.findByTestId('smskey-content')).toBeInTheDocument();
+    expect(await result.findByText('تایید')).toBeInTheDocument();
+  });
+
+  test('successful render component step 3', async () => {
+    const result = renderWithClient(
+      <RegisterContent startStep={2} defaultMobile={mockedMobile} defaultAuthKey={mockedAuthKey} />,
+      MemoryRouter
+    );
+    expect(await result.findByTestId('register-form')).toBeInTheDocument();
+    expect(await result.findByText('تایید')).toBeInTheDocument();
+  });
+
+  test('call checkSmsKeyRequest function with error 403', async () => {
+    const data = { mobile: mockedRestrictedMobile, smsKey: mockedSmsKey };
+
+    const result = renderWithClient(<RegisterContent startStep={1} defaultMobile={data.mobile} />);
+
+    const user = userEvent.setup();
+    await user.type(result.getByTestId('smsKey-field'), data.smsKey);
+    await user.click(await result.getByRole('button', { name: /تایید/i }));
+    await waitFor(() =>
+      expect(result.getByRole('alert')).toHaveTextContent(
+        'محدودیت‌ وارد کردن کد پیامکی اشتباه برای شما به پایان رسیده است.'
+      )
+    );
+  });
+
+  test('call sendSmsKeyRequest function with error 403', async () => {
+    jest.useFakeTimers();
+    const data = { mobile: mockedRestrictedMobile };
+
+    const result = renderWithClient(
+      <RegisterContent startStep={1} defaultMobile={data.mobile} />,
+      MemoryRouter
+    );
+
+    act(() => jest.advanceTimersToNextTimer(DEFAULT_TIME_LEFT));
+    jest.useRealTimers();
+
+    const user = userEvent.setup();
+    await user.click(await result.getByRole('button', { name: /ارسال مجدد کد/i }));
+    await waitFor(() =>
+      expect(result.getByRole('alert')).toHaveTextContent(
+        'محدودیت‌ ارسال کد پیامکی برای شما به پایان رسیده است.'
+      )
+    );
+  });
+});

src/components/register/__tests__/register-form.test.tsx

@@ -0,0 +1,121 @@
+import { renderWithClient } from '../../../utils/test/react-query';
+import { MemoryRouter } from 'react-router-dom';
+import RegisterForm from '../register-form';
+import { mockedAuthKey, mockedMobile, mockedRegisterUserData } from '../../../mocks/data';
+import * as userAPI from '../../../api/user';
+import * as introducerAPI from '../../../api/introducer';
+import * as authAPI from '../../../api/auth';
+import userEvent from '@testing-library/user-event';
+import { waitFor } from '@testing-library/react';
+
+describe('RegisterForm component', () => {
+  const data = mockedRegisterUserData;
+  const { iban, ...userData } = data;
+  const { mobile, password } = userData;
+
+  const mockedHandleReset = jest.fn();
+  const user = userEvent.setup();
+
+  afterEach(() => {
+    jest.resetAllMocks();
+    jest.restoreAllMocks();
+  });
+
+  test('successful render component', async () => {
+    const result = renderWithClient(
+      <RegisterForm mobile={mockedMobile} authKey={mockedAuthKey} reset={mockedHandleReset} />,
+      MemoryRouter
+    );
+    expect(await result.findByTestId('register-form')).toBeInTheDocument();
+    expect(await result.findByText(mockedMobile)).toBeInTheDocument();
+    expect(await result.findByText('تایید')).toBeInTheDocument();
+    mockedHandleReset.mockRestore();
+  });
+
+  test('call registerUser functions with correct arguments', async () => {
+    const createUserSpy = jest.spyOn(userAPI, 'createUser');
+    const createIntroducerSpy = jest.spyOn(introducerAPI, 'createIntroducer');
+    const fetchTokenSpy = jest.spyOn(authAPI, 'fetchToken');
+
+    const result = renderWithClient(
+      <RegisterForm mobile={mockedMobile} authKey={mockedAuthKey} reset={mockedHandleReset} />,
+      MemoryRouter
+    );
+    await user.type(result.getByTestId('firstName-field'), data.firstName);
+    await user.type(result.getByTestId('lastName-field'), data.lastName);
+    await user.selectOptions(await result.getByTestId('gender-field'), data.gender);
+    await user.type(result.getByTestId('password-field'), data.password);
+    await user.type(result.getByTestId('rePassword-field'), data.password);
+    if (data.iban) await user.type(result.getByTestId('iban-field'), data.iban);
+    await user.click(await result.getByTestId('termsAndConditions-field'));
+    await user.click(await result.getByRole('button', { name: /تایید/i }));
+
+    await waitFor(() => expect(createUserSpy).toHaveBeenCalledWith(userData));
+    await waitFor(() => expect(createIntroducerSpy).toHaveBeenCalledWith({ iban }));
+    await waitFor(() => expect(fetchTokenSpy).toHaveBeenCalledWith({ mobile, password }));
+    await waitFor(() => expect(mockedHandleReset).toHaveBeenCalled());
+  });
+
+  test('form errors', async () => {
+    const result = renderWithClient(
+      <RegisterForm mobile={mockedMobile} authKey={mockedAuthKey} reset={mockedHandleReset} />,
+      MemoryRouter
+    );
+    user.click(await result.getByRole('button', { name: /تایید/i }));
+
+    expect(mockedHandleReset).not.toHaveBeenCalled();
+
+    for (const fieldName of [
+      'firstName',
+      'lastName',
+      'gender',
+      'password',
+      'rePassword',
+      'termsAndConditions'
+    ]) {
+      await waitFor(() =>
+        expect(result.getByTestId(`${fieldName}-field-error`)).toHaveTextContent(
+          fieldName === 'termsAndConditions'
+            ? 'پذیرفتن شرایط و قوانین الزامی است.'
+            : 'وارد کردن این فیلد الزامی است.'
+        )
+      );
+    }
+
+    await user.selectOptions(await result.getByTestId('gender-field'), '');
+    await user.tab();
+    expect(await result.getByTestId('gender-field-error')).toHaveTextContent(
+      'وارد کردن این فیلد الزامی است.'
+    );
+  });
+
+  test('form verification', async () => {
+    const createUserSpy = jest.spyOn(userAPI, 'createUser');
+    const createIntroducerSpy = jest.spyOn(introducerAPI, 'createIntroducer');
+    const fetchTokenSpy = jest.spyOn(authAPI, 'fetchToken');
+
+    const result = renderWithClient(
+      <RegisterForm mobile={mockedMobile} authKey={mockedAuthKey} reset={mockedHandleReset} />,
+      MemoryRouter
+    );
+    await user.type(result.getByTestId('firstName-field'), data.firstName);
+    await user.type(result.getByTestId('lastName-field'), data.lastName);
+    await user.selectOptions(result.getByTestId('gender-field'), data.gender);
+    await user.type(result.getByTestId('password-field'), data.password);
+    await user.type(result.getByTestId('rePassword-field'), data.password.substring(1));
+    if (data.iban) await user.type(result.getByTestId('iban-field'), data.iban);
+    await user.click(result.getByTestId('termsAndConditions-field'));
+    await user.click(result.getByRole('button', { name: /تایید/i }));
+
+    await waitFor(() =>
+      expect(result.getByTestId(`rePassword-field-error`)).toHaveTextContent(
+        'رمزهای عبور غیر یکسان هستند.'
+      )
+    );
+
+    await waitFor(() => expect(createUserSpy).not.toHaveBeenCalled());
+    await waitFor(() => expect(createIntroducerSpy).not.toHaveBeenCalled());
+    await waitFor(() => expect(fetchTokenSpy).not.toHaveBeenCalled());
+    await waitFor(() => expect(mockedHandleReset).not.toHaveBeenCalled());
+  });
+});

src/components/register/__tests__/register-page.test.tsx

@@ -0,0 +1,13 @@
+import { MemoryRouter } from 'react-router-dom';
+import { renderWithClient } from '../../../utils/test/react-query';
+import { expectPageTestIds, expectPageTitle } from '../../../utils/test/expects';
+import RegisterPage, { REGISTER_PAGE_TITLE } from '../index';
+
+describe('RegisterPage component', () => {
+  test('successful render component', async () => {
+    const result = renderWithClient(<RegisterPage />, MemoryRouter);
+    expectPageTitle(REGISTER_PAGE_TITLE);
+    await expectPageTestIds(result);
+    expect(await result.findByTestId('register')).toBeInTheDocument();
+  });
+});