test(e2e-tests): add initial set of API tests, minor improvements to checking cache status in other tests (#624)

Author: dphang

packages/e2e-tests/next-app/cypress/integration/api-routes.test.ts

@@ -0,0 +1,72 @@
+describe("API Routes Tests", () => {
+  before(() => {
+    cy.ensureAllRoutesNotErrored();
+  });
+
+  describe("Basic API", () => {
+    const path = "/api/basic-api";
+
+    ["DELETE", "POST", "GET", "PUT", "PATCH", "OPTIONS", "HEAD"].forEach(
+      (method) => {
+        it(`serves API request for path ${path} and method ${method}`, () => {
+          cy.request({ url: path, method: method }).then((response) => {
+            expect(response.status).to.equal(200);
+            cy.verifyResponseCacheStatus(response, false);
+
+            if (method === "HEAD") {
+              expect(response.body).to.be.empty;
+            } else {
+              expect(response.body).to.deep.equal({
+                name: "This is a basic API route.",
+                method: method
+              });
+            }
+          });
+        });
+      }
+    );
+  });
+
+  describe("Dynamic + Nested API", () => {
+    const base = "api/nested/";
+
+    ["DELETE", "POST", "GET", "PUT", "PATCH", "OPTIONS", "HEAD"].forEach(
+      (method) => {
+        const id = "1";
+        const path = base + id;
+
+        it(`serves API request for path ${path} and method ${method}`, () => {
+          cy.request({ url: path, method: method }).then((response) => {
+            expect(response.status).to.equal(200);
+            cy.verifyResponseCacheStatus(response, false);
+
+            if (method === "HEAD") {
+              expect(response.body).to.be.empty;
+            } else {
+              expect(response.body).to.deep.equal({
+                id: id,
+                name: `User ${id}`,
+                method: method
+              });
+            }
+          });
+        });
+      }
+    );
+
+    ["1", "2", "3", "4", "5"].forEach((id) => {
+      const path = base + id;
+      it(`serves API request for path ${path} for different IDs`, () => {
+        cy.request({ url: path, method: "GET" }).then((response) => {
+          expect(response.status).to.equal(200);
+          expect(response.body).to.deep.equal({
+            id: id,
+            name: `User ${id}`,
+            method: "GET"
+          });
+          cy.verifyResponseCacheStatus(response, false);
+        });
+      });
+    });
+  });
+});

packages/e2e-tests/next-app/cypress/integration/data-requests.test.ts

@@ -13,14 +13,12 @@ describe("Data Requests", () => {
             expect(response.headers["cache-control"]).to.not.be.undefined;
 
             if (i === 1) {
-              expect(response.headers["x-cache"]).to.equal(
-                "Hit from cloudfront"
-              );
+              cy.verifyResponseCacheStatus(response, true);
             } else {
-              expect([
+              expect(response.headers["x-cache"]).to.be.oneOf([
                 "Miss from cloudfront",
                 "Hit from cloudfront"
-              ]).to.contain(response.headers["x-cache"]);
+              ]);
             }
           });
         }
@@ -58,10 +56,7 @@ describe("Data Requests", () => {
         for (let i = 0; i < 2; i++) {
           cy.request(fullPath).then((response) => {
             expect(response.status).to.equal(200);
-            expect([
-              "Miss from cloudfront",
-              "LambdaGeneratedResponse from cloudfront"
-            ]).to.contain(response.headers["x-cache"]);
+            cy.verifyResponseCacheStatus(response, false);
             expect(response.headers["cache-control"]).to.be.undefined;
           });
         }

packages/e2e-tests/next-app/cypress/integration/static-files.test.ts

@@ -24,7 +24,7 @@ describe("Static Files Tests", () => {
         cy.request(path);
         cy.request(path).then((response) => {
           expect(response.status).to.equal(200);
-          expect(response.headers["x-cache"]).to.equal("Hit from cloudfront");
+          cy.verifyResponseCacheStatus(response, true);
         });
       });
 

packages/e2e-tests/next-app/cypress/support/commands.ts

@@ -39,6 +39,10 @@ declare namespace Cypress {
       path: string,
       redirectedPath: string
     ) => Cypress.Chainable<JQuery>;
+    verifyResponseCacheStatus: (
+      response: Cypress.Response,
+      shouldBeCached: boolean
+    ) => Cypress.Chainable<JQuery>;
   }
 }
 
@@ -115,3 +119,17 @@ Cypress.Commands.add(
     });
   }
 );
+
+Cypress.Commands.add(
+  "verifyResponseCacheStatus",
+  (response: Cypress.Response, shouldBeCached: boolean) => {
+    if (shouldBeCached) {
+      expect(response.headers["x-cache"]).to.equal("Hit from cloudfront");
+    } else {
+      expect(response.headers["x-cache"]).to.be.oneOf([
+        "Miss from cloudfront",
+        "LambdaGeneratedResponse from cloudfront"
+      ]);
+    }
+  }
+);

packages/e2e-tests/next-app/pages/api/basic-api.ts

@@ -0,0 +1,15 @@
+import { NextApiRequest, NextApiResponse } from "next";
+
+type Data = {
+  name: string;
+  method: string | undefined;
+};
+
+export default (req: NextApiRequest, res: NextApiResponse<Data>) => {
+  res.setHeader("Content-Type", "application/json");
+
+  res.status(200).json({
+    name: "This is a basic API route.",
+    method: req.method
+  });
+};

packages/e2e-tests/next-app/pages/api/nested/[id].ts

@@ -0,0 +1,18 @@
+import { NextApiRequest, NextApiResponse } from "next";
+
+type Data = {
+  id: string | string[];
+  name: string;
+  method: string | undefined;
+};
+
+export default (req: NextApiRequest, res: NextApiResponse<Data>) => {
+  res.setHeader("Content-Type", "application/json");
+
+  const {
+    query: { id },
+    method
+  } = req;
+
+  res.status(200).json({ id: id, name: `User ${id}`, method: method });
+};