mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Migrated DateIntervalDropdownItems test to react testing library
This commit is contained in:
parent
21101d4da8
commit
2e0e7f361c
1 changed files with 41 additions and 24 deletions
|
@ -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) });
|
||||||
});
|
|
||||||
|
|
||||||
it('triggers onChange callback when selecting an element', () => {
|
if (index === EXPECTED_ACTIVE_INDEX) {
|
||||||
const items = wrapper.find(DropdownItem);
|
expect(item).toHaveClass('active');
|
||||||
|
} else {
|
||||||
items.at(4).simulate('click');
|
expect(item).not.toHaveClass('active');
|
||||||
items.at(6).simulate('click');
|
}
|
||||||
items.at(3).simulate('click');
|
});
|
||||||
expect(onChange).toHaveBeenCalledTimes(3);
|
});
|
||||||
|
|
||||||
|
it.each([
|
||||||
|
[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();
|
||||||
|
|
||||||
|
await user.click(screen.getAllByRole('menuitem')[index]);
|
||||||
|
|
||||||
|
expect(onChange).toHaveBeenCalledWith(expectedInterval);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue