fe9b4a9569
Some checks failed
CI / Backend Unit Tests (pull_request) Has been cancelled
CI / E2E Tests (pull_request) Has been cancelled
CI / Unit & Component Tests (pull_request) Has been cancelled
CI / Unit & Component Tests (push) Successful in 2m3s
CI / Backend Unit Tests (push) Successful in 2m13s
CI / E2E Tests (push) Successful in 17m49s
Paraglide's client-side setLocale writes the locale via document.cookie,
which silently fails for HttpOnly cookies. SvelteKit's cookies.set()
defaults to httpOnly: true, so locale switching never worked in tests.
Fix by setting httpOnly: false on the locale cookie (it's a UI preference,
not a credential — no security concern).
Add waitForSelector('[data-hydrated]') before any click that relies on
SvelteKit JavaScript event handlers. Without this, the click fires before
hydration and the onclick handler is not yet registered.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
41 lines
2.0 KiB
TypeScript
41 lines
2.0 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
test.describe('Language selector', () => {
|
|
test('shows DE, EN, ES buttons in the header', async ({ page }) => {
|
|
await page.goto('/');
|
|
await expect(page.getByRole('banner').getByRole('button', { name: 'DE', exact: true })).toBeVisible();
|
|
await expect(page.getByRole('banner').getByRole('button', { name: 'EN', exact: true })).toBeVisible();
|
|
await expect(page.getByRole('banner').getByRole('button', { name: 'ES', exact: true })).toBeVisible();
|
|
});
|
|
|
|
test('switching to EN translates the navigation', async ({ page }) => {
|
|
await page.goto('/');
|
|
await page.waitForSelector('[data-hydrated]');
|
|
await page.getByRole('banner').getByRole('button', { name: 'EN', exact: true }).click();
|
|
await expect(page.getByRole('navigation').getByRole('link', { name: 'Documents' })).toBeVisible();
|
|
await expect(page.getByRole('navigation').getByRole('link', { name: 'Persons' })).toBeVisible();
|
|
});
|
|
|
|
test('language choice persists after navigation', async ({ page }) => {
|
|
await page.goto('/');
|
|
await page.waitForSelector('[data-hydrated]');
|
|
await page.getByRole('banner').getByRole('button', { name: 'EN', exact: true }).click();
|
|
await page.goto('/persons');
|
|
await expect(page.getByRole('navigation').getByRole('link', { name: 'Documents' })).toBeVisible();
|
|
});
|
|
|
|
test('switching back to DE restores German', async ({ page }) => {
|
|
await page.goto('/');
|
|
await page.waitForSelector('[data-hydrated]');
|
|
await page.getByRole('banner').getByRole('button', { name: 'EN', exact: true }).click();
|
|
await page.getByRole('banner').getByRole('button', { name: 'DE', exact: true }).click();
|
|
await expect(page.getByRole('navigation').getByRole('link', { name: 'Dokumente' })).toBeVisible();
|
|
});
|
|
|
|
test('active language button is visually highlighted', async ({ page }) => {
|
|
await page.goto('/');
|
|
const deBtn = page.getByRole('banner').getByRole('button', { name: 'DE', exact: true });
|
|
await expect(deBtn).toHaveClass(/font-bold/);
|
|
});
|
|
});
|