mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2025-01-09 01:37:24 +03:00
Migrated ShortUrlsListSettings test to react testing library
This commit is contained in:
parent
a90c3da7b6
commit
4a70e4ecd3
1 changed files with 23 additions and 32 deletions
|
@ -1,52 +1,43 @@
|
|||
import { shallow, ShallowWrapper } from 'enzyme';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { Mock } from 'ts-mockery';
|
||||
import {
|
||||
DEFAULT_SHORT_URLS_ORDERING,
|
||||
Settings,
|
||||
ShortUrlsListSettings as ShortUrlsSettings,
|
||||
} from '../../src/settings/reducers/settings';
|
||||
import { Settings, ShortUrlsListSettings as ShortUrlsSettings } from '../../src/settings/reducers/settings';
|
||||
import { ShortUrlsListSettings } from '../../src/settings/ShortUrlsListSettings';
|
||||
import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
|
||||
import { ShortUrlsOrder } from '../../src/short-urls/data';
|
||||
|
||||
describe('<ShortUrlsListSettings />', () => {
|
||||
let wrapper: ShallowWrapper;
|
||||
const setSettings = jest.fn();
|
||||
const createWrapper = (shortUrlsList?: ShortUrlsSettings) => {
|
||||
wrapper = shallow(
|
||||
const setUp = (shortUrlsList?: ShortUrlsSettings) => ({
|
||||
user: userEvent.setup(),
|
||||
...render(
|
||||
<ShortUrlsListSettings settings={Mock.of<Settings>({ shortUrlsList })} setShortUrlsListSettings={setSettings} />,
|
||||
);
|
||||
),
|
||||
});
|
||||
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
afterEach(() => wrapper?.unmount());
|
||||
afterEach(jest.clearAllMocks);
|
||||
|
||||
it.each([
|
||||
[undefined, DEFAULT_SHORT_URLS_ORDERING],
|
||||
[{}, DEFAULT_SHORT_URLS_ORDERING],
|
||||
[{ defaultOrdering: {} }, {}],
|
||||
[{ defaultOrdering: { field: 'longUrl', dir: 'DESC' } as ShortUrlsOrder }, { field: 'longUrl', dir: 'DESC' }],
|
||||
[{ defaultOrdering: { field: 'visits', dir: 'ASC' } as ShortUrlsOrder }, { field: 'visits', dir: 'ASC' }],
|
||||
[undefined, 'Order by: Created at - DESC'],
|
||||
[{}, 'Order by: Created at - DESC'],
|
||||
[{ defaultOrdering: {} }, 'Order by...'],
|
||||
[{ defaultOrdering: { field: 'longUrl', dir: 'DESC' } as ShortUrlsOrder }, 'Order by: Long URL - DESC'],
|
||||
[{ defaultOrdering: { field: 'visits', dir: 'ASC' } as ShortUrlsOrder }, 'Order by: Visits - ASC'],
|
||||
])('shows expected ordering', (shortUrlsList, expectedOrder) => {
|
||||
const wrapper = createWrapper(shortUrlsList);
|
||||
const dropdown = wrapper.find(OrderingDropdown);
|
||||
|
||||
expect(dropdown.prop('order')).toEqual(expectedOrder);
|
||||
setUp(shortUrlsList);
|
||||
expect(screen.getByRole('button')).toHaveTextContent(expectedOrder);
|
||||
});
|
||||
|
||||
it.each([
|
||||
[undefined, undefined],
|
||||
['longUrl', 'ASC'],
|
||||
['visits', undefined],
|
||||
['title', 'DESC'],
|
||||
])('invokes setSettings when ordering changes', (field, dir) => {
|
||||
const wrapper = createWrapper();
|
||||
const dropdown = wrapper.find(OrderingDropdown);
|
||||
['Clear selection', undefined, undefined],
|
||||
['Long URL', 'longUrl', 'ASC'],
|
||||
['Visits', 'visits', 'ASC'],
|
||||
['Title', 'title', 'ASC'],
|
||||
])('invokes setSettings when ordering changes', async (name, field, dir) => {
|
||||
const { user } = setUp();
|
||||
|
||||
expect(setSettings).not.toHaveBeenCalled();
|
||||
dropdown.simulate('change', field, dir);
|
||||
await user.click(screen.getByRole('button'));
|
||||
await user.click(screen.getByRole('menuitem', { name }));
|
||||
expect(setSettings).toHaveBeenCalledWith({ defaultOrdering: { field, dir } });
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue