Feature/cypress visual regression

.github/workflows/cypress.yml

@@ -0,0 +1,53 @@
+name: Cypress
+
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+      - stable*
+
+env:
+  APP_NAME: nextcloud-vue
+
+jobs:
+  cypress:
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        # run x copies of the current job in parallel
+        containers: [1]
+        node-version: ['12']
+
+    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: Install dependencies
+        run: npm ci
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v1
+        with:
+          record: true
+          parallel: true
+          tag: ${{ github.event_name }}
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          # https://github.com/cypress-io/github-action/issues/124
+          COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }}
+
+      - name: Upload snapshots
+        uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: snapshots
+          path: cypress/snapshots

.gitignore

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

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'