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

Migrated UserInterfaceSettings test to react testing library

Browse Source
This commit is contained in:
Alejandro Celaya
2022-06-07 20:22:30 +02:00
parent d60023f585
commit 10e50efb33
2 changed files with 79 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
test/settings/UserInterfaceSettings.test.tsx
View File

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