forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-02 22:01:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added new setting to determine default display mode for tags

Browse Source
This commit is contained in:
Alejandro Celaya
2021-09-25 08:20:56 +02:00
parent 01f6f11ee2
commit 1da7119c5c
9 changed files with 84 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
test/settings/UserInterface.test.tsx
View File

@@ -2,21 +2,17 @@ import { shallow, ShallowWrapper } from 'enzyme';
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 { Settings, TagsMode, UiSettings } from '../../src/settings/reducers/settings';
import { UserInterface } from '../../src/settings/UserInterface';
import ToggleSwitch from '../../src/utils/ToggleSwitch';
import { Theme } from '../../src/utils/theme';
import { TagsModeDropdown } from '../../src/tags/TagsModeDropdown';
describe('<UserInterface />', () => {
let wrapper: ShallowWrapper;
const setUiSettings = jest.fn();
const createWrapper = (ui?: UiSettings) => {
wrapper = shallow(
<UserInterface
settings={Mock.of<Settings>({ ui })}
setUiSettings={setUiSettings}
/>,
);
wrapper = shallow(<UserInterface settings={Mock.of<Settings>({ ui })} setUiSettings={setUiSettings} />);
return wrapper;
};
@@ -49,7 +45,7 @@ describe('<UserInterface />', () => {
it.each([
[ true, 'dark' ],
[ false, 'light' ],
])('invokes setUiSettings when toggle value changes', (checked, theme) => {
])('invokes setUiSettings when theme toggle value changes', (checked, theme) => {
const wrapper = createWrapper();
const toggle = wrapper.find(ToggleSwitch);
@@ -57,4 +53,30 @@ describe('<UserInterface />', () => {
toggle.simulate('change', checked);
expect(setUiSettings).toHaveBeenCalledWith({ theme });
});
it.each([
[ undefined, 'cards' ],
[{ theme: 'light' as Theme }, 'cards' ],
[{ theme: 'light' as Theme, tagsMode: 'cards' as TagsMode }, 'cards' ],
[{ theme: 'light' as Theme, tagsMode: 'list' as TagsMode }, 'list' ],
])('shows expected tags displaying mode', (ui, expectedMode) => {
const wrapper = createWrapper(ui);
const dropdown = wrapper.find(TagsModeDropdown);
const small = wrapper.find('small');
expect(dropdown.prop('mode')).toEqual(expectedMode);
expect(small.html()).toContain(`Tags will be displayed as <b>${expectedMode}</b>.`);
});
it.each([
[ 'cards' as TagsMode ],
[ 'list' as TagsMode ],
])('invokes setUiSettings when tags mode changes', (tagsMode) => {
const wrapper = createWrapper();
const dropdown = wrapper.find(TagsModeDropdown);
expect(setUiSettings).not.toHaveBeenCalled();
dropdown.simulate('change', tagsMode);
expect(setUiSettings).toHaveBeenCalledWith({ theme: 'light', tagsMode });
});
});