From 363231fd6613a91f7234538491cdbad540e4d1ba Mon Sep 17 00:00:00 2001 From: Angelo Ashmore Date: Wed, 4 Dec 2024 16:40:30 -1000 Subject: [PATCH] test: more --- playwright.config.ts | 2 +- .../app/{app => }/PrismicNextImage/page.tsx | 0 .../{app => }/PrismicNextLink/client/page.tsx | 0 .../app/{app => }/PrismicNextLink/page.tsx | 0 tests-app/app/PrismicPreview/default/page.tsx | 10 +++ .../with-custom-exit-url/page.tsx | 13 ++++ .../app/api/custom-exit-preview/route.ts | 6 ++ tests-app/app/api/exit-preview/route.ts | 6 ++ .../app/app/PrismicPreview/default/page.tsx | 5 -- tests/PrismicPreview.spec.ts | 45 ++++++++++- tests/test.ts | 77 +++++++++++++++++++ 11 files changed, 155 insertions(+), 9 deletions(-) rename tests-app/app/{app => }/PrismicNextImage/page.tsx (100%) rename tests-app/app/{app => }/PrismicNextLink/client/page.tsx (100%) rename tests-app/app/{app => }/PrismicNextLink/page.tsx (100%) create mode 100644 tests-app/app/PrismicPreview/default/page.tsx create mode 100644 tests-app/app/PrismicPreview/with-custom-exit-url/page.tsx create mode 100644 tests-app/app/api/custom-exit-preview/route.ts create mode 100644 tests-app/app/api/exit-preview/route.ts delete mode 100644 tests-app/app/app/PrismicPreview/default/page.tsx create mode 100644 tests/test.ts diff --git a/playwright.config.ts b/playwright.config.ts index bdfc96c..4cb99b6 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -2,7 +2,7 @@ import { defineConfig, devices } from "@playwright/test"; // https://playwright.dev/docs/test-configuration export default defineConfig({ - testDir: "./tests", + testDir: "./tests",testMatch:"**/*.spec.*", fullyParallel: true, forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, diff --git a/tests-app/app/app/PrismicNextImage/page.tsx b/tests-app/app/PrismicNextImage/page.tsx similarity index 100% rename from tests-app/app/app/PrismicNextImage/page.tsx rename to tests-app/app/PrismicNextImage/page.tsx diff --git a/tests-app/app/app/PrismicNextLink/client/page.tsx b/tests-app/app/PrismicNextLink/client/page.tsx similarity index 100% rename from tests-app/app/app/PrismicNextLink/client/page.tsx rename to tests-app/app/PrismicNextLink/client/page.tsx diff --git a/tests-app/app/app/PrismicNextLink/page.tsx b/tests-app/app/PrismicNextLink/page.tsx similarity index 100% rename from tests-app/app/app/PrismicNextLink/page.tsx rename to tests-app/app/PrismicNextLink/page.tsx diff --git a/tests-app/app/PrismicPreview/default/page.tsx b/tests-app/app/PrismicPreview/default/page.tsx new file mode 100644 index 0000000..1f4f7ea --- /dev/null +++ b/tests-app/app/PrismicPreview/default/page.tsx @@ -0,0 +1,10 @@ +import { PrismicPreview } from "@prismicio/next"; + +export default function Page() { + return ( +
+ + timestamp: {Date.now()} +
+ ); +} diff --git a/tests-app/app/PrismicPreview/with-custom-exit-url/page.tsx b/tests-app/app/PrismicPreview/with-custom-exit-url/page.tsx new file mode 100644 index 0000000..fc7909c --- /dev/null +++ b/tests-app/app/PrismicPreview/with-custom-exit-url/page.tsx @@ -0,0 +1,13 @@ +import { PrismicPreview } from "@prismicio/next"; + +export default function Page() { + return ( +
+ + timestamp: {Date.now()} +
+ ); +} diff --git a/tests-app/app/api/custom-exit-preview/route.ts b/tests-app/app/api/custom-exit-preview/route.ts new file mode 100644 index 0000000..59d21dd --- /dev/null +++ b/tests-app/app/api/custom-exit-preview/route.ts @@ -0,0 +1,6 @@ +import { exitPreview } from "@prismicio/next"; + +/** This endpoint exits a preview session. */ +export function GET() { + return exitPreview(); +} diff --git a/tests-app/app/api/exit-preview/route.ts b/tests-app/app/api/exit-preview/route.ts new file mode 100644 index 0000000..59d21dd --- /dev/null +++ b/tests-app/app/api/exit-preview/route.ts @@ -0,0 +1,6 @@ +import { exitPreview } from "@prismicio/next"; + +/** This endpoint exits a preview session. */ +export function GET() { + return exitPreview(); +} diff --git a/tests-app/app/app/PrismicPreview/default/page.tsx b/tests-app/app/app/PrismicPreview/default/page.tsx deleted file mode 100644 index 0698f6d..0000000 --- a/tests-app/app/app/PrismicPreview/default/page.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { PrismicPreview } from "@prismicio/next"; - -export default function Page() { - return ; -} diff --git a/tests/PrismicPreview.spec.ts b/tests/PrismicPreview.spec.ts index 6ff0043..3ca0dd2 100644 --- a/tests/PrismicPreview.spec.ts +++ b/tests/PrismicPreview.spec.ts @@ -1,5 +1,44 @@ -import { test, expect } from "@playwright/test"; +import { test, expect } from "./test"; -test("renders an image field", async ({ page }) => { - await page.goto("/app/PrismicPreview/default"); +test("adds the Prismic toolbar script", async ({ appRouterPage }) => { + await appRouterPage.goto("/PrismicPreview/default"); + await expect(appRouterPage.toolbarScript).toHaveCount(1); + const repo = await appRouterPage.getToolbarScriptParam("repo"); + expect(repo).toBe("foobar"); +}); + +test("refreshes the page on prismicPreviewUpdate events", async ({ + appRouterPage, +}) => { + await appRouterPage.goto("/PrismicPreview/default"); + await appRouterPage.dispatchPreviewUpdateEvent(); + await appRouterPage.waitForTimestampChange(); +}); + +test("calls the default exit preview endpoint on prismicPreviewEnd events", async ({ + appRouterPage, +}) => { + await appRouterPage.goto("/PrismicPreview/default"); + const request = appRouterPage.waitForRequest("/api/exit-preview"); + await appRouterPage.dispatchPreviewEndEvent(); + await request; + await appRouterPage.waitForTimestampChange(); +}); + +test("calls the custom exit preview endpoint on prismicPreviewEnd events", async ({ + appRouterPage, +}) => { + await appRouterPage.goto("/PrismicPreview/with-custom-exit-url"); + const request = appRouterPage.waitForRequest("/api/custom-exit-preview"); + await appRouterPage.dispatchPreviewEndEvent(); + await request; + await appRouterPage.waitForTimestampChange(); +}); + +test("calls the preview endpoint when accessing from a preview share link", async ({ + appRouterPage, +}) => { + await appRouterPage.goto("/PrismicPreview/default"); + await appRouterPage.dispatchPreviewUpdateEvent(); + await appRouterPage.waitForTimestampChange(); }); diff --git a/tests/test.ts b/tests/test.ts new file mode 100644 index 0000000..49ab791 --- /dev/null +++ b/tests/test.ts @@ -0,0 +1,77 @@ +import { Locator, Page, test as base } from "@playwright/test"; + +export { expect } from "@playwright/test"; + +type Fixtures = { + appRouterPage: AppRouterPage; + pagesRouterPage: PagesRouterPage; +}; + +export const test = base.extend({ + appRouterPage: async ({ page }, use) => { + await use(new AppRouterPage(page)); + }, + pagesRouterPage: async ({ page }, use) => { + await use(new PagesRouterPage(page)); + }, +}); + +class DefaultPage { + page: Page; + baseURL: string; + toolbarScript: Locator; + + constructor(page: Page, baseURL: string) { + this.page = page; + this.baseURL = baseURL; + + // Locators + this.toolbarScript = page.locator('script[src*="prismic.io/prismic.js"]'); + } + + async goto(path: string) { + await this.page.goto(new URL(path, this.baseURL).toString()); + } + + async waitForRequest(path: string) { + return await this.page.waitForRequest( + new URL(path, this.baseURL).toString(), + ); + } + + async waitForTimestampChange() { + await this.page.waitForFunction( + (initialContent) => + document.querySelector('[data-testid="timestamp"]')?.textContent !== + initialContent, + await this.page.getByTestId("timestamp").textContent(), + ); + } + + async dispatchPreviewUpdateEvent(ref = "ref") { + return await this.page + .locator("body") + .dispatchEvent("prismicPreviewUpdate", { detail: { ref } }); + } + + async dispatchPreviewEndEvent() { + return await this.page.locator("body").dispatchEvent("prismicPreviewEnd"); + } + + async getToolbarScriptParam(name: string) { + const src = await this.toolbarScript.getAttribute("src"); + return new URL(src ?? "").searchParams.get(name); + } +} + +class AppRouterPage extends DefaultPage { + constructor(page: Page) { + super(page, "http://localhost:4321"); + } +} + +class PagesRouterPage extends DefaultPage { + constructor(page: Page) { + super(page, "http://localhost:4322"); + } +}