@eureca/eureca-ui/src/components/Inputs/__tests__/select-permissions.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 { SelectPermissions } from '..';

const onChangeMock = jest.fn();
const onClickMock = jest.fn();

function renderSelectPermissions({ data, onChange, onClick }) {
  return render(
    <SelectPermissions data={data} onChange={onChange} onClick={onClick} helperText="" />
  );
}

describe('Select Permissions component', () => {
  it('checks the correct checkboxes', async () => {
    const { getByTestId } = renderSelectPermissions({
      data: [],
      onChange: onChangeMock,
      onClick: onClickMock,
    });

    //Open select menu
    const selectPermissionsButton = getByTestId('select-permissions-button');
    fireEvent.click(selectPermissionsButton);

    const adminCheckbox = getByTestId('select-checkbox-administrator');
    const editorCheckbox = getByTestId('select-checkbox-editor');
    const reviewerCheckbox = getByTestId('select-checkbox-reviewer');
    const observerCheckbox = getByTestId('select-checkbox-observer');

    const options = [
      {
        label: 'Administrador',
        component: adminCheckbox,
      },
      {
        label: 'Editor',
        component: editorCheckbox,
      },
      {
        label: 'Avaliador',
        component: reviewerCheckbox,
      },
      {
        label: 'Observador',
        component: observerCheckbox,
      },
    ];

    options.flatMap(item => {
      expect(item.component).toHaveAttribute('aria-disabled', 'false');
      expect(item.component.children[0].children[0]).toHaveAttribute('name', item.label);
    });

    //Clicking the admin checkbox should check all the other checkboxes and disabled them
    fireEvent.click(adminCheckbox);

    options.flatMap(item => {
      expect(item.component).toHaveAttribute(
        'aria-disabled',
        item.component === adminCheckbox ? 'false' : 'true'
      );
      expect(item.component.children[0].children[0]).toHaveProperty('checked', true);
    });

    //Clicking the editor checkbox should check all checkboxes but not the admin
    fireEvent.click(editorCheckbox);

    options.flatMap(item => {
      expect(item.component).toHaveAttribute(
        'aria-disabled',
        item.component === adminCheckbox || item.component === editorCheckbox ? 'false' : 'true'
      );
      expect(item.component.children[0].children[0]).toHaveProperty(
        'checked',
        item.component === adminCheckbox ? false : true
      );
    });

    //Clicking the reviewer checkbox should check only the reviewer
    fireEvent.click(reviewerCheckbox);

    options.flatMap(item => {
      expect(item.component).toHaveAttribute('aria-disabled', 'false');
      expect(item.component.children[0].children[0]).toHaveProperty(
        'checked',
        item.component === reviewerCheckbox
      );
    });

    //Clicking the observer checkbox should check the observer and keep the reviewer checked
    fireEvent.click(observerCheckbox);

    options.flatMap(item => {
      expect(item.component).toHaveAttribute('aria-disabled', 'false');
      expect(item.component.children[0].children[0]).toHaveProperty(
        'checked',
        item.component === reviewerCheckbox || item.component === observerCheckbox
      );
    });
  });
});