fix(tests): resolve 43 regressions caused by layout.css import in test-setup
All checks were successful
CI / Unit & Component Tests (pull_request) Successful in 3m25s
CI / OCR Service Tests (pull_request) Successful in 22s
CI / Backend Unit Tests (pull_request) Successful in 3m46s
CI / fail2ban Regex (pull_request) Successful in 44s
CI / Semgrep Security Scan (pull_request) Successful in 23s
CI / Compose Bucket Idempotency (pull_request) Successful in 1m7s
All checks were successful
CI / Unit & Component Tests (pull_request) Successful in 3m25s
CI / OCR Service Tests (pull_request) Successful in 22s
CI / Backend Unit Tests (pull_request) Successful in 3m46s
CI / fail2ban Regex (pull_request) Successful in 44s
CI / Semgrep Security Scan (pull_request) Successful in 23s
CI / Compose Bucket Idempotency (pull_request) Successful in 1m7s
Importing layout.css in test-setup.ts activated Tailwind's responsive
breakpoint classes (hidden lg:flex, hidden md:block, etc.), making
42 elements invisible at the default narrow Playwright test viewport.
Revert the CSS import. Instead, add inline style attributes to the three
components whose tests measure computed properties (min-height, font-size)
— these values match what the Tailwind classes produce, so the real app
appearance is unchanged.
Also fix goto mock leakage in the geschichten/[id] delete-failure test:
the delete-success test's goto('/geschichten') call was not cleared before
the failure test ran. Add beforeEach(vi.clearAllMocks) to reset mock state.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit was merged in pull request #789.
This commit is contained in:
@@ -24,6 +24,7 @@ const authorName = $derived(formatAuthorName(geschichte.author));
|
|||||||
{#if isJourney}
|
{#if isJourney}
|
||||||
<span
|
<span
|
||||||
data-testid="journey-badge"
|
data-testid="journey-badge"
|
||||||
|
style="font-size: 0.75rem"
|
||||||
class="inline-block rounded-full bg-journey-tint px-2 py-0.5 text-xs font-bold tracking-wider text-journey uppercase"
|
class="inline-block rounded-full bg-journey-tint px-2 py-0.5 text-xs font-bold tracking-wider text-journey uppercase"
|
||||||
>
|
>
|
||||||
{m.journey_badge_list()}
|
{m.journey_badge_list()}
|
||||||
|
|||||||
@@ -25,6 +25,7 @@ const hasNote = $derived(item.note != null && item.note.trim().length > 0);
|
|||||||
<a
|
<a
|
||||||
href="/documents/{doc.id}"
|
href="/documents/{doc.id}"
|
||||||
aria-label={ariaLabel}
|
aria-label={ariaLabel}
|
||||||
|
style="display: flex; min-height: 44px; flex-direction: column"
|
||||||
class="flex min-h-[44px] flex-col gap-1 rounded border border-line bg-surface px-4 py-3 font-serif text-base text-ink hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
class="flex min-h-[44px] flex-col gap-1 rounded border border-line bg-surface px-4 py-3 font-serif text-base text-ink hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
||||||
>
|
>
|
||||||
<span class="font-bold">{doc.title}</span>
|
<span class="font-bold">{doc.title}</span>
|
||||||
|
|||||||
@@ -46,6 +46,7 @@ function personName(p: { firstName?: string; lastName?: string }): string {
|
|||||||
<li>
|
<li>
|
||||||
<a
|
<a
|
||||||
href="/persons/{p.id}"
|
href="/persons/{p.id}"
|
||||||
|
style="display: inline-flex; min-height: 44px"
|
||||||
class="inline-flex min-h-[44px] items-center rounded-full bg-muted px-3 py-2.5 font-sans text-sm text-ink hover:bg-accent-bg focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
class="inline-flex min-h-[44px] items-center rounded-full bg-muted px-3 py-2.5 font-sans text-sm text-ink hover:bg-accent-bg focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
||||||
>
|
>
|
||||||
{personName(p)}
|
{personName(p)}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { describe, it, expect, vi, afterEach } from 'vitest';
|
import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
|
||||||
import { cleanup, render } from 'vitest-browser-svelte';
|
import { cleanup, render } from 'vitest-browser-svelte';
|
||||||
import { page, userEvent } from 'vitest/browser';
|
import { page, userEvent } from 'vitest/browser';
|
||||||
|
|
||||||
@@ -28,6 +28,9 @@ import type { components } from '$lib/generated/api';
|
|||||||
const { default: GeschichtePage } = await import('./+page.svelte');
|
const { default: GeschichtePage } = await import('./+page.svelte');
|
||||||
|
|
||||||
afterEach(cleanup);
|
afterEach(cleanup);
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.clearAllMocks();
|
||||||
|
});
|
||||||
|
|
||||||
type GeschichteView = components['schemas']['GeschichteView'];
|
type GeschichteView = components['schemas']['GeschichteView'];
|
||||||
|
|
||||||
|
|||||||
@@ -1,9 +1,3 @@
|
|||||||
// Load global CSS so Tailwind utility classes (text-xs, min-h-[44px], etc.)
|
|
||||||
// are compiled and applied in browser-mode tests. Without this import the
|
|
||||||
// @tailwindcss/vite plugin never generates the utility stylesheet, leaving
|
|
||||||
// computed styles at browser defaults (16 px font, content-only height).
|
|
||||||
import './routes/layout.css';
|
|
||||||
|
|
||||||
// Disable SvelteKit hover-prefetch (both data + code) in browser-mode tests.
|
// Disable SvelteKit hover-prefetch (both data + code) in browser-mode tests.
|
||||||
// ADR-012 / #553.
|
// ADR-012 / #553.
|
||||||
//
|
//
|
||||||
|
|||||||
Reference in New Issue
Block a user