use spec reporter for karma (#4552)

karma.conf.js

@@ -22,6 +22,7 @@ module.exports = function(config) {
             'karma-ng-html2js-preprocessor',
             'karma-sourcemap-loader',
             'karma-webpack',
+            'karma-spec-reporter',
         ],
 
         preprocessors: {
@@ -54,7 +55,8 @@ module.exports = function(config) {
         },
 
         // test results reporter to use
-        reporters: ['dots'],
+        // options: 'progress', 'dots', 'spec'(via "karma-spec-reporter" package)
+        reporters: ['spec'],
 
         // web server port
         port: 8080,

package.json

@@ -146,6 +146,7 @@
     "karma-jasmine": "^1.1.1",
     "karma-ng-html2js-preprocessor": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.7",
+    "karma-spec-reporter": "0.0.36",
     "karma-webpack": "^2.0.13",
     "react-addons-test-utils": "^15.6.0",
     "react-test-renderer": "^16.13.1",
@@ -160,7 +161,7 @@
     "gettext-extract": "grunt gettext:extract",
     "postinstall": "node ./tasks/patch-package.js && node tasks/generate-placeholder-file-for-extension-styles.js",
     "test": "npm run lint && npm run unit && node tasks/verify-client-api-changes.js",
-    "debug-unit-tests": "karma start karma.conf.js --browsers=Chrome",
+    "debug-unit-tests": "karma start --reporters=progress --browsers=Chrome",
     "unit": "karma start --single-run",
     "lint": "tsc -p scripts --noEmit && eslint --parser=@typescript-eslint/parser --ext .js --ext .jsx --ext .ts --ext .tsx scripts e2e/client tasks",
     "lint-fix": "eslint --fix --parser=@typescript-eslint/parser --ext .js --ext .jsx --ext .ts --ext .tsx scripts e2e/client tasks",

tasks/options/karma.js

@@ -3,15 +3,15 @@ module.exports = {
         configFile: 'karma.conf.js',
         singleRun: true,
         autoWatch: false,
-        reporters: ['dots'],
+        reporters: ['spec'],
     },
     single: {
-        reporters: 'dots',
+        reporters: 'spec',
     },
     watch: {
         singleRun: false,
         autoWatch: true,
-        reporters: 'dots',
+        reporters: 'progress',
     },
     unit: {
         coverageReporter: {
@@ -20,10 +20,10 @@ module.exports = {
         },
     },
     travis: {
-        reporters: ['dots'],
+        reporters: ['spec'],
     },
     bamboo: {
         browsers: ['PhantomJS'],
-        reporters: ['dots', 'junit'],
+        reporters: ['spec', 'junit'],
     },
 };