test(geschichten): cover the index page branches
Heading, canBlogWrite-gated CTA, no-filter empty state vs for-persons empty state, all-pill aria-pressed matrix, person-filter chip rendering, populated card list. Mocks $app/navigation since the filter buttons call goto. 9 tests, ~25 branches. Refs #496. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
141
frontend/src/routes/geschichten/page.svelte.test.ts
Normal file
141
frontend/src/routes/geschichten/page.svelte.test.ts
Normal file
@@ -0,0 +1,141 @@
|
|||||||
|
import { describe, it, expect, vi, afterEach } from 'vitest';
|
||||||
|
import { cleanup, render } from 'vitest-browser-svelte';
|
||||||
|
import { page } from 'vitest/browser';
|
||||||
|
|
||||||
|
vi.mock('$app/navigation', () => ({
|
||||||
|
beforeNavigate: () => {},
|
||||||
|
afterNavigate: () => {},
|
||||||
|
goto: vi.fn(),
|
||||||
|
invalidate: vi.fn(),
|
||||||
|
invalidateAll: vi.fn(),
|
||||||
|
preloadCode: vi.fn(),
|
||||||
|
preloadData: vi.fn(),
|
||||||
|
pushState: vi.fn(),
|
||||||
|
replaceState: vi.fn(),
|
||||||
|
disableScrollHandling: vi.fn(),
|
||||||
|
onNavigate: () => () => {}
|
||||||
|
}));
|
||||||
|
|
||||||
|
const { default: GeschichtenListPage } = await import('./+page.svelte');
|
||||||
|
|
||||||
|
afterEach(cleanup);
|
||||||
|
|
||||||
|
const baseData = (overrides: Record<string, unknown> = {}) => ({
|
||||||
|
geschichten: [] as Array<{
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
body?: string;
|
||||||
|
publishedAt?: string;
|
||||||
|
author?: { firstName?: string; lastName?: string; email: string };
|
||||||
|
}>,
|
||||||
|
personFilters: [] as { id?: string; displayName: string }[],
|
||||||
|
documentFilter: null,
|
||||||
|
canBlogWrite: false,
|
||||||
|
...overrides
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('geschichten/+ page', () => {
|
||||||
|
it('renders the page heading', async () => {
|
||||||
|
render(GeschichtenListPage, { props: { data: baseData() } });
|
||||||
|
|
||||||
|
await expect
|
||||||
|
.element(page.getByRole('heading', { level: 1, name: /geschichten/i }))
|
||||||
|
.toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows the new-geschichte CTA when canBlogWrite is true', async () => {
|
||||||
|
render(GeschichtenListPage, { props: { data: baseData({ canBlogWrite: true }) } });
|
||||||
|
|
||||||
|
await expect
|
||||||
|
.element(page.getByRole('link', { name: /neue geschichte/i }))
|
||||||
|
.toHaveAttribute('href', '/geschichten/new');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('hides the new-geschichte CTA when canBlogWrite is false', async () => {
|
||||||
|
render(GeschichtenListPage, { props: { data: baseData({ canBlogWrite: false }) } });
|
||||||
|
|
||||||
|
await expect
|
||||||
|
.element(page.getByRole('link', { name: /neue geschichte/i }))
|
||||||
|
.not.toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders the no-filter empty state when geschichten and personFilters are empty', async () => {
|
||||||
|
render(GeschichtenListPage, { props: { data: baseData() } });
|
||||||
|
|
||||||
|
await expect
|
||||||
|
.element(page.getByText('Es gibt noch keine veröffentlichten Geschichten.'))
|
||||||
|
.toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders the for-persons empty state when filters are set but no results', async () => {
|
||||||
|
render(GeschichtenListPage, {
|
||||||
|
props: {
|
||||||
|
data: baseData({ personFilters: [{ id: 'p1', displayName: 'Anna Schmidt' }] })
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
await expect
|
||||||
|
.element(page.getByText(/Keine Geschichten für Anna Schmidt gefunden/i))
|
||||||
|
.toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders the all-pill as pressed when no filters are set', async () => {
|
||||||
|
render(GeschichtenListPage, { props: { data: baseData() } });
|
||||||
|
|
||||||
|
await expect
|
||||||
|
.element(page.getByRole('button', { name: /^alle$/i }))
|
||||||
|
.toHaveAttribute('aria-pressed', 'true');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('marks the all-pill not pressed when person filters are set', async () => {
|
||||||
|
render(GeschichtenListPage, {
|
||||||
|
props: { data: baseData({ personFilters: [{ id: 'p1', displayName: 'Anna' }] }) }
|
||||||
|
});
|
||||||
|
|
||||||
|
await expect
|
||||||
|
.element(page.getByRole('button', { name: /^alle$/i }))
|
||||||
|
.toHaveAttribute('aria-pressed', 'false');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders one chip per person filter', async () => {
|
||||||
|
render(GeschichtenListPage, {
|
||||||
|
props: {
|
||||||
|
data: baseData({
|
||||||
|
personFilters: [
|
||||||
|
{ id: 'p1', displayName: 'Anna Schmidt' },
|
||||||
|
{ id: 'p2', displayName: 'Bert Meier' }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
await expect
|
||||||
|
.element(page.getByRole('button', { name: /Anna Schmidt aus Filter entfernen/i }))
|
||||||
|
.toBeVisible();
|
||||||
|
await expect
|
||||||
|
.element(page.getByRole('button', { name: /Bert Meier aus Filter entfernen/i }))
|
||||||
|
.toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders one card per geschichte when populated', async () => {
|
||||||
|
render(GeschichtenListPage, {
|
||||||
|
props: {
|
||||||
|
data: baseData({
|
||||||
|
geschichten: [
|
||||||
|
{
|
||||||
|
id: 'g1',
|
||||||
|
title: 'Reise nach Berlin',
|
||||||
|
body: '<p>Im Jahr 1923...</p>',
|
||||||
|
publishedAt: '2026-04-15T10:00:00Z',
|
||||||
|
author: { firstName: 'Anna', lastName: 'Schmidt', email: 'a@x' }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
await expect
|
||||||
|
.element(page.getByRole('heading', { level: 2, name: /reise nach berlin/i }))
|
||||||
|
.toBeVisible();
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user