add cypress tests, add dark text to lab label for light scheme

.github/workflows/preview.yaml

@@ -38,6 +38,10 @@ jobs:
           rm package-lock.json
       - name: Install Dependencies
         run: npm install
+      - name: Start app
+        run: npm run dev
+      - name: Run tests
+        run: npm run cypress:run
 
   Deploy-Preview:
     runs-on: ubuntu-latest

.github/workflows/production.yaml

@@ -38,6 +38,10 @@ jobs:
           rm package-lock.json
       - name: Install Dependencies
         run: npm install
+      - name: Start app
+        run: npm run dev
+      - name: Run tests
+        run: npm run cypress:run
 
   Deploy-Production:
     runs-on: ubuntu-latest

app/home/page.tsx

@@ -35,7 +35,7 @@ const HomePage = () => {
     <div className="m-auto mt-8 p-4 sm:w-[500px]">
       <div className="flex items-center justify-between">
         <div>
-          <h1>AWS r/Start Labs</h1>
+          <h1 data-test="aws-rstart-title">AWS r/Start Labs</h1>
         </div>
         <div>
           <button

cypress/e2e/labs/labs.cy.js

@@ -4,25 +4,35 @@ import { faker } from "@faker-js/faker"
 
 describe("User Labs", () => {
   beforeEach(() => {
-    cy.setCookie("next-auth.session-token", faker.string.uuid())
-    cy.setCookie("next-auth.callback-url", "/home")
-    cy.setCookie("next-auth.csrf-token", faker.string.uuid())
-
-    cy.visit("/home")
+    cy.visit("/")
+    cy.stubLogin()
   })
 
-  it("can successfully track a lab", () => {
-    cy.intercept("POST", "/labs", {
+  it("can successfully track user's lab", () => {
+    cy.intercept("GET", "/api/labs?**", { fixture: "empty-user-labs" })
+    cy.intercept("POST", "/api/labs", {
       statusCode: 201,
-      body: { message: "Lab successfully created" },
-    }).as("successfullyTrackedLab")
+      body: { message: "Lab tracked successfully" },
+    })
 
     cy.get('[data-test="lab-checkbox-1"]').first().check()
-    cy.wait("@successfullyTrackedLab")
     cy.contains("Lab tracked successfully").should("exist")
   })
 
-  it("can successfully update a lab status", () => {
+  it("can show error message if lab tracking is unsuccessful", () => {
+    cy.intercept("GET", "/api/labs?**", { fixture: "empty-user-labs" })
+    cy.intercept("POST", "/api/labs", {
+      statusCode: 500,
+      body: {
+        message: "Error occurred tracking this lab",
+      },
+    })
+
+    cy.get('[data-test="lab-checkbox-1"]').first().check()
+    cy.contains("Failed to perform request, please try again.").should("exist")
+  })
+
+  it("can successfully update lab status", () => {
     const updatedLab = {
       _id: faker.string.uuid(),
       email: faker.internet.email(),
@@ -33,37 +43,26 @@ describe("User Labs", () => {
       __v: 0,
     }
 
-    cy.intercept("PUT", "/labs", {
+    cy.intercept("GET", "/api/labs?**", { fixture: "user-labs" })
+    cy.intercept("PUT", "/api/labs/**", {
       statusCode: 201,
-      body: { message: "Lab successfully updated", lab: updatedLab },
-    }).as("successfullyUpdatedLabStatus")
+      body: { message: "Lab status updated successfully", lab: updatedLab },
+    })
 
     cy.get('[data-test="lab-checkbox-1"]').first().check()
-    cy.wait("@successfullyUpdatedLabStatus")
     cy.contains("Lab status updated successfully").should("exist")
   })
 
-  it("can show an error if lab tracking is unsuccessful", () => {
-    cy.intercept("POST", "/labs", {
+  it("can show error message if lab status update is unsuccessful", () => {
+    cy.intercept("GET", "/api/labs?**", { fixture: "user-labs" })
+    cy.intercept("PUT", "/api/labs/**", {
       statusCode: 500,
-      body: "Internal Server Error",
-    }).as("failedLabTracking")
+      body: {
+        message: "An error occurred updating this lab",
+      },
+    })
 
     cy.get('[data-test="lab-checkbox-1"]').first().check()
-
-    cy.wait("@failedLabTracking")
-    cy.contains("Error occurred tracking this lab").should("exist")
-  })
-
-  it("can show an error if lab status update is unsuccessful", () => {
-    cy.intercept("PUT", "/labs/*", {
-      statusCode: 500,
-      body: "Internal Server Error",
-    }).as("failedLabStatusUpdate")
-
-    cy.get('[data-test="lab-checkbox-1"]').first().check()
-
-    cy.wait("@failedLabStatusUpdate")
-    cy.contains("An error occurred updating this lab").should("exist")
+    cy.contains("Failed to perform request, please try again.").should("exist")
   })
 })

cypress/e2e/sign-in/sign-in.cy.js

@@ -6,14 +6,9 @@ describe("Sign In", () => {
   })
 
   it("can successfully sign in user via Google", () => {
-    cy.get("[data-test=sign-in-with-google]")
-      .should("exist")
-      .should("contain.text", "Sign in with Google")
-      .click()
-
-    cy.get("[data-test=sign-in-with-google]")
-      .should("be.disabled")
-      .should("contain.text", "Signing in...")
+    cy.stubLogin()
+    cy.intercept("GET", "/api/labs?**", { fixture: "empty-user-labs" })
+    cy.get("[data-test=aws-rstart-title]").should("be.visible")
   })
 
   it("should handle failed Google sign-in", () => {

cypress/fixtures/auth-session.json

@@ -0,0 +1,8 @@
+{
+  "user": {
+    "name": "Alex Muriuki",
+    "email": "[email protected]",
+    "image": "https://lh3.googleusercontent.com/a/ACg8ocLvXXxIIUKs2pCZQP0GeRHil6VSGViX9QJh6UKtfW3Q1w=s96-c"
+  },
+  "expires": "2024-03-17T09:45:01.230Z"
+}

cypress/fixtures/empty-user-labs.json

@@ -0,0 +1,3 @@
+{
+  "labs": []
+}

cypress/fixtures/user-labs.json

@@ -0,0 +1,13 @@
+{
+  "labs": [
+    {
+      "_id": "65cb0cebae60d794c35416fd",
+      "email": "[email protected]",
+      "name": "11-[CF]-Lab - Introduction to Amazon EC2",
+      "completed": false,
+      "createdAt": "2024-02-13T06:32:11.615Z",
+      "updatedAt": "2024-02-16T10:10:54.733Z",
+      "__v": 0
+    }
+  ]
+}