fix coverage of *.vue files

Author: mvorisek

.github/workflows/test-unit.yml

@@ -292,22 +292,26 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-composer-
 
-      - name: Install JS dependencies (only for Slow)
-        if: matrix.type == 'Chrome Slow'
-        run: |
-          mv public public.orig
-          mkdir public public/css public/external
-          cp public.orig/.gitattributes public
-          cp public.orig/.gitignore public
-          cp public.orig/logo.png public
-          cp public.orig/css/agileui.less public/css
-          cp public.orig/external/.gitignore public/external
-          cp public.orig/external/package.json public/external
-          cp public.orig/external/package-lock.json public/external
-          cp public.orig/external/postinstall.js public/external
-          npm install --loglevel=error -g pug-cli less less-plugin-clean-css uglify-js
-          (cd js && npm ci --loglevel=error)
-          (cd public/external && npm ci --loglevel=error && git clean -dxfq .)
+      - name: Install JS dependencies (only for coverage or Slow)
+        if: env.LOG_COVERAGE || matrix.type == 'Chrome Slow'
+        run: |
+          if [ -n "$LOG_COVERAGE" ]; then
+            (cd js && npm install --package-lock-only --save-dev babel-plugin-istanbul && npm ci --loglevel=error)
+          else
+            mv public public.orig
+            mkdir public public/css public/external
+            cp public.orig/.gitattributes public
+            cp public.orig/.gitignore public
+            cp public.orig/logo.png public
+            cp public.orig/css/agileui.less public/css
+            cp public.orig/external/.gitignore public/external
+            cp public.orig/external/package.json public/external
+            cp public.orig/external/package-lock.json public/external
+            cp public.orig/external/postinstall.js public/external
+            npm install --loglevel=error -g pug-cli less less-plugin-clean-css uglify-js
+            (cd js && npm ci --loglevel=error)
+            (cd public/external && npm ci --loglevel=error && git clean -dxfq .)
+          fi
 
       - name: Lint JS files (only for Slow)
         if: matrix.type == 'Chrome Slow'
@@ -326,10 +330,20 @@ jobs:
         run: |
           lessc public/css/agileui.less public/css/agileui.min.css --clean-css="--s1 --advanced" --source-map
 
-      - name: Compile JS files (only for Slow)
-        if: matrix.type == 'Chrome Slow'
-        run: |
-          (cd js && npm run build)
+      - name: Compile JS files (only for coverage or Slow)
+        if: env.LOG_COVERAGE || matrix.type == 'Chrome Slow'
+        run: |
+          if [ -n "$LOG_COVERAGE" ]; then
+            rm -r public/js
+            (cd js && ISTANBUL_COVERAGE=1 npm run build)
+          else
+            # fix webpack build repeatability
+            # https://github.com/vuejs/vue-loader/blob/v17.0.1/src/index.ts#L284 should be fine,
+            # the import itself is relativized, but the variable (generated by webpack) is not
+            # TODO submit webpack GH issue
+            sed -i -E 's~(import exportComponent from )\$\{exportHelperPath\}(`;)~\1'"'"'vue-loader/dist/exportHelper.js'"'"'\2~' js/node_modules/vue-loader/dist/index.js
+            (cd js && npm run build)
+          fi
 
       - name: Diff compiled files (only for Slow)
         if: matrix.type == 'Chrome Slow'
@@ -338,13 +352,6 @@ jobs:
           diff -ru template.orig template
           rm -r public.orig template.orig
 
-      - name: Instrument & recompile JS files (only for coverage)
-        if: env.LOG_COVERAGE
-        run: |
-          rm -r public/js
-          (cd js && npm install --package-lock-only --save-dev nyc && npm ci --loglevel=error)
-          (cd js && npx nyc instrument --in-place . && npx webpack --env production)
-
       - name: Install PHP dependencies
         run: |
           composer remove --no-interaction --no-update phpunit/phpunit johnkary/phpunit-speedtrap --dev

