diff --git a/src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.svelte.test.ts b/src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.svelte.test.ts new file mode 100644 index 0000000..393bf55 --- /dev/null +++ b/src/features/ChangeAppTheme/ui/ThemeSwitch/ThemeSwitch.svelte.test.ts @@ -0,0 +1,56 @@ +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'); + }); + }); +});