add e2e for next/head and next/amp in pages router (#845)

sommeeeer · web-flow · commit 9411b7a77a89 · 2025-05-05T09:35:32.000+02:00
* add e2e for next/head

* add test for next/amp

* add html attr to test

* comment
diff --git a/examples/pages-router/src/pages/amp/index.tsx b/examples/pages-router/src/pages/amp/index.tsx
@@ -0,0 +1,39 @@
+/*
+ * When doing `next build` you would get the error below:
+ * TypeScript error: Property 'amp-timeago' does not exist on type 'JSX.IntrinsicElements'.
+ * https://stackoverflow.com/questions/50585952/property-amp-img-does-not-exist-on-type-jsx-intrinsicelements/50601125#50601125
+ * The workaround in that SO post doesn't work in this (mono)repo so I ended up using @ts-expect-error and @ts-ignore
+ *
+ */
+
+export const config = { amp: true };
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      time: new Date().toISOString(),
+    },
+  };
+}
+
+function MyAmpPage({ time }: { time: string }) {
+  const date = new Date(time);
+
+  return (
+    <div>
+      <p>Some time: {date.toJSON()}</p>
+      {/* @ts-expect-error AMP Component not recognized by TypeScript */}
+      <amp-timeago
+        width="0"
+        height="15"
+        datetime={date.toJSON()}
+        layout="responsive"
+        data-testid="amp-timeago"
+      >
+        .{/* @ts-ignore */}
+      </amp-timeago>
+    </div>
+  );
+}
+
+export default MyAmpPage;
diff --git a/examples/pages-router/src/pages/head/index.tsx b/examples/pages-router/src/pages/head/index.tsx
@@ -0,0 +1,34 @@
+import type { InferGetServerSidePropsType } from "next";
+import Head from "next/head";
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      time: new Date().toISOString(),
+      envVar: process.env.SOME_PROD_VAR,
+    },
+  };
+}
+
+export default function Page({
+  time,
+  envVar,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  return (
+    <div>
+      <Head>
+        <title>OpenNext head</title>
+        <meta
+          property="og:title"
+          content={`OpenNext pages router head ${envVar}`}
+        />
+        <meta property="time" content={time} />
+        <meta
+          name="description"
+          content="OpenNext takes the Next.js build output and converts it into packages that can be deployed across a variety of environments. Natively OpenNext has support for AWS Lambda, Cloudflare, and classic Node.js Server."
+        />
+      </Head>
+      <p>This is a page!</p>
+    </div>
+  );
+}
diff --git a/packages/tests-e2e/tests/pagesRouter/amp.test.ts b/packages/tests-e2e/tests/pagesRouter/amp.test.ts
@@ -0,0 +1,13 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("next/amp", () => {
+  test("should load and display the timeago component", async ({ page }) => {
+    await page.goto("/amp");
+    const timeago = await page.getByTestId("amp-timeago").textContent();
+    // We can safely assume this will always show `just now` as its using `format()` from `timeago.js`.
+    // It will show `just now` if the time is less than 10s ago.
+    expect(timeago).toBe("just now");
+    const htmlEl = page.locator("html");
+    await expect(htmlEl).toHaveAttribute("amp");
+  });
+});
diff --git a/packages/tests-e2e/tests/pagesRouter/head.test.ts b/packages/tests-e2e/tests/pagesRouter/head.test.ts
@@ -0,0 +1,27 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("next/head", () => {
+  test("should have the correct title", async ({ page }) => {
+    await page.goto("/head");
+    const title = await page.title();
+    expect(title).toBe("OpenNext head");
+  });
+  test("should have the correct meta tags", async ({ page }) => {
+    await page.goto("/head");
+    const ogTitle = await page
+      .locator('meta[property="og:title"]')
+      .getAttribute("content");
+    const ogDesc = await page
+      .locator('meta[name="description"]')
+      .getAttribute("content");
+    const time = await page
+      .locator('meta[property="time"]')
+      .getAttribute("content");
+    expect(ogTitle).toBe("OpenNext pages router head bar");
+    expect(ogDesc).toBe(
+      "OpenNext takes the Next.js build output and converts it into packages that can be deployed across a variety of environments. Natively OpenNext has support for AWS Lambda, Cloudflare, and classic Node.js Server.",
+    );
+
+    expect(new Date(time!).getTime()).toBeLessThan(Date.now());
+  });
+});
