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

Migrated TagSettings test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-06-07 20:11:45 +02:00
parent c0d5feb433
commit d60023f585
1 changed files with 32 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
test/settings/TagsSettings.test.tsx
View file

@ -1,30 +1,26 @@
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 { Settings, TagsMode, TagsSettings as TagsSettingsOptions } from '../../src/settings/reducers/settings'; import { Settings, TagsMode, TagsSettings as TagsSettingsOptions } from '../../src/settings/reducers/settings';
import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown';
import { TagsSettings } from '../../src/settings/TagsSettings'; import { TagsSettings } from '../../src/settings/TagsSettings';
import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
import { TagsOrder } from '../../src/tags/data/TagsListChildrenProps'; import { TagsOrder } from '../../src/tags/data/TagsListChildrenProps';
import { LabeledFormGroup } from '../../src/utils/forms/LabeledFormGroup'; import { capitalize } from '../../src/utils/utils';
import { FormText } from '../../src/utils/forms/FormText';
describe('<TagsSettings />', () => { describe('<TagsSettings />', () => {
let wrapper: ShallowWrapper;
const setTagsSettings = jest.fn(); const setTagsSettings = jest.fn();
const createWrapper = (tags?: TagsSettingsOptions) => { const setUp = (tags?: TagsSettingsOptions) => ({
wrapper = shallow(<TagsSettings settings={Mock.of<Settings>({ tags })} setTagsSettings={setTagsSettings} />); user: userEvent.setup(),
...render(<TagsSettings settings={Mock.of<Settings>({ tags })} setTagsSettings={setTagsSettings} />),
});
return wrapper;
};
afterEach(() => wrapper?.unmount());
afterEach(jest.clearAllMocks); afterEach(jest.clearAllMocks);
it('renders expected amount of groups', () => { it('renders expected amount of groups', () => {
const wrapper = createWrapper(); setUp();
const groups = wrapper.find(LabeledFormGroup);
expect(groups).toHaveLength(2); expect(screen.getByText('Default display mode when managing tags:')).toBeInTheDocument();
expect(screen.getByText('Default ordering for tags list:')).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Order by...' })).toBeInTheDocument();
}); });
it.each([ it.each([
@ -33,50 +29,45 @@ describe('<TagsSettings />', () => {
[{ defaultMode: 'cards' as TagsMode }, 'cards'], [{ defaultMode: 'cards' as TagsMode }, 'cards'],
[{ defaultMode: 'list' as TagsMode }, 'list'], [{ defaultMode: 'list' as TagsMode }, 'list'],
])('shows expected tags displaying mode', (tags, expectedMode) => { ])('shows expected tags displaying mode', (tags, expectedMode) => {
const wrapper = createWrapper(tags); const { container } = setUp(tags);
const dropdown = wrapper.find(TagsModeDropdown);
const formText = wrapper.find(FormText);
expect(dropdown.prop('mode')).toEqual(expectedMode); expect(screen.getByRole('button', { name: capitalize(expectedMode) })).toBeInTheDocument();
expect(formText.html()).toContain(`Tags will be displayed as <b>${expectedMode}</b>.`); expect(container.querySelector('.form-text')).toHaveTextContent(`Tags will be displayed as ${expectedMode}.`);
}); });
it.each([ it.each([
['cards' as TagsMode], ['cards' as TagsMode],
['list' as TagsMode], ['list' as TagsMode],
])('invokes setTagsSettings when tags mode changes', (defaultMode) => { ])('invokes setTagsSettings when tags mode changes', async (defaultMode) => {
const wrapper = createWrapper(); const { user } = setUp();
const dropdown = wrapper.find(TagsModeDropdown);
expect(setTagsSettings).not.toHaveBeenCalled(); expect(setTagsSettings).not.toHaveBeenCalled();
dropdown.simulate('change', defaultMode); await user.click(screen.getByText('List'));
await user.click(screen.getByRole('menuitem', { name: capitalize(defaultMode) }));
expect(setTagsSettings).toHaveBeenCalledWith({ defaultMode }); expect(setTagsSettings).toHaveBeenCalledWith({ defaultMode });
}); });
it.each([ it.each([
[undefined, {}], [undefined, 'Order by...'],
[{}, {}], [{}, 'Order by...'],
[{ defaultOrdering: {} }, {}], [{ defaultOrdering: {} }, 'Order by...'],
[{ defaultOrdering: { field: 'tag', dir: 'DESC' } as TagsOrder }, { field: 'tag', dir: 'DESC' }], [{ defaultOrdering: { field: 'tag', dir: 'DESC' } as TagsOrder }, 'Order by: Tag - DESC'],
[{ defaultOrdering: { field: 'visits', dir: 'ASC' } as TagsOrder }, { field: 'visits', dir: 'ASC' }], [{ defaultOrdering: { field: 'visits', dir: 'ASC' } as TagsOrder }, 'Order by: Visits - ASC'],
])('shows expected ordering', (tags, expectedOrder) => { ])('shows expected ordering', (tags, expectedOrder) => {
const wrapper = createWrapper(tags); setUp(tags);
const dropdown = wrapper.find(OrderingDropdown); expect(screen.getByRole('button', { name: expectedOrder })).toBeInTheDocument();
expect(dropdown.prop('order')).toEqual(expectedOrder);
}); });
it.each([ it.each([
[undefined, undefined], ['Tag', 'tag', 'ASC'],
['tag', 'ASC'], ['Visits', 'visits', 'ASC'],
['visits', undefined], ['Short URLs', 'shortUrls', 'ASC'],
['shortUrls', 'DESC'], ])('invokes setTagsSettings when ordering changes', async (name, field, dir) => {
])('invokes setTagsSettings when ordering changes', (field, dir) => { const { user } = setUp();
const wrapper = createWrapper();
const dropdown = wrapper.find(OrderingDropdown);
expect(setTagsSettings).not.toHaveBeenCalled(); expect(setTagsSettings).not.toHaveBeenCalled();
dropdown.simulate('change', field, dir); await user.click(screen.getByText('Order by...'));
await user.click(screen.getByRole('menuitem', { name }));
expect(setTagsSettings).toHaveBeenCalledWith({ defaultOrdering: { field, dir } }); expect(setTagsSettings).toHaveBeenCalledWith({ defaultOrdering: { field, dir } });
}); });
}); });