Add UI Framework Jest tests to npm test script. Create separate scrip…

…ts for watching and generating coverage reports.

package.json

@@ -64,7 +64,8 @@
     "mocha:debug": "mocha --debug-brk",
     "sterilize": "grunt sterilize",
     "uiFramework:start": "grunt uiFramework:start",
-    "uiFramework:test": "node tasks/ui_framework_test --env=jsdom"
+    "uiFramework:dev": "node tasks/utils/ui_framework_test --env=jsdom --watch",
+    "uiFramework:coverage": "node tasks/utils/ui_framework_test --env=jsdom --coverage"
   },
   "repository": {
     "type": "git",

tasks/test.js

@@ -51,6 +51,7 @@ module.exports = function (grunt) {
   grunt.registerTask('test:coverage', [ 'run:testCoverageServer', 'karma:coverage' ]);
 
   grunt.registerTask('test:quick', [
+    'uiFramework:test',
     'test:server',
     'test:ui',
     'test:browser',

tasks/ui_framework_test.js

@@ -1,36 +1,37 @@
-const jest = require('jest');
-const path = require('path');
-
-const rootDir = 'ui_framework';
-const resolve = relativePath => path.resolve(__dirname, '..', '', relativePath);
-
-const config = {
-  rootDir,
-  collectCoverage: true,
-  collectCoverageFrom: [
-    'components/**/*.js',
-    // Seems to be a bug with jest or micromatch, in which the above glob doesn't match subsequent
-    // levels of directories, making this glob necessary.
-    'components/**/**/*.js',
-    '!components/index.js',
-    '!components/**/*/index.js',
-  ],
-  coverageDirectory: '<rootDir>/jest/report',
-  coverageReporters: ['html'],
-  moduleFileExtensions: ['jsx', 'js', 'json'],
-  moduleNameMapper: {
-    '^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm)$': resolve('config/jest/FileStub.js'),
-    '^.+\\.css$': resolve('config/jest/CSSStub.js'),
-    '^.+\\.scss$': resolve('config/jest/CSSStub.js')
-  },
-  testPathIgnorePatterns: ['<rootDir>/(dist|doc_site|jest)/'],
-  testEnvironment: 'node',
-  testRegex: '.*\.test\.(js|jsx)$',
-  snapshotSerializers: ['<rootDir>/../node_modules/enzyme-to-json/serializer']
-};
+const platform = require('os').platform();
+const config = require('./utils/ui_framework_test_config');
+
+module.exports = function (grunt) {
+  grunt.registerTask('uiFramework:test', function () {
+    const done = this.async();
+    Promise.all([uiFrameworkTest()]).then(done);
+  });
+
+  function uiFrameworkTest() {
+    const serverCmd = {
+      cmd: /^win/.test(platform) ? '.\\node_modules\\.bin\\jest.cmd' : './node_modules/.bin/jest',
+      args: [
+        '--env=jsdom',
+        `--config=${JSON.stringify(config)}`,
+      ],
+      opts: { stdio: 'inherit' }
+    };
+
+    return new Promise((resolve, reject) => {
+      grunt.util.spawn(serverCmd, (error, result, code) => {
+        if (error || code !== 0) {
+          const message = result.stderr || result.stdout;
 
-const argv = process.argv.slice(2);
+          grunt.log.error(message);
 
-argv.push('--config', JSON.stringify(config));
+          return reject();
+        }
 
-jest.run(argv);
+        grunt.log.writeln(result);
+
+        resolve();
+      });
+
+    });
+  }
+};

tasks/utils/ui_framework_test.js

@@ -0,0 +1,8 @@
+const jest = require('jest');
+const config = require('./ui_framework_test_config');
+
+const argv = process.argv.slice(2);
+
+argv.push('--config', JSON.stringify(config));
+
+jest.run(argv);

tasks/utils/ui_framework_test_config.js

@@ -0,0 +1,27 @@
+const path = require('path');
+const rootDir = 'ui_framework';
+const resolve = relativePath => path.resolve(__dirname, '..', '', relativePath);
+
+module.exports = {
+  rootDir,
+  collectCoverageFrom: [
+    'components/**/*.js',
+    // Seems to be a bug with jest or micromatch, in which the above glob doesn't match subsequent
+    // levels of directories, making this glob necessary.
+    'components/**/**/*.js',
+    '!components/index.js',
+    '!components/**/*/index.js',
+  ],
+  coverageDirectory: '<rootDir>/jest/report',
+  coverageReporters: ['html'],
+  moduleFileExtensions: ['jsx', 'js', 'json'],
+  moduleNameMapper: {
+    '^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm)$': resolve('config/jest/FileStub.js'),
+    '^.+\\.css$': resolve('config/jest/CSSStub.js'),
+    '^.+\\.scss$': resolve('config/jest/CSSStub.js')
+  },
+  testPathIgnorePatterns: ['<rootDir>/(dist|doc_site|jest)/'],
+  testEnvironment: 'node',
+  testRegex: '.*\.test\.(js|jsx)$',
+  snapshotSerializers: ['<rootDir>/../node_modules/enzyme-to-json/serializer']
+};

ui_framework/README.md

@@ -78,6 +78,13 @@ content.
 You can check how well the components have been covered
 by the tests by viewing the generated report at `ui_framework/jest/report/index.html`.
 
+#### React component development tips
+
+You can run `npm run uiFramework:dev` to watch your files and automatically run the tests when you
+make changes. Under this command, the tests will run faster than under `uiFramework:test` because
+they'll only test the files you've changed -- the code coverage report won't be re-genereated,
+however.
+
 ## Principles
 
 ### Logically-grouped components