Added e2e testing

.eslintrc.json

@@ -48,6 +48,15 @@
         "@typescript-eslint/no-unsafe-return": "off",
         "@typescript-eslint/no-unsafe-member-access": "off"
       }
+    },
+    {
+      "files": ["cypress.config.ts", "cypress/**/*.ts"],
+      "rules": {
+        "import/no-extraneous-dependencies": [
+          "error",
+          { "devDependencies": true }
+        ]
+      }
     }
   ],
   "parser": "vue-eslint-parser",

.github/workflows/build-and-deploy.yml

@@ -31,6 +31,14 @@ jobs:
         uses: codecov/codecov-action@v3
       - name: Build for production
         run: pnpm build:prod
+      - name: E2E testing
+        uses: cypress-io/github-action@v5
+        env:
+          CYPRESS_LOGIN_USERNAME: ${{ secrets.CYPRESS_LOGIN_USERNAME }}
+          CYPRESS_LOGIN_PASSWORD: ${{ secrets.CYPRESS_LOGIN_PASSWORD }}
+        with:
+          start: pnpm preview
+          wait-on: "http://localhost:9001/"
 
       - name: Archive production artifacts
         uses: actions/upload-artifact@v3

.gitignore

@@ -16,6 +16,9 @@ dist
 dist-ssr
 *.local
 
+cypress.env.json
+cypress/videos/*
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

README.md

@@ -12,13 +12,17 @@ pnpm i
 pnpm dev
 ```
 
-Until there's a proper login mechanism in place, you'll have to extract a valid token e.g. by accessing https://int-bmm.brunstad.org and extracting it from one of the requests to https://int-bmm-api.brunstad.org.
-
 _Note:_ If you had an error in your code and the system still shows you the error but you've already fixed it, consider running `pnpm clean`. If you have this problem often, consider contacting one of the maintainers of the project.
 
+## E2E testing
+
+Prepare by having a version of this project running. You may use `pnpm preview` to run the tests against a build locally or `pnpm dev`. The command `pnpm e2e` will start an interactive version of cypress.
+
+You may create the file `cypress.env.json` to set e.g. the username and password used for testing.
+
 ## Recommended IDE Setup
 
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) + [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
+- [VS Code](https://code.visualstudio.com/) + Plugins and configuration provided by `.vscode/extensions.json` and `.vscode/settings.json`
 
 ## Type Support For `.vue` Imports in TS
 

cypress.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  env: {
+    LOGIN_USERNAME: "",
+    LOGIN_PASSWORD: "",
+  },
+
+  e2e: {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

cypress/e2e/login.cy.ts

@@ -0,0 +1,18 @@
+describe("template spec", () => {
+  it("passes", () => {
+    cy.visit("http://localhost:9001");
+
+    cy.origin("login.bcc.no", () => {
+      cy.get("form.auth0-lock-widget input[name=email]").type(
+        Cypress.env("LOGIN_USERNAME")
+      );
+      cy.get("form.auth0-lock-widget input[name=password]").type(
+        Cypress.env("LOGIN_PASSWORD"),
+        { log: false }
+      );
+      cy.get("form.auth0-lock-widget button[name=submit]").click();
+    });
+
+    cy.url().should("match", /^http:\/\/localhost:9001\//);
+  });
+});

cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts 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) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts 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')

package.json

@@ -5,14 +5,14 @@
   "scripts": {
     "dev": "vite",
     "dev:prod": "vite --mode PROD",
+    "e2e": "cypress open",
     "build": "vue-tsc && vite build",
     "build:prod": "vue-tsc && vite build --mode PROD",
-    "buildAndRun": "pnpm build:prod && http-server dist -p 9001",
     "test": "vitest",
     "coverage": "vitest run --coverage",
     "lint": "stylelint '**/*.{vue,scss}' && prettier . --check && eslint --ext ts,js,vue,json . && vue-tsc --noEmit",
     "clean": "shx rm -rf .eslintcache .stylelintcache dist",
-    "preview": "vite preview"
+    "preview": "vite preview --port 9001"
   },
   "dependencies": {
     "@auth0/auth0-vue": "^2.0.2",
@@ -31,6 +31,7 @@
     "@vitest/coverage-c8": "^0.29.2",
     "@vue/test-utils": "^2.3.1",
     "autoprefixer": "^10.4.13",
+    "cypress": "^12.9.0",
     "eslint": "^8.34.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^17.0.0",
@@ -41,7 +42,6 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-vue": "^9.9.0",
     "happy-dom": "^8.9.0",
-    "http-server": "^14.1.1",
     "postcss": "^8.4.21",
     "postcss-html": "^1.5.0",
     "prettier": "2.8.4",