@eureca/eureca-ui/src/components/UnorderedList/__tests__/unordered-list.test.js

UI component library of Eureca's user and admin apps

import React from 'react';

import { UnorderedList } from '..';

import { render, fireEvent } from '@testing-library/react';

const mockFn = jest.fn().mockImplementation(v => v);

const list = [
  {
    id: 1,
    list: ['Lista', 'com 2 linhas'],
  },
  {
    id: 2,
    list: ['Parte dois', ['valor um', 'valor dois'], 'com três linhas'],
  },
  {
    id: 3,
    list: ['Parte três', ['valor um', 'valor dois', 'valor tres', 'valor quatro']],
  },
  {
    id: 4,
    list: ['Quarto', 'teste'],
  },
];

function renderUnorderedList(props) {
  return render(<UnorderedList {...props} />);
}

describe('Unordered List component', () => {
  it('renders the text when the column have only one string', () => {
    const { getByText } = renderUnorderedList({ list, removeItem: mockFn });
    const line = getByText('Lista');
    expect(line).toBeDefined();
  });

  it('renders options text when the column have a array', () => {
    const { getAllByText } = renderUnorderedList({ list, removeItem: mockFn });
    // find the items with a regex matcher and expect the full phrase
    const options = getAllByText(/\bopções\b/);
    expect(options[0].textContent).toBe('(2) opções foram selecionadas');
    expect(options[1].textContent).toBe('(4) opções foram selecionadas');
  });

  it('triggers remove item when clicking the faMinusCircle icon', () => {
    const { container } = renderUnorderedList({ list, removeItem: mockFn });
    const svg = container.lastChild.lastChild.lastChild.lastChild.firstChild;
    fireEvent.click(svg);
    expect(mockFn).toBeCalledTimes(1);
    expect(mockFn).toReturnWith(4);
  });
});