Merge branch 'winh-single-karma-test' into 'master'

Add possibility to filter Karma spec files by path

Closes #40899

See merge request gitlab-org/gitlab-ce!16102

config/karma.config.js

 var path = require('path');
 var webpack = require('webpack');
+var argumentsParser = require('commander');
 var webpackConfig = require('./webpack.config.js');
 var ROOT_PATH = path.resolve(__dirname, '..');
 
@@ -14,6 +15,24 @@ if (webpackConfig.plugins) {
   });
 }
 
+var testFiles = argumentsParser
+  .option(
+    '-f, --filter-spec [filter]',
+    'Filter run spec files by path. Multiple filters are like a logical OR.',
+    (val, memo) => {
+      memo.push(val);
+      return memo;
+    },
+    []
+  )
+  .parse(process.argv).filterSpec;
+
+webpackConfig.plugins.push(
+  new webpack.DefinePlugin({
+    'process.env.TEST_FILES': JSON.stringify(testFiles),
+  })
+);
+
 webpackConfig.devtool = 'cheap-inline-source-map';
 
 // Karma configuration

doc/development/testing_guide/frontend_testing.md

@@ -153,7 +153,7 @@ is sufficient (and saves you some time).
 
 While developing locally, it may be helpful to keep karma running so that you
 can get instant feedback on as you write tests and modify code. To do this
-you can start karma with `npm run karma-start`.  It will compile the javascript
+you can start karma with `yarn run karma-start`. It will compile the javascript
 assets and run a server at `http://localhost:9876/` where it will automatically
 run the tests on any browser which connects to it. You can enter that url on
 multiple browsers at once to have it run the tests on each in parallel.
@@ -165,6 +165,20 @@ excluded tests (with `fdescribe` or `xdescribe`) to get karma to run only the
 tests you want while you're working on a specific feature, but make sure to
 remove these directives when you commit your code.
 
+It is also possible to only run karma on specific folders or files by filtering
+the run tests via the argument `--filter-spec` or short `-f`:
+
+```bash
+# Run all files
+yarn karma-start
+# Run specific spec files
+yarn karma-start --filter-spec profile/account/components/update_username_spec.js
+# Run specific spec folder
+yarn karma-start --filter-spec profile/account/components/
+# Run all specs which path contain vue_shared or vie
+yarn karma-start -f vue_shared -f vue_mr_widget
+```
+
 ## RSpec feature integration tests
 
 Information on setting up and running RSpec integration tests with

package.json

@@ -5,8 +5,8 @@
     "eslint": "eslint --max-warnings 0 --ext .js,.vue .",
     "eslint-fix": "eslint --max-warnings 0 --ext .js,.vue --fix .",
     "eslint-report": "eslint --max-warnings 0 --ext .js,.vue --format html --output-file ./eslint-report.html .",
-    "karma": "karma start config/karma.config.js --single-run",
-    "karma-coverage": "BABEL_ENV=coverage karma start config/karma.config.js --single-run",
+    "karma": "karma start --single-run true config/karma.config.js",
+    "karma-coverage": "BABEL_ENV=coverage karma start --single-run true config/karma.config.js",
     "karma-start": "karma start config/karma.config.js",
     "prettier-staged": "node ./scripts/frontend/prettier.js",
     "prettier-staged-save": "node ./scripts/frontend/prettier.js save",
@@ -98,6 +98,7 @@
     "axios-mock-adapter": "^1.10.0",
     "babel-eslint": "^8.0.2",
     "babel-plugin-istanbul": "^4.1.5",
+    "commander": "^2.15.1",
     "eslint": "^3.18.0",
     "eslint-config-airbnb-base": "^10.0.1",
     "eslint-import-resolver-webpack": "^0.8.3",

spec/javascripts/test_bundle.js

@@ -5,6 +5,7 @@ import '~/commons';
 
 import Vue from 'vue';
 import VueResource from 'vue-resource';
+import Translate from '~/vue_shared/translate';
 
 import { getDefaultAdapter } from '~/lib/utils/axios_utils';
 import { FIXTURES_PATH, TEST_HOST } from './test_constants';
@@ -28,6 +29,7 @@ Vue.config.errorHandler = function(err) {
 };
 
 Vue.use(VueResource);
+Vue.use(Translate);
 
 // enable test fixtures
 jasmine.getFixtures().fixturesPath = FIXTURES_PATH;
@@ -70,11 +72,21 @@ beforeEach(() => {
 
 const axiosDefaultAdapter = getDefaultAdapter();
 
+let testFiles = process.env.TEST_FILES || [];
+if (testFiles.length > 0) {
+  testFiles = testFiles.map(path => path.replace(/^spec\/javascripts\//, '').replace(/\.js$/, ''));
+  console.log(`Running only tests matching: ${testFiles}`);
+} else {
+  console.log('Running all tests');
+}
+
 // render all of our tests
 const testsContext = require.context('.', true, /_spec$/);
 testsContext.keys().forEach(function(path) {
   try {
+    if (testFiles.length === 0 || testFiles.some(p => path.includes(p))) {
       testsContext(path);
+    }
   } catch (err) {
     console.error('[ERROR] Unable to load spec: ', path);
     describe('Test bundle', function() {

yarn.lock

@@ -1859,9 +1859,9 @@ combined-stream@1.0.6, combined-stream@^1.0.5, combined-stream@~1.0.5:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.13.0, commander@^2.9.0:
-  version "2.14.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.14.1.tgz#2235123e37af8ca3c65df45b026dbd357b01b9aa"
+commander@^2.13.0, commander@^2.15.1, commander@^2.9.0:
+  version "2.15.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
 
 commondir@^1.0.1:
   version "1.0.1"