test: more

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,

tests-app/app/PrismicPreview/default/page.tsx

@@ -0,0 +1,10 @@
+import { PrismicPreview } from "@prismicio/next";
+
+export default function Page() {
+	return (
+		<div>
+			<PrismicPreview repositoryName="foobar" />
+			<span data-testid="timestamp">timestamp: {Date.now()}</span>
+		</div>
+	);
+}

tests-app/app/PrismicPreview/with-custom-exit-url/page.tsx

@@ -0,0 +1,13 @@
+import { PrismicPreview } from "@prismicio/next";
+
+export default function Page() {
+	return (
+		<div>
+			<PrismicPreview
+				repositoryName="foobar"
+				exitPreviewURL="/api/custom-exit-preview"
+			/>
+			<span data-testid="timestamp">timestamp: {Date.now()}</span>
+		</div>
+	);
+}

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();
+}

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();
+}

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();
 });

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<Fixtures>({
+	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");
+	}
+}