feat(lesereisen): GeschichteListRow with JOURNEY badge + i18n keys
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
63
frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts
Normal file
63
frontend/src/lib/geschichte/GeschichteListRow.svelte.spec.ts
Normal file
@@ -0,0 +1,63 @@
|
||||
import { describe, it, expect, afterEach } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
|
||||
const { default: GeschichteListRow } = await import('./GeschichteListRow.svelte');
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
const baseRow = (overrides = {}) => ({
|
||||
id: 'g1',
|
||||
title: 'Die Reise nach Berlin',
|
||||
body: '<p>Im Jahr 1923...</p>',
|
||||
type: 'STORY' as 'STORY' | 'JOURNEY',
|
||||
status: 'PUBLISHED' as 'PUBLISHED' | 'DRAFT',
|
||||
author: { firstName: 'Anna', lastName: 'Schmidt', email: 'a@x' },
|
||||
publishedAt: '2026-04-15T10:00:00Z',
|
||||
...overrides
|
||||
});
|
||||
|
||||
describe('GeschichteListRow', () => {
|
||||
it('renders the title', async () => {
|
||||
render(GeschichteListRow, { props: { geschichte: baseRow() } });
|
||||
await expect
|
||||
.element(page.getByRole('heading', { level: 2 }))
|
||||
.toHaveTextContent('Die Reise nach Berlin');
|
||||
});
|
||||
|
||||
it('shows no badge for STORY type', async () => {
|
||||
render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'STORY' }) } });
|
||||
expect(document.querySelector('[data-testid="journey-badge"]')).toBeNull();
|
||||
});
|
||||
|
||||
it('shows no badge when type is undefined', async () => {
|
||||
render(GeschichteListRow, {
|
||||
props: { geschichte: baseRow({ type: undefined as unknown as 'STORY' | 'JOURNEY' }) }
|
||||
});
|
||||
expect(document.querySelector('[data-testid="journey-badge"]')).toBeNull();
|
||||
});
|
||||
|
||||
it('shows REISE badge for JOURNEY type', async () => {
|
||||
render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'JOURNEY' }) } });
|
||||
const badge = document.querySelector('[data-testid="journey-badge"]');
|
||||
expect(badge).not.toBeNull();
|
||||
expect(badge?.textContent?.trim()).toBe('REISE');
|
||||
});
|
||||
|
||||
it('badge is a plain <span>, not a nested interactive element', async () => {
|
||||
render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'JOURNEY' }) } });
|
||||
const badge = document.querySelector('[data-testid="journey-badge"]');
|
||||
expect(badge?.tagName.toLowerCase()).toBe('span');
|
||||
});
|
||||
|
||||
it('badge has text-xs class for WCAG readability', async () => {
|
||||
render(GeschichteListRow, { props: { geschichte: baseRow({ type: 'JOURNEY' }) } });
|
||||
const badge = document.querySelector('[data-testid="journey-badge"]');
|
||||
expect(badge?.className).toContain('text-xs');
|
||||
});
|
||||
|
||||
it('renders author name in meta line', async () => {
|
||||
render(GeschichteListRow, { props: { geschichte: baseRow() } });
|
||||
expect(document.body.textContent).toContain('Anna Schmidt');
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user