add code coverage (#852)

Add Cypress code coverage using Istanbul nyc

![image](https://github.com/maputnik/editor/assets/60476837/e7c364b7-7b54-4bf1-85aa-ee6fb19cc40c)

---------

Co-authored-by: shelly_goldblit <shelly_goldblit@dell.com>
Co-authored-by: Harel M <harel.mazor@gmail.com>

.github/workflows/ci.yml

@@ -8,23 +8,18 @@ on:
 
 jobs:
   build-docker:
-    name: build/docker
+    name: build docker
-    runs-on: ${{ matrix.os }}
+    runs-on: ubuntu-latest
 
     if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}
 
-    strategy:
-      fail-fast: false
-      matrix:
-        os: [ubuntu-latest]
-
     steps:
     - uses: actions/checkout@v4
     - run: docker build -t docker.pkg.github.com/maputnik/editor/editor:main .
 
   # build the editor
   build-node:
-    name: "build/node@${{ matrix.node-version }} (${{ matrix.os }})"
+    name: "build on ${{ matrix.os }}"
     runs-on: ${{ matrix.os }}
 
     if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}
@@ -33,13 +28,12 @@ jobs:
       fail-fast: false
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
-        node-version: [18.x]
 
     steps:
     - uses: actions/checkout@v4
-    - uses: actions/setup-node@v1
+    - uses: actions/setup-node@v4
       with:
-        node-version: ${{ matrix.node-version }}
+        node-version-file: '.nvmrc'
     - uses: actions/cache@v1
       with:
         path: ~/.npm
@@ -51,21 +45,15 @@ jobs:
 
 
   build-artifacts:
-    name: "build/artifacts (${{ matrix.os }})"
+    name: "build artifacts"
-    runs-on: ${{ matrix.os }}
+    runs-on: ubuntu-latest
     if: ${{ github.event_name == 'push' || github.event_name == 'pull_request' }}
 
-    strategy:
-      fail-fast: false
-      matrix:
-        os: [ubuntu-latest]
-        node-version: [18.x]
-
     steps:
     - uses: actions/checkout@v4
-    - uses: actions/setup-node@v1
+    - uses: actions/setup-node@v4
       with:
-        node-version: ${{ matrix.node-version }}
+        node-version-file: '.nvmrc'
     - uses: actions/cache@v1
       with:
         path: ~/.npm
@@ -121,7 +109,8 @@ jobs:
         name: maputnik-windows
         path: ./src/github.com/maputnik/desktop/bin/windows/
   
-  cypress-run:
+  e2e-tests:
+    name: "E2E tests using ${{ matrix.browser }}"
     strategy:
       fail-fast: false
       matrix:
@@ -138,3 +127,8 @@ jobs:
           build: npm run build
           start: npm run start
           browser: ${{ matrix.browser }}
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v3
+        with:
+          files: ${{ github.workspace }}/.nyc_output/out.json
+          verbose: true

.gitignore

@@ -14,6 +14,7 @@ lib-cov
 
 # Coverage directory used by tools like istanbul
 coverage
+.nyc_output
 
 # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 .grunt

.nvmrc

@@ -0,0 +1 @@
+18.19

.nycrc.json

@@ -0,0 +1,18 @@
+{
+  "all": true,
+  "extends": "@istanbuljs/nyc-config-typescript",
+  "check-coverage": false,
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": [
+    "cypress/**/*.*",
+    "**/*.d.ts",
+    "**/*.cy.tsx",
+    "**/*.cy.ts",
+    "./coverage/**",
+    "./cypress/**",
+    "./dist/**",
+    "node_modules"
+  ],
+  "report-dir": "coverage",
+  "reporter": ["json", "lcov", "json-summary"]
+}

cypress.config.ts

@@ -1,10 +1,20 @@
 import { defineConfig } from "cypress";
+import { createRequire } from "module";
+const require = createRequire(import.meta.url);
 
 export default defineConfig({
+  env: {
+    codeCoverage: {
+      exclude: "cypress/**/*.*",
+    },
+  },
   e2e: {
     setupNodeEvents(on, config) {
       // implement node event listeners here
+      require("@cypress/code-coverage/task")(on, config);
+      return config;
     },
+    baseUrl: "http://localhost:8888",
     retries: {
       runMode: 2,
       openMode: 0,

cypress/support/e2e.ts

@@ -14,6 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
+import "@cypress/code-coverage/support";
 import "cypress-plugin-tab";
 import "./commands";
 

package.json

@@ -2,6 +2,7 @@
   "name": "maputnik",
   "version": "2.0.0-pre.2",
   "description": "A MapLibre GL visual style editor",
+  "type": "module",
   "main": "''",
   "scripts": {
     "start": "vite",
@@ -85,6 +86,8 @@
     }
   },
   "devDependencies": {
+    "@cypress/code-coverage": "^3.12.15",
+    "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@rollup/plugin-replace": "^5.0.5",
     "@shellygo/cypress-test-utils": "^2.0.9",
     "@storybook/addon-a11y": "^7.6.5",
@@ -137,6 +140,7 @@
     "stylelint-scss": "^4.2.0",
     "typescript": "^5.3.3",
     "uuid": "^8.3.2",
-    "vite": "^5.0.0"
+    "vite": "^5.0.0",
+    "vite-plugin-istanbul": "^5.0.0"
   }
 }

vite.config.ts

@@ -1,23 +1,33 @@
-import { defineConfig } from "vite";
+import replace from "@rollup/plugin-replace";
 import react from "@vitejs/plugin-react";
-import replace from '@rollup/plugin-replace';
+import { defineConfig } from "vite";
+import istanbul from "vite-plugin-istanbul";
 
 export default defineConfig({
   server: {
-    port: 8888
+    port: 8888,
+  },
+  build: {
+    sourcemap: true
   },
   plugins: [
     replace({
       preventAssignment: true,
       include: /\/jsonlint-lines-primitives\/lib\/jsonlint.js/,
-      delimiters: ['', ''],
+      delimiters: ["", ""],
       values: {
-          '_token_stack:': ''
+        "_token_stack:": "",
-      }
+      },
     }) as any,
-    react()
+    react(),
+    istanbul({
+      cypress: true,
+      requireEnv: false,
+      nycrcPath: "./.nycrc.json",
+      forceBuildInstrument: true, //Instrument the source code for cypress runs
+    }),
   ],
   define: {
     global: "window",
   },
-});
+});