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>
86 lines
3.1 KiB
TypeScript
86 lines
3.1 KiB
TypeScript
import { describe, it, expect, afterEach } from 'vitest';
|
|
import { cleanup, render } from 'vitest-browser-svelte';
|
|
import { page } from 'vitest/browser';
|
|
import PersonChipRow from './PersonChipRow.svelte';
|
|
|
|
afterEach(cleanup);
|
|
|
|
const sender = { id: 's-1', firstName: 'Anna', lastName: 'Schmidt', displayName: 'Anna Schmidt' };
|
|
const r1 = { id: 'r-1', firstName: 'Bert', lastName: 'Meier', displayName: 'Bert Meier' };
|
|
const r2 = { id: 'r-2', firstName: 'Clara', lastName: 'Weiss', displayName: 'Clara Weiss' };
|
|
const r3 = { id: 'r-3', firstName: 'Doris', lastName: 'Lang', displayName: 'Doris Lang' };
|
|
|
|
describe('PersonChipRow', () => {
|
|
it('renders only the sender when there are no receivers', async () => {
|
|
render(PersonChipRow, {
|
|
props: { sender, receivers: [], abbreviated: false, extraCount: 0 }
|
|
});
|
|
|
|
await expect.element(page.getByText('Anna Schmidt')).toBeVisible();
|
|
await expect.element(page.getByRole('img', { name: '' })).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('renders the arrow image when sender and at least one receiver are present', async () => {
|
|
render(PersonChipRow, {
|
|
props: { sender, receivers: [r1], abbreviated: false, extraCount: 0 }
|
|
});
|
|
|
|
const arrow = document.querySelector('img[aria-hidden="true"]');
|
|
expect(arrow).not.toBeNull();
|
|
});
|
|
|
|
it('renders both sender and visible receivers with abbreviated=false', async () => {
|
|
render(PersonChipRow, {
|
|
props: { sender, receivers: [r1, r2], abbreviated: false, extraCount: 0 }
|
|
});
|
|
|
|
await expect.element(page.getByText('Anna Schmidt')).toBeVisible();
|
|
await expect.element(page.getByText('Bert Meier')).toBeVisible();
|
|
});
|
|
|
|
it('uses abbreviated names when abbreviated=true', async () => {
|
|
render(PersonChipRow, {
|
|
props: { sender, receivers: [r1], abbreviated: true, extraCount: 0 }
|
|
});
|
|
|
|
await expect.element(page.getByText('A. Schmidt')).toBeVisible();
|
|
await expect.element(page.getByText('B. Meier')).toBeVisible();
|
|
});
|
|
|
|
it('limits the visible receivers to the first two', async () => {
|
|
render(PersonChipRow, {
|
|
props: { sender, receivers: [r1, r2, r3], abbreviated: false, extraCount: 1 }
|
|
});
|
|
|
|
await expect.element(page.getByText('Bert Meier')).toBeVisible();
|
|
await expect.element(page.getByText('Clara Weiss')).toBeVisible();
|
|
await expect.element(page.getByText('Doris Lang')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('renders the OverflowPillDisplay when extraCount > 0', async () => {
|
|
render(PersonChipRow, {
|
|
props: { sender, receivers: [r1, r2, r3], abbreviated: false, extraCount: 1 }
|
|
});
|
|
|
|
await expect.element(page.getByText(/\+1/)).toBeVisible();
|
|
});
|
|
|
|
it('omits the OverflowPillDisplay when extraCount is 0', async () => {
|
|
render(PersonChipRow, {
|
|
props: { sender, receivers: [r1], abbreviated: false, extraCount: 0 }
|
|
});
|
|
|
|
await expect.element(page.getByText(/\+\d/)).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('renders only receivers when there is no sender', async () => {
|
|
render(PersonChipRow, {
|
|
props: { sender: null, receivers: [r1], abbreviated: false, extraCount: 0 }
|
|
});
|
|
|
|
await expect.element(page.getByText('Bert Meier')).toBeVisible();
|
|
const arrow = document.querySelector('img[aria-hidden="true"]');
|
|
expect(arrow).toBeNull();
|
|
});
|
|
});
|