mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Migrated VisitsSettings test to react testing library
This commit is contained in:
parent
98ea491469
commit
e538f2a3bb
1 changed files with 24 additions and 28 deletions
|
@ -1,41 +1,35 @@
|
||||||
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 { Mock } from 'ts-mockery';
|
||||||
import { Settings } from '../../src/settings/reducers/settings';
|
import { Settings } from '../../src/settings/reducers/settings';
|
||||||
import { VisitsSettings } from '../../src/settings/VisitsSettings';
|
import { VisitsSettings } from '../../src/settings/VisitsSettings';
|
||||||
import { SimpleCard } from '../../src/utils/SimpleCard';
|
|
||||||
import { DateIntervalSelector } from '../../src/utils/dates/DateIntervalSelector';
|
|
||||||
import { LabeledFormGroup } from '../../src/utils/forms/LabeledFormGroup';
|
|
||||||
|
|
||||||
describe('<VisitsSettings />', () => {
|
describe('<VisitsSettings />', () => {
|
||||||
let wrapper: ShallowWrapper;
|
|
||||||
const setVisitsSettings = jest.fn();
|
const setVisitsSettings = jest.fn();
|
||||||
const createWrapper = (settings: Partial<Settings> = {}) => {
|
const setUp = (settings: Partial<Settings> = {}) => ({
|
||||||
wrapper = shallow(<VisitsSettings settings={Mock.of<Settings>(settings)} setVisitsSettings={setVisitsSettings} />);
|
user: userEvent.setup(),
|
||||||
|
...render(<VisitsSettings settings={Mock.of<Settings>(settings)} setVisitsSettings={setVisitsSettings} />),
|
||||||
return wrapper;
|
});
|
||||||
};
|
|
||||||
|
|
||||||
afterEach(jest.clearAllMocks);
|
afterEach(jest.clearAllMocks);
|
||||||
afterEach(() => wrapper?.unmount());
|
|
||||||
|
|
||||||
it('renders expected components', () => {
|
it('renders expected components', () => {
|
||||||
const wrapper = createWrapper();
|
setUp();
|
||||||
|
|
||||||
expect(wrapper.find(SimpleCard).prop('title')).toEqual('Visits');
|
expect(screen.getByRole('heading')).toHaveTextContent('Visits');
|
||||||
expect(wrapper.find(LabeledFormGroup).prop('label')).toEqual('Default interval to load on visits sections:');
|
expect(screen.getByText('Default interval to load on visits sections:')).toBeInTheDocument();
|
||||||
expect(wrapper.find(DateIntervalSelector)).toHaveLength(1);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it.each([
|
it.each([
|
||||||
[Mock.all<Settings>(), 'last30Days'],
|
[Mock.all<Settings>(), 'Last 30 days'],
|
||||||
[Mock.of<Settings>({ visits: {} }), 'last30Days'],
|
[Mock.of<Settings>({ visits: {} }), 'Last 30 days'],
|
||||||
[
|
[
|
||||||
Mock.of<Settings>({
|
Mock.of<Settings>({
|
||||||
visits: {
|
visits: {
|
||||||
defaultInterval: 'last7Days',
|
defaultInterval: 'last7Days',
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
'last7Days',
|
'Last 7 days',
|
||||||
],
|
],
|
||||||
[
|
[
|
||||||
Mock.of<Settings>({
|
Mock.of<Settings>({
|
||||||
|
@ -43,21 +37,23 @@ describe('<VisitsSettings />', () => {
|
||||||
defaultInterval: 'today',
|
defaultInterval: 'today',
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
'today',
|
'Today',
|
||||||
],
|
],
|
||||||
])('sets expected interval as active', (settings, expectedInterval) => {
|
])('sets expected interval as active', (settings, expectedInterval) => {
|
||||||
const wrapper = createWrapper(settings);
|
setUp(settings);
|
||||||
|
expect(screen.getByRole('button')).toHaveTextContent(expectedInterval);
|
||||||
expect(wrapper.find(DateIntervalSelector).prop('active')).toEqual(expectedInterval);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('invokes setVisitsSettings when interval changes', () => {
|
it('invokes setVisitsSettings when interval changes', async () => {
|
||||||
const wrapper = createWrapper();
|
const { user } = setUp();
|
||||||
const selector = wrapper.find(DateIntervalSelector);
|
const selectOption = async (name: string) => {
|
||||||
|
await user.click(screen.getByRole('button'));
|
||||||
|
await user.click(screen.getByRole('menuitem', { name }));
|
||||||
|
};
|
||||||
|
|
||||||
selector.simulate('change', 'last7Days');
|
await selectOption('Last 7 days');
|
||||||
selector.simulate('change', 'last180Days');
|
await selectOption('Last 180 days');
|
||||||
selector.simulate('change', 'yesterday');
|
await selectOption('Yesterday');
|
||||||
|
|
||||||
expect(setVisitsSettings).toHaveBeenCalledTimes(3);
|
expect(setVisitsSettings).toHaveBeenCalledTimes(3);
|
||||||
expect(setVisitsSettings).toHaveBeenNthCalledWith(1, { defaultInterval: 'last7Days' });
|
expect(setVisitsSettings).toHaveBeenNthCalledWith(1, { defaultInterval: 'last7Days' });
|
||||||
|
|
Loading…
Reference in a new issue