test(LanguageSwitcher): add Vitest unit tests for inverted prop
Some checks failed
CI / E2E Tests (pull_request) Failing after 1h49m47s
CI / Unit & Component Tests (push) Failing after 1m30s
CI / E2E Tests (push) Failing after 1h52m7s
CI / Backend Unit Tests (push) Failing after 2m28s
CI / Unit & Component Tests (pull_request) Failing after 3m27s
CI / Backend Unit Tests (pull_request) Failing after 2m38s

Covers active/inactive class tokens for both inverted=true and inverted=false,
and verifies setLocale is called with the correct locale on button click.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit was merged in pull request #165.
This commit is contained in:
Marcel
2026-03-31 09:43:29 +02:00
parent 53038dea68
commit 2dd73cf594

View File

@@ -0,0 +1,94 @@
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { cleanup, render } from 'vitest-browser-svelte';
import { page } from 'vitest/browser';
import LanguageSwitcher from './LanguageSwitcher.svelte';
const mockSetLocale = vi.hoisted(() => vi.fn());
vi.mock('$lib/paraglide/runtime', () => ({
getLocale: vi.fn(() => 'de'),
setLocale: mockSetLocale
}));
beforeEach(() => mockSetLocale.mockClear());
afterEach(cleanup);
// ─── inverted=true (dark background) ──────────────────────────────────────
describe('LanguageSwitcher inverted=true', () => {
it('active locale button has text-white and font-bold', async () => {
render(LanguageSwitcher, { inverted: true });
const el = await page.getByRole('button', { name: 'DE' }).element();
expect(el.className).toMatch(/\btext-white\b/);
expect(el.className).toMatch(/\bfont-bold\b/);
});
it('inactive locale buttons have text-white/70', async () => {
render(LanguageSwitcher, { inverted: true });
const el = await page.getByRole('button', { name: 'EN' }).element();
expect(el.className).toMatch(/text-white\/70/);
});
it('inactive locale buttons do not have font-bold', async () => {
render(LanguageSwitcher, { inverted: true });
const el = await page.getByRole('button', { name: 'EN' }).element();
expect(el.className).not.toMatch(/\bfont-bold\b/);
});
});
// ─── inverted=false (light background) ─────────────────────────────────────
describe('LanguageSwitcher inverted=false', () => {
it('active locale button has text-ink and font-bold', async () => {
render(LanguageSwitcher, { inverted: false });
const el = await page.getByRole('button', { name: 'DE' }).element();
expect(el.className).toMatch(/\btext-ink\b/);
expect(el.className).toMatch(/\bfont-bold\b/);
});
it('inactive locale buttons have text-ink-3', async () => {
render(LanguageSwitcher, { inverted: false });
const el = await page.getByRole('button', { name: 'EN' }).element();
expect(el.className).toMatch(/\btext-ink-3\b/);
});
it('inactive locale buttons do not have text-white', async () => {
render(LanguageSwitcher, { inverted: false });
const el = await page.getByRole('button', { name: 'EN' }).element();
expect(el.className).not.toMatch(/\btext-white\b/);
});
});
// ─── locale switching ──────────────────────────────────────────────────────
describe('LanguageSwitcher locale switching', () => {
it('calls setLocale with en when EN button is clicked', async () => {
render(LanguageSwitcher, { inverted: false });
const el = await page.getByRole('button', { name: 'EN' }).element();
el.click();
expect(mockSetLocale).toHaveBeenCalledWith('en');
});
it('calls setLocale with es when ES button is clicked', async () => {
render(LanguageSwitcher, { inverted: false });
const el = await page.getByRole('button', { name: 'ES' }).element();
el.click();
expect(mockSetLocale).toHaveBeenCalledWith('es');
});
});