fix(lambda-at-edge, e2e-tests): fix and add e2e tests for ISR pages when locales are used (#1622)

Author: dphang

packages/e2e-tests/next-app-with-locales/cypress/integration/static-regeneration.test.ts

@@ -0,0 +1,85 @@
+describe("ISR Tests", () => {
+  before(() => {
+    cy.ensureAllRoutesNotErrored();
+  });
+
+  describe("SSG page", () => {
+    [
+      { path: "/revalidated-ssg-page", initialWaitSeconds: 0 },
+      // Pre-rendered ISR page
+      { path: "/revalidated-ssg-pages/101", initialWaitSeconds: 0 },
+      // Blocking dynamic generated page. As the page will be created and cached
+      // on first request, we'll need to wait another 10+1 seconds to be sure
+      // that we have exceeded the revalidate window.
+      { path: "/revalidated-ssg-pages/105", initialWaitSeconds: 11 },
+      { path: "/en-GB/revalidated-ssg-page", initialWaitSeconds: 0 },
+      // Pre-rendered ISR page
+      { path: "/en-GB/revalidated-ssg-pages/101", initialWaitSeconds: 0 },
+      // Blocking dynamic generated page. As the page will be created and cached
+      // on first request, we'll need to wait another 10+1 seconds to be sure
+      // that we have exceeded the revalidate window.
+      { path: "/en-GB/revalidated-ssg-pages/105", initialWaitSeconds: 11 },
+      { path: "/fr/revalidated-ssg-page", initialWaitSeconds: 0 },
+      // Pre-rendered ISR page
+      { path: "/fr/revalidated-ssg-pages/101", initialWaitSeconds: 0 },
+      // Blocking dynamic generated page. As the page will be created and cached
+      // on first request, we'll need to wait another 10+1 seconds to be sure
+      // that we have exceeded the revalidate window.
+      { path: "/fr/revalidated-ssg-pages/105", initialWaitSeconds: 11 }
+    ].forEach(({ path, initialWaitSeconds }) => {
+      it(`serves the cached re-rendered page "${path}" after 2 reloads`, () => {
+        // https://docs.cypress.io/guides/guides/test-retries#Can-I-access-the-current-attempt-counter-from-the-test
+        const attempt = Cypress._.get(
+          (cy as any).state("runnable"),
+          "_currentRetry",
+          0
+        );
+
+        if (attempt) {
+          // In retries we wait to ensure consistent, expired state
+          cy.wait(11000);
+        } else if (initialWaitSeconds) {
+          // Here the page has never been generated
+          cy.ensureRouteNotCached(path);
+          cy.visit(path);
+          cy.wait(initialWaitSeconds * 1000);
+        }
+
+        // The initial load will have expired in the cache
+        cy.ensureRouteNotCached(path);
+        cy.visit(path);
+        cy.location("pathname").should("eq", path);
+
+        cy.get("[data-cy=date-text]")
+          .invoke("text")
+          .then((text1) => {
+            // Be sure that the regeneration has run and uploaded the file
+            cy.wait(4000);
+            // When we reload again the page still should not be cached as this
+            // should be the first time its being served from the origin
+            cy.ensureRouteNotCached(path);
+            cy.reload();
+            cy.get("[data-cy=date-text]")
+              .invoke("text")
+              .then((text2) => {
+                // Check that the date text has changed since the initial page
+                // load
+                expect(text1).not.to.be.eq(text2);
+                // The new date should be greater than the original
+                expect(new Date(text2).getTime()).to.be.greaterThan(
+                  new Date(text1).getTime()
+                );
+                // Make sure the next load is cached
+                cy.ensureRouteCached(path);
+                cy.reload();
+              });
+          });
+
+        // Wait for the cache to expire after the 10s
+        cy.wait(10000);
+        cy.ensureRouteNotCached(path);
+        cy.reload();
+      });
+    });
+  });
+});

packages/e2e-tests/next-app-with-locales/next-env.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

packages/e2e-tests/next-app-with-locales/package.json

@@ -21,7 +21,7 @@
   "dependencies": {
     "isomorphic-fetch": "2.2.1",
     "next-i18next": "^8.5.5",
-    "next": "10.2.2",
+    "next": "11.1.2",
     "react": "17.0.1",
     "react-dom": "17.0.1"
   },

packages/e2e-tests/next-app-with-locales/pages/revalidated-ssg-page.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { GetStaticPropsResult } from "next";
+
+type SSGPageProps = {
+  date: string;
+};
+
+export default function RevalidatedSSGPage(props: SSGPageProps): JSX.Element {
+  return (
+    <React.Fragment>
+      <div>
+        <p data-cy="date-text">{props.date}</p>
+      </div>
+    </React.Fragment>
+  );
+}
+
+export function getStaticProps(): GetStaticPropsResult<SSGPageProps> {
+  return {
+    revalidate: 10,
+    props: {
+      date: new Date().toJSON()
+    }
+  };
+}

packages/e2e-tests/next-app-with-locales/pages/revalidated-ssg-pages/[id].tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import {
+  GetStaticPaths,
+  GetStaticPropsContext,
+  GetStaticPropsResult
+} from "next";
+
+const sampleUserData = [
+  { id: 101, name: "Alice" },
+  { id: 102, name: "Bob" },
+  { id: 103, name: "Caroline" },
+  { id: 104, name: "Dave" }
+];
+
+const newUser = { id: 105, name: "Henry" };
+
+type SSGPageProps = {
+  date: string;
+  user?: typeof sampleUserData[number];
+};
+
+export default function RevalidatedSSGPage(props: SSGPageProps): JSX.Element {
+  return (
+    <React.Fragment>
+      <div>
+        <p data-cy="date-text">{props.date}</p>
+        <p data-cy="user-id-text">{props.user?.id ?? "No user found"}</p>
+      </div>
+    </React.Fragment>
+  );
+}
+
+export const getStaticPaths: GetStaticPaths = () => {
+  // To simulate new data becoming available in a data source we only make the
+  // `newUser` available when rendering on AWS, rather than at build time.
+  const runningOnAws = !!process.env.AWS_LAMBDA_FUNCTION_NAME;
+  const paths = sampleUserData.map((user) => ({
+    params: { id: user.id.toString() }
+  }));
+
+  if (runningOnAws) {
+    paths.push({ params: { id: newUser.id.toString() } });
+  }
+
+  return { paths, fallback: "blocking" };
+};
+
+export function getStaticProps(
+  context: GetStaticPropsContext<{ id: string }>
+): GetStaticPropsResult<SSGPageProps> {
+  const users = [...sampleUserData, newUser];
+  const user = users.find(
+    ({ id }) => context.params?.id.toString() === id.toString()
+  );
+  return {
+    revalidate: 10,
+    props: {
+      date: new Date().toJSON(),
+      user
+    }
+  };
+}