feat: integration page (PART 3/3)

web/visual/states.ts

@@ -823,6 +823,43 @@ async function clickBaseUrlCopy(page: Page) {
 	await page.getByRole('button', { name: 'Copy', exact: true }).first().click()
 }
 
+function integrationState(overrides: Partial<VisualState> = {}): VisualState {
+	return {
+		path: '/integration',
+		origin: integrationOrigin,
+		api: { 'GET /v1/auth/me': verifiedSession },
+		...overrides,
+	}
+}
+
+async function scrollToAnchor(
+	page: Page,
+	anchor: string,
+	offsets?: { desktop?: number; mobile?: number },
+) {
+	const mobile = (page.viewportSize()?.width ?? 0) < 1024
+	const offset = mobile ? offsets?.mobile : offsets?.desktop
+	await page.evaluate(
+		({ id, offset }) => {
+			const target = document.querySelector(`[data-anchor="${id}"]`)
+			if (!target) return
+			if (offset === undefined) {
+				target.scrollIntoView({ block: 'start' })
+				return
+			}
+			let scroller = target.parentElement
+			while (scroller && !['auto', 'scroll'].includes(getComputedStyle(scroller).overflowY)) {
+				scroller = scroller.parentElement
+			}
+			if (!scroller) return
+			scroller.scrollTop +=
+				target.getBoundingClientRect().top - scroller.getBoundingClientRect().top - offset
+		},
+		{ id: anchor, offset },
+	)
+	await page.waitForTimeout(150)
+}
+
 const acceptInvitePath = '/invite/accept?c=abc123'
 const acceptInviteEmail = 'lea.martin@renew.example'
 
@@ -2472,17 +2509,62 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
 	},
 	'integration-api-keys': apiKeysStates,
 	integration: {
-		Default: {
-			path: '/integration',
-			origin: integrationOrigin,
-			api: { 'GET /v1/auth/me': verifiedSession },
-		},
-		Copied: {
-			path: '/integration',
-			origin: integrationOrigin,
-			api: { 'GET /v1/auth/me': verifiedSession },
-			steps: clickBaseUrlCopy,
-		},
+		'1. Default': integrationState(),
+		'2. Group scrolled, one card expanded': integrationState({
+			steps: async (page) => {
+				await page.getByRole('button', { name: /^POST \/v1\/media\/\. / }).click()
+				await page
+					.locator('[data-anchor="ep-med-up"]')
+					.getByRole('tab', { name: 'curl', exact: true })
+					.click()
+				await scrollToAnchor(page, 'ep-med-up', { desktop: 126, mobile: 83 })
+			},
+			exception: {
+				maxPercent: 37.5,
+				reason: 'The new Query parameters block adds about 70 px above Request body, which shifts every row below the card, and the captions use the real server strings instead of the board samples',
+				approvedBy: 'Florian Sylvain',
+			},
+		}),
+		'3a. Copied: base URL': integrationState({ steps: clickBaseUrlCopy }),
+		'3b. Copied: CodeBlock': integrationState({
+			steps: async (page) => {
+				await scrollToAnchor(page, 'auth')
+				await page.getByRole('button', { name: 'Copy Shell example' }).click()
+				await page.mouse.move(0, 0)
+			},
+		}),
+		'4. Authentication': integrationState({
+			steps: (page) => scrollToAnchor(page, 'auth'),
+		}),
+		'5. Session only': integrationState({
+			steps: (page) => scrollToAnchor(page, 'session', { desktop: -1, mobile: 55 }),
+			exception: {
+				maxPercent: 12,
+				reason: 'The banner names the real routes and wraps differently, a 13th row (DELETE /v1/auth/register) and the login-family captions are new, and a Public auth flow block follows',
+				approvedBy: 'Florian Sylvain',
+			},
+		}),
+		'6. Errors': integrationState({
+			steps: (page) => scrollToAnchor(page, 'errors', { desktop: 48, mobile: 47 }),
+			exception: {
+				maxPercent: 12.5,
+				reason: 'A 409 row is new, the typical-cause text uses the real server messages in place of the longer board prose, and the board scroll position varies between captures',
+				approvedBy: 'Florian Sylvain',
+			},
+		}),
+		'7. Navigation': integrationState({
+			steps: async (page) => {
+				await scrollToAnchor(page, 'media', { desktop: 14 })
+				if ((page.viewportSize()?.width ?? 0) < 1024) {
+					await page.getByRole('button', { name: 'Jump to section' }).click()
+				}
+			},
+			exception: {
+				maxPercent: 12.5,
+				reason: 'The board frame scroll position varies by 18px between captures, so the desktop diff flickers between about 8 % and 12 %',
+				approvedBy: 'Florian Sylvain',
+			},
+		}),
 	},
 	articles: {
 		Default: {