64 lines
2.4 KiB
TypeScript
64 lines
2.4 KiB
TypeScript
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');
|
|
});
|
|
});
|