test(cypress): upgrade cypress to v10 and migrate to ts

cypress.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from "cypress"
+
+export default defineConfig({
+  chromeWebSecurity: false,
+  viewportHeight: 768,
+  viewportWidth: 1366,
+  projectId: "nxbty1",
+
+  e2e: {
+    specPattern: "cypress/e2e/**/*.{js,jsx,ts,tsx}",
+  },
+
+  component: {
+    devServer: {
+      framework: "create-react-app",
+      bundler: "webpack",
+    },
+  },
+})

cypress/integration/editPage.spec.js → cypress/e2e/editPage.spec.ts

@@ -3,7 +3,8 @@ import {
   slugifyCategory,
   generateResourceFileName,
   titleToPageFileName,
-} from "../../src/utils"
+} from "utils"
+
 import {
   E2E_CHANGE_WAIT_TIME,
   E2E_DEFAULT_WAIT_TIME,
@@ -54,7 +55,10 @@ describe("Edit unlinked page", () => {
 
   before(() => {
     cy.setCookie(COOKIE_NAME, COOKIE_VALUE)
-    window.localStorage.setItem(LOCAL_STORAGE_USER_KEY, E2E_USER)
+    window.localStorage.setItem(
+      LOCAL_STORAGE_USER_KEY,
+      JSON.stringify(E2E_USER)
+    )
     window.localStorage.setItem(LOCAL_STORAGE_USERID_KEY, E2E_USER.userId)
 
     // Set colour

cypress/integration/files.spec.js → cypress/e2e/files.spec.ts

@@ -20,7 +20,7 @@ describe("Files", () => {
 
   const MISSING_EXTENSION = "singapore"
   const INVALID_CHARACTER = "%%%%.pdf"
-  const ACTION_DISABLED = "true"
+  const ACTION_DISABLED = true
 
   describe("Create file, delete file, edit file settings in Files", () => {
     beforeEach(() => {

cypress/integration/folders.spec.js → cypress/e2e/folders.spec.ts

@@ -4,7 +4,8 @@ import {
   titleToPageFileName,
   pageFileNameToTitle,
   deslugifyDirectory,
-} from "../../src/utils"
+} from "utils"
+
 import {
   E2E_DEFAULT_WAIT_TIME,
   E2E_EXTENDED_TIMEOUT,

cypress/integration/move.spec.js → cypress/e2e/move.spec.ts

@@ -1,4 +1,5 @@
-import { slugifyCategory } from "../../src/utils"
+import { slugifyCategory } from "utils"
+
 import { E2E_EXTENDED_TIMEOUT } from "../fixtures/constants"
 
 describe("Move flow", () => {
@@ -100,7 +101,7 @@ describe("Move flow", () => {
         "Workspace",
         TITLE_WORKSPACE_TO_FOLDER,
       ])
-      cy.get("u").last().getFirstSiblingAs("moveFolderUpdatedBreadcrumb", [])
+      cy.get("u").last().getFirstSiblingAs("moveFolderUpdatedBreadcrumb")
       cy.verifyBreadcrumb("@moveFolderUpdatedBreadcrumb", [
         "Workspace",
         TEST_REPO_FOLDER_NAME,
@@ -128,7 +129,7 @@ describe("Move flow", () => {
 
       cy.contains(`Move Here`)
 
-      cy.contains("button", "Move Here").clickAndWait()
+      cy.contains("button", "Move Here").click()
 
       cy.contains("File is already in this folder", {
         timeout: E2E_EXTENDED_TIMEOUT,
@@ -151,7 +152,7 @@ describe("Move flow", () => {
       // Navigate to Move folder
       cy.get("button[id^=moveModal-forwardButton-]")
         .eq(1)
-        .clickAndWait({ force: true })
+        .click({ force: true })
 
       // Assert
       cy.get("u").first().getFirstSiblingAs("moveFolderCurrentBreadcrumb")
@@ -166,7 +167,7 @@ describe("Move flow", () => {
         TITLE_WORKSPACE_TO_FOLDER,
       ])
 
-      cy.contains("button", "Move Here").clickAndWait()
+      cy.contains("button", "Move Here").click()
 
       cy.contains("Successfully moved file", {
         timeout: E2E_EXTENDED_TIMEOUT,
@@ -208,10 +209,10 @@ describe("Move flow", () => {
       // Navigate to Move folder
       cy.get("button[id^=moveModal-forwardButton-]")
         .eq(1)
-        .clickAndWait({ force: true })
+        .click({ force: true })
 
       // Navigate to Move subfolder
-      cy.get("button[id^=moveModal-forwardButton-]").clickAndWait({
+      cy.get("button[id^=moveModal-forwardButton-]").click({
         force: true,
       })
 
@@ -229,7 +230,7 @@ describe("Move flow", () => {
         TITLE_WORKSPACE_TO_SUBFOLDER,
       ])
 
-      cy.contains("button", "Move Here").clickAndWait()
+      cy.contains("button", "Move Here").click()
 
       cy.contains("Successfully moved file", {
         timeout: E2E_EXTENDED_TIMEOUT,
@@ -363,7 +364,7 @@ describe("Move flow", () => {
         TITLE_FOLDER_TO_WORKSPACE,
       ])
 
-      cy.get("#moveModal-backButton").clickAndWait({ force: true })
+      cy.get("#moveModal-backButton").click({ force: true })
 
       // Assert
       cy.get("u").last().getFirstSiblingAs("movedLocationBreadcrumb")
@@ -372,7 +373,7 @@ describe("Move flow", () => {
         TITLE_FOLDER_TO_WORKSPACE,
       ])
 
-      cy.contains("button", "Move Here").clickAndWait()
+      cy.contains("button", "Move Here").click()
 
       cy.contains("Successfully moved file", {
         timeout: E2E_EXTENDED_TIMEOUT,
@@ -404,7 +405,7 @@ describe("Move flow", () => {
         TITLE_FOLDER_TO_SUBFOLDER,
       ])
 
-      cy.get("button[id^=moveModal-forwardButton-]").clickAndWait({
+      cy.get("button[id^=moveModal-forwardButton-]").click({
         force: true,
       })
 
@@ -417,7 +418,7 @@ describe("Move flow", () => {
         TITLE_FOLDER_TO_SUBFOLDER,
       ])
 
-      cy.contains("button", "Move Here").clickAndWait()
+      cy.contains("button", "Move Here").click()
 
       cy.contains("Successfully moved file", {
         timeout: E2E_EXTENDED_TIMEOUT,
@@ -512,7 +513,7 @@ describe("Move flow", () => {
         .should("exist")
       cy.clickContextMenuItem("@folderItem", "Move to")
 
-      cy.contains("button", "Move Here").clickAndWait()
+      cy.contains("button", "Move Here").click()
 
       cy.contains("File is already in this folder", {
         timeout: E2E_EXTENDED_TIMEOUT,
@@ -543,7 +544,7 @@ describe("Move flow", () => {
         TITLE_SUBFOLDER_TO_WORKSPACE,
       ])
 
-      cy.get("#moveModal-backButton").clickAndWait({ force: true })
+      cy.get("#moveModal-backButton").click({ force: true })
 
       // Assert
       cy.get("u").last().getFirstSiblingAs("folderBreadcrumb")
@@ -553,7 +554,7 @@ describe("Move flow", () => {
         TITLE_SUBFOLDER_TO_WORKSPACE,
       ])
 
-      cy.get("#moveModal-backButton").clickAndWait({ force: true })
+      cy.get("#moveModal-backButton").click({ force: true })
 
       // Assert
       cy.get("u").last().getFirstSiblingAs("workspaceBreadcrumb")
@@ -562,7 +563,7 @@ describe("Move flow", () => {
         TITLE_SUBFOLDER_TO_WORKSPACE,
       ])
 
-      cy.contains("button", "Move Here").clickAndWait()
+      cy.contains("button", "Move Here").click()
 
       cy.contains("Successfully moved file", {
         timeout: E2E_EXTENDED_TIMEOUT,
@@ -605,7 +606,7 @@ describe("Move flow", () => {
         TITLE_SUBFOLDER_TO_FOLDER,
       ])
 
-      cy.contains("button", "Move Here").clickAndWait()
+      cy.contains("button", "Move Here").click()
 
       cy.contains("Successfully moved file", {
         timeout: E2E_EXTENDED_TIMEOUT,
@@ -729,7 +730,7 @@ describe("Move flow", () => {
         TITLE_RESOURCE_PAGE,
       ])
 
-      cy.contains("button", "Move Here").clickAndWait()
+      cy.contains("button", "Move Here").click()
 
       cy.contains("Successfully moved file", {
         timeout: E2E_EXTENDED_TIMEOUT,

cypress/integration/resourceCategory.spec.js → cypress/e2e/resourceCategory.spec.ts

@@ -1,5 +1,6 @@
 import "cypress-file-upload"
-import { slugifyCategory, generateResourceFileName } from "../../src/utils" // 30 seconds
+import { slugifyCategory, generateResourceFileName } from "utils"
+
 import {
   E2E_EXTENDED_TIMEOUT,
   E2E_DEFAULT_WAIT_TIME,

cypress/integration/resources.spec.js → cypress/e2e/resources.spec.ts

@@ -1,4 +1,5 @@
-import { slugifyCategory } from "../../src/utils"
+import { slugifyCategory } from "utils"
+
 import {
   E2E_DEFAULT_WAIT_TIME,
   E2E_EXTENDED_TIMEOUT,

cypress/integration/settings.spec.js → cypress/e2e/settings.spec.ts

@@ -46,21 +46,8 @@ describe("Settings page", () => {
   const SAMPLE_PAGE = "editPage/faq.md"
   const HOMEPAGE = "homepage"
 
-  // Reusable save command
-  Cypress.Commands.add("saveSettings", () => {
-    cy.intercept("POST", "/v2/sites/e2e-test-repo/settings").as("awaitSave")
-    cy.contains("button", "Save").click()
-    cy.wait("@awaitSave")
-  })
-
-  // Reusable visit command
-  Cypress.Commands.add("visitLoadSettings", (sitePath) => {
-    cy.intercept("GET", `/v2/sites/${TEST_REPO_NAME}/settings`).as(
-      "awaitSettings"
-    )
-    cy.visit(sitePath)
-    cy.wait("@awaitSettings")
-  })
+  const visitLoadSettings = (sitePath: string) =>
+    cy.visitLoadSettings(TEST_REPO_NAME, sitePath)
 
   Cypress.Cookies.defaults({
     preserve: COOKIE_NAME,
@@ -72,7 +59,7 @@ describe("Settings page", () => {
     cy.contains(TEST_REPO_NAME).click()
 
     window.localStorage.setItem("userId", "test")
-    cy.visitLoadSettings(`/sites/${TEST_REPO_NAME}/settings`)
+    visitLoadSettings(`/sites/${TEST_REPO_NAME}/settings`)
 
     // Reset page input field states
     cy.get("#title").clear().type(BASE_TITLE)
@@ -131,7 +118,7 @@ describe("Settings page", () => {
 
   beforeEach(() => {
     window.localStorage.setItem("userId", "test")
-    cy.visitLoadSettings(`/sites/${TEST_REPO_NAME}/settings`)
+    visitLoadSettings(`/sites/${TEST_REPO_NAME}/settings`)
     // Double check that settings are loaded before running tests cos sometimes the tests run too quickly
     cy.get("#title").should((elem) => {
       expect(elem.val()).to.have.length.greaterThan(0)
@@ -220,7 +207,7 @@ describe("Settings page", () => {
   })
 
   // [r, g, b] -> #RRGGBB
-  function rgbToHex(r, g, b) {
+  const rgbToHex = ([r, g, b, ...rest]: number[]) => {
     // eslint-disable-next-line no-bitwise
     return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
   }
@@ -257,9 +244,9 @@ describe("Settings page", () => {
 
     // Check if selected colors are reflected upon save
     const rgbPrimary = `rgb(${TEST_PRIMARY_COLOR.join(", ")})`
-    const hexPrimary = rgbToHex(...TEST_PRIMARY_COLOR)
+    const hexPrimary = rgbToHex(TEST_PRIMARY_COLOR)
     const rgbSecondary = `rgb(${TEST_SECONDARY_COLOR.join(", ")})`
-    const hexSecondary = rgbToHex(...TEST_SECONDARY_COLOR)
+    const hexSecondary = rgbToHex(TEST_SECONDARY_COLOR)
     cy.contains("label", "Primary")
       .parent()
       .find("input")
@@ -280,13 +267,13 @@ describe("Settings page", () => {
       .and("eq", rgbSecondary)
 
     // Check if page previews reflect color change
-    cy.visitLoadSettings(`/sites/${TEST_REPO_NAME}/${SAMPLE_PAGE}`)
+    visitLoadSettings(`/sites/${TEST_REPO_NAME}/${SAMPLE_PAGE}`)
     cy.get("section.bp-section-pagetitle") // Page title banner
       .should("have.css", "background-color", rgbPrimary)
 
     // Check if home page reflects color change
     cy.visit(`/sites/${TEST_REPO_NAME}/workspace`) // Somehow colors won't load on homepage if visiting directly
-    cy.visitLoadSettings(`/sites/${TEST_REPO_NAME}/${HOMEPAGE}`)
+    visitLoadSettings(`/sites/${TEST_REPO_NAME}/${HOMEPAGE}`)
     cy.get("#notification-bar")
       .first() // Notification bar
       .should("have.css", "background-color", rgbSecondary)

cypress/integration/workspace.spec.js → cypress/e2e/workspace.spec.ts

@@ -1,8 +1,5 @@
-import {
-  deslugifyDirectory,
-  slugifyCategory,
-  titleToPageFileName,
-} from "../../src/utils"
+import { slugifyCategory, titleToPageFileName, deslugifyDirectory } from "utils"
+
 import {
   E2E_DEFAULT_WAIT_TIME,
   E2E_EXTENDED_TIMEOUT,

cypress/plugins/index.ts

@@ -0,0 +1,3 @@
+import tsConfigPaths from "tsconfig-paths"
+
+tsConfigPaths.register()