57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
|
import {
|
||
|
|
fireEvent,
|
||
|
|
render,
|
||
|
|
screen,
|
||
|
|
} from '@testing-library/svelte';
|
||
|
|
import { themeManager } from '../../model';
|
||
|
|
import ThemeSwitch from './ThemeSwitch.svelte';
|
||
|
|
|
||
|
|
const context = new Map([['responsive', { isMobile: false }]]);
|
||
|
|
|
||
|
|
describe('ThemeSwitch', () => {
|
||
|
|
beforeEach(() => {
|
||
|
|
themeManager.setTheme('light');
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('Rendering', () => {
|
||
|
|
it('renders an icon button', () => {
|
||
|
|
render(ThemeSwitch, { context });
|
||
|
|
expect(screen.getByRole('button')).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('has "Toggle theme" title', () => {
|
||
|
|
render(ThemeSwitch, { context });
|
||
|
|
expect(screen.getByTitle('Toggle theme')).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('renders an SVG icon', () => {
|
||
|
|
const { container } = render(ThemeSwitch, { context });
|
||
|
|
expect(container.querySelector('svg')).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
describe('Interaction', () => {
|
||
|
|
it('toggles theme from light to dark on click', async () => {
|
||
|
|
render(ThemeSwitch, { context });
|
||
|
|
expect(themeManager.value).toBe('light');
|
||
|
|
await fireEvent.click(screen.getByRole('button'));
|
||
|
|
expect(themeManager.value).toBe('dark');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('toggles theme from dark to light on click', async () => {
|
||
|
|
themeManager.setTheme('dark');
|
||
|
|
render(ThemeSwitch, { context });
|
||
|
|
await fireEvent.click(screen.getByRole('button'));
|
||
|
|
expect(themeManager.value).toBe('light');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('double click returns to original theme', async () => {
|
||
|
|
render(ThemeSwitch, { context });
|
||
|
|
const btn = screen.getByRole('button');
|
||
|
|
await fireEvent.click(btn);
|
||
|
|
await fireEvent.click(btn);
|
||
|
|
expect(themeManager.value).toBe('light');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|