bd3feda182
h-8 w-8 (32px) replaced with h-11 w-11 (44px) to meet the minimum touch target for the 60+ transcriber audience. Test added to prevent regression. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import { describe, it, expect, afterEach, vi } from 'vitest';
|
||
import { cleanup, render } from 'vitest-browser-svelte';
|
||
import { page } from 'vitest/browser';
|
||
import RelationshipChip from './RelationshipChip.svelte';
|
||
|
||
vi.mock('$app/forms', () => ({ enhance: () => () => {} }));
|
||
|
||
afterEach(cleanup);
|
||
|
||
const baseProps = {
|
||
chipLabel: 'Elternteil',
|
||
otherName: 'Anna Schmidt',
|
||
yearRange: '',
|
||
canWrite: false,
|
||
relId: 'rel-1'
|
||
};
|
||
|
||
describe('RelationshipChip', () => {
|
||
it('renders the chip label', async () => {
|
||
render(RelationshipChip, baseProps);
|
||
await expect.element(page.getByText('Elternteil')).toBeInTheDocument();
|
||
});
|
||
|
||
it('renders the other person name', async () => {
|
||
render(RelationshipChip, baseProps);
|
||
await expect.element(page.getByText('Anna Schmidt')).toBeInTheDocument();
|
||
});
|
||
|
||
it('shows year range when provided', async () => {
|
||
render(RelationshipChip, { ...baseProps, yearRange: '1920–1980' });
|
||
await expect.element(page.getByText('1920–1980')).toBeInTheDocument();
|
||
});
|
||
|
||
it('does not show year range span when empty', async () => {
|
||
render(RelationshipChip, { ...baseProps, yearRange: '' });
|
||
expect(document.querySelector('[data-testid="year-range"]')).toBeNull();
|
||
});
|
||
|
||
it('shows delete button when canWrite is true', async () => {
|
||
render(RelationshipChip, { ...baseProps, canWrite: true });
|
||
await expect.element(page.getByRole('button')).toBeInTheDocument();
|
||
});
|
||
|
||
it('hides delete button when canWrite is false', async () => {
|
||
render(RelationshipChip, { ...baseProps, canWrite: false });
|
||
expect(document.querySelector('button')).toBeNull();
|
||
});
|
||
|
||
it('delete button has h-11 w-11 (44px) WCAG touch target class', async () => {
|
||
render(RelationshipChip, { ...baseProps, canWrite: true });
|
||
const btn = document.querySelector('button')!;
|
||
expect(btn.className).toContain('h-11');
|
||
expect(btn.className).toContain('w-11');
|
||
});
|
||
});
|