code coverage with babel istanbul (#4649)

* WIP add instanbul code coverage to vue files

* move webpack coverage config to a separate file for test:coverage, pin dependencies, remove istanbul-instrumenter-loader

* dont include node_modules in babel config, it breaks istanbul for some reason

* ignore spec files from coverage

* document coverage files, remove unused karma config

* use test instead of test:coverage in config.yml, disable code and link to issue to enable coverage in Vue <template>s

.circleci/config.yml

@@ -113,7 +113,7 @@ jobs:
           steps:
             - browser-tools/install-chrome:
                 replace-existing: false
-      - run: npm run test:coverage -- --browsers=<<parameters.browser>>
+      - run: npm run test -- --browsers=<<parameters.browser>>
       - save_cache_cmd:
           node-version: <<parameters.node-version>>
       - store_test_results:

.npmrc

@@ -1,9 +1,4 @@
 loglevel=warn
 
-# Temporary: istanbul-instrumenter-loader is working with webpack 5, but states
-# webpack 4 being the latest version it supports, so this legacy-peer-deps
-# allows us to install it anyway.
-legacy-peer-deps=true
-
 #Prevent folks from ignoring an important error when building from source
 engine-strict=true

babel.coverage.js

@@ -0,0 +1,9 @@
+// This is a Babel config that webpack.coverage.js uses in order to instrument
+// code with coverage instrumentation.
+const babelConfig = {
+    plugins: [['babel-plugin-istanbul', {
+        extension: ['.js', '.vue']
+    }]]
+};
+
+module.exports = babelConfig;

karma.conf.js

@@ -22,29 +22,9 @@
 
 /*global module,process*/
 
-const browsers = [process.env.NODE_ENV === 'debug' ? 'ChromeDebugging' : 'ChromeHeadless'];
-const coverageEnabled = process.env.COVERAGE === 'true';
-const reporters = ['spec', 'junit'];
-
-if (coverageEnabled) {
-    reporters.push('coverage-istanbul');
-}
-
 module.exports = (config) => {
-    const webpackConfig = require('./webpack.dev.js');
+    const webpackConfig = require('./webpack.coverage.js');
     delete webpackConfig.output;
-    if (coverageEnabled) {
-        webpackConfig.module.rules.push({
-            test: /\.js$/,
-            exclude: /node_modules|e2e|lib|dist|\.*.*Spec\.js/,
-            use: {
-                loader: 'istanbul-instrumenter-loader',
-                options: {
-                    esModules: true
-                }
-            }
-        });
-    }
 
     config.set({
         basePath: '',
@@ -61,8 +41,8 @@ module.exports = (config) => {
             }
         ],
         port: 9876,
-        reporters: reporters,
-        browsers: browsers,
+        reporters: ['spec', 'junit', 'coverage-istanbul'],
+        browsers: [process.env.NODE_ENV === 'debug' ? 'ChromeDebugging' : 'ChromeHeadless'],
         client: {
             jasmine: {
                 random: false,
@@ -83,22 +63,14 @@ module.exports = (config) => {
         colors: true,
         logLevel: config.LOG_INFO,
         autoWatch: true,
-        // HTML test reporting.
-        // htmlReporter: {
-        //    outputDir: "dist/reports/tests",
-        //    preserveDescribeNesting: true,
-        //    foldAll: false
-        // },
         junitReporter: {
             outputDir: "dist/reports/tests",
             outputFile: "test-results.xml",
             useBrowserName: false
         },
         coverageIstanbulReporter: {
             fixWebpackSourcePaths: true,
-            dir: process.env.CIRCLE_ARTIFACTS
-                ? process.env.CIRCLE_ARTIFACTS + '/coverage'
-                : "dist/reports/coverage",
+            dir: "dist/reports/coverage",
             reports: ['lcovonly', 'text-summary'],
             thresholds: {
                 global: {

package.json

@@ -9,6 +9,8 @@
     "@percy/playwright": "1.0.1",
     "@playwright/test": "1.19.2",
     "allure-playwright": "2.0.0-beta.15",
+    "babel-loader": "8.2.3",
+    "babel-plugin-istanbul": "6.1.1",
     "comma-separated-values": "3.6.4",
     "copy-webpack-plugin": "10.2.0",
     "core-js": "3.20.3",
@@ -31,7 +33,6 @@
     "html-loader": "0.5.5",
     "html2canvas": "1.4.1",
     "imports-loader": "0.8.0",
-    "istanbul-instrumenter-loader": "3.0.1",
     "jasmine-core": "4.0.0",
     "jsdoc": "3.5.5",
     "karma": "6.3.15",
@@ -83,12 +84,12 @@
     "lint:fix": "eslint example src --ext .js,.vue openmct.js --fix",
     "build:prod": "cross-env webpack --config webpack.prod.js",
     "build:dev": "webpack --config webpack.dev.js",
+    "build:coverage": "webpack --config webpack.coverage.js",
     "build:watch": "webpack --config webpack.dev.js --watch",
     "info": "npx envinfo --system --browsers --npmPackages --binaries --languages --markdown",
     "test": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --single-run",
+    "test:firefox": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --single-run --browsers=FirefoxHeadless",
     "test:debug": "cross-env NODE_ENV=debug karma start --no-single-run",
-    "test:coverage": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" COVERAGE=true karma start --single-run",
-    "test:coverage:firefox": "cross-env NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --single-run --browsers=FirefoxHeadless",
     "test:e2e:ci": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome smoke default condition timeConductor",
     "test:e2e:local": "npx playwright test --config=e2e/playwright-local.config.js --project=chrome",
     "test:e2e:visual": "percy exec --config ./e2e/.percy.yml -- npx playwright test --config=e2e/playwright-visual.config.js default",

webpack.coverage.js

@@ -0,0 +1,42 @@
+// This file extends the webpack.dev.js config to add istanbul coverage
+// instrumentation using babel-plugin-istanbul (see babel.coverage.js)
+
+const config = require('./webpack.dev');
+
+const path = require('path');
+
+config.devtool = false;
+
+const vueLoaderRule = config.module.rules.find(r => r.use === 'vue-loader');
+
+vueLoaderRule.use = {
+    loader: 'vue-loader'
+    // Attempt to use Babel with babel-plugin-istanbul
+
+    // TODO The purpose of this was to try to add coverage to JS expressions
+    // inside `<template>` markup, but it seems to add only coverage inside
+    // `<script>` tags.
+    // Issue: https://github.com/nasa/openmct/issues/4973
+    //
+    // options: {
+    //     compiler: require('vue-template-babel-compiler'),
+    //     compilerOptions: {
+    //         babelOptions: require('./babel.coverage')
+    //     }
+    // }
+};
+
+config.module.rules.push({
+    test: /\.js$/,
+    // test: /(\.js$)|(\?vue&type=template)/,
+    // exclude: /node_modules(?!.*\.vue)/,
+    exclude: /(Spec\.js$)|(node_modules)/,
+    use: {
+        loader: 'babel-loader',
+        options: {
+            configFile: path.resolve(process.cwd(), 'babel.coverage.js')
+        }
+    }
+});
+
+module.exports = config;