39163f06bf
Some checks failed
CI / Backend Unit Tests (push) Failing after 3m5s
CI / Unit & Component Tests (pull_request) Failing after 2m26s
CI / OCR Service Tests (pull_request) Successful in 36s
CI / Backend Unit Tests (pull_request) Failing after 2m55s
CI / Unit & Component Tests (push) Failing after 2m49s
CI / OCR Service Tests (push) Successful in 48s
- Login page: email input replaces username field (type=email, name=email) - Login server action: reads email, uses i18n error for missing credentials - AccountSection: email input (type=email) replaces username text field - New user server action: sends email as required field, drops username - UsersListPanel: displays and searches by email instead of username - Admin edit user page: heading and delete confirm use email - Profile page: fullName fallback uses email, drops @username display - app.d.ts: email required on User, username removed - Generated API types: AppUser.email required, username removed; CreateUserRequest.email required, username removed - i18n: login_label_email, login_error_missing_credentials, admin_col_login updated (de/en/es) - errors.ts: MISSING_CREDENTIALS → login_error_missing_credentials Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
90 lines
3.4 KiB
TypeScript
90 lines
3.4 KiB
TypeScript
import { afterEach, describe, expect, it, vi } from 'vitest';
|
||
import { cleanup, render } from 'vitest-browser-svelte';
|
||
import { page, userEvent } from 'vitest/browser';
|
||
import { createRawSnippet } from 'svelte';
|
||
|
||
vi.mock('$env/static/public', () => ({ PUBLIC_NOTIFICATION_POLL_MS: '60000' }));
|
||
|
||
afterEach(cleanup);
|
||
|
||
const emptySnippet = createRawSnippet(() => ({ render: () => '<span></span>' }));
|
||
import Layout from './+layout.svelte';
|
||
|
||
const tick = () => new Promise((r) => setTimeout(r, 0));
|
||
|
||
// Minimal data required by the layout
|
||
const makeData = (overrides = {}) => ({
|
||
user: {
|
||
id: '1',
|
||
firstName: 'Max',
|
||
lastName: 'Müller',
|
||
email: 'max@example.com',
|
||
groups: [],
|
||
enabled: true,
|
||
createdAt: ''
|
||
},
|
||
canWrite: true,
|
||
canAnnotate: false,
|
||
...overrides
|
||
});
|
||
|
||
// ─── User avatar ──────────────────────────────────────────────────────────────
|
||
|
||
describe('Layout – user avatar button', () => {
|
||
it('shows user initials when first and last name are set', async () => {
|
||
render(Layout, { data: makeData(), children: emptySnippet });
|
||
await expect.element(page.getByRole('button', { name: /MM/ })).toBeInTheDocument();
|
||
});
|
||
|
||
it('shows fallback icon button when names are not set', async () => {
|
||
render(Layout, {
|
||
data: makeData({
|
||
user: { id: '1', email: 'fallback@example.com', groups: [], enabled: true, createdAt: '' }
|
||
}),
|
||
children: emptySnippet
|
||
});
|
||
// Button should still exist (with aria-label for accessibility)
|
||
await expect.element(page.getByRole('button', { name: /Profil/i })).toBeInTheDocument();
|
||
});
|
||
});
|
||
|
||
// ─── Dropdown ─────────────────────────────────────────────────────────────────
|
||
|
||
describe('Layout – user dropdown', () => {
|
||
it('dropdown is hidden initially', async () => {
|
||
render(Layout, { data: makeData(), children: emptySnippet });
|
||
await tick();
|
||
await expect.element(page.getByRole('link', { name: /Profil/i })).not.toBeInTheDocument();
|
||
});
|
||
|
||
it('opens dropdown on button click', async () => {
|
||
render(Layout, { data: makeData(), children: emptySnippet });
|
||
await page.getByRole('button', { name: /MM/ }).click();
|
||
await expect.element(page.getByRole('link', { name: /Profil/i })).toBeInTheDocument();
|
||
});
|
||
|
||
it('profile link points to /profile', async () => {
|
||
render(Layout, { data: makeData(), children: emptySnippet });
|
||
await page.getByRole('button', { name: /MM/ }).click();
|
||
await expect
|
||
.element(page.getByRole('link', { name: /Profil/i }))
|
||
.toHaveAttribute('href', '/profile');
|
||
});
|
||
|
||
it('logout button is in the dropdown', async () => {
|
||
render(Layout, { data: makeData(), children: emptySnippet });
|
||
await page.getByRole('button', { name: /MM/ }).click();
|
||
await expect.element(page.getByRole('button', { name: /Abmelden/i })).toBeInTheDocument();
|
||
});
|
||
|
||
it('closes dropdown when Escape is pressed', async () => {
|
||
render(Layout, { data: makeData(), children: emptySnippet });
|
||
const btn = page.getByRole('button', { name: /MM/ });
|
||
await btn.click();
|
||
await expect.element(page.getByRole('link', { name: /Profil/i })).toBeInTheDocument();
|
||
await userEvent.keyboard('{Escape}');
|
||
await tick();
|
||
await expect.element(page.getByRole('link', { name: /Profil/i })).not.toBeInTheDocument();
|
||
});
|
||
});
|