From f94e125c01bbd950bd71271e855eac42ea621df4 Mon Sep 17 00:00:00 2001 From: Marcel Date: Thu, 4 Jun 2026 11:49:21 +0200 Subject: [PATCH] test(transcription): assert 44px target classes, not rendered px (#722) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../TranscriptionBlock.svelte.spec.ts | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/frontend/src/lib/document/transcription/TranscriptionBlock.svelte.spec.ts b/frontend/src/lib/document/transcription/TranscriptionBlock.svelte.spec.ts index 4b7138e6..fc1cd9ed 100644 --- a/frontend/src/lib/document/transcription/TranscriptionBlock.svelte.spec.ts +++ b/frontend/src/lib/document/transcription/TranscriptionBlock.svelte.spec.ts @@ -175,23 +175,27 @@ describe('TranscriptionBlock — reorder controls', () => { // 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 // 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', () => { - it('delete button has a >=44px hit area in both dimensions', async () => { + it('delete button carries the 44px minimum-target-size classes', async () => { renderBlock(); const btn = (await page.getByRole('button', { name: 'Löschen' }).element()) as HTMLElement; - const rect = btn.getBoundingClientRect(); - expect(rect.width).toBeGreaterThanOrEqual(44); - expect(rect.height).toBeGreaterThanOrEqual(44); + expect(btn.className).toContain('min-h-[44px]'); + expect(btn.className).toContain('min-w-[44px]'); }); - 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 }); const btn = (await page .getByRole('button', { name: 'Als geprüft markieren' }) .element()) as HTMLElement; - const rect = btn.getBoundingClientRect(); - expect(rect.width).toBeGreaterThanOrEqual(44); - expect(rect.height).toBeGreaterThanOrEqual(44); + expect(btn.className).toContain('min-h-[44px]'); + expect(btn.className).toContain('min-w-[44px]'); }); });