@availity/reactstrap-validation-select/tests/AvSelect.test.js

Wrapper for react-select to work with availity-reactstrap-validation

import React from 'react';
import {
  render,
  fireEvent,
  waitForElement,
  wait,
  cleanup,
} from '@testing-library/react';
import { AvForm, AvInput } from 'availity-reactstrap-validation';
import { Button } from 'reactstrap';

import AvSelect from '..';

afterEach(cleanup);

const options = [
  { label: 'Option 1', value: 'value for option 1' },
  { label: 'Option 2', value: 'value for option 2' },
  { label: 'Option 3', value: 'value for option 3' },
  { label: 'Option 4', value: 'value for option 4' },
];

const customOptions = [
  { customLabel: 'Option 1', customValue: 'value for option 1' },
  { customLabel: 'Option 2', customValue: 'value for option 2' },
];

const renderSelect = props =>
  render(
    <AvForm>
      <AvSelect name="test-form-input" {...props} />
    </AvForm>
  );

describe('AvSelect', () => {
  test('default behavior works', async () => {
    const { container, getByText } = renderSelect({
      options,
      classNamePrefix: 'test',
      getResult: 'regions',
    });

    const select = container.querySelector('.test__control');
    fireEvent.keyDown(select, { key: 'ArrowDown', keyCode: 40 });
    fireEvent.keyDown(select, { key: 'Enter', keyCode: 13 });

    const option = await waitForElement(() => getByText('Option 1'));

    expect(option).toBeDefined();

    fireEvent.click(option);

    expect(
      container.querySelector('.test__creatable__option--is-selected')
    ).toBeDefined();
    expect(select.querySelector('.test__creatable__placeholder')).toBe(null);
  });

  test('creatable works', async () => {
    const { container, getByText } = renderSelect({
      options,
      classNamePrefix: 'test__creatable',
      getResult: 'regions',
      creatable: true,
    });

    const selectInput = container.querySelector('#react-select-3-input');
    fireEvent.change(selectInput, {
      target: { value: 'Test' },
    });
    fireEvent.keyDown(selectInput, { key: 'Enter', keyCode: 13 });

    const selectOption = await waitForElement(() => getByText('Test'));

    expect(selectOption).toBeDefined();

    expect(
      container.querySelector('.test__creatable__option--is-selected')
    ).toBeDefined();
    expect(selectInput.querySelector('.test__creatable__placeholder')).toBe(
      null
    );
  });

  test('creatable works with custom keys', async () => {
    const onSubmit = jest.fn();
    const { container, getByText } = render(
      <AvForm onSubmit={onSubmit}>
        <AvSelect
          name="test_form_input"
          classNamePrefix="test_custom_creatable"
          options={customOptions}
          labelKey="customLabel"
          valueKey="customValue"
          raw
          creatable
        />
        <Button>Submit</Button>
      </AvForm>
    );

    // Create new option
    const input = container.querySelector('#react-select-4-input');
    fireEvent.change(input, {
      target: { value: 'New Option Test' },
    });
    fireEvent.keyDown(input, { key: 'Enter', keyCode: 13 });

    const submitButton = getByText('Submit');
    expect(submitButton).toBeDefined();

    await fireEvent.click(submitButton);

    // Check for proper object format in payload
    await wait(() => {
      expect(onSubmit).toHaveBeenCalledTimes(1);
      const payload = onSubmit.mock.calls[0][2];
      expect(payload.test_form_input.customLabel).toBe('New Option Test');
      expect(payload.test_form_input.customValue).toBe('newoptiontest');
    });
  });

  test('autofill as boolean works', async () => {
    const opts = [
      {
        label: 'Doe, John',
        value: {
          firstName: 'John',
          lastName: 'Doe',
        },
      },
      {
        label: 'Doe, Jane',
        value: {
          firstName: 'Jane',
          lastName: 'Doe',
        },
      },
    ];

    const onSubmit = jest.fn();
    const { container, getByText } = render(
      <AvForm onSubmit={onSubmit}>
        <AvSelect
          name="test-form-input"
          options={opts}
          classNamePrefix="test"
          raw
          autofill
        />
        <AvInput data-testid="first-input" name="firstName" />
        <AvInput data-testid="last-input" name="lastName" />

        <Button>Submit</Button>
      </AvForm>
    );

    // Simulate the user selecting "Doe, John"
    const select = container.querySelector('.test__control');
    fireEvent.keyDown(select, { key: 'ArrowDown', keyCode: 40 });
    fireEvent.keyDown(select, { key: 'Enter', keyCode: 13 });

    const option = await waitForElement(() => getByText('Doe, John'));

    expect(option).toBeDefined();

    fireEvent.click(option);

    // Simulate the user clicking "Submit"
    const submitButton = getByText('Submit');
    expect(submitButton).toBeDefined();

    await fireEvent.click(submitButton);

    // Check that values got autofilled
    await wait(() => {
      expect(onSubmit).toHaveBeenCalledTimes(1);
      const payload = onSubmit.mock.calls[0][2];
      expect(payload.firstName).toBe('John');
      expect(payload.lastName).toBe('Doe');
    });
  });

  test('autofill as object works', async () => {
    const opts = [
      {
        label: 'Doe, John',
        value: {
          name: {
            first: 'John',
            last: 'Doe',
          },
        },
      },
      {
        label: 'Doe, Jane',
        value: {
          name: {
            first: 'Jane',
            last: 'Doe',
          },
        },
      },
    ];

    const onSubmit = jest.fn();
    const { container, getByText } = render(
      <AvForm onSubmit={onSubmit}>
        <AvSelect
          name="test-form-input"
          options={opts}
          classNamePrefix="test"
          raw
          autofill={{
            firstName: 'name.first',
            lastName: 'name.last',
          }}
        />
        <AvInput data-testid="first-input" name="firstName" />
        <AvInput data-testid="last-input" name="lastName" />

        <Button>Submit</Button>
      </AvForm>
    );

    // Simulate the user selecting "Doe, John"
    const select = container.querySelector('.test__control');
    fireEvent.keyDown(select, { key: 'ArrowDown', keyCode: 40 });
    fireEvent.keyDown(select, { key: 'Enter', keyCode: 13 });

    const option = await waitForElement(() => getByText('Doe, John'));

    expect(option).toBeDefined();

    fireEvent.click(option);

    // Simulate the user clicking "Submit"
    const submitButton = getByText('Submit');
    expect(submitButton).toBeDefined();

    await fireEvent.click(submitButton);

    // Check that values got autofilled
    await wait(() => {
      expect(onSubmit).toHaveBeenCalledTimes(1);
      const payload = onSubmit.mock.calls[0][2];
      expect(payload.firstName).toBe('John');
      expect(payload.lastName).toBe('Doe');
    });
  });
});