test: Add empty component testing

Signed-off-by: Louis Chemineau <louis@chmn.me>

cypress.config.ts

@@ -1,4 +1,3 @@
-
 import {
 	configureNextcloud,
 	startNextcloud,
@@ -10,13 +9,15 @@ import { defineConfig } from 'cypress'
 import browserify from '@cypress/browserify-preprocessor'
 import { configureVisualRegression } from 'cypress-visual-regression/dist/plugin'
 
+import webpackConfig from './webpack.js'
+
 export default defineConfig({
 	projectId: 'okzqgr',
 
 	// 16/9 screen ratio
 	viewportWidth: 1280,
-	viewportHeight: 720,
 
+	viewportHeight: 720,
 	requestTimeout: 20000,
 
 	retries: {
@@ -36,6 +37,7 @@ export default defineConfig({
 		failSilently: false,
 		type: 'actual',
 	},
+
 	screenshotsFolder: 'cypress/snapshots/actual',
 	trashAssetsBeforeRuns: true,
 
@@ -46,13 +48,17 @@ export default defineConfig({
 		// You may want to clean this up later by importing these.
 		async setupNodeEvents(on, config) {
 			// Fix browserslist extend https://github.com/cypress-io/cypress/issues/2983#issuecomment-570616682
-			on('file:preprocessor', browserify({ typescript: require.resolve('typescript') }))
+			on(
+				'file:preprocessor',
+				browserify({ typescript: require.resolve('typescript') })
+			)
 			configureVisualRegression(on)
 
 			// 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
+					launchOptions.preferences.default['browser.enable_spellchecking']
+            = false
 					return launchOptions
 				}
 
@@ -87,4 +93,38 @@ export default defineConfig({
 				})
 		},
 	},
+
+	component: {
+		devServer: {
+			framework: 'vue',
+			bundler: 'webpack',
+			webpackConfig: async () => {
+				process.env.npm_package_name = 'NcCypress'
+				process.env.npm_package_version = '1.0.0'
+				process.env.NODE_ENV = 'development'
+
+				/**
+				 * Needed for cypress stubbing
+				 *
+				 * @see https://github.com/sinonjs/sinon/issues/1121
+				 * @see https://github.com/cypress-io/cypress/issues/18662
+				 */
+				const babel = require('./babel.config.js')
+				babel.plugins.push([
+					'@babel/plugin-transform-modules-commonjs',
+					{
+						loose: true,
+					},
+				])
+
+				const config = webpackConfig
+				config.module.rules.push({
+					test: /\.svg$/,
+					type: 'asset/source',
+				})
+
+				return config
+			},
+		},
+	},
 })

cypress/component/ComponentName.cy.ts

@@ -0,0 +1,5 @@
+describe('ComponentName.cy.ts', () => {
+  it('playground', () => {
+    // cy.mount()
+  })
+})

package.json

@@ -70,8 +70,7 @@
     "vue-virtual-grid": "^2.5.0",
     "vue2-leaflet": "^2.7.1",
     "vuex": "^3.6.2",
-    "vuex-router-sync": "^5.0.0",
-    "webdav": "^4.11.0"
+    "vuex-router-sync": "^5.0.0"
   },
   "browserslist": [
     "extends @nextcloud/browserslist-config"
@@ -109,6 +108,7 @@
     "tslib": "^2.6.2",
     "typescript": "^4.9.5",
     "wait-on": "^7.0.1",
-    "workbox-webpack-plugin": "^6.5.4"
+    "workbox-webpack-plugin": "^6.5.4",
+    "webdav": "^4.11.0"
   }
 }