marcel/familienarchiv
1
0
Fork 0
Code Issues 119 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

test(transcription): assert 44px target classes, not rendered px (#722)
All checks were successful
CI / Unit & Component Tests (push) Successful in 3m14s
Details
CI / OCR Service Tests (push) Successful in 21s
Details
CI / Backend Unit Tests (push) Successful in 3m39s
Details
CI / fail2ban Regex (push) Successful in 43s
Details
CI / Semgrep Security Scan (push) Successful in 21s
Details
CI / Compose Bucket Idempotency (push) Successful in 1m4s
Details

Browse Source 
The component-test browser env (src/test-setup.ts) loads no Tailwind
stylesheet, so the footer buttons' min-h/min-w-[44px] classes have no
layout effect there and the elements collapse to their 16px icon —
making the getBoundingClientRect size assertions fail in CI.

Assert the sizing utility classes instead; they are the exact mechanism
that produces the WCAG 2.2 §2.5.8 target size in the real app. The
compiled pixel size remains covered by the full-app e2e.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit was merged in pull request #723.
This commit is contained in:
Marcel
2026-06-04 11:49:21 +02:00
committed by marcel
parent c35f51d209
commit 23006a6562
1 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/lib/document/transcription/TranscriptionBlock.svelte.spec.ts
View File

@@ -175,23 +175,27 @@ describe('TranscriptionBlock — reorder controls', () => {
// After #722 removed the on-canvas delete button, the panel footer's icon-only // After #722 removed the on-canvas delete button, the panel footer's icon-only
// actions are the only touch-reachable controls for those operations. They must // actions are the only touch-reachable controls for those operations. They must
// meet the 44×44px minimum target size in both dimensions. // meet the 44×44px minimum target size in both dimensions.
//
// We assert the sizing utility classes rather than measuring getBoundingClientRect:
// the component-test browser env (src/test-setup.ts) loads no Tailwind stylesheet,
// so class-based layout has no effect there and a rendered element collapses to its
// icon (16px). The `min-h/min-w-[44px]` classes are the exact mechanism that yields
// the WCAG target size in the real app; the compiled px size is covered by e2e.
describe('TranscriptionBlock — footer action touch targets', () => { describe('TranscriptionBlock — footer action touch targets', () => {
it('delete button has a >=44px hit area in both dimensions', async () => { it('delete button carries the 44px minimum-target-size classes', async () => {
renderBlock(); renderBlock();
const btn = (await page.getByRole('button', { name: 'Löschen' }).element()) as HTMLElement; const btn = (await page.getByRole('button', { name: 'Löschen' }).element()) as HTMLElement;
const rect = btn.getBoundingClientRect(); expect(btn.className).toContain('min-h-[44px]');
expect(rect.width).toBeGreaterThanOrEqual(44); expect(btn.className).toContain('min-w-[44px]');
expect(rect.height).toBeGreaterThanOrEqual(44);
}); });
it('review toggle button has a >=44px hit area in both dimensions', async () => { it('review toggle button carries the 44px minimum-target-size classes', async () => {
renderBlock({ reviewed: false }); renderBlock({ reviewed: false });
const btn = (await page const btn = (await page
.getByRole('button', { name: 'Als geprüft markieren' }) .getByRole('button', { name: 'Als geprüft markieren' })
.element()) as HTMLElement; .element()) as HTMLElement;
const rect = btn.getBoundingClientRect(); expect(btn.className).toContain('min-h-[44px]');
expect(rect.width).toBeGreaterThanOrEqual(44); expect(btn.className).toContain('min-w-[44px]');
expect(rect.height).toBeGreaterThanOrEqual(44);
}); });
}); });