shlink-web-client/test/settings/UserInterfaceSettings.test.tsx
2023-12-18 23:10:03 +01:00

56 lines
2 KiB
TypeScript

import { screen } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import type { UiSettings } from '../../src/settings/reducers/settings';
import { UserInterfaceSettings } from '../../src/settings/UserInterfaceSettings';
import { checkAccessibility } from '../__helpers__/accessibility';
import { renderWithEvents } from '../__helpers__/setUpTest';
describe('<UserInterfaceSettings />', () => {
const setUiSettings = vi.fn();
const setUp = (ui?: UiSettings, defaultDarkTheme = false) => renderWithEvents(
<UserInterfaceSettings
settings={fromPartial({ ui })}
setUiSettings={setUiSettings}
_matchMedia={vi.fn().mockReturnValue({ matches: defaultDarkTheme })}
/>,
);
it('passes a11y checks', () => checkAccessibility(setUp()));
it.each([
[{ theme: 'dark' as const }, true, true],
[{ theme: 'dark' as const }, false, true],
[{ theme: 'light' as const }, true, false],
[{ theme: 'light' as const }, false, false],
[undefined, false, false],
[undefined, true, true],
])('toggles switch if theme is dark', (ui, defaultDarkTheme, expectedChecked) => {
setUp(ui, defaultDarkTheme);
if (expectedChecked) {
expect(screen.getByLabelText('Use dark theme.')).toBeChecked();
} else {
expect(screen.getByLabelText('Use dark theme.')).not.toBeChecked();
}
});
it.each([
[{ theme: 'dark' as const }],
[{ theme: 'light' as const }],
[undefined],
])('shows different icons based on theme', (ui) => {
setUp(ui);
expect(screen.getByRole('img', { hidden: true })).toMatchSnapshot();
});
it.each([
['light' as const, 'dark' as const],
['dark' as const, 'light' as const],
])('invokes setUiSettings when theme toggle value changes', async (initialTheme, expectedTheme) => {
const { user } = setUp({ theme: initialTheme });
expect(setUiSettings).not.toHaveBeenCalled();
await user.click(screen.getByLabelText('Use dark theme.'));
expect(setUiSettings).toHaveBeenCalledWith({ theme: expectedTheme });
});
});