mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 01:20:24 +03:00
Merge pull request #664 from acelaya-forks/feature/teststs
Feature/teststs
This commit is contained in:
Alejandro Celaya
GitHub
commit
98ea491469
3 changed files with 111 additions and 70 deletions
|
|
@ -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 { Settings, TagsMode, TagsSettings as TagsSettingsOptions } from '../../src/settings/reducers/settings';
|
||||
import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown';
|
||||
import { TagsSettings } from '../../src/settings/TagsSettings';
|
||||
import { OrderingDropdown } from '../../src/utils/OrderingDropdown';
|
||||
import { TagsOrder } from '../../src/tags/data/TagsListChildrenProps';
|
||||
import { LabeledFormGroup } from '../../src/utils/forms/LabeledFormGroup';
|
||||
import { FormText } from '../../src/utils/forms/FormText';
|
||||
import { capitalize } from '../../src/utils/utils';
|
||||
|
||||
describe('<TagsSettings />', () => {
|
||||
let wrapper: ShallowWrapper;
|
||||
const setTagsSettings = jest.fn();
|
||||
const createWrapper = (tags?: TagsSettingsOptions) => {
|
||||
wrapper = shallow(<TagsSettings settings={Mock.of<Settings>({ tags })} setTagsSettings={setTagsSettings} />);
|
||||
const setUp = (tags?: TagsSettingsOptions) => ({
|
||||
user: userEvent.setup(),
|
||||
...render(<TagsSettings settings={Mock.of<Settings>({ tags })} setTagsSettings={setTagsSettings} />),
|
||||
});
|
||||
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
afterEach(() => wrapper?.unmount());
|
||||
afterEach(jest.clearAllMocks);
|
||||
|
||||
it('renders expected amount of groups', () => {
|
||||
const wrapper = createWrapper();
|
||||
const groups = wrapper.find(LabeledFormGroup);
|
||||
setUp();
|
||||
|
||||
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([
|
||||
|
|
@ -33,50 +29,45 @@ describe('<TagsSettings />', () => {
|
|||
[{ defaultMode: 'cards' as TagsMode }, 'cards'],
|
||||
[{ defaultMode: 'list' as TagsMode }, 'list'],
|
||||
])('shows expected tags displaying mode', (tags, expectedMode) => {
|
||||
const wrapper = createWrapper(tags);
|
||||
const dropdown = wrapper.find(TagsModeDropdown);
|
||||
const formText = wrapper.find(FormText);
|
||||
const { container } = setUp(tags);
|
||||
|
||||
expect(dropdown.prop('mode')).toEqual(expectedMode);
|
||||
expect(formText.html()).toContain(`Tags will be displayed as <b>${expectedMode}</b>.`);
|
||||
expect(screen.getByRole('button', { name: capitalize(expectedMode) })).toBeInTheDocument();
|
||||
expect(container.querySelector('.form-text')).toHaveTextContent(`Tags will be displayed as ${expectedMode}.`);
|
||||
});
|
||||
|
||||
it.each([
|
||||
['cards' as TagsMode],
|
||||
['list' as TagsMode],
|
||||
])('invokes setTagsSettings when tags mode changes', (defaultMode) => {
|
||||
const wrapper = createWrapper();
|
||||
const dropdown = wrapper.find(TagsModeDropdown);
|
||||
])('invokes setTagsSettings when tags mode changes', async (defaultMode) => {
|
||||
const { user } = setUp();
|
||||
|
||||
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 });
|
||||
});
|
||||
|
||||
it.each([
|
||||
[undefined, {}],
|
||||
[{}, {}],
|
||||
[{ defaultOrdering: {} }, {}],
|
||||
[{ defaultOrdering: { field: 'tag', dir: 'DESC' } as TagsOrder }, { field: 'tag', dir: 'DESC' }],
|
||||
[{ defaultOrdering: { field: 'visits', dir: 'ASC' } as TagsOrder }, { field: 'visits', dir: 'ASC' }],
|
||||
[undefined, 'Order by...'],
|
||||
[{}, 'Order by...'],
|
||||
[{ defaultOrdering: {} }, 'Order by...'],
|
||||
[{ defaultOrdering: { field: 'tag', dir: 'DESC' } as TagsOrder }, 'Order by: Tag - DESC'],
|
||||
[{ defaultOrdering: { field: 'visits', dir: 'ASC' } as TagsOrder }, 'Order by: Visits - ASC'],
|
||||
])('shows expected ordering', (tags, expectedOrder) => {
|
||||
const wrapper = createWrapper(tags);
|
||||
const dropdown = wrapper.find(OrderingDropdown);
|
||||
|
||||
expect(dropdown.prop('order')).toEqual(expectedOrder);
|
||||
setUp(tags);
|
||||
expect(screen.getByRole('button', { name: expectedOrder })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it.each([
|
||||
[undefined, undefined],
|
||||
['tag', 'ASC'],
|
||||
['visits', undefined],
|
||||
['shortUrls', 'DESC'],
|
||||
])('invokes setTagsSettings when ordering changes', (field, dir) => {
|
||||
const wrapper = createWrapper();
|
||||
const dropdown = wrapper.find(OrderingDropdown);
|
||||
['Tag', 'tag', 'ASC'],
|
||||
['Visits', 'visits', 'ASC'],
|
||||
['Short URLs', 'shortUrls', 'ASC'],
|
||||
])('invokes setTagsSettings when ordering changes', async (name, field, dir) => {
|
||||
const { user } = setUp();
|
||||
|
||||
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 } });
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,22 +1,17 @@
|
|||
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 { faMoon, faSun } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { Settings, UiSettings } from '../../src/settings/reducers/settings';
|
||||
import { UserInterfaceSettings } from '../../src/settings/UserInterfaceSettings';
|
||||
import { ToggleSwitch } from '../../src/utils/ToggleSwitch';
|
||||
import { Theme } from '../../src/utils/theme';
|
||||
|
||||
describe('<UserInterfaceSettings />', () => {
|
||||
let wrapper: ShallowWrapper;
|
||||
const setUiSettings = jest.fn();
|
||||
const createWrapper = (ui?: UiSettings) => {
|
||||
wrapper = shallow(<UserInterfaceSettings settings={Mock.of<Settings>({ ui })} setUiSettings={setUiSettings} />);
|
||||
const setUp = (ui?: UiSettings) => ({
|
||||
user: userEvent.setup(),
|
||||
...render(<UserInterfaceSettings settings={Mock.of<Settings>({ ui })} setUiSettings={setUiSettings} />),
|
||||
});
|
||||
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
afterEach(() => wrapper?.unmount());
|
||||
afterEach(jest.clearAllMocks);
|
||||
|
||||
it.each([
|
||||
|
|
@ -24,32 +19,32 @@ describe('<UserInterfaceSettings />', () => {
|
|||
[{ theme: 'light' as Theme }, false],
|
||||
[undefined, false],
|
||||
])('toggles switch if theme is dark', (ui, expectedChecked) => {
|
||||
const wrapper = createWrapper(ui);
|
||||
const toggle = wrapper.find(ToggleSwitch);
|
||||
setUp(ui);
|
||||
|
||||
expect(toggle.prop('checked')).toEqual(expectedChecked);
|
||||
if (expectedChecked) {
|
||||
expect(screen.getByLabelText('Use dark theme.')).toBeChecked();
|
||||
} else {
|
||||
expect(screen.getByLabelText('Use dark theme.')).not.toBeChecked();
|
||||
}
|
||||
});
|
||||
|
||||
it.each([
|
||||
[{ theme: 'dark' as Theme }, faMoon],
|
||||
[{ theme: 'light' as Theme }, faSun],
|
||||
[undefined, faSun],
|
||||
])('shows different icons based on theme', (ui, expectedIcon) => {
|
||||
const wrapper = createWrapper(ui);
|
||||
const icon = wrapper.find(FontAwesomeIcon);
|
||||
|
||||
expect(icon.prop('icon')).toEqual(expectedIcon);
|
||||
[{ theme: 'dark' as Theme }],
|
||||
[{ theme: 'light' as Theme }],
|
||||
[undefined],
|
||||
])('shows different icons based on theme', (ui) => {
|
||||
setUp(ui);
|
||||
expect(screen.getByRole('img', { hidden: true })).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it.each([
|
||||
[true, 'dark'],
|
||||
[false, 'light'],
|
||||
])('invokes setUiSettings when theme toggle value changes', (checked, theme) => {
|
||||
const wrapper = createWrapper();
|
||||
const toggle = wrapper.find(ToggleSwitch);
|
||||
['light' as Theme, 'dark' as Theme],
|
||||
['dark' as Theme, 'light' as Theme],
|
||||
])('invokes setUiSettings when theme toggle value changes', async (initialTheme, expectedTheme) => {
|
||||
const { user } = setUp({ theme: initialTheme });
|
||||
|
||||
expect(setUiSettings).not.toHaveBeenCalled();
|
||||
toggle.simulate('change', checked);
|
||||
expect(setUiSettings).toHaveBeenCalledWith({ theme });
|
||||
await user.click(screen.getByLabelText('Use dark theme.'));
|
||||
expect(setUiSettings).toHaveBeenCalledWith({ theme: expectedTheme });
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<UserInterfaceSettings /> shows different icons based on theme 1`] = `
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="svg-inline--fa fa-moon user-interface__theme-icon"
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M32 256c0-123.8 100.3-224 223.8-224c11.36 0 29.7 1.668 40.9 3.746c9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3c9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480C132.1 480 32 379.6 32 256z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
exports[`<UserInterfaceSettings /> shows different icons based on theme 2`] = `
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="svg-inline--fa fa-sun user-interface__theme-icon"
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M256 159.1c-53.02 0-95.1 42.98-95.1 95.1S202.1 351.1 256 351.1s95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347L446.1 255.1l63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7l-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89L164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6L12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256l-63.15 91.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7l19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109l109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69 0-127.1-57.31-127.1-127.1c0-70.69 57.31-127.1 127.1-127.1s127.1 57.3 127.1 127.1C383.1 326.7 326.7 383.1 256 383.1z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
|
||||
exports[`<UserInterfaceSettings /> shows different icons based on theme 3`] = `
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="svg-inline--fa fa-sun user-interface__theme-icon"
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M256 159.1c-53.02 0-95.1 42.98-95.1 95.1S202.1 351.1 256 351.1s95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347L446.1 255.1l63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7l-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89L164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6L12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256l-63.15 91.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7l19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109l109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69 0-127.1-57.31-127.1-127.1c0-70.69 57.31-127.1 127.1-127.1s127.1 57.3 127.1 127.1C383.1 326.7 326.7 383.1 256 383.1z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
Loading…
Reference in a new issue