diff --git a/examples/pages-router/src/pages/amp/index.tsx b/examples/pages-router/src/pages/amp/index.tsx new file mode 100644 index 000000000..b5a31e91a --- /dev/null +++ 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 ( +
+

Some time: {date.toJSON()}

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

This is a page!

+
+ ); +} diff --git a/packages/tests-e2e/tests/pagesRouter/amp.test.ts b/packages/tests-e2e/tests/pagesRouter/amp.test.ts new file mode 100644 index 000000000..a8fb2c619 --- /dev/null +++ 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 new file mode 100644 index 000000000..ba9b8a03a --- /dev/null +++ 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()); + }); +});