feat: Add initial Cypress test examples

.gitignore

@@ -78,6 +78,7 @@ web_modules/
 .env.test.local
 .env.production.local
 .env.local
+cypress.env.json
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache

test/cypress.config.ts

@@ -0,0 +1,47 @@
+import { defineConfig } from "cypress"
+import vitePreprocessor from "cypress-vite"
+import path from "path"
+
+export default defineConfig({
+  blockHosts: ["*.log.optimizely.com*"],
+  e2e: {
+    baseUrl: "http://localhost:7466",
+    experimentalStudio: true,
+    pageLoadTimeout: 10000,
+    setupNodeEvents(on, config) {
+      require("@cypress/grep/src/plugin")(config)
+
+      on(
+        "file:preprocessor",
+        vitePreprocessor({
+          configFile: path.resolve(__dirname, "./cypress/vite.config.ts"),
+          mode: "development",
+        }),
+      )
+
+      on("task", {
+        consoleLog(message) {
+          console.log(message)
+
+          return null
+        },
+        consoleTable(message) {
+          console.table(message)
+
+          return null
+        },
+      })
+
+      return config
+    },
+  },
+  env: {
+    grepFilterSpecs: true,
+    grepOmitFiltered: true,
+    hideXhr: true,
+    remoteUrl: "http://the-internet.herokuapp.com",
+    cookieLoginUrl: "https://twopiharris.pythonanywhere.com/login",
+    cookieVerifyUrl: "https://twopiharris.pythonanywhere.com/loginTest",
+  },
+  video: false,
+})

test/cypress.env.json.example

@@ -0,0 +1,6 @@
+{
+  "defaultUser": {
+    "username": "admin",
+    "password": "ABCD"
+  }
+}

test/cypress/e2e/local.cy.js

@@ -0,0 +1,26 @@
+import { el } from "@cy-support/elements"
+
+describe("Tests local Vite+Vue3 webapp", { tags: "@local" }, () => {
+  beforeEach(() => {
+    cy.visit("/")
+  })
+
+  it('shows app is loaded and the counter is enabled with the starting state of "0"', () => {
+    cy.visit("/")
+    cy.url().should("contain", "localhost:7466")
+    cy.contains("Vite + Vue").should("be.visible")
+    cy.get(el.counterButton).should("be.enabled").and("contain", "count is 0")
+  })
+
+  it("increases the counter and verifies the state has reset after a reload", () => {
+    cy.get(el.counterButton)
+      .should("be.enabled")
+      .click()
+      .should("contain", "count is 1")
+      .then((previousState) => {
+        cy.log(previousState.text())
+        cy.visit("/")
+        cy.get(el.counterButton).its("text").should("not.be.equal", previousState.text())
+      })
+  })
+})

test/cypress/e2e/remote-separate-login.cy.js

@@ -0,0 +1,7 @@
+describe("Tests external website isolated login flow", { tags: "@remote" }, () => {
+  it("verifies session saving works across specs", () => {
+    cy.loginFormCookie(Cypress.env("cookieLoginUrl"))
+    cy.visit(Cypress.env("cookieVerifyUrl"))
+    cy.contains("admin status: true").should("be.visible")
+  })
+})

test/cypress/e2e/remote.cy.js

@@ -0,0 +1,16 @@
+describe("Tests external website example", { tags: "@remote" }, () => {
+  it("logs in using session saving", () => {
+    cy.loginFormCookie(Cypress.env("cookieLoginUrl"))
+    cy.visit(Cypress.env("cookieVerifyUrl"))
+    cy.contains("admin status: true").should("be.visible")
+  })
+
+  it("ensures the user is not kept logged in due to test isolation", () => {
+    cy.visit(Cypress.env("cookieVerifyUrl"))
+    cy.contains("admin status: true").should("not.exist")
+
+    cy.loginFormCookie(Cypress.env("cookieLoginUrl"))
+    cy.visit(Cypress.env("cookieVerifyUrl"))
+    cy.contains("admin status: true").should("be.visible")
+  })
+})

test/cypress/support/commands.js

@@ -0,0 +1,48 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+Cypress.Commands.add(
+  "loginFormCookie",
+  (url = `${Cypress.env("remoteUrl")}/login`, userObject = Cypress.env("defaultUser")) => {
+    cy.session(
+      [url, userObject?.username, "loginFormCookie"],
+      () => {
+        cy.visit(url)
+        cy.get("[name=userName]").clear().type(userObject?.username)
+        cy.get("[name=password]").clear().type(userObject?.password, { secret: true })
+        cy.get("[type=submit]").click()
+        cy.contains("h1", "logged in as admin").should("be.visible")
+        cy.getCookie("adminMode").should("exist")
+      },
+      {
+        validate() {
+          cy.document().its("cookie").should("contain", "adminMode")
+        },
+        cacheAcrossSpecs: true,
+      },
+    )
+  },
+)

test/cypress/support/e2e.js

@@ -0,0 +1,34 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands"
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import "cypress-plugin-xhr-toggle"
+
+import registerCypressGrep from "@cypress/grep/src/support"
+registerCypressGrep()
+
+before(() => {
+  if (!Cypress.env("defaultUser")) {
+    const message = "=== Missing defaultUser env variable, please consult README.md ==="
+    cy.log(message)
+    cy.task("consoleLog", message)
+    console.warn(message)
+  }
+})

test/cypress/support/elements.js

@@ -0,0 +1,4 @@
+export const el = {
+  counterButton: "#app .card button",
+  digestAuthLink: '[href="/digest_auth"]',
+}

test/cypress/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "baseUrl": "../",
+    "esModuleInterop": true,
+    "lib": ["ES2022", "DOM"],
+    "moduleResolution": "Node",
+    "noEmit": true,
+    "paths": {
+      "@cy-support/*": ["cypress/support/*"]
+    },
+    "strict": true,
+    "target": "ES2022",
+    "types": ["cypress", "vite", "node"]
+  },
+  "include": ["./**/*", "./vite.config.ts", "../cypress.config.ts"]
+}

test/cypress/vite.config.ts

@@ -0,0 +1,17 @@
+import path from "path"
+import { defineConfig } from "vite"
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    fs: {
+      // Allow serving files from the project root
+      allow: ["../../"],
+    },
+  },
+  resolve: {
+    alias: {
+      "@cy-support": path.join(__dirname, "../cypress/support"),
+    },
+  },
+})

test/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "test",
+  "private": true,
+  "devDependencies": {
+    "@cypress/grep": "^3.1.5",
+    "@types/node": "^20.5.3",
+    "cypress": "^12.17.4",
+    "cypress-plugin-xhr-toggle": "^1.0.0",
+    "cypress-vite": "^1.4.2",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.9"
+  }
+}