rn-form.tests.tsx

import React from 'react';
import { render, fireEvent, waitFor } from '@testing-library/react-native';
import { LoginForm } from './LoginForm';
import { withTheme } from '../../../../tests/withTheme';
import { VALIDATION_ERROR_MESSAGES } from '../../../../Constants';

jest.mock('@expo/vector-icons', () => ({
  Ionicons: '',
  AntDesign: '',
}));

test('rendering and submitting a login form ', async () => {
  const handleSubmit = jest.fn();
  const { getByTestId } = render(
    withTheme(<LoginForm onSubmit={handleSubmit} isLoading={false} />),
  );

  const emailInput = getByTestId('email-input');
  const passwordInput = getByTestId('password-input');
  const submitButton = getByTestId('submit-button');

  fireEvent.changeText(emailInput, '[email protected]');
  fireEvent.changeText(passwordInput, 'valid-password');
  fireEvent.press(submitButton);

  await waitFor(() =>
    expect(handleSubmit).toHaveBeenCalledWith({
      email: '[email protected]',
      password: 'valid-password',
    }),
  );
});

test('rendering the error message if e-mail input is empty', async () => {
  const handleSubmit = jest.fn();
  const { getByTestId, getByText } = render(
    withTheme(<LoginForm onSubmit={handleSubmit} isLoading={false} />),
  );

  const emailInput = getByTestId('email-input');
  const passwordInput = getByTestId('password-input');
  const submitButton = getByTestId('submit-button');

  fireEvent.changeText(emailInput, '');
  fireEvent.changeText(passwordInput, 'valid-password');
  fireEvent.press(submitButton);

  await waitFor(() => expect(getByText(VALIDATION_ERROR_MESSAGES.REQUIRED)).toBeTruthy());
});

test('rendering the error message if e-mail input is invalid', async () => {
  const handleSubmit = jest.fn();
  const { getByTestId, getByText } = render(
    withTheme(<LoginForm onSubmit={handleSubmit} isLoading={false} />),
  );

  const emailInput = getByTestId('email-input');
  const passwordInput = getByTestId('password-input');
  const submitButton = getByTestId('submit-button');

  fireEvent.changeText(emailInput, 'invalid-email');
  fireEvent.changeText(passwordInput, 'valid-password');
  fireEvent.press(submitButton);

  await waitFor(() => expect(getByText(VALIDATION_ERROR_MESSAGES.INVALID_EMAIL)).toBeTruthy());
});

test('rendering the error message if password input is empty', async () => {
  const handleSubmit = jest.fn();
  const { getByTestId, getByText } = render(
    withTheme(<LoginForm onSubmit={handleSubmit} isLoading={false} />),
  );

  const emailInput = getByTestId('email-input');
  const submitButton = getByTestId('submit-button');

  fireEvent.changeText(emailInput, '[email protected]');
  fireEvent.press(submitButton);

  await waitFor(() => expect(getByText(VALIDATION_ERROR_MESSAGES.REQUIRED)).toBeTruthy());
});

test('rendering the error message if password input is invalid', async () => {
  const handleSubmit = jest.fn();
  const { getByTestId, getByText } = render(
    withTheme(<LoginForm onSubmit={handleSubmit} isLoading={false} />),
  );

  const emailInput = getByTestId('email-input');
  const passwordInput = getByTestId('password-input');
  const submitButton = getByTestId('submit-button');

  fireEvent.changeText(emailInput, '[email protected]');
  fireEvent.changeText(passwordInput, '123');
  fireEvent.press(submitButton);

  await waitFor(() => expect(getByText(VALIDATION_ERROR_MESSAGES.PASSWORD_TOO_SHORT)).toBeTruthy());
});