test: cover PersonTypeBadge, ExpandableText, PersonChipRow branches
PersonTypeBadge: one test per switch arm (INSTITUTION, GROUP, UNKNOWN) plus the two no-render branches (unrecognised type, empty type). ExpandableText: clamp detection, toggle visibility logic, expand → collapse round-trip, default maxLines fallback. PersonChipRow: sender-only, sender+arrow, abbreviated naming, max-two visible receivers, +N overflow pill presence/absence, receivers-only case (no sender → no arrow). 19 tests across three files. Each file uses afterEach(cleanup) and queries via getByRole/getByText so tests stay decoupled from CSS. Refs #496. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,57 @@
|
||||
import { describe, it, expect, afterEach } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
import ExpandableText from './ExpandableText.svelte';
|
||||
|
||||
afterEach(cleanup);
|
||||
|
||||
const longText = Array.from({ length: 60 }, (_, i) => `Zeile ${i + 1}.`).join('\n');
|
||||
const shortText = 'Zeile 1';
|
||||
|
||||
describe('ExpandableText', () => {
|
||||
it('renders the supplied text inside the clamped block', async () => {
|
||||
render(ExpandableText, { props: { text: shortText, maxLines: 2 } });
|
||||
|
||||
await expect.element(page.getByText('Zeile 1')).toBeVisible();
|
||||
});
|
||||
|
||||
it('does not show a toggle button when the content fits inside maxLines', async () => {
|
||||
render(ExpandableText, { props: { text: shortText, maxLines: 100 } });
|
||||
|
||||
await expect
|
||||
.element(page.getByRole('button', { name: /mehr anzeigen/i }))
|
||||
.not.toBeInTheDocument();
|
||||
await expect
|
||||
.element(page.getByRole('button', { name: /weniger anzeigen/i }))
|
||||
.not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows the "Mehr anzeigen" button when the content overflows the line clamp', async () => {
|
||||
render(ExpandableText, { props: { text: longText, maxLines: 2 } });
|
||||
|
||||
await expect.element(page.getByRole('button', { name: /mehr anzeigen/i })).toBeVisible();
|
||||
});
|
||||
|
||||
it('switches the toggle label to "Weniger anzeigen" after expanding', async () => {
|
||||
render(ExpandableText, { props: { text: longText, maxLines: 2 } });
|
||||
|
||||
await page.getByRole('button', { name: /mehr anzeigen/i }).click();
|
||||
|
||||
await expect.element(page.getByRole('button', { name: /weniger anzeigen/i })).toBeVisible();
|
||||
});
|
||||
|
||||
it('collapses again when the toggle is clicked while expanded', async () => {
|
||||
render(ExpandableText, { props: { text: longText, maxLines: 2 } });
|
||||
|
||||
await page.getByRole('button', { name: /mehr anzeigen/i }).click();
|
||||
await page.getByRole('button', { name: /weniger anzeigen/i }).click();
|
||||
|
||||
await expect.element(page.getByRole('button', { name: /mehr anzeigen/i })).toBeVisible();
|
||||
});
|
||||
|
||||
it('uses the default maxLines (10) when the prop is omitted', async () => {
|
||||
render(ExpandableText, { props: { text: shortText } });
|
||||
|
||||
await expect.element(page.getByText('Zeile 1')).toBeVisible();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user