diff --git a/examples/e2e/pages-router/e2e/amp.test.ts b/examples/e2e/pages-router/e2e/amp.test.ts new file mode 100644 index 00000000..42ffa049 --- /dev/null +++ b/examples/e2e/pages-router/e2e/amp.test.ts @@ -0,0 +1,15 @@ +import { expect, test } from "@playwright/test"; + +test.describe("next/amp", () => { + // TODO: fix the generated error + // AMP Optimizer ERROR Could not download runtime version from undefined. Falling back to https://cdn.ampproject.org + test.skip("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/examples/e2e/pages-router/e2e/head.test.ts b/examples/e2e/pages-router/e2e/head.test.ts new file mode 100644 index 00000000..ed6e625d --- /dev/null +++ b/examples/e2e/pages-router/e2e/head.test.ts @@ -0,0 +1,21 @@ +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()); + }); +}); diff --git a/examples/e2e/pages-router/src/pages/amp/index.tsx b/examples/e2e/pages-router/src/pages/amp/index.tsx new file mode 100644 index 00000000..b5a31e91 --- /dev/null +++ b/examples/e2e/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 ( +
+

Some time: {date.toJSON()}

+ {/* @ts-expect-error AMP Component not recognized by TypeScript */} + + .{/* @ts-ignore */} + +
+ ); +} + +export default MyAmpPage; diff --git a/examples/e2e/pages-router/src/pages/head/index.tsx b/examples/e2e/pages-router/src/pages/head/index.tsx new file mode 100644 index 00000000..0cb424d1 --- /dev/null +++ b/examples/e2e/pages-router/src/pages/head/index.tsx @@ -0,0 +1,28 @@ +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) { + return ( +
+ + OpenNext head + + + + +

This is a page!

+
+ ); +}