feat: updated integration page with missing API routes

web/visual/states.ts

@@ -1285,6 +1285,40 @@ async function selectIntegrationMerge(page: Page) {
 	await page.mouse.move(0, 0)
 }
 
+function integrationRowName(route: string) {
+	const escaped = route.replace(/[.*+?^${}()|[\]\\/]/g, '\\$&')
+	return new RegExp(`^${escaped}\\. `)
+}
+
+function openIntegrationCard(route: string, anchor: string, tab?: string) {
+	return async (page: Page) => {
+		await page.getByRole('button', { name: integrationRowName(route) }).click()
+		await page
+			.locator(`[data-anchor="${anchor}"]`)
+			.getByText('Errors', { exact: true })
+			.waitFor()
+		await page.waitForTimeout(600)
+		if (tab) {
+			await page
+				.locator(`[data-anchor="${anchor}"]`)
+				.getByRole('tab', { name: tab, exact: true })
+				.click()
+		}
+	}
+}
+
+function openIntegrationCardAt(
+	route: string,
+	card: string,
+	scroll: { anchor: string; desktop: number; mobile: number },
+	tab?: string,
+): VisualState['steps'] {
+	return async (page) => {
+		await openIntegrationCard(route, `ep-${card}`, tab)(page)
+		await scrollToAnchor(page, scroll.anchor, scroll)
+	}
+}
+
 function integrationImagesState(
 	list: ApiMock | null,
 	overrides: Partial<VisualState> & { session?: ApiMock } = {},
@@ -8710,7 +8744,7 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
 			},
 		}),
 		'6. Errors': integrationState({
-			steps: (page) => scrollToAnchor(page, 'errors', { desktop: 60, mobile: 55 }),
+			steps: (page) => scrollToAnchor(page, 'errors', { desktop: -122, mobile: 55 }),
 			exception: {
 				maxPercent: { desktop: 16, mobile: 22 },
 				reason: 'The board lacks the 409 row, the "Message" heading and the Sites and Authors contents entries',
@@ -8738,6 +8772,75 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
 				approvedBy: 'Florian Sylvain',
 			},
 		}),
+		'9a. Content types: create, curl': integrationState({
+			steps: async (page) => {
+				const mobile = (page.viewportSize()?.width ?? 0) < desktopMinWidth
+				await openIntegrationCard('POST /v1/content-type/', 'ep-ct-create', 'curl')(page)
+				await scrollToAnchor(page, mobile ? 'ep-ct-create' : 'ct-fields', {
+					desktop: -30,
+					mobile: 88,
+				})
+			},
+			exception: {
+				maxPercent: { desktop: 10, mobile: 45 },
+				reason: 'The board omits the empty "Query parameters" and "Request body" blocks that the card always draws, and the mobile field table has four columns where the board stacks the rule under the name',
+				approvedBy: 'Florian Sylvain',
+			},
+		}),
+		'9b. Entries: list, Response tab': integrationState({
+			steps: openIntegrationCardAt(
+				'GET /v1/content-type/{key}/entry',
+				'en-list',
+				{ anchor: 'ep-en-list', desktop: -44, mobile: 88 },
+				'Response',
+			),
+			exception: {
+				maxPercent: { desktop: 10, mobile: 41 },
+				reason: 'The board omits the empty "Query parameters" and "Request body" blocks that the card always draws, and the mobile field table has four columns where the board stacks the rule under the name',
+				approvedBy: 'Florian Sylvain',
+			},
+		}),
+		'9c. Entries: replace, 422 and 409': integrationState({
+			steps: openIntegrationCardAt('PUT /v1/content-type/{key}/entry/{id}', 'en-update', {
+				anchor: 'ep-en-update',
+				desktop: -108,
+				mobile: 88,
+			}),
+			exception: {
+				maxPercent: { desktop: 10, mobile: 42 },
+				reason: 'The board omits the empty "Query parameters" and "Request body" blocks that the card always draws, and the mobile field table has four columns where the board stacks the rule under the name',
+				approvedBy: 'Florian Sylvain',
+			},
+		}),
+		'9d. Errors: 404, 409 and 422 rows': integrationState({
+			steps: (page) => scrollToAnchor(page, 'errors', { desktop: -122, mobile: 55 }),
+			exception: {
+				maxPercent: { desktop: 15, mobile: 22 },
+				reason: 'The app joins the error messages with " / " and puts the note under them, where the board writes prose with the note in another position',
+				approvedBy: 'Florian Sylvain',
+			},
+		}),
+		'9e. Session only: 6 sub-groups': integrationState({
+			steps: (page) => scrollToAnchor(page, 'session', { desktop: -1, mobile: -107 }),
+		}),
+		'9f. Search: "entry"': integrationState({ steps: searchingIntegration('entry') }),
+		'9g. Search: "capacity" (body field)': integrationState({
+			steps: searchingIntegration('capacity'),
+		}),
+		'9h. Search: "schema_incompatible" (error)': integrationState({
+			steps: searchingIntegration('schema_incompatible'),
+		}),
+		'9i. Search: "content type" (sections)': integrationState({
+			steps: searchingIntegration('content type'),
+		}),
+		'9j. Navigation: scroll-spy on Content types': integrationState({
+			steps: async (page) => {
+				await scrollToAnchor(page, 'ctypes', { desktop: -5, mobile: -3 })
+				if ((page.viewportSize()?.width ?? 0) < desktopMinWidth) {
+					await page.getByRole('button', { name: 'Jump to section' }).click()
+				}
+			},
+		}),
 		'I1 · Many variants': integrationImagesState(integrationManyVariants),
 		'I2 · One variant': integrationImagesState(
 			integrationVariantsList(integrationVariantRows.slice(0, 1)),
@@ -8794,7 +8897,7 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
 		}),
 		'7. Navigation': integrationState({
 			steps: async (page) => {
-				await scrollToAnchor(page, 'media', { desktop: -5, mobile: -3 })
+				await scrollToAnchor(page, 'media', { desktop: -81, mobile: -3 })
 				if ((page.viewportSize()?.width ?? 0) < 1024) {
 					await page.getByRole('button', { name: 'Jump to section' }).click()
 				}