test: add cypress for e2e testing (#655)

Co-authored-by: Stefan Dej <meteyou@gmail.com>

.github/workflows/build_size_report.yml

@@ -1,7 +1,7 @@
 name: Build Size Report
 on:
   pull_request_target:
-    types: [labeled]
+    types: [labeled, synchronize, reopened]
 jobs:
   check:
     runs-on: ubuntu-latest
@@ -16,6 +16,3 @@ jobs:
           strip-hash: "\\b\\w{8}\\."
           pattern: './dist/**/*.{js,css,html,json,woff2,svg,png}'
           exclude: '{./dist/manifest.json,./dist/build.zip,**/*.map,**/node_modules/**}'
-      - uses: actions-ecosystem/action-remove-labels@v1
-        with:
-          labels: analyze # analyze complete, remote the label afterwards

.github/workflows/test.yml

@@ -0,0 +1,33 @@
+name: Cypress Tests
+
+on:
+  # Triggers the workflow on push or pull request events but only for the develop branch
+  push:
+    branches: [develop]
+  pull_request:
+    branches:
+      - '*'
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    #    container: cypress/browsers:node16.13.2-chrome97-ff96
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Install node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build the application
+        run: npm run build
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v2
+        with:
+          start: npm start

.gitignore

@@ -21,3 +21,5 @@ docker/config/*.conf
 docker/config/.mainsail.json
 docker/config/.theme
 .env
+
+cypress/videos/

cypress.json

@@ -0,0 +1,3 @@
+{
+  "baseUrl": "http://localhost:4173"
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/dashboard.spec.ts

@@ -0,0 +1,7 @@
+describe('Dashboard', () => {
+    it('opens the page correctly', function () {
+        cy.visit('/')
+        cy.wait(2000)
+        cy.contains('Connecting to localhost')
+    })
+})

cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// 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/support/index.js

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

package.json

@@ -8,14 +8,17 @@
     },
     "scripts": {
         "serve": "vite serve",
-        "build": "vite build  && npm run build.zip",
+        "build": "vite build && npm run build.zip",
         "format": "npm run format:base -- --write",
         "format:base": "prettier .prettierrc src vite.config.ts package.json public/manifest.json .eslintrc.json .github/ index.html *.yml *.md",
         "format:check": "npm run format:base -- --check",
         "lint": "eslint --ext .ts,.vue --ignore-path .gitignore src",
         "lint:fix": "eslint --ext .ts,.vue --ignore-path .gitignore src --fix",
         "build.zip": "cd ./dist && zip -r mainsail.zip ./ && cd ..",
-        "i18n-extract": "vue-i18n-extract use-config"
+        "i18n-extract": "vue-i18n-extract use-config",
+        "start": "vite preview",
+        "test": "npm run build && cypress run",
+        "test:ui": "cypress open"
     },
     "dependencies": {
         "@codemirror/basic-setup": "^0.19.0",
@@ -64,6 +67,7 @@
         "@vue/composition-api": "^1.4.6",
         "@vue/eslint-config-typescript": "^10.0.0",
         "autoprefixer": "^10.4.2",
+        "cypress": "^9.5.0",
         "eslint": "^8.9.0",
         "eslint-config-prettier": "^8.3.0",
         "eslint-plugin-vue": "^8.4.1",

tsconfig.json

@@ -13,6 +13,7 @@
     "sourceMap": true,
     "baseUrl": ".",
     "types": [
+      "cypress",
       "vite/client",
       "vuetify",
       "@intlify/vite-plugin-vue-i18n/client",
@@ -39,6 +40,7 @@
     "src/*/*.ts",
     "src/**/*.tsx",
     "src/**/*.vue",
+    "cypress/**/*.ts",
     "tests/**/*.ts",
     "tests/**/*.tsx"
   ],