CategoryFilterContainer.test.tsx

import { fireEvent } from '@testing-library/react';
import { sampleSize } from 'lodash';
import * as React from 'react';
import { AGREEMENT_CATEGORY_SUGGESTIONS } from '../../../../domainSubsequentAgreement/constants/agreement-form-value-constants';
import renderWithRedux from '../../../../testUtils/renderWithRedux';
import CategoryFilterContainer from '../CategoryFilterContainer';

describe('CategoryFilterContainer', () => {
  it('updates the store category filter value when user interacts with', () => {
    const [category1, category2] = sampleSize(AGREEMENT_CATEGORY_SUGGESTIONS, 2);
    const { getByText, getAllByRole, store } = renderWithRedux(<CategoryFilterContainer />);

    fireEvent.click(getByText('Category'));
    fireEvent.click(getByText(category1.textKey));

    expect(store.getState().filtersState.categoryFilter).toEqual([category1.valueKey.id]);

    fireEvent.click(getByText(category2.textKey));

    expect(store.getState().filtersState.categoryFilter).toEqual([
      category1.valueKey.id,
      category2.valueKey.id,
    ]);

    fireEvent.click(getByText(category1.textKey));
    fireEvent.click(getAllByRole('option').find(el => el.textContent === category2.textKey));

    expect(store.getState().filtersState.categoryFilter).toEqual([]);
  });
});