Add visual regression testing with cypress

.dockerignore

@@ -0,0 +1 @@
+node_modules/

.github/workflows/cypress.yml

@@ -0,0 +1,35 @@
+name: Cypress
+
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+      - stable*
+
+env:
+  APP_NAME: nextcloud-vue
+
+jobs:
+  jest:
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version: ['12.x']
+
+    name: Runner ${{ matrix.containers }}
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Set up node ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Cypress run
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+        run: npm run cypress:record

.gitignore

@@ -25,3 +25,9 @@ coverage
 # Docs compiled build
 styleguide/build/
 styleguide/index.html
+
+# Cypress files
+cypress/videos
+cypress/screenshots
+cypress/snapshots/actual
+cypress/snapshots/diff

Dockerfile

@@ -0,0 +1,6 @@
+FROM cypress/base:14.7.0
+RUN mkdir /app
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci
+COPY .eslintrc.js .stylelintrc.js babel.config.js cypress.json webpack.common.js webpack.dev.js .stylelintignore ./

cypress.json

@@ -0,0 +1,15 @@
+{
+  "projectId": "3paxvy",
+  "viewportWidth": 1920, 
+  "viewportHeight": 1080,
+  "defaultCommandTimeout": 6000,
+  "experimentalComponentTesting": true,
+  "componentFolder": "tests/visual",
+  "nodeVersion": "system",
+  "env": {
+    "failSilently": false,
+    "type": "actual"
+  },
+  "screenshotsFolder": "cypress/snapshots/actual",
+  "trashAssetsBeforeRuns": true
+}

cypress/plugins/index.js

@@ -0,0 +1,31 @@
+// ***********************************************************
+// 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)
+
+const getCompareSnapshotsPlugin = require('cypress-visual-regression/dist/plugin')
+
+const webpack = require('@cypress/webpack-preprocessor')
+
+const webpackOptions = require('../../webpack.dev.js')
+webpackOptions.externals = {}
+
+const options = {
+	// send in the options from your webpack.config.js, so it works the same
+	// as your app's code
+	webpackOptions,
+	watchOptions: {},
+}
+
+module.exports = (on, config) => {
+	getCompareSnapshotsPlugin(on)
+	on('file:preprocessor', webpack(options))
+}

cypress/support/commands.js

@@ -0,0 +1,3 @@
+const compareSnapshotCommand = require('cypress-visual-regression/dist/command')
+
+compareSnapshotCommand()

cypress/support/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// 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 'cypress-vue-unit-test/dist/support'
+import './commands'

docker-compose.yml

@@ -0,0 +1,13 @@
+version: '3'
+services:
+  visual:
+    build:
+      context: .
+    volumes:
+      - "./cypress:/app/cypress"
+      - "./src:/app/src"
+      - "./styleguide:/app/styleguide"
+      - "./tests:/app/tests"
+      - "./l10n:/app/l10n"
+    environment:
+      - CYPRESS_RECORD_KEY