feat: Add code coverage support to cypress tests and CI

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

.github/workflows/cypress.yml

@@ -43,7 +43,7 @@ jobs:
 
       - name: Pull server image
         run: docker pull ghcr.io/nextcloud/continuous-integration-shallow-server
-          
+
       - name: Run E2E cypress tests
         uses: cypress-io/github-action@d69252d52b9a31bad4f418f05ba2bc83687a02eb # v5.8.3
         with:
@@ -55,7 +55,7 @@ jobs:
           tag: ${{ github.event_name }}
           group: 'E2E'
           # Build library before using it
-          build: npm run build
+          build: npm run build:instrumented
         env:
           # Needs to be prefixed with CYPRESS_
           CYPRESS_BRANCH: ${{ env.BRANCH }}
@@ -64,6 +64,11 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
 
+      - name: Collect coverage
+        uses: codecov/codecov-action@v3
+        with:
+          files: ./coverage/lcov.info
+
   cypress-component:
     runs-on: ubuntu-latest
 
@@ -105,6 +110,8 @@ jobs:
           ci-build-id: ${{ github.sha }}-${{ github.run_number }}
           tag: ${{ github.event_name }}
           group: 'Components'
+          # Tests use (instrumented) built files
+          build: npm run build:instrumented
         env:
           # Needs to be prefixed with CYPRESS_
           CYPRESS_BRANCH: ${{ env.BRANCH }}
@@ -113,6 +120,11 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
 
+      - name: Collect coverage
+        uses: codecov/codecov-action@v3
+        with:
+          files: ./coverage/lcov.info
+
   summary:
     runs-on: ubuntu-latest
     needs: [cypress-e2e, cypress-component]

cypress.config.ts

@@ -2,10 +2,13 @@
 process.env.NODE_ENV = 'development'
 process.env.npm_package_name = 'nextcloud-cypress'
 
-import { configureNextcloud,  startNextcloud,  stopNextcloud, waitOnNextcloud } from './cypress/dockerNode'
+/* eslint-disable import/first */
+import { configureNextcloud, startNextcloud, stopNextcloud, waitOnNextcloud } from './cypress/dockerNode'
 import { defineConfig } from 'cypress'
+import CodeCoverage from '@cypress/code-coverage/task'
 import webpackConfig from '@nextcloud/webpack-vue-config'
 import webpackRules from '@nextcloud/webpack-vue-config/rules'
+/* eslint-enable import/first */
 
 webpackRules.RULE_TS = {
 	test: /\.ts$/,
@@ -20,8 +23,8 @@ webpackRules.RULE_TS = {
 webpackConfig.module.rules = Object.values(webpackRules)
 
 // Cypress handle its own entry and output
-delete webpackConfig.entry
-delete webpackConfig.output
+delete (webpackConfig as any).entry
+delete (webpackConfig as any).output
 webpackConfig.resolve.extensions = ['.ts', '.tsx', '.js', '.jsx', '.cjs', '.vue']
 
 export default defineConfig({
@@ -38,6 +41,8 @@ export default defineConfig({
 		testIsolation: false,
 
 		setupNodeEvents(on, config) {
+			CodeCoverage(on, config)
+
 			// Remove container after run
 			on('after:run', () => {
 				stopNextcloud()
@@ -60,6 +65,11 @@ export default defineConfig({
 	},
 
 	component: {
+		setupNodeEvents(on, config) {
+			CodeCoverage(on, config)
+
+			return config
+		},
 		devServer: {
 			framework: 'vue',
 			bundler: 'webpack',

cypress/components/uploadPicker.cy.ts

@@ -21,7 +21,7 @@
  */
 
 import { UploadPicker as UploadPickerView } from '@nextcloud/upload'
-import { UploadPicker, UploadPickerAddButton, UploadPickerInput } from '../../lib/selectors/uploadPicker'
+import { UploadPicker, UploadPickerAddButton, UploadPickerInput } from '../../dist/selectors'
 
 describe('UploadPicker', function() {
 	it('Mount upload picker and check selectors', function() {

cypress/support/commands.ts

@@ -10,5 +10,5 @@
 // ***********************************************
 //
 
-import { addCommands } from '../../lib/'
+import { addCommands } from '../../dist/'
 addCommands()

cypress/support/component.ts

@@ -13,6 +13,7 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
+import '@cypress/code-coverage/support'
 import './commands'
 
 import { mount } from 'cypress/vue2'

cypress/support/e2e.ts

@@ -13,4 +13,5 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
+import '@cypress/code-coverage/support'
 import './commands'