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

Migrated ShortUrlsListSettings test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-06-06 22:38:07 +02:00
parent a90c3da7b6
commit 4a70e4ecd3
1 changed files with 23 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
test/settings/ShortUrlsListSettings.test.tsx
View file

@ -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 { Mock } from 'ts-mockery';
import { import { Settings, ShortUrlsListSettings as ShortUrlsSettings } from '../../src/settings/reducers/settings';
DEFAULT_SHORT_URLS_ORDERING,
Settings,
ShortUrlsListSettings as ShortUrlsSettings,
} from '../../src/settings/reducers/settings';
import { ShortUrlsListSettings } from '../../src/settings/ShortUrlsListSettings'; import { ShortUrlsListSettings } from '../../src/settings/ShortUrlsListSettings';
import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
import { ShortUrlsOrder } from '../../src/short-urls/data'; import { ShortUrlsOrder } from '../../src/short-urls/data';
describe('<ShortUrlsListSettings />', () => { describe('<ShortUrlsListSettings />', () => {
let wrapper: ShallowWrapper;
const setSettings = jest.fn(); const setSettings = jest.fn();
const createWrapper = (shortUrlsList?: ShortUrlsSettings) => { const setUp = (shortUrlsList?: ShortUrlsSettings) => ({
wrapper = shallow( user: userEvent.setup(),
...render(
<ShortUrlsListSettings settings={Mock.of<Settings>({ shortUrlsList })} setShortUrlsListSettings={setSettings} />, <ShortUrlsListSettings settings={Mock.of<Settings>({ shortUrlsList })} setShortUrlsListSettings={setSettings} />,
); ),
});
return wrapper;
};
afterEach(() => wrapper?.unmount());
afterEach(jest.clearAllMocks); afterEach(jest.clearAllMocks);
it.each([ it.each([
[undefined, DEFAULT_SHORT_URLS_ORDERING], [undefined, 'Order by: Created at - DESC'],
[{}, DEFAULT_SHORT_URLS_ORDERING], [{}, 'Order by: Created at - DESC'],
[{ defaultOrdering: {} }, {}], [{ defaultOrdering: {} }, 'Order by...'],
[{ defaultOrdering: { field: 'longUrl', dir: 'DESC' } as ShortUrlsOrder }, { field: 'longUrl', dir: 'DESC' }], [{ defaultOrdering: { field: 'longUrl', dir: 'DESC' } as ShortUrlsOrder }, 'Order by: Long URL - DESC'],
[{ defaultOrdering: { field: 'visits', dir: 'ASC' } as ShortUrlsOrder }, { field: 'visits', dir: 'ASC' }], [{ defaultOrdering: { field: 'visits', dir: 'ASC' } as ShortUrlsOrder }, 'Order by: Visits - ASC'],
])('shows expected ordering', (shortUrlsList, expectedOrder) => { ])('shows expected ordering', (shortUrlsList, expectedOrder) => {
const wrapper = createWrapper(shortUrlsList); setUp(shortUrlsList);
const dropdown = wrapper.find(OrderingDropdown); expect(screen.getByRole('button')).toHaveTextContent(expectedOrder);
expect(dropdown.prop('order')).toEqual(expectedOrder);
}); });
it.each([ it.each([
[undefined, undefined], ['Clear selection', undefined, undefined],
['longUrl', 'ASC'], ['Long URL', 'longUrl', 'ASC'],
['visits', undefined], ['Visits', 'visits', 'ASC'],
['title', 'DESC'], ['Title', 'title', 'ASC'],
])('invokes setSettings when ordering changes', (field, dir) => { ])('invokes setSettings when ordering changes', async (name, field, dir) => {
const wrapper = createWrapper(); const { user } = setUp();
const dropdown = wrapper.find(OrderingDropdown);
expect(setSettings).not.toHaveBeenCalled(); 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 } }); expect(setSettings).toHaveBeenCalledWith({ defaultOrdering: { field, dir } });
}); });
}); });