00a673e491
Closes #12785. Although your live preview URL can be dynamic based on document data, it is never recalculated after initial mount. This means if your URL is dependent of document data that was just changed, such as a "slug" field, the URL of the iframe does not reflect that change as expected until the window is refreshed or you navigate back. This also means that server-side live preview will crash when your front-end attempts to query using a slug that no longer exists. Here's the general flow: slug changes, autosave runs, iframe refreshes (url has old slug), 404. Now, we execute your live preview function on submit within form state, and the window responds to the new URL as expected, refreshing itself without losing its connection. Here's the result: https://github.com/user-attachments/assets/7dd3b147-ab6c-4103-8b2f-14d6bc889625 --- - To see the specific tasks where the Asana app for GitHub is being used, see below: - https://app.asana.com/0/0/1211094211063140
77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
import type { Page } from '@playwright/test'
|
|
|
|
import { expect } from '@playwright/test'
|
|
|
|
import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
|
|
import { toggleLivePreview } from '../helpers/e2e/live-preview/toggleLivePreview.js'
|
|
import { navigateToDoc, navigateToTrashedDoc } from '../helpers/e2e/navigateToDoc.js'
|
|
import { POLL_TOPASS_TIMEOUT } from '../playwright.config.js'
|
|
|
|
export const goToCollectionLivePreview = async (
|
|
page: Page,
|
|
urlUtil: AdminUrlUtil,
|
|
): Promise<void> => {
|
|
await navigateToDoc(page, urlUtil)
|
|
|
|
await toggleLivePreview(page, {
|
|
targetState: 'on',
|
|
})
|
|
}
|
|
|
|
export const goToTrashedLivePreview = async (page: Page, urlUtil: AdminUrlUtil): Promise<void> => {
|
|
await navigateToTrashedDoc(page, urlUtil)
|
|
|
|
await toggleLivePreview(page, {
|
|
targetState: 'on',
|
|
})
|
|
}
|
|
|
|
export const goToGlobalLivePreview = async (
|
|
page: Page,
|
|
slug: string,
|
|
serverURL: string,
|
|
): Promise<void> => {
|
|
const globalUrlUtil = new AdminUrlUtil(serverURL, slug)
|
|
await page.goto(globalUrlUtil.global(slug))
|
|
|
|
await toggleLivePreview(page, {
|
|
targetState: 'on',
|
|
})
|
|
}
|
|
|
|
export const ensureDeviceIsCentered = async (page: Page) => {
|
|
const main = page.locator('.live-preview-window__main')
|
|
const iframe = page.locator('iframe.live-preview-iframe')
|
|
const mainBoxAfterZoom = await main.boundingBox()
|
|
const iframeBoxAfterZoom = await iframe.boundingBox()
|
|
const distanceFromIframeLeftToMainLeftAfterZoom = Math.abs(
|
|
mainBoxAfterZoom?.x - iframeBoxAfterZoom?.x,
|
|
)
|
|
const distanceFromIFrameRightToMainRightAfterZoom = Math.abs(
|
|
mainBoxAfterZoom?.x +
|
|
mainBoxAfterZoom?.width -
|
|
iframeBoxAfterZoom?.x -
|
|
iframeBoxAfterZoom?.width,
|
|
)
|
|
await expect(() =>
|
|
expect(distanceFromIframeLeftToMainLeftAfterZoom).toBe(
|
|
distanceFromIFrameRightToMainRightAfterZoom,
|
|
),
|
|
).toPass({
|
|
timeout: POLL_TOPASS_TIMEOUT,
|
|
})
|
|
}
|
|
|
|
export const ensureDeviceIsLeftAligned = async (page: Page) => {
|
|
const main = page.locator('.live-preview-window__main > div')
|
|
const iframe = page.locator('iframe.live-preview-iframe')
|
|
const mainBoxAfterZoom = await main.boundingBox()
|
|
const iframeBoxAfterZoom = await iframe.boundingBox()
|
|
const distanceFromIframeLeftToMainLeftAfterZoom = Math.abs(
|
|
mainBoxAfterZoom?.x - iframeBoxAfterZoom?.x,
|
|
)
|
|
await expect(() => expect(distanceFromIframeLeftToMainLeftAfterZoom).toBe(0)).toPass({
|
|
timeout: POLL_TOPASS_TIMEOUT,
|
|
})
|
|
}
|