test(info): implement e2e test (#71)

cypress.config.ts

@@ -1,9 +1,19 @@
 import { defineConfig } from "cypress";
+import dotenv from 'dotenv';
+
+dotenv.config({ path: '.env.local' });
 
 export default defineConfig({
   e2e: {
-    // setupNodeEvents(on, config) {},
+    setupNodeEvents(on, config) {
+      config.env = {
+        ...config.env,
+        ...process.env,
+      };
+      return config;
+    },
     baseUrl: "http://localhost:3000",
     watchForFileChanges: false,
+    experimentalModifyObstructiveThirdPartyCode: true,
   },
 });

cypress/e2e/info.cy.ts

@@ -0,0 +1,101 @@
+describe("4. Info Page", () => {
+  beforeEach(() => {
+    cy.viewport(375, 464);
+    cy.visit("/");
+
+    // avoid repeated login
+    cy.session("login", () => {
+      cy.login();
+    });
+    cy.visit("/info");
+  });
+
+  context("4.1 header section", () => {
+    it("contains the correct text", () => {
+      cy.contains("Dishcovery").should("be.visible");
+    });
+  });
+
+  context("4.2 main section", () => {
+    it("display corrrect user info", () => {
+      cy.get("main").find("img").should("be.visible");
+      cy.get("main").find("p").should("have.class", "text-lg");
+      cy.get("main").find(".font-normal").should("contain", "user");
+    });
+
+    it("have correct button", () => {
+      cy.get("[role=tablist]")
+        .find("button")
+        .then(($bar) => {
+          cy.wrap($bar).eq(0).should("contain", "Reservation");
+          cy.wrap($bar).eq(1).should("contain", "Post");
+          cy.wrap($bar).eq(2).should("contain", "Store");
+        });
+    });
+  });
+
+  context("4.3 reservation section", () => {
+    it("contains the correct text", () => {
+      cy.contains("Post Reservations").should("be.visible");
+      cy.contains("Store Reservations").should("be.visible");
+    });
+
+    it("reservation display correct information", () => {
+      cy.get(".rounded-lg")
+        .eq(0)
+        .then(($el) => {
+          cy.wrap($el).find("img").should("exist");
+          cy.wrap($el).find(".font-semibold").should("exist");
+          cy.wrap($el).find(".font-light").should("contain", "$");
+          cy.wrap($el).find(".text-ellipsis").should("exist");
+        });
+    });
+
+    it("can modify reservation", () => {
+      cy.get(".rounded-lg").then(($el) => {
+        cy.wrap($el)
+          .its("length")
+          .then((len: number) => {
+            cy.wrap($el).eq(0).click();
+            cy.get("[role=dialog]")
+              .eq(len - 1)
+              .find("svg")
+              .click({ force: true });
+          });
+      });
+    });
+  });
+
+  context("4.4 post section", () => {
+    it("post display correct information", () => {
+      cy.get("button").contains("Post").click();
+      cy.get(".rounded-lg")
+        .eq(0)
+        .then(($el) => {
+          cy.wrap($el).find("img").should("exist");
+          cy.wrap($el).find(".font-semibold").should("exist");
+          cy.wrap($el).find(".font-light").should("exist");
+          cy.wrap($el).find(".text-ellipsis").should("exist");
+        });
+    });
+
+    it("post direct to correct post page", () => {
+      cy.get("button").contains("Post").click();
+      cy.get(".rounded-lg")
+        .eq(0)
+        .find(".font-semibold")
+        .then(($post) => {
+          const text = $post.text();
+          cy.wrap($post).click();
+          cy.wait(500);
+          cy.get(".text-lg").should("have.text", text);
+        });
+    });
+
+    it("can add new post", () => {
+      cy.get("button").contains("Post").click();
+      cy.get("svg").click();
+      cy.contains("Add post").should("exist");
+    });
+  });
+});

cypress/support/commands.ts

@@ -1 +1,29 @@
 /// <reference types="cypress" />
+
+declare namespace Cypress {
+  interface Chainable {
+    login(): Chainable<void>;
+  }
+}
+
+Cypress.Commands.add("login", () => {
+  cy.visit("/");
+  cy.contains("Login").click();
+  cy.get("button").click();
+  cy.get("button").click();
+
+  cy.origin("https://accounts.google.com", () => {
+    Cypress.on("uncaught:exception", (err, runnable) => {
+      return false;
+    });
+
+    const username = Cypress.env("GOOGLE_USER");
+    const password = Cypress.env("GOOGLE_PW");
+
+    cy.get("#identifierId").type(`${username}{enter}`);
+    cy.get("[type=password]").type(`${password}{enter}`);
+    cy.contains("Continue").click();
+  });
+  cy.get("button").click();
+  cy.get("button").click();
+});