Migrated TagsCards test to react testing library

This commit is contained in:
Alejandro Celaya 2022-07-07 18:51:58 +02:00
parent 6af49a9945
commit 28b15e4a85

View file

@ -1,4 +1,5 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Mock } from 'ts-mockery';
import { TagsCards as createTagsCards } from '../../src/tags/TagsCards';
import { SelectedServer } from '../../src/servers/data';
@ -8,30 +9,19 @@ import { NormalizedTag } from '../../src/tags/data';
describe('<TagsCards />', () => {
const amountOfTags = 10;
const sortedTags = rangeOf(amountOfTags, (i) => Mock.of<NormalizedTag>({ tag: `tag_${i}` }));
const TagCard = () => null;
const TagsCards = createTagsCards(TagCard);
let wrapper: ShallowWrapper;
beforeEach(() => {
wrapper = shallow(<TagsCards sortedTags={sortedTags} selectedServer={Mock.all<SelectedServer>()} />);
const TagsCards = createTagsCards(() => <span>TagCard</span>);
const setUp = () => ({
user: userEvent.setup(),
...render(<TagsCards sortedTags={sortedTags} selectedServer={Mock.all<SelectedServer>()} />),
});
afterEach(() => wrapper?.unmount());
it('renders the proper amount of groups and cards based on the amount of tags', () => {
const { container } = setUp();
const amountOfGroups = 4;
const cards = wrapper.find(TagCard);
const groups = wrapper.find('.col-md-6');
const cards = screen.getAllByText('TagCard');
const groups = container.querySelectorAll('.col-md-6');
expect(cards).toHaveLength(amountOfTags);
expect(groups).toHaveLength(amountOfGroups);
});
it('displays card on toggle', () => {
const card = () => wrapper.find(TagCard).at(5);
expect(card().prop('displayed')).toEqual(false);
(card().prop('toggle') as Function)();
expect(card().prop('displayed')).toEqual(true);
});
});