@eureca/eureca-ui/src/components/Inputs/__tests__/select-multi.test.js

UI component library of Eureca's user and admin apps

import React from 'react';
import '@testing-library/jest-dom/extend-expect';
import { render, fireEvent } from '@testing-library/react';

import { SelectMulti } from '..';

const multiItems = [
  {
    id: '2',
    name: 'Administração',
    subItems: [
      {
        id: '82',
        name: 'Administração',
      },
      {
        id: '343',
        name: 'Administração de Empresas',
      },
    ],
  },
  {
    id: '4',
    name: 'Teste único',
  },
];

const onChangeMock = jest.fn();

function renderSelectMulti({ items, data, onChange }) {
  return render(<SelectMulti label="Itens" items={items} data={data} onChange={onChange} />);
}

describe('Select multi component', () => {
  it('clicking the select opens options menu', async () => {
    const { getByTestId } = renderSelectMulti({
      onChange: onChangeMock,
      items: multiItems,
      data: [],
    });

    const SelectMulti = getByTestId('select-multi-button');

    fireEvent.click(SelectMulti);

    const optionCheckbox0 = getByTestId(`select-checkbox-${multiItems[0].id}`);
    expect(optionCheckbox0).toBeTruthy();
    const optionCheckbox1 = getByTestId(`select-checkbox-${multiItems[1].id}`);
    expect(optionCheckbox1).toBeTruthy();
  });

  it('check an item without subitems', async () => {
    const { getByTestId } = renderSelectMulti({
      onChange: onChangeMock,
      items: multiItems,
      data: [],
    });

    const SelectMulti = getByTestId('select-multi-button');

    fireEvent.click(SelectMulti);

    const optionCheckbox = getByTestId(`select-checkbox-${multiItems[1].id}`);
    expect(optionCheckbox.children[0].children[0]).toHaveProperty('checked', false);
    expect(optionCheckbox.children[0].children[0]).toHaveAttribute('data-indeterminate', 'false');

    fireEvent.click(optionCheckbox);

    expect(optionCheckbox.children[0].children[0]).toHaveProperty('checked', true);
    expect(optionCheckbox.children[0].children[0]).toHaveAttribute('data-indeterminate', 'false');
  });

  it('check an item with subitems and update parent checkbox', async () => {
    const { getByTestId } = renderSelectMulti({
      onChange: onChangeMock,
      items: multiItems,
      data: [],
    });

    const SelectMulti = getByTestId('select-multi-button');

    fireEvent.click(SelectMulti);

    const optionCheckbox = getByTestId(`select-checkbox-${multiItems[0].id}`);
    expect(optionCheckbox.children[0].children[0]).toHaveAttribute('data-indeterminate', 'false');

    const optionExpand = getByTestId(`menu-item-${multiItems[0].id}`);
    fireEvent.click(optionExpand);

    const subItemCheckbox = getByTestId(`select-checkbox-${multiItems[0].subItems[0].id}`);
    expect(subItemCheckbox.children[0].children[0]).toHaveProperty('checked', false);
    fireEvent.click(subItemCheckbox);
    expect(subItemCheckbox.children[0].children[0]).toHaveProperty('checked', true);

    expect(optionCheckbox.children[0].children[0]).toHaveAttribute('data-indeterminate', 'true');
  });

  it('check and uncheck all subitems', async () => {
    const { getByTestId } = renderSelectMulti({
      onChange: onChangeMock,
      items: multiItems,
      data: [],
    });

    const SelectMulti = getByTestId('select-multi-button');

    // Check All
    fireEvent.click(SelectMulti);
    const optionCheckbox = getByTestId(`select-checkbox-${multiItems[0].id}`);

    expect(optionCheckbox.children[0].children[0]).toHaveAttribute('data-indeterminate', 'false');
    fireEvent.click(optionCheckbox);

    // Subitems only show if you click on the expandable item
    const optionExpand = getByTestId(`menu-item-${multiItems[0].id}`);
    fireEvent.click(optionExpand);

    multiItems[0].subItems.flatMap((item, index) => {
      const subItemCheckbox = getByTestId(`select-checkbox-${multiItems[0].subItems[index].id}`);
      expect(subItemCheckbox.children[0].children[0]).toHaveProperty('checked', true);
    });

    expect(optionCheckbox.children[0].children[0]).toHaveAttribute('data-indeterminate', 'false');
    expect(optionCheckbox.children[0].children[0]).toHaveProperty('checked', true);

    // Uncheck All
    fireEvent.click(SelectMulti);
    fireEvent.click(optionCheckbox);

    multiItems[0].subItems.flatMap((item, index) => {
      const subItemCheckbox = getByTestId(`select-checkbox-${multiItems[0].subItems[index].id}`);
      expect(subItemCheckbox.children[0].children[0]).toHaveProperty('checked', false);
    });

    expect(optionCheckbox.children[0].children[0]).toHaveAttribute('data-indeterminate', 'false');
    expect(optionCheckbox.children[0].children[0]).toHaveProperty('checked', false);
  });
});