feat(dashboard): add reader dashboard components
Adds 5 new components for the permission-gated reader layout: - ReaderStatsStrip: stat tiles (documents / persons / stories) linking to list pages - ReaderPersonChips: top-N persons by doc count with avatar + name - ReaderDraftsModule: blog draft list for BLOG_WRITE users - ReaderRecentDocs: 5 most-recently-updated docs with Neu/Aktualisiert badge - ReaderRecentStories: 3 latest published stories with 150-char HTML-stripped excerpt Each component ships with a vitest-browser spec covering the key assertions. Avatar color/initials logic is inlined to satisfy $lib/shared → $lib/person boundary rule. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,60 @@
|
||||
import { describe, it, expect, afterEach } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
|
||||
import ReaderRecentStories from './ReaderRecentStories.svelte';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
type Geschichte = components['schemas']['Geschichte'];
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
const story1: Geschichte = {
|
||||
id: 'g1',
|
||||
title: 'Die Familie Müller',
|
||||
body: '<p>Dies ist eine sehr lange Geschichte über die Familie Müller. Sie lebten in Bayern und hatten viele Kinder. Das war früher so üblich in diesen Gebieten.</p>',
|
||||
status: 'PUBLISHED',
|
||||
createdAt: '2025-01-01T00:00:00Z',
|
||||
updatedAt: '2025-01-01T00:00:00Z',
|
||||
publishedAt: '2025-01-01T00:00:00Z'
|
||||
};
|
||||
|
||||
const longBodyStory: Geschichte = {
|
||||
id: 'g2',
|
||||
title: 'Sehr lange Geschichte',
|
||||
body: '<p>' + 'A'.repeat(200) + '</p>',
|
||||
status: 'PUBLISHED',
|
||||
createdAt: '2025-02-01T00:00:00Z',
|
||||
updatedAt: '2025-02-01T00:00:00Z',
|
||||
publishedAt: '2025-02-01T00:00:00Z'
|
||||
};
|
||||
|
||||
describe('ReaderRecentStories', () => {
|
||||
it('renders a link to /geschichten/{id} for each story', async () => {
|
||||
render(ReaderRecentStories, { stories: [story1] });
|
||||
const link = page.getByRole('link', { name: /Die Familie Müller/ });
|
||||
await expect.element(link).toHaveAttribute('href', '/geschichten/g1');
|
||||
});
|
||||
|
||||
it('truncates body excerpt to 150 characters and strips HTML', async () => {
|
||||
render(ReaderRecentStories, { stories: [longBodyStory] });
|
||||
const excerpt = page.getByText(/A{100,150}/);
|
||||
await expect.element(excerpt).toBeInTheDocument();
|
||||
const text = ((await excerpt.element()) as HTMLElement).textContent;
|
||||
expect(text!.replace(/…$/, '').length).toBeLessThanOrEqual(150);
|
||||
});
|
||||
|
||||
it('shows empty state when stories array is empty', async () => {
|
||||
render(ReaderRecentStories, { stories: [] });
|
||||
const links = page.getByRole('link');
|
||||
await expect.element(links).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders "Alle Geschichten" link', async () => {
|
||||
render(ReaderRecentStories, { stories: [story1] });
|
||||
const allLink = page.getByRole('link', { name: /Alle Geschichten/i });
|
||||
await expect.element(allLink).toHaveAttribute('href', '/geschichten');
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user