Merge pull request #8786 from code-dot-org/pcardune-apps-coverage-report

Add option to generate coverage reports

.gitignore

@@ -43,3 +43,4 @@ crowdin.yaml
 /.ruby-version
 /levelbuilder_ci_last_run
 /coverage
+/apps/coverage

apps/README.md

@@ -113,6 +113,8 @@ To run an individual test, use the `--entry` option with `npm run test:entry` to
 npm run test:entry -- --entry ./test/unit/gridUtilsTest.js
 ```
 
+##### Rerun Tests Automatically #####
+
 To rerun tests automatically on every file change, set the environment variable
 `MOOC_WATCH=1`:
 
@@ -122,6 +124,8 @@ MOOC_WATCH=1 npm run test:unit
 
 This will work on any of the test commands.
 
+##### Debugging Tests #####
+
 To debug tests, your best bet is to run them in Chrome. Keep in mind that there
 can be subtle differences between Chrome and PhantomJS, so after fixing your
 test in Chrome, make sure it still works in PhantomJS. To run the tests in
@@ -136,7 +140,54 @@ click on the Debug button to open a new tab where you can then open the
 developer console to see everything that is happening. If you don't see the new
 chrome browser window, it may have opened *behind* your other windows.
 
-- You can add new test files as /test/*Tests.js, see `/test/feedbackTests.js` as an example of adding a mock Blockly instance
+##### Coverage Reports #####
+
+Coverage reports can be generated for any collection of tests by specifying the
+`COVERAGE=1` environment variable. Results will be placed in the `coverage`
+folder. For example, to see what code gets executed by unit tests, run:
+
+```
+COVERAGE=1 npm run test:unit
+```
+
+Then you can open up the html report with (note that the exact file path may be
+different):
+
+```
+open coverage/PhantomJS\ 2.1.1\ \(Mac\ OS\ X\ 0.0.0\)/index.html
+```
+
+##### Writing Tests #####
+
+You can add new test files as /test/unit/*Tests.js; see
+`/test/unit/feedbackTests.js` as an example of adding a mock Blockly
+instance. Note that each test file in `/test/unit/**` should include tests for
+exactly one file in `src/**` and the test file should have the same file name as
+the file it tests (with `Tests` appended to it): i.e. don't create new unit test
+files that test lots and lots of different stuff.
+
+In the event you need certain code to only be available when tests are running,
+you can use the `IN_UNIT_TEST` global, which will be set to `true` only when
+tests are running. For example:
+
+```
+if (IN_UNIT_TEST) {
+  console.log("this log line will only show up when tests are run");
+}
+```
+
+These if statements will be removed from production source files at build time.
+
+The test runner starts a server which can serve files in the apps directory to
+your test code. Only whitelisted files and directories are available. See the
+`config.karma.options.files` array in `Gruntfile.js` for the whitelist. When
+fetching files served by the test runner, prefix the file path with
+`/base/`. For example, to load the `test/audio/assets/win.mp3` file in an
+`<audio>` tag inside your test, you could write:
+
+```
+document.write('<audio src="/base/test/audio/assets/win.mp3"/>');
+```
 
 #### Full build with blockly-core changes
 

apps/karma.conf.js

@@ -4,6 +4,14 @@ var _ = require('lodash');
 
 var PORT = 9876;
 
+var reporters = ['mocha'];
+if (process.env.CIRCLECI) {
+  reporters.push('junit');
+}
+if (process.env.COVERAGE === '1') {
+  reporters.push('coverage');
+}
+
 module.exports = function (config) {
   config.set({
 
@@ -69,14 +77,18 @@ module.exports = function (config) {
     // test results reporter to use
     // possible values: 'dots', 'progress'
     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: process.env.CIRCLECI ? [
-      'junit',
-      'mocha',
-    ] : ['mocha'],
+    reporters: reporters,
 
     junitReporter: {
       outputDir: process.env.CIRCLECI ? process.env.CIRCLE_TEST_REPORTS : '',
     },
+    coverageReporter: {
+      dir: 'coverage',
+      reporters: [
+        { type: 'html' },
+        { type: 'lcovonly' }
+      ]
+    },
 
 
     // web server port

apps/package.json

@@ -52,6 +52,7 @@
     "@cdo/apps": "file:src",
     "Base64": "0.3.0",
     "babel-core": "6.9.0",
+    "babel-istanbul-loader": "^0.1.0",
     "babel-loader": "6.2.4",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-transform-es2015-classes": "^6.9.0",
@@ -111,6 +112,7 @@
     "json-loader": "0.5.4",
     "karma": "^0.13.22",
     "karma-chrome-launcher": "^1.0.1",
+    "karma-coverage": "^1.0.0",
     "karma-junit-reporter": "^1.0.0",
     "karma-mocha": "^1.0.1",
     "karma-mocha-reporter": "^2.0.3",

apps/webpack.config.js

@@ -1,6 +1,6 @@
 var webpack = require('webpack');
 var path = require('path');
-module.exports = {
+var config = module.exports = {
   resolve: {
     extensions: ["", ".js", ".jsx"],
     alias: {
@@ -21,6 +21,8 @@ module.exports = {
     loaders: [
       {test: /\.json$/, loader: 'json'},
       {test: /\.ejs$/, loader: 'ejs-compiled'},
+    ],
+    preLoaders: [
       {
         test: /\.jsx?$/,
         include: [
@@ -40,3 +42,29 @@ module.exports = {
     ],
   },
 };
+
+if (process.env.COVERAGE === '1') {
+  config.module.preLoaders = [
+    {
+      test: /\.jsx?$/,
+      include: [
+        path.resolve(__dirname, 'test'),
+        path.resolve(__dirname, 'node_modules', '@cdo'),
+      ],
+      loader: "babel",
+      query: {
+        cacheDirectory: true,
+      }
+    }, {
+      test: /\.jsx?$/,
+      loader: 'babel-istanbul',
+      include: path.resolve(__dirname, 'src'),
+      exclude: [
+        path.resolve(__dirname, 'src', 'lodash.js'),
+      ],
+      query: {
+        cacheDirectory: true,
+      }
+    },
+  ];
+}