test: isolate Playwright tests (#102)

* test: isolate Playwright tests

* ci: try multiple workers

* feat: attempt persisted, shared repository

* test: implement own prismic client

* test: remove slice machine from e2e projects

* test: create storage state file on start

* test: remove console.log

* test: isolate xsrf token

* test: fix preview tests

* test: refactor

* test: add teardown

* chore: use workspaces

* ci: fix installation

.github/workflows/ci.yml

@@ -30,8 +30,6 @@ jobs:
         if: github.event_name == 'pull_request' && matrix.os == 'ubuntu-latest' && matrix.node == 22
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-      - run: npm ci --prefix e2e-projects/app-router
-      - run: npm ci --prefix e2e-projects/pages-router
       - run: npm run e2e
         env:
           PLAYWRIGHT_PRISMIC_USERNAME: ${{ secrets.PLAYWRIGHT_PRISMIC_USERNAME }}

.gitignore

@@ -41,3 +41,4 @@ coverage
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+/tests/.storage-state.json

e2e-projects/app-router/app/PrismicNextImage/page.tsx

@@ -1,11 +1,11 @@
-import { PrismicNextImage } from "@prismicio/next";
 import { isFilled } from "@prismicio/client";
+import { PrismicNextImage } from "@prismicio/next";
 import assert from "assert";
 
 import { createClient } from "@/prismicio";
 
 export default async function Page() {
-	const client = createClient();
+	const client = await createClient();
 	const { data: tests } = await client.getSingle("image_test");
 
 	assert(

e2e-projects/app-router/app/PrismicNextLink/page.tsx

@@ -2,10 +2,11 @@ import Link from "next/link";
 import { isFilled } from "@prismicio/client";
 import { PrismicNextLink } from "@prismicio/next";
 import assert from "assert";
+
 import { createClient } from "@/prismicio";
 
 export default async function Page() {
-	const client = createClient();
+	const client = await createClient();
 	const { data: tests } = await client.getSingle("link_test");
 	assert(isFilled.contentRelationship(tests.document) && tests.document.url);
 	const doc = await client.getByID(tests.document.id);

e2e-projects/app-router/app/[uid]/page.tsx

@@ -1,8 +1,6 @@
 import { PrismicPreview } from "@prismicio/next";
-import { NotFoundError } from "@prismicio/client";
-import { notFound } from "next/navigation";
 
-import { createClient, repositoryName } from "@/prismicio";
+import { createClient } from "@/prismicio";
 
 export default async function Page({
 	params,
@@ -11,16 +9,13 @@ export default async function Page({
 }) {
 	const { uid } = await params;
 
-	const client = createClient();
-	const page = await client.getByUID("page", uid).catch((error) => {
-		if (error instanceof NotFoundError) notFound();
-		throw error;
-	});
+	const client = await createClient();
+	const page = await client.getByUID("page", uid);
 
 	return (
 		<>
 			<div data-testid="payload">{page.data.payload}</div>
-			<PrismicPreview repositoryName={repositoryName} />
+			<PrismicPreview repositoryName={client.repositoryName} />
 		</>
 	);
 }

e2e-projects/app-router/app/api/custom-exit-preview/route.ts

@@ -1,6 +1,5 @@
 import { exitPreview } from "@prismicio/next";
 
-/** This endpoint exits a preview session. */
 export function GET() {
 	return exitPreview();
 }

e2e-projects/app-router/app/api/custom-preview/route.ts

@@ -3,9 +3,10 @@ import { redirectToPreviewURL } from "@prismicio/next";
 
 import { createClient } from "@/prismicio";
 
-/** This endpoint handles previews that are launched from the Page Builder. */
 export async function GET(request: NextRequest) {
-	const client = createClient();
+	const client = await createClient({
+		routes: [{ type: "page", path: "/:uid" }],
+	});
 
 	return await redirectToPreviewURL({ client, request });
 }

e2e-projects/app-router/app/api/exit-preview/route.ts

@@ -1,6 +1,5 @@
 import { exitPreview } from "@prismicio/next";
 
-/** This endpoint exits a preview session. */
 export function GET() {
 	return exitPreview();
 }

e2e-projects/app-router/app/api/preview/route.ts

@@ -3,9 +3,10 @@ import { redirectToPreviewURL } from "@prismicio/next";
 
 import { createClient } from "@/prismicio";
 
-/** This endpoint handles previews that are launched from the Page Builder. */
 export async function GET(request: NextRequest) {
-	const client = createClient();
+	const client = await createClient({
+		routes: [{ type: "page", path: "/:uid" }],
+	});
 
 	return await redirectToPreviewURL({ client, request });
 }

e2e-projects/app-router/app/with-custom-preview-endpoints/[uid]/page.tsx

@@ -1,8 +1,6 @@
-import { NotFoundError } from "@prismicio/client";
 import { PrismicPreview } from "@prismicio/next";
-import { notFound } from "next/navigation";
 
-import { createClient, repositoryName } from "@/prismicio";
+import { createClient } from "@/prismicio";
 
 export default async function Page({
 	params,
@@ -11,20 +9,14 @@ export default async function Page({
 }) {
 	const { uid } = await params;
 
-	const client = createClient();
-	const page = await client.getByUID("page", uid).catch((error) => {
-		if (error instanceof NotFoundError) {
-			console.log(error.url);
-			notFound();
-		}
-		throw error;
-	});
+	const client = await createClient();
+	const page = await client.getByUID("page", uid);
 
 	return (
 		<>
 			<div data-testid="payload">{page.data.payload}</div>
 			<PrismicPreview
-				repositoryName={repositoryName}
+				repositoryName={client.repositoryName}
 				updatePreviewURL="/api/custom-preview"
 				exitPreviewURL="/api/custom-exit-preview"
 			/>