Migrated ShortUrlsListSettings test to react testing library

This commit is contained in:
Alejandro Celaya 2022-06-06 22:38:07 +02:00
parent a90c3da7b6
commit 4a70e4ecd3

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 {
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 } });
});
});