add test for next/amp

Author: sommeeeer

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;

packages/tests-e2e/tests/pagesRouter/amp.test.ts

@@ -0,0 +1,9 @@
+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();
+    expect(timeago).toBe("just now");
+  });
+});