test(webview): cover layout drift modes

Author: roomote

webview-ui/src/components/ui/__tests__/AccessibilityContrast.visual.tsx

@@ -181,8 +181,7 @@ for (const theme of visualThemes) {
 			}),
 		).rejects.toThrow("Unsupported background image")
 
-		const snapshot = page.locator("#root")
-		await expect(snapshot).toHaveScreenshot(`accessibility-gallery-resting-${theme.name}.png`)
+		await expect(component).toHaveScreenshot(`accessibility-gallery-resting-${theme.name}.png`)
 
 		await page.evaluate(() => (document.activeElement as HTMLElement | null)?.blur())
 		for (
@@ -205,6 +204,6 @@ for (const theme of visualThemes) {
 			minimum: 3,
 			label: `${theme.name} input focus indicator against fill`,
 		})
-		await expect(snapshot).toHaveScreenshot(`accessibility-gallery-focus-${theme.name}.png`)
+		await expect(component).toHaveScreenshot(`accessibility-gallery-focus-${theme.name}.png`)
 	})
 }

webview-ui/src/components/ui/__tests__/__screenshots__/accessibility-gallery-focus-dark.png

@@ -1,22 +1,73 @@
 import React from "react"
+import type { Locator } from "@playwright/test"
 
 import { expect, test } from "../../../../playwright/coverage-fixture"
 import { AppProviders } from "../../../../playwright/AppProviders"
 import { expectContrast } from "../../../../playwright/contrast"
 import { applyVisualTheme, visualThemes } from "../../../../playwright/themes"
 import { WelcomeLanding } from "../WelcomeLanding"
 
+const textSpacingStyles = `
+	/* WCAG 1.4.12 text-spacing override values. */
+	* {
+		line-height: 1.5 !important;
+		letter-spacing: 0.12em !important;
+		word-spacing: 0.16em !important;
+	}
+
+	p {
+		margin-bottom: 2em !important;
+	}
+`
+
+async function expectScreenContentToFit(screen: Locator) {
+	const layout = await screen.evaluate((element) => {
+		const screenRect = element.getBoundingClientRect()
+		const content = Array.from(element.querySelectorAll("h2, p, button")).map((item) => {
+			const rect = item.getBoundingClientRect()
+			return {
+				left: rect.left,
+				right: rect.right,
+				clientWidth: item.clientWidth,
+				scrollWidth: item.scrollWidth,
+				clientHeight: item.clientHeight,
+				scrollHeight: item.scrollHeight,
+			}
+		})
+
+		return {
+			clientWidth: element.clientWidth,
+			scrollWidth: element.scrollWidth,
+			left: screenRect.left,
+			right: screenRect.right,
+			content,
+		}
+	})
+
+	expect(layout.scrollWidth).toBeLessThanOrEqual(layout.clientWidth)
+	for (const item of layout.content) {
+		expect(item.left).toBeGreaterThanOrEqual(layout.left)
+		expect(item.right).toBeLessThanOrEqual(layout.right)
+		expect(item.scrollWidth).toBeLessThanOrEqual(item.clientWidth)
+		expect(item.scrollHeight).toBeLessThanOrEqual(item.clientHeight)
+	}
+}
+
+async function mountWelcomeScreen(mount: (component: React.ReactElement) => Promise<Locator>) {
+	const component = await mount(
+		<AppProviders initialState={{ apiConfiguration: {} }}>
+			<WelcomeLanding onGetStarted={() => undefined} onImportSettings={() => undefined} />
+		</AppProviders>,
+	)
+	return { component, screen: component.locator(".fixed.inset-0") }
+}
+
 for (const theme of visualThemes) {
 	test(`renders the full welcome screen in the VS Code ${theme.name} theme`, async ({ mount, page }) => {
 		await page.setViewportSize({ width: 480, height: 640 })
 		await applyVisualTheme(page, theme)
-		const component = await mount(
-			<AppProviders initialState={{ apiConfiguration: {} }}>
-				<WelcomeLanding onGetStarted={() => undefined} onImportSettings={() => undefined} />
-			</AppProviders>,
-		)
+		const { component, screen } = await mountWelcomeScreen(mount)
 
-		const screen = component.locator(".fixed.inset-0")
 		const heading = component.getByRole("heading", { level: 2 })
 		const action = component.getByRole("button", { name: /provider/i }).first()
 		await expect(heading).toBeVisible()
@@ -38,4 +89,29 @@ for (const theme of visualThemes) {
 
 		await expect(screen).toHaveScreenshot(`welcome-screen-${theme.name}.png`)
 	})
+
+	test(`reflows the welcome screen at 320px in the VS Code ${theme.name} theme`, async ({ mount, page }) => {
+		await page.setViewportSize({ width: 320, height: 640 })
+		await applyVisualTheme(page, theme)
+		const { component, screen } = await mountWelcomeScreen(mount)
+
+		await expect(component.getByRole("heading", { level: 2 })).toBeVisible()
+		await expect(component.getByRole("button", { name: /provider/i }).first()).toBeVisible()
+		await expect(component.getByRole("button", { name: /import/i })).toBeVisible()
+		await expectScreenContentToFit(screen)
+		await expect(screen).toHaveScreenshot(`welcome-screen-reflow-${theme.name}.png`)
+	})
+
+	test(`supports WCAG text spacing in the VS Code ${theme.name} theme`, async ({ mount, page }) => {
+		await page.setViewportSize({ width: 480, height: 640 })
+		await applyVisualTheme(page, theme)
+		const { component, screen } = await mountWelcomeScreen(mount)
+		await page.addStyleTag({ content: textSpacingStyles })
+
+		await expect(component.getByRole("heading", { level: 2 })).toBeVisible()
+		await expect(component.getByRole("button", { name: /provider/i }).first()).toBeVisible()
+		await expect(component.getByRole("button", { name: /import/i })).toBeVisible()
+		await expectScreenContentToFit(screen)
+		await expect(screen).toHaveScreenshot(`welcome-screen-text-spacing-${theme.name}.png`)
+	})
 }