<commit_before>// @flow
import { mount } from 'enzyme';
import React from 'react';
import { act } from 'react-dom/test-utils';
import { InputMocks } from 'mocks/InputMocks';
import DynamicForm from 'components/Form/DynamicForm';

// TODO (julianguyen): Include InputTextarea after writing stubs for pell editor

const defaultMockInputs = [
  { ...InputMocks.inputTextProps, required: true },
  InputMocks.inputSelectProps,
  { ...InputMocks.inputCheckboxGroupProps, required: true },
  InputMocks.inputTagProps,
  InputMocks.inputSwitchProps,
  InputMocks.inputSubmitProps,
];

const getMockInputs = (nameValue) => {
  if (nameValue) {
    return [
      {
        id: 'name-id',
        type: 'text',
        name: 'name',
        label: 'Name',
        placeholder: 'Some Name Placeholder',
        info: 'Some Name Info',
        required: true,
      },
      ...defaultMockInputs,
    ];
  }
  return defaultMockInputs;
};

const getComponent = (options = {}) => {
  const mockInputs = getMockInputs(options.nameValue);
  return (
    <DynamicForm
      nameValue={options.nameValue}
      formProps={{
        action: '/fake-action',
        inputs: mockInputs,
      }}
      onSubmit={() => {}}
    />
  );
};

describe('Form', () => {
  describe('when nameValue does not exist', () => {
    it('has no errors when submit is clicked', () => {
      const wrapper = mount(getComponent());
      act(() => wrapper.find('input[name="some-text-name"]').prop('onBlur')({
        currentTarget: { value: 'Hello' },
      }));
      expect(wrapper.find('.error').length).toBe(0);
      wrapper.find('input[type="submit"]').prop('onClick');
      expect(wrapper.find('.error').length).toBe(0);
    });

    it('has errors when submit is clicked', () => {
      const wrapper = mount(getComponent());
      expect(wrapper.find('.error').length).toBe(0);
      act(() => wrapper
        .find('input[type="checkbox"][name="some-checkbox-one-name"]')
        .prop('onChange')({
          currentTarget: { checked: false },
        }));
      wrapper.find('input[type="submit"]').simulate('click');
      expect(wrapper.find('.error').length).toBe(2);
    });
  });

  describe('when nameValue exists', () => {
    it('has no errors when submit is clicked', () => {
      const wrapper = mount(getComponent({ nameValue: 'Name' }));
      act(() => wrapper.find('input[name="some-text-name"]').prop('onBlur')({
        currentTarget: { value: 'Hello' },
      }));
      expect(wrapper.find('.error').length).toBe(0);
      wrapper.find('input[type="submit"]').prop('onClick');
      expect(wrapper.find('.error').length).toBe(0);
    });

    it('has errors when submit is clicked', () => {
      const wrapper = mount(getComponent({ nameValue: 'Name' }));
      expect(wrapper.find('.error').length).toBe(0);
      act(() => wrapper
        .find('input[type="checkbox"][name="some-checkbox-one-name"]')
        .prop('onChange')({
          currentTarget: { checked: false },
        }));
      wrapper.find('input[type="submit"]').simulate('click');
      expect(wrapper.find('.error').length).toBe(2);
    });
  });
});
<commit_msg>Migrate DynamicForm tests from Enzyme to RTL (#1931)<commit_after>// @flow
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { InputMocks } from 'mocks/InputMocks';
import DynamicForm from 'components/Form/DynamicForm';

// TODO (julianguyen): Include InputTextarea after writing stubs for pell editor

const defaultMockInputs = [
  { ...InputMocks.inputTextProps, required: true },
  InputMocks.inputSelectProps,
  { ...InputMocks.inputCheckboxGroupProps, required: true },
  InputMocks.inputTagProps,
  InputMocks.inputSwitchProps,
  InputMocks.inputSubmitProps,
];

const getMockInputs = (nameValue) => {
  if (nameValue) {
    return [
      {
        id: 'name-id',
        type: 'text',
        name: 'name',
        label: 'Name',
        placeholder: 'Some Name Placeholder',
        info: 'Some Name Info',
        required: true,
      },
      ...defaultMockInputs,
    ];
  }
  return defaultMockInputs;
};

const testOnSubmit = jest.fn();

const getComponent = (options = {}) => {
  const mockInputs = getMockInputs(options.nameValue);
  return (
    <DynamicForm
      nameValue={options.nameValue}
      formProps={{
        action: '/fake-action',
        inputs: mockInputs,
      }}
      onSubmit={testOnSubmit}
    />
  );
};

describe('DynamicForm', () => {
  const { getByRole, getByText, getByPlaceholderText } = screen;

  describe('when name value does not exist', () => {
    it('renders correctly', () => {
      render(getComponent());
      expect(getByPlaceholderText('Some Text Placeholder')).toBeInTheDocument();
      expect(
        getByRole('button', { name: 'Some Submit Value' }),
      ).toBeInTheDocument();
    });

    it('has no errors when submit is clicked', async () => {
      render(getComponent());
      userEvent.type(getByPlaceholderText('Some Text Placeholder'), 'bye');
      userEvent.click(getByRole('button', { name: 'Some Submit Value' }));
      await waitFor(() => {
        expect(testOnSubmit).toHaveBeenCalledTimes(1);
      });
    });

    it('has errors when submit is clicked', async () => {
      render(getComponent());
      userEvent.click(getByRole('button', { name: 'Some Submit Value' }));
      await waitFor(() => {
        expect(testOnSubmit).toHaveBeenCalledTimes(1);
      });
      expect(getByRole('alert')).toBeInTheDocument();
    });
  });

  describe('when name value exists', () => {
    it('renders correctly', () => {
      render(getComponent({ nameValue: 'name' }));
      expect(getByText('Name')).toBeInTheDocument();
      expect(getByPlaceholderText('Some Text Placeholder')).toBeInTheDocument();
      expect(
        getByRole('button', { name: 'Some Submit Value' }),
      ).toBeInTheDocument();
    });

    it('has no errors when submit is clicked', async () => {
      render(getComponent({ nameValue: 'name' }));
      userEvent.type(getByText('Name'), 'hi');
      userEvent.type(getByPlaceholderText('Some Text Placeholder'), 'bye');
      userEvent.click(getByRole('button', { name: 'Some Submit Value' }));
      await waitFor(() => {
        expect(testOnSubmit).toHaveBeenCalledTimes(1);
      });
    });

    it('has errors when submit is clicked', async () => {
      render(getComponent({ nameValue: 'name' }));
      userEvent.click(getByRole('button', { name: 'Some Submit Value' }));
      await waitFor(() => {
        expect(testOnSubmit).toHaveBeenCalledTimes(1);
      });
      expect(getByRole('alert')).toBeInTheDocument();
    });
  });
});

{'fraction_non_alphanumeric': 0.17370541710192508, 'fraction_numerical': 0.0023877033278615132, 'mean_word_length': 3.1966186599874766, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 34, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '977547', 'n_tokens_mistral': 1989, 'n_tokens_neox': 2017, 'n_words': 398}