chore(ui/test): adapt to latest release

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "johnsoncodehk.volar"
+  ],
+}

ui/package.json

@@ -29,6 +29,7 @@
     "lint": "eslint --ext .js,.vue src dev",
     "lint-fix": "eslint --ext .js,.vue src dev --fix",
     "test:unit": "cd ./dev && cypress open-ct && cd ..",
+    "test:unit:ci": "cd ./dev && cypress run-ct && cd ..",
     "test:create": "node ./test/cypress/helpers/create-spec.js -c"
   },
   "repository": {
@@ -66,15 +67,13 @@
     "@babel/eslint-parser": "^7.13.14",
     "@quasar/app": "^3.0.0",
     "@quasar/extras": "^1.12.0",
-    "@quasar/quasar-app-extension-testing-e2e-cypress": "^4.0.0-beta.9",
+    "@quasar/quasar-app-extension-testing-e2e-cypress": "^4.0.1",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.3.3",
     "babel-preset-es2015-rollup": "^3.0.0",
     "cli-highlight": "^2.1.11",
     "cypress-image-snapshot": "^4.0.1",
     "diff": "^5.0.0",
-    "cypress": "^8.6.0",
-    "cypress-image-snapshot": "^4.0.1",
     "eslint": "^7.4.0",
     "eslint-config-standard": "^16.0.2",
     "eslint-friendly-formatter": "^4.0.1",
@@ -97,6 +96,8 @@
     "table": "^6.0.4",
     "tslib": "^2.0.3",
     "uglify-es": "^3.3.9",
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0",
     "yargs": "^17.3.0"
   },
   "vetur": {

ui/test/cypress/.gitignore

@@ -0,0 +1,2 @@
+videos/*
+screenshots/*

ui/test/cypress/README.md

@@ -71,7 +71,7 @@ Here is a list of things I needed to do to make this work:
 
 - Get a webpack config from quasar project. This is necessary for cypress to fire up it's server to serve up components. I used the `ui/dev` project for this.
 - Because cypress looks for a `cypress.json` in that project folder I had to add that file in `ui/dev/cypress.json`
-- The `.spec.js` files are part of the `scr/ui` and are handled by the `.eslintrc.js` file there. I had to add the `mocha` env to use `describe` etc. Also `expect` is added in globals to make use of that command inside .spec.js files.
+- The `.spec.js` files are part of the `src/ui` and are handled by the `.eslintrc.js` file there. I had to add the `mocha` env to use `describe` etc. Also `expect` is added in globals to make use of that command inside `.spec.js` files.
 - In general I added `.vscode/settings.json` to make it so that ESLint will autofix stuff on save so I don't go nuts.
 - Had to add to `ui/tsconfig.json` include array to include the `commands.d.ts` which is necessary for autocomplete of custom commands when writing tests
 - I added a visual snapshot testing package and configured that to include the snapshots made inside the folder of the component that is tested. However the screenshots are always place inside a `All Specs` folder in there. There is no option to change the name of that folder :(