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

Migrated DateRangeSelector test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-07-14 22:14:42 +02:00
parent 0b155b1d20
commit a14e612a38
1 changed files with 29 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
test/utils/dates/DateRangeSelector.test.tsx
View file

@ -1,16 +1,13 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { screen } from '@testing-library/react';
import { DropdownItem } from 'reactstrap';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { DateRangeSelector, DateRangeSelectorProps } from '../../../src/utils/dates/DateRangeSelector'; import { DateRangeSelector, DateRangeSelectorProps } from '../../../src/utils/dates/DateRangeSelector';
import { DateInterval } from '../../../src/utils/dates/types'; import { DateInterval } from '../../../src/utils/dates/types';
import { DateIntervalDropdownItems } from '../../../src/utils/dates/DateIntervalDropdownItems'; import { renderWithEvents } from '../../__helpers__/setUpTest';
import { DateRangeRow } from '../../../src/utils/dates/DateRangeRow';
describe('<DateRangeSelector />', () => { describe('<DateRangeSelector />', () => {
let wrapper: ShallowWrapper;
const onDatesChange = jest.fn(); const onDatesChange = jest.fn();
const createWrapper = (props: Partial<DateRangeSelectorProps> = {}) => { const setUp = async (props: Partial<DateRangeSelectorProps> = {}) => {
wrapper = shallow( const result = renderWithEvents(
<DateRangeSelector <DateRangeSelector
{...Mock.of<DateRangeSelectorProps>(props)} {...Mock.of<DateRangeSelectorProps>(props)}
defaultText="Default text" defaultText="Default text"
@ -18,22 +15,20 @@ describe('<DateRangeSelector />', () => {
/>, />,
); );
return wrapper; await result.user.click(screen.getByRole('button'));
return result;
}; };
afterEach(jest.clearAllMocks); afterEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount());
it('renders proper amount of items', () => { it('renders proper amount of items', async () => {
const wrapper = createWrapper(); const { container } = await setUp();
const items = wrapper.find(DropdownItem);
const dateIntervalItems = wrapper.find(DateIntervalDropdownItems);
expect(items).toHaveLength(3); expect(screen.getAllByRole('menuitem')).toHaveLength(8);
expect(dateIntervalItems).toHaveLength(1); expect(screen.getByRole('heading')).toHaveTextContent('Custom:');
expect(items.filter('[divider]')).toHaveLength(1); expect(container.querySelector('.dropdown-divider')).toBeInTheDocument();
expect(items.filter('[header]')).toHaveLength(1); expect(container.querySelector('.dropdown-item-text')).toBeInTheDocument();
expect(items.filter('[text]')).toHaveLength(1);
}); });
it.each([ it.each([
@ -47,30 +42,27 @@ describe('<DateRangeSelector />', () => {
['last180Days' as DateInterval, 1], ['last180Days' as DateInterval, 1],
['last365Days' as DateInterval, 1], ['last365Days' as DateInterval, 1],
[{ startDate: new Date() }, 0], [{ startDate: new Date() }, 0],
])('sets proper element as active based on provided date range', (initialDateRange, expectedActiveIntervalItems) => { ])('sets proper element as active based on provided date range', async (initialDateRange, expectedActiveItems) => {
const wrapper = createWrapper({ initialDateRange }); const { container } = await setUp({ initialDateRange });
const dateIntervalItems = wrapper.find(DateIntervalDropdownItems).filterWhere( expect(container.querySelectorAll('.active')).toHaveLength(expectedActiveItems);
(item) => item.prop('active') !== undefined,
);
expect(dateIntervalItems).toHaveLength(expectedActiveIntervalItems);
}); });
it('triggers onDatesChange callback when selecting an element', () => { it('triggers onDatesChange callback when selecting an element', async () => {
const wrapper = createWrapper(); const { user } = await setUp();
const dates = wrapper.find(DateRangeRow);
const dateIntervalItems = wrapper.find(DateIntervalDropdownItems); await user.click(screen.getByPlaceholderText('Since...'));
await user.click(screen.getAllByRole('option')[0]);
await user.click(screen.getByPlaceholderText('Until...'));
await user.click(screen.getAllByRole('option')[0]);
await user.click(screen.getAllByRole('menuitem')[0]);
dates.simulate('startDateChange', null);
dates.simulate('endDateChange', null);
dateIntervalItems.simulate('change');
expect(onDatesChange).toHaveBeenCalledTimes(3); expect(onDatesChange).toHaveBeenCalledTimes(3);
}); });
it('propagates default text to DateIntervalDropdownItems', () => { it('propagates default text to DateIntervalDropdownItems', async () => {
const wrapper = createWrapper(); await setUp();
const dateIntervalItems = wrapper.find(DateIntervalDropdownItems); expect(screen.getAllByText('Default text')).toHaveLength(2);
expect(dateIntervalItems.prop('allText')).toEqual('Default text');
}); });
}); });