feat: integration screen

web/visual/check.ts

@@ -39,9 +39,19 @@ const contentTypes: Record<string, string> = {
 	'.json': 'application/json',
 }
 
+const distContentTypes: Record<string, string> = {
+	...contentTypes,
+	'.png': 'image/png',
+	'.jpg': 'image/jpeg',
+	'.jpeg': 'image/jpeg',
+	'.woff': 'font/woff',
+	'.woff2': 'font/woff2',
+	'.ico': 'image/x-icon',
+}
+
 const settleMs = 400
 const diffThreshold = 24
-const maxDiffPercent = 0.5
+const maxDiffPercent = 10
 
 function slug(text: string) {
 	return text
@@ -180,6 +190,27 @@ async function serveIconsLocally(context: BrowserContext) {
 	)
 }
 
+async function serveDistLocally(context: BrowserContext, origin: string) {
+	await context.route(
+		(url) => url.origin === origin && !url.pathname.startsWith('/v1'),
+		async (route) => {
+			const pathname = decodeURIComponent(new URL(route.request().url()).pathname)
+			const candidate = pathname === '/' || !extname(pathname) ? '/index.html' : pathname
+			const file = join(distRoot, candidate)
+			try {
+				const body = await readFile(file)
+				await route.fulfill({
+					status: 200,
+					contentType: distContentTypes[extname(file)] ?? 'application/octet-stream',
+					body,
+				})
+			} catch {
+				await route.fulfill({ status: 404, body: '' })
+			}
+		},
+	)
+}
+
 async function openBoard(browser: Browser, origin: string, screen: Screen, theme: Theme) {
 	const context = await browser.newContext({ viewport: { width: 1600, height: 1000 } })
 	await serveIconsLocally(context)
@@ -305,6 +336,12 @@ async function captureApp(
 		}
 		await route.fulfill(fulfilment(mock))
 	})
+	if (setup.origin) {
+		await serveDistLocally(context, setup.origin)
+		await context.grantPermissions(['clipboard-read', 'clipboard-write'], {
+			origin: setup.origin,
+		})
+	}
 	const page = await context.newPage()
 	if (setup.paused) {
 		const time = setup.now ? new Date(setup.now) : new Date()
@@ -313,7 +350,7 @@ async function captureApp(
 	} else if (setup.now) {
 		await page.clock.setFixedTime(new Date(setup.now))
 	}
-	await page.goto(`${origin}${setup.path}`)
+	await page.goto(`${setup.origin ?? origin}${setup.path}`)
 	await Promise.race([page.waitForLoadState('networkidle'), page.waitForTimeout(2000)])
 	await page.waitForFunction(
 		() => (document.querySelector('#app')?.textContent ?? '').trim().length > 0,

web/visual/states.ts

@@ -17,6 +17,7 @@ export interface VisualState {
 	exception?: DiffException
 	skip?: 'clock-sensitive'
 	path: string
+	origin?: string
 	now?: string
 	paused?: boolean
 	api?: Record<string, ApiMock>
@@ -334,7 +335,26 @@ async function chooseArticleRowMenuItem(page: Page, label: string) {
 	await page.getByRole('menuitem', { name: label, exact: true }).click()
 }
 
+const integrationOrigin = 'https://cms.renew.example'
+
+async function clickBaseUrlCopy(page: Page) {
+	await page.getByRole('button', { name: 'Copy', exact: true }).first().click()
+}
+
 export const visualStates: Record<string, Record<string, VisualState>> = {
+	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,
+		},
+	},
 	articles: {
 		Default: {
 			path: '/article',