mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 01:20:24 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated DateIntervalDropdownItems test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-07-08 15:03:48 +02:00
parent 21101d4da8
commit 2e0e7f361c
1 changed files with 41 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
test/utils/dates/DateIntervalDropdownItems.test.tsx
View file

@ -1,41 +1,58 @@
import { DropdownItem } from 'reactstrap'; import { render, screen, waitFor } from '@testing-library/react';
import { shallow, ShallowWrapper } from 'enzyme'; import userEvent from '@testing-library/user-event';
import { DateIntervalDropdownItems } from '../../../src/utils/dates/DateIntervalDropdownItems'; import { DateIntervalDropdownItems } from '../../../src/utils/dates/DateIntervalDropdownItems';
import { DATE_INTERVALS } from '../../../src/utils/dates/types'; import { DATE_INTERVALS, DateInterval, rangeOrIntervalToString } from '../../../src/utils/dates/types';
import { DropdownBtn } from '../../../src/utils/DropdownBtn';
describe('<DateIntervalDropdownItems />', () => { describe('<DateIntervalDropdownItems />', () => {
let wrapper: ShallowWrapper;
const onChange = jest.fn(); const onChange = jest.fn();
const setUp = async () => {
const user = userEvent.setup();
const renderResult = render(
<DropdownBtn text="text">
<DateIntervalDropdownItems allText="All" active="last180Days" onChange={onChange} />
</DropdownBtn>,
);
beforeEach(() => { await user.click(screen.getByRole('button'));
wrapper = shallow(<DateIntervalDropdownItems allText="All" active="last180Days" onChange={onChange} />); await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument());
});
return { user, ...renderResult };
};
afterEach(jest.clearAllMocks); afterEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount());
it('renders expected amount of items', () => { it('renders expected amount of items', async () => {
const items = wrapper.find(DropdownItem); await setUp();
const dividerItems = items.findWhere((item) => !!item.prop('divider'));
expect(items).toHaveLength(DATE_INTERVALS.length + 2); expect(screen.getAllByRole('menuitem')).toHaveLength(DATE_INTERVALS.length + 1);
expect(dividerItems).toHaveLength(1); expect(screen.getByRole('menuitem', { name: 'Last 180 days' })).toHaveClass('active');
}); });
it('sets expected item as active', () => { it('sets expected item as active', async () => {
const items = wrapper.find(DropdownItem).findWhere((item) => item.prop('active') !== undefined); await setUp();
const EXPECTED_ACTIVE_INDEX = 6; const EXPECTED_ACTIVE_INDEX = 5;
expect.assertions(DATE_INTERVALS.length + 1); DATE_INTERVALS.forEach((interval, index) => {
items.forEach((item, index) => expect(item.prop('active')).toEqual(index === EXPECTED_ACTIVE_INDEX)); const item = screen.getByRole('menuitem', { name: rangeOrIntervalToString(interval) });
if (index === EXPECTED_ACTIVE_INDEX) {
expect(item).toHaveClass('active');
} else {
expect(item).not.toHaveClass('active');
}
});
}); });
it('triggers onChange callback when selecting an element', () => { it.each([
const items = wrapper.find(DropdownItem); [3, 'last7Days' as DateInterval],
[7, 'last365Days' as DateInterval],
[2, 'yesterday' as DateInterval],
])('triggers onChange callback when selecting an element', async (index, expectedInterval) => {
const { user } = await setUp();
items.at(4).simulate('click'); await user.click(screen.getAllByRole('menuitem')[index]);
items.at(6).simulate('click');
items.at(3).simulate('click'); expect(onChange).toHaveBeenCalledWith(expectedInterval);
expect(onChange).toHaveBeenCalledTimes(3);
}); });
}); });