Bump cypress from 9.7.0 to 12.3.0

Bumps [cypress](https://github.com/cypress-io/cypress) from 9.7.0 to 12.3.0.
- [Release notes](https://github.com/cypress-io/cypress/releases)
- [Changelog](https://github.com/cypress-io/cypress/blob/develop/CHANGELOG.md)
- [Commits](https://github.com/cypress-io/cypress/compare/v9.7.0...v12.3.0)

---
updated-dependencies:
- dependency-name: cypress
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

.github/workflows/cypress.yml

@@ -19,7 +19,7 @@ jobs:
       matrix:
         # run x copies of the current job in parallel
         containers: [1, 2]
-        node-version: [14]
+        node-version: [16]
 
     name: Runner ${{ matrix.containers }}
 
@@ -27,11 +27,11 @@ jobs:
       - uses: actions/checkout@v3
 
       - name: Read package.json node and npm engines version
-        uses: skjnldsv/read-package-engines-version-actions@v1.2
+        uses: skjnldsv/read-package-engines-version-actions@v2
         id: versions
         with:
-          fallbackNode: '^12'
-          fallbackNpm: '^6'
+          fallbackNode: '^14'
+          fallbackNpm: '^7'
 
       - name: Set up node ${{ steps.versions.outputs.nodeVersion }}
         uses: actions/setup-node@v3
@@ -56,6 +56,8 @@ jobs:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           # https://github.com/cypress-io/github-action/issues/124
           COMMIT_INFO_MESSAGE: ${{ github.event.pull_request.title }}
+          # https://github.com/cypress-io/github-action/issues/524
+          npm_package_name: ${{ env.APP_NAME }}
 
       - name: Upload snapshots
         uses: actions/upload-artifact@v2

cypress.config.ts

@@ -0,0 +1,83 @@
+import { defineConfig } from 'cypress'
+import { DefinePlugin } from 'webpack'
+import getCompareSnapshotsPlugin  from 'cypress-visual-regression/dist/plugin'
+import path from 'path'
+import webpackConfig from '@nextcloud/webpack-vue-config'
+import webpackRules from '@nextcloud/webpack-vue-config/rules'
+
+import { loadTranslations } from './resources/translations'
+
+const SCOPE_VERSION = Date.now()
+webpackRules.RULE_SCSS.use.push({
+	loader: 'sass-loader',
+	options: {
+		additionalData: `@use 'sass:math'; $scope_version:${SCOPE_VERSION}; @import 'variables'; @import 'material-icons';`,
+		/**
+		 * ! needed for resolve-url-loader
+		 */
+		sourceMap: true,
+		sassOptions: {
+			sourceMapContents: false,
+			includePaths: [
+				path.resolve(__dirname, './src/assets'),
+			],
+		},
+	},
+})
+
+webpackConfig.module.rules = Object.values(webpackRules)
+
+export default defineConfig({
+	projectId: '3paxvy',
+	viewportWidth: 1920,
+	viewportHeight: 1080,
+	defaultCommandTimeout: 6000,
+
+	env: {
+		failSilently: false,
+		type: 'actual',
+	},
+
+	screenshotsFolder: 'cypress/snapshots/actual',
+	trashAssetsBeforeRuns: true,
+
+	component: {
+		setupNodeEvents(on, config) {
+			getCompareSnapshotsPlugin(on, config)
+
+			// Disable spell checking to prevent rendering differences
+			on('before:browser:launch', (browser, launchOptions) => {
+				if (browser.family === 'chromium' && browser.name !== 'electron') {
+					launchOptions.preferences.default['browser.enable_spellchecking'] = false
+					return launchOptions
+				}
+
+				if (browser.family === 'firefox') {
+					launchOptions.preferences['layout.spellcheckDefault'] = 0
+					return launchOptions
+				}
+
+				if (browser.name === 'electron') {
+					launchOptions.preferences.spellcheck = false
+					return launchOptions
+				}
+			})
+
+		},
+
+		devServer: {
+			framework: 'vue',
+			bundler: 'webpack',
+			webpackConfig: async () => {
+				const translations = await loadTranslations(path.resolve(__dirname, './l10n'))
+				webpackConfig.plugins.push(new DefinePlugin({
+					PRODUCTION: false,
+					SCOPE_VERSION,
+					TRANSLATIONS: JSON.stringify(translations),
+				}))
+
+				return webpackConfig
+			},
+		},
+	},
+})

cypress.json

@@ -1,18 +0,0 @@
-{
-  "projectId": "3paxvy",
-  "viewportWidth": 1920, 
-  "viewportHeight": 1080,
-  "defaultCommandTimeout": 6000,
-  "integrationFolder": "tests/visual",
-  "testFiles": "**/*.visual.*",
-  "env": {
-    "failSilently": false,
-    "type": "actual"
-  },
-  "component": {
-    "componentFolder": "tests/visual",
-    "testFiles": "**/*.visual.{js,ts,jsx,tsx}"
-  },
-  "screenshotsFolder": "cypress/snapshots/actual",
-  "trashAssetsBeforeRuns": true
-}

cypress/plugins/index.js

@@ -1,60 +0,0 @@
-// ***********************************************************
-// 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 { startDevServer } = require('@cypress/webpack-dev-server')
-
-module.exports = async (on, config) => {
-	const webpackOptions = await require('../../webpack.config.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: {},
-	}
-
-	getCompareSnapshotsPlugin(on, config)
-	on('file:preprocessor', webpack(options))
-
-	on('dev-server:start', (options) => {
-		return startDevServer({ options, webpackConfig: webpackOptions })
-	  })
-
-	// Disable spell checking to prevent rendering differences
-	on('before:browser:launch', (browser, launchOptions) => {
-		if (browser.family === 'chromium' && browser.name !== 'electron') {
-			Object.assign(launchOptions.preferences.default, {
-				browser: Object.assign(launchOptions.preferences.default.browser, { enable_spellchecking: false, enable_autospellcorrect: false }),
-				spellcheck: Object.assign(launchOptions.preferences.default.spellcheck, { dictionary: [] }),
-			})
-			return launchOptions
-		}
-
-		if (browser.family === 'firefox') {
-			launchOptions.preferences['layout.spellcheckDefault'] = 0
-			return launchOptions
-		}
-
-		if (browser.name === 'electron') {
-			Object.assign(launchOptions.preferences, {
-				webPreferences: Object.assign(launchOptions.preferences.webPreferences, { spellcheck: false }),
-			})
-			return launchOptions
-		}
-	})
-	return config
-}