js/babel.config.js

@@ -1,21 +1,26 @@
-/**
- * Babel configuration file.
- * targets browser from Browserlist integration query.
- *
- * @type {Array.<Array.<*>>}
- */
-const presets = [
-    [
-        '@babel/env',
-        {
-            targets: '> 1%, not dead',
-            corejs: { version: '3.6', proposals: true },
-            useBuiltIns: 'usage',
-        },
-    ],
-    {
-        plugins: ['@babel/plugin-transform-runtime'],
-    },
-];
+module.exports = (api) => {
+    const isCoverage = !!process.env.ISTANBUL_COVERAGE;
+    api.cache.using(() => isCoverage);
 
-module.exports = { presets: presets };
+    return {
+        presets: [
+            [
+                '@babel/env',
+                {
+                    targets: '> 1%, not dead',
+                    corejs: { version: '3.9999', proposals: true },
+                    useBuiltIns: 'usage',
+                },
+            ],
+        ],
+        plugins: [
+            ...(isCoverage ? [[
+                'babel-plugin-istanbul',
+                {
+                    extension: ['.js', '.vue'],
+                },
+            ]] : []),
+            '@babel/plugin-transform-runtime',
+        ],
+    };
+};

js/src/vue-components/query-builder/fomantic-ui-group.component.vue

@@ -30,7 +30,7 @@
                             </select>
                         </div>
                         <div class="item">
-                            <div class="rule-actions ">
+                            <div class="rule-actions">
                                 <div>
                                     <SuiDropdown
                                         :text="labels.addRule"
@@ -76,11 +76,11 @@
 </template>
 
 <script>
-import QueryBuilderGroup from 'vue-query-builder/src/components/QueryBuilderGroup.vue';
+import VueQueryBuilderGroup from 'vue-query-builder/src/components/QueryBuilderGroup.vue';
 
 export default {
     name: 'QueryBuilderGroup',
-    extends: QueryBuilderGroup,
+    extends: VueQueryBuilderGroup,
     data: function () {
         return {
             selectedSuiRule: null,
@@ -113,6 +113,16 @@ export default {
 </script>
 
 <style>
+    .vue-query-builder .vqb-group .rule-actions {
+        margin-bottom: 0px;
+    }
+
+    .vue-query-builder .vqb-rule {
+        margin-top: 0px;
+        margin-bottom: 0px;
+        padding: 0px;
+    }
+
     .atk-qb-select, .ui.form select.atk-qb-select {
        padding: 2px 6px 4px 4px;
     }

js/src/vue-components/query-builder/fomantic-ui-rule.component.vue

@@ -120,7 +120,7 @@
 </template>
 
 <script>
-import QueryBuilderRule from 'vue-query-builder/src/components/QueryBuilderRule.vue';
+import VueQueryBuilderRule from 'vue-query-builder/src/components/QueryBuilderRule.vue';
 import AtkDatePicker from '../share/atk-date-picker';
 import AtkLookup from '../share/atk-lookup';
 
@@ -129,7 +129,7 @@ export default {
         AtkDatePicker: AtkDatePicker,
         AtkLookup: AtkLookup,
     },
-    extends: QueryBuilderRule,
+    extends: VueQueryBuilderRule,
     inject: ['getRootData'],
     data: function () {
         return {};

js/src/vue-components/query-builder/query-builder.component.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script>
-import VueQueryBuilder from 'vue-query-builder';
+import VueQueryBuilder from 'vue-query-builder/src/VueQueryBuilder.vue';
 import QueryBuilderGroup from './fomantic-ui-group.component.vue';
 import QueryBuilderRule from './fomantic-ui-rule.component.vue';
 

js/webpack.config.js

@@ -98,8 +98,8 @@ module.exports = (env) => {
                 'node_modules',
             ],
             extensions: [
-                '.json',
                 '.js',
+                '.vue',
             ],
         },
         plugins: [