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

@@ -152,19 +152,33 @@ is sufficient (and saves you some time).
 ### Live testing and focused testing
 
 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
+can get instant feedback on as you write tests and modify code. To do this
+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
+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.
 
 While karma is running, any changes you make will instantly trigger a recompile
 and retest of the entire test suite, so you can see instantly if you've broken
-a test with your changes.  You can use [jasmine focused][jasmine-focus] or
+a test with your changes. You can use [jasmine focused][jasmine-focus] or
 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
@@ -176,7 +190,7 @@ Information on setting up and running RSpec integration tests with
 
 Similar errors will be thrown if you're using JavaScript features not yet
 supported by the PhantomJS test runner which is used for both Karma and RSpec
-tests.  We polyfill some JavaScript objects for older browsers, but some
+tests. We polyfill some JavaScript objects for older browsers, but some
 features are still unavailable:
 
 - Array.from
@@ -188,7 +202,7 @@ features are still unavailable:
 - Symbol/Symbol.iterator
 - Spread
 
-Until these are polyfilled appropriately, they should not be used.  Please
+Until these are polyfilled appropriately, they should not be used. Please
 update this list with additional unsupported features.
 
 ### RSpec errors due to JavaScript
@@ -223,7 +237,7 @@ end
 ### Spinach errors due to missing JavaScript
 
 NOTE: **Note:** Since we are discouraging the use of Spinach when writing new
-feature tests, you shouldn't ever need to use this.  This information is kept
+feature tests, you shouldn't ever need to use this. This information is kept
 available for legacy purposes only.
 
 In Spinach, the JavaScript driver is enabled differently. In the `*.feature`

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 {
-    testsContext(path);
+    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"