use commander for safer cli argument parsing

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,14 +15,21 @@ if (webpackConfig.plugins) {
   });
 }
 
-var ignoreUpTo = process.argv.indexOf('config/karma.config.js') + 1;
-var testFiles = process.argv.slice(ignoreUpTo).filter(arg => {
-  return !arg.startsWith('--');
-});
+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) ,
+    'process.env.TEST_FILES': JSON.stringify(testFiles),
   })
 );
 

doc/development/testing_guide/frontend_testing.md

@@ -165,18 +165,18 @@ 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 simply
-appending the file name to the karma command:
+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 profile/account/components/update_username_spec.js
+yarn karma-start --filter-spec profile/account/components/update_username_spec.js
 # Run specific spec folder
-yarn karma-start profile/account/components/
-# Run all specs in vue_shared and vue_mr_widget
-yarn karma-start /vue_shared/ /vue_mr_widget/
+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

package.json

@@ -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",

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"