test(nav): add ThemeToggle spec covering label derivation in both modes
Some checks failed
CI / Unit & Component Tests (push) Failing after 3m0s
CI / OCR Service Tests (push) Successful in 29s
CI / Backend Unit Tests (push) Failing after 2m56s
CI / Unit & Component Tests (pull_request) Failing after 3m1s
CI / OCR Service Tests (pull_request) Successful in 33s
CI / Backend Unit Tests (pull_request) Failing after 2m56s
Some checks failed
CI / Unit & Component Tests (push) Failing after 3m0s
CI / OCR Service Tests (push) Successful in 29s
CI / Backend Unit Tests (push) Failing after 2m56s
CI / Unit & Component Tests (pull_request) Failing after 3m1s
CI / OCR Service Tests (pull_request) Successful in 33s
CI / Backend Unit Tests (pull_request) Failing after 2m56s
Covers the concern raised during PR review: themeLabel $derived logic had no tests. Adds 4 tests — aria-label and title=aria-label assertions in light mode and dark mode — mirroring the NotificationBell pattern. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
45
frontend/src/lib/components/ThemeToggle.svelte.spec.ts
Normal file
45
frontend/src/lib/components/ThemeToggle.svelte.spec.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
import { afterEach, beforeEach, describe, expect, it } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
import ThemeToggle from './ThemeToggle.svelte';
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
localStorage.removeItem('theme');
|
||||
});
|
||||
|
||||
describe('ThemeToggle — label derivation (light mode)', () => {
|
||||
beforeEach(() => {
|
||||
localStorage.setItem('theme', 'light');
|
||||
});
|
||||
|
||||
it('aria-label invites switching to dark mode when theme is light', async () => {
|
||||
render(ThemeToggle);
|
||||
const btn = await page.getByRole('button').element();
|
||||
expect(btn.getAttribute('aria-label')).toBe('Zu dunklem Design wechseln');
|
||||
});
|
||||
|
||||
it('title equals aria-label in light mode', async () => {
|
||||
render(ThemeToggle);
|
||||
const btn = await page.getByRole('button').element();
|
||||
expect(btn.getAttribute('title')).toBe(btn.getAttribute('aria-label'));
|
||||
});
|
||||
});
|
||||
|
||||
describe('ThemeToggle — label derivation (dark mode)', () => {
|
||||
beforeEach(() => {
|
||||
localStorage.setItem('theme', 'dark');
|
||||
});
|
||||
|
||||
it('aria-label invites switching to light mode when theme is dark', async () => {
|
||||
render(ThemeToggle);
|
||||
const btn = await page.getByRole('button').element();
|
||||
expect(btn.getAttribute('aria-label')).toBe('Zu hellem Design wechseln');
|
||||
});
|
||||
|
||||
it('title equals aria-label in dark mode', async () => {
|
||||
render(ThemeToggle);
|
||||
const btn = await page.getByRole('button').element();
|
||||
expect(btn.getAttribute('title')).toBe(btn.getAttribute('aria-label'));
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user