shlink-web-client/test/utils/dates/DateRangeSelector.test.tsx

69 lines
2.4 KiB
TypeScript
Raw Normal View History

import { screen } from '@testing-library/react';
2020-12-15 20:57:23 +03:00
import { Mock } from 'ts-mockery';
2020-12-15 01:15:06 +03:00
import { DateRangeSelector, DateRangeSelectorProps } from '../../../src/utils/dates/DateRangeSelector';
import { DateInterval } from '../../../src/utils/dates/types';
import { renderWithEvents } from '../../__helpers__/setUpTest';
2020-12-15 01:15:06 +03:00
describe('<DateRangeSelector />', () => {
const onDatesChange = jest.fn();
const setUp = async (props: Partial<DateRangeSelectorProps> = {}) => {
const result = renderWithEvents(
<DateRangeSelector
{...Mock.of<DateRangeSelectorProps>(props)}
defaultText="Default text"
onDatesChange={onDatesChange}
/>,
);
2020-12-15 01:15:06 +03:00
await result.user.click(screen.getByRole('button'));
return result;
2020-12-15 01:15:06 +03:00
};
afterEach(jest.clearAllMocks);
it('renders proper amount of items', async () => {
const { container } = await setUp();
2020-12-15 01:15:06 +03:00
expect(screen.getAllByRole('menuitem')).toHaveLength(8);
expect(screen.getByRole('heading')).toHaveTextContent('Custom:');
expect(container.querySelector('.dropdown-divider')).toBeInTheDocument();
expect(container.querySelector('.dropdown-item-text')).toBeInTheDocument();
2020-12-15 01:15:06 +03:00
});
2021-03-06 19:25:09 +03:00
it.each([
2022-03-26 14:17:42 +03:00
[undefined, 0],
['all' as DateInterval, 1],
['today' as DateInterval, 1],
['yesterday' as DateInterval, 1],
['last7Days' as DateInterval, 1],
['last30Days' as DateInterval, 1],
['last90Days' as DateInterval, 1],
['last180Days' as DateInterval, 1],
['last365Days' as DateInterval, 1],
[{ startDate: new Date() }, 0],
])('sets proper element as active based on provided date range', async (initialDateRange, expectedActiveItems) => {
const { container } = await setUp({ initialDateRange });
expect(container.querySelectorAll('.active')).toHaveLength(expectedActiveItems);
2020-12-15 01:15:06 +03:00
});
it('triggers onDatesChange callback when selecting an element', async () => {
const { user } = await setUp();
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]);
2020-12-15 01:15:06 +03:00
expect(onDatesChange).toHaveBeenCalledTimes(3);
});
it('propagates default text to DateIntervalDropdownItems', async () => {
await setUp();
expect(screen.getAllByText('Default text')).toHaveLength(2);
});
2020-12-15 01:15:06 +03:00
});