test: describe playwright tests

examples/bugs/gh-119/e2e/base.spec.ts

@@ -1,6 +1,8 @@
 import { test, expect } from "@playwright/test";
 
-test("the index page of the application shows the Next.js logo", async ({ page }) => {
-  await page.goto("/");
-  await expect(page.getByAltText("Next.js logo")).toBeVisible();
+test.describe("bugs/gh-119", () => {
+  test("the index page of the application shows the Next.js logo", async ({ page }) => {
+    await page.goto("/");
+    await expect(page.getByAltText("Next.js logo")).toBeVisible();
+  });
 });

examples/bugs/gh-219/e2e/base.spec.ts

@@ -1,6 +1,8 @@
 import { test, expect } from "@playwright/test";
 
-test("the index page of the application shows the Next.js logo", async ({ page }) => {
-  await page.goto("/");
-  await expect(page.getByAltText("Next.js logo")).toBeVisible();
+test.describe("bugs/gh-219", () => {
+  test("the index page of the application shows the Next.js logo", async ({ page }) => {
+    await page.goto("/");
+    await expect(page.getByAltText("Next.js logo")).toBeVisible();
+  });
 });

examples/bugs/gh-223/e2e/base.spec.ts

@@ -1,7 +1,9 @@
 import { test, expect } from "@playwright/test";
 
-test("api route", async ({ page }) => {
-  const res = await page.request.get("/api/image");
-  expect(res.status()).toEqual(200);
-  expect((await res.json()).image).toEqual("");
+test.describe("bugs/gh-223", () => {
+  test("api route", async ({ page }) => {
+    const res = await page.request.get("/api/image");
+    expect(res.status()).toEqual(200);
+    expect((await res.json()).image).toEqual("");
+  });
 });

examples/create-next-app/e2e/base.spec.ts

@@ -1,6 +1,8 @@
 import { test, expect } from "@playwright/test";
 
-test("the index page of the application shows the Next.js logo", async ({ page }) => {
-  await page.goto("/");
-  await expect(page.getByAltText("Next.js logo")).toBeVisible();
+test.describe("create-next-app", () => {
+  test("the index page of the application shows the Next.js logo", async ({ page }) => {
+    await page.goto("/");
+    await expect(page.getByAltText("Next.js logo")).toBeVisible();
+  });
 });

examples/middleware/e2e/base.spec.ts

@@ -1,37 +1,39 @@
 import { test, expect } from "@playwright/test";
 
-test("redirect", async ({ page }) => {
-  await page.goto("/");
-  await page.click('[href="/about"]');
-  await page.waitForURL("**/redirected");
-  expect(await page.textContent("h1")).toContain("Redirected");
-});
+test.describe("middleware", () => {
+  test("redirect", async ({ page }) => {
+    await page.goto("/");
+    await page.click('[href="/about"]');
+    await page.waitForURL("**/redirected");
+    expect(await page.textContent("h1")).toContain("Redirected");
+  });
 
-test("rewrite", async ({ page }) => {
-  await page.goto("/");
-  await page.click('[href="/another"]');
-  await page.waitForURL("**/another");
-  expect(await page.textContent("h1")).toContain("Rewrite");
-});
+  test("rewrite", async ({ page }) => {
+    await page.goto("/");
+    await page.click('[href="/another"]');
+    await page.waitForURL("**/another");
+    expect(await page.textContent("h1")).toContain("Rewrite");
+  });
 
-test("no matching middleware", async ({ page }) => {
-  await page.goto("/");
-  await page.click('[href="/about2"]');
-  await page.waitForURL("**/about2");
-  expect(await page.textContent("h1")).toContain("About 2");
-});
+  test("no matching middleware", async ({ page }) => {
+    await page.goto("/");
+    await page.click('[href="/about2"]');
+    await page.waitForURL("**/about2");
+    expect(await page.textContent("h1")).toContain("About 2");
+  });
 
-test("matching noop middleware", async ({ page }) => {
-  await page.goto("/");
-  await page.click('[href="/middleware"]');
-  await page.waitForURL("**/middleware");
-  expect(await page.textContent("h1")).toContain("Via middleware");
-});
+  test("matching noop middleware", async ({ page }) => {
+    await page.goto("/");
+    await page.click('[href="/middleware"]');
+    await page.waitForURL("**/middleware");
+    expect(await page.textContent("h1")).toContain("Via middleware");
+  });
 
-// Test for https://github.com/opennextjs/opennextjs-cloudflare/issues/201
-test("clerk middleware", async ({ page }) => {
-  const res = await page.request.post("/clerk", { data: "some body" });
-  expect(res.ok()).toEqual(true);
-  expect(res.status()).toEqual(200);
-  await expect(res.text()).resolves.toEqual("Hello clerk");
+  // Test for https://github.com/opennextjs/opennextjs-cloudflare/issues/201
+  test("clerk middleware", async ({ page }) => {
+    const res = await page.request.post("/clerk", { data: "some body" });
+    expect(res.ok()).toEqual(true);
+    expect(res.status()).toEqual(200);
+    await expect(res.text()).resolves.toEqual("Hello clerk");
+  });
 });

examples/middleware/e2e/cloudflare-context.spec.ts

@@ -1,9 +1,11 @@
 import { test, expect } from "@playwright/test";
 
-test("middlewares have access to the cloudflare context", async ({ page }) => {
-  await page.goto("/middleware");
-  const cloudflareContextHeaderElement = page.getByTestId("cloudflare-context-header");
-  expect(await cloudflareContextHeaderElement.textContent()).toContain(
-    "typeof `cloudflareContext.env` = object"
-  );
+test.describe("middleware/cloudflare-context", () => {
+  test("middlewares have access to the cloudflare context", async ({ page }) => {
+    await page.goto("/middleware");
+    const cloudflareContextHeaderElement = page.getByTestId("cloudflare-context-header");
+    expect(await cloudflareContextHeaderElement.textContent()).toContain(
+      "typeof `cloudflareContext.env` = object"
+    );
+  });
 });

examples/playground/e2e/base.spec.ts

@@ -12,48 +12,50 @@ export function validateMd5(data: Buffer, expectedHash: string) {
   );
 }
 
-test("index", async ({ page }) => {
-  await page.goto("/");
-  await expect(page.getByText("Test misc Next features")).toBeVisible();
-});
+test.describe("playground/base", () => {
+  test("index", async ({ page }) => {
+    await page.goto("/");
+    await expect(page.getByText("Test misc Next features")).toBeVisible();
+  });
 
-test("the hello-world api GET route works as intended", async ({ page }) => {
-  const res = await page.request.get("/api/hello");
-  expect(res.headers()["content-type"]).toContain("text/plain");
-  expect(await res.text()).toEqual("Hello World!");
-});
+  test("the hello-world api GET route works as intended", async ({ page }) => {
+    const res = await page.request.get("/api/hello");
+    expect(res.headers()["content-type"]).toContain("text/plain");
+    expect(await res.text()).toEqual("Hello World!");
+  });
 
-test("returns a hello world string from the cloudflare context env", async ({ page }) => {
-  const res = await page.request.get("/api/hello", {
-    headers: {
-      "from-cloudflare-context": "true",
-    },
+  test("returns a hello world string from the cloudflare context env", async ({ page }) => {
+    const res = await page.request.get("/api/hello", {
+      headers: {
+        "from-cloudflare-context": "true",
+      },
+    });
+    expect(res.headers()["content-type"]).toContain("text/plain");
+    expect(await res.text()).toEqual("Hello World from the cloudflare context!");
   });
-  expect(res.headers()["content-type"]).toContain("text/plain");
-  expect(await res.text()).toEqual("Hello World from the cloudflare context!");
-});
 
-test("the hello-world api POST route works as intended", async ({ page }) => {
-  const res = await page.request.post("/api/hello", { data: "some body" });
-  expect(res.headers()["content-type"]).toContain("text/plain");
-  await expect(res.text()).resolves.toEqual("Hello post-World! body=some body");
-});
+  test("the hello-world api POST route works as intended", async ({ page }) => {
+    const res = await page.request.post("/api/hello", { data: "some body" });
+    expect(res.headers()["content-type"]).toContain("text/plain");
+    await expect(res.text()).resolves.toEqual("Hello post-World! body=some body");
+  });
 
-test("sets environment variables from the Next.js env file", async ({ page }) => {
-  const res = await page.request.get("/api/env");
-  await expect(res.json()).resolves.toEqual(expect.objectContaining({ TEST_ENV_VAR: "TEST_VALUE" }));
-});
+  test("sets environment variables from the Next.js env file", async ({ page }) => {
+    const res = await page.request.get("/api/env");
+    await expect(res.json()).resolves.toEqual(expect.objectContaining({ TEST_ENV_VAR: "TEST_VALUE" }));
+  });
 
-test("returns correct information about the request from a route handler", async ({ page }) => {
-  const res = await page.request.get("/api/request");
-  // Next.js can fall back to `localhost:3000` or `n` if it doesn't get the host - neither of these are expected.
-  const expectedURL = expect.stringMatching(/https?:\/\/localhost:(?!3000)\d+\/api\/request/);
-  await expect(res.json()).resolves.toEqual({ nextUrl: expectedURL, url: expectedURL });
-});
+  test("returns correct information about the request from a route handler", async ({ page }) => {
+    const res = await page.request.get("/api/request");
+    // Next.js can fall back to `localhost:3000` or `n` if it doesn't get the host - neither of these are expected.
+    const expectedURL = expect.stringMatching(/https?:\/\/localhost:(?!3000)\d+\/api\/request/);
+    await expect(res.json()).resolves.toEqual({ nextUrl: expectedURL, url: expectedURL });
+  });
 
-test("generates an og image successfully", async ({ page }) => {
-  const res = await page.request.get("/og");
-  expect(res.status()).toEqual(200);
-  expect(res.headers()["content-type"]).toEqual("image/png");
-  expect(validateMd5(await res.body(), OG_MD5)).toEqual(true);
+  test("generates an og image successfully", async ({ page }) => {
+    const res = await page.request.get("/og");
+    expect(res.status()).toEqual(200);
+    expect(res.headers()["content-type"]).toEqual("image/png");
+    expect(validateMd5(await res.body(), OG_MD5)).toEqual(true);
+  });
 });

examples/playground/e2e/cloudflare.spec.ts

@@ -6,9 +6,11 @@
 
 import { test, expect } from "@playwright/test";
 
-test("NextConfig", async ({ page }) => {
-  const res = await page.request.get("/api/buildid");
-  expect(res.status()).toEqual(200);
-  const { nextConfig } = await res.json();
-  expect(nextConfig.output).toEqual("standalone");
+test.describe("playground/cloudflare", () => {
+  test("NextConfig", async ({ page }) => {
+    const res = await page.request.get("/api/buildid");
+    expect(res.status()).toEqual(200);
+    const { nextConfig } = await res.json();
+    expect(nextConfig.output).toEqual("standalone");
+  });
 });

examples/playground/e2e/isr.spec.ts

@@ -2,29 +2,31 @@ import { test, expect, type APIResponse } from "@playwright/test";
 import type { BinaryLike } from "node:crypto";
 import { createHash } from "node:crypto";
 
-test("Generated pages exist", async ({ page }) => {
-  const generatedIds = [1, 2, 3];
-  let res: APIResponse;
-  for (const id of generatedIds) {
-    res = await page.request.get(`/isr/${id}/dynamic`);
-    expect(res.status()).toBe(200);
-    res = await page.request.get(`/isr/${id}/no-dynamic`);
-    expect(res.status()).toBe(200);
-  }
-});
+test.describe("playground/isr", () => {
+  test("Generated pages exist", async ({ page }) => {
+    const generatedIds = [1, 2, 3];
+    let res: APIResponse;
+    for (const id of generatedIds) {
+      res = await page.request.get(`/isr/${id}/dynamic`);
+      expect(res.status()).toBe(200);
+      res = await page.request.get(`/isr/${id}/no-dynamic`);
+      expect(res.status()).toBe(200);
+    }
+  });
 
-test("Non generated pages 404 when dynamic is false", async ({ page }) => {
-  const generatedIds = [4, 5, 6];
-  for (const id of generatedIds) {
-    const res = await page.request.get(`/isr/${id}/no-dynamic`);
-    expect(res.status()).toBe(404);
-  }
-});
+  test("Non generated pages 404 when dynamic is false", async ({ page }) => {
+    const generatedIds = [4, 5, 6];
+    for (const id of generatedIds) {
+      const res = await page.request.get(`/isr/${id}/no-dynamic`);
+      expect(res.status()).toBe(404);
+    }
+  });
 
-test("Non generated pages are generated when dynamic is true", async ({ page }) => {
-  const generatedIds = [4, 5, 6];
-  for (const id of generatedIds) {
-    const res = await page.request.get(`/isr/${id}/dynamic`);
-    expect(res.status()).toBe(200);
-  }
+  test("Non generated pages are generated when dynamic is true", async ({ page }) => {
+    const generatedIds = [4, 5, 6];
+    for (const id of generatedIds) {
+      const res = await page.request.get(`/isr/${id}/dynamic`);
+      expect(res.status()).toBe(200);
+    }
+  });
 });

examples/ssg-app/e2e/base.spec.ts

@@ -1,17 +1,19 @@
 import { test, expect } from "@playwright/test";
 
-test("the index page should work", async ({ page }) => {
-  await page.goto("/");
-  await expect(page.getByText("Hello from a Statically generated page")).toBeVisible();
-});
+test.describe("ssg-app", () => {
+  test("the index page should work", async ({ page }) => {
+    await page.goto("/");
+    await expect(page.getByText("Hello from a Statically generated page")).toBeVisible();
+  });
 
-test("the APP_VERSION var from the cloudflare context should be displayed", async ({ page }) => {
-  await page.goto("/");
-  await expect(page.getByTestId("app-version")).toHaveText("1.2.345");
-});
+  test("the APP_VERSION var from the cloudflare context should be displayed", async ({ page }) => {
+    await page.goto("/");
+    await expect(page.getByTestId("app-version")).toHaveText("1.2.345");
+  });
 
-// Note: secrets from .dev.vars are also part of the SSG output, this is expected and nothing we can avoid
-test("the MY_SECRET secret from the cloudflare context should be displayed", async ({ page }) => {
-  await page.goto("/");
-  await expect(page.getByTestId("my-secret")).toHaveText("psst... this is a secret!");
+  // Note: secrets from .dev.vars are also part of the SSG output, this is expected and nothing we can avoid
+  test("the MY_SECRET secret from the cloudflare context should be displayed", async ({ page }) => {
+    await page.goto("/");
+    await expect(page.getByTestId("my-secret")).toHaveText("psst... this is a secret!");
+  });
 });