2023-08-05 12:14:03 +03:00
|
|
|
import type { Theme } from '@shlinkio/shlink-frontend-kit';
|
2023-08-04 23:59:33 +03:00
|
|
|
import type { UiSettings } from '@shlinkio/shlink-web-component';
|
2022-07-10 00:03:21 +03:00
|
|
|
import { screen } from '@testing-library/react';
|
2023-04-13 22:48:29 +03:00
|
|
|
import { fromPartial } from '@total-typescript/shoehorn';
|
2021-12-25 12:49:12 +03:00
|
|
|
import { UserInterfaceSettings } from '../../src/settings/UserInterfaceSettings';
|
2022-07-10 20:44:49 +03:00
|
|
|
import { renderWithEvents } from '../__helpers__/setUpTest';
|
2021-02-16 21:31:16 +03:00
|
|
|
|
2021-12-25 12:49:12 +03:00
|
|
|
describe('<UserInterfaceSettings />', () => {
|
2023-05-27 12:57:26 +03:00
|
|
|
const setUiSettings = vi.fn();
|
2022-07-10 00:03:21 +03:00
|
|
|
const setUp = (ui?: UiSettings) => renderWithEvents(
|
2023-04-13 22:48:29 +03:00
|
|
|
<UserInterfaceSettings settings={fromPartial({ ui })} setUiSettings={setUiSettings} />,
|
2022-07-10 00:03:21 +03:00
|
|
|
);
|
2021-02-16 21:31:16 +03:00
|
|
|
|
|
|
|
it.each([
|
2022-03-26 14:17:42 +03:00
|
|
|
[{ theme: 'dark' as Theme }, true],
|
|
|
|
[{ theme: 'light' as Theme }, false],
|
|
|
|
[undefined, false],
|
2021-02-19 20:55:03 +03:00
|
|
|
])('toggles switch if theme is dark', (ui, expectedChecked) => {
|
2022-06-07 21:22:30 +03:00
|
|
|
setUp(ui);
|
2021-02-16 21:31:16 +03:00
|
|
|
|
2022-06-07 21:22:30 +03:00
|
|
|
if (expectedChecked) {
|
|
|
|
expect(screen.getByLabelText('Use dark theme.')).toBeChecked();
|
|
|
|
} else {
|
|
|
|
expect(screen.getByLabelText('Use dark theme.')).not.toBeChecked();
|
|
|
|
}
|
2021-02-16 21:31:16 +03:00
|
|
|
});
|
|
|
|
|
2021-02-19 20:55:03 +03:00
|
|
|
it.each([
|
2022-06-07 21:22:30 +03:00
|
|
|
[{ 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();
|
2021-02-19 20:55:03 +03:00
|
|
|
});
|
|
|
|
|
2021-02-16 21:31:16 +03:00
|
|
|
it.each([
|
2022-06-07 21:22:30 +03:00
|
|
|
['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 });
|
2021-02-16 21:31:16 +03:00
|
|
|
|
|
|
|
expect(setUiSettings).not.toHaveBeenCalled();
|
2022-06-07 21:22:30 +03:00
|
|
|
await user.click(screen.getByLabelText('Use dark theme.'));
|
|
|
|
expect(setUiSettings).toHaveBeenCalledWith({ theme: expectedTheme });
|
2021-02-16 21:31:16 +03:00
|
|
|
});
|
|
|
|
});
|