From 35c2c839964c6946fcad02f801e435760a9e6969 Mon Sep 17 00:00:00 2001 From: Marcel Date: Sun, 26 Apr 2026 21:27:03 +0200 Subject: [PATCH] test(nav): add ThemeToggle spec covering label derivation in both modes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../lib/components/ThemeToggle.svelte.spec.ts | 45 +++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 frontend/src/lib/components/ThemeToggle.svelte.spec.ts diff --git a/frontend/src/lib/components/ThemeToggle.svelte.spec.ts b/frontend/src/lib/components/ThemeToggle.svelte.spec.ts new file mode 100644 index 00000000..546a22ab --- /dev/null +++ b/frontend/src/lib/components/ThemeToggle.svelte.spec.ts @@ -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')); + }); +});