Create a coverage report for each source file (#2063)

* Improves testing
* Adds karma-sourcemap-loader
* Adds karma-preprocessor-rollup
* Moves testing Rollup building to Karma
* Enables sourcemaps in tests
* Fixes #2051

* Updating tests to reflect discrepancies with Phantom@^2

* Trying karma-coverage-istanbul-reporter

* Still not working...

* chore: make coverage report of src files

* test: add c3.css

* fix: fix test case of mouse events

* chore: update codecov module

* Adds codecov.yml to ignore polyfill.js

* chore: exclude src/polyfill.js at istanbul layer

* chore: remove rollup-plugin-istanbul dep because not used

karma.conf.js

@@ -1,77 +1,27 @@
-// Karma configuration
+const path = require('path');
-// Generated on Wed Sep 30 2015 22:01:48 GMT+0900 (KST)
 
 module.exports = function(config) {
   config.set({
-
+    frameworks: ['jasmine', 'browserify'],
-    // base path that will be used to resolve all patterns (eg. files, exclude)
-    basePath: '',
-
-
-    // frameworks to use
-    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['jasmine'],
-
-
-    // list of files / patterns to load in the browser
     files: [
-      'node_modules/d3/d3.min.js',
-      'c3.js',
       'c3.css',
       'spec/*-helper.js',
       'spec/*-spec.js'
     ],
-
-
-    // list of files to exclude
-    exclude: [
-    ],
-
-
-    // preprocess matching files before serving them to the browser
-    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
-      'c3.js': ['coverage']
+      'spec/c3-helper.js': ['browserify']
     },
-
+    browserify: {
-
+      debug: true,
-    // test results reporter to use
+      transform: [['babelify', { presets: ['es2015'], plugins: ['istanbul'] }]]
-    // possible values: 'dots', 'progress'
+    },
-    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['spec', 'coverage-istanbul'],
-    reporters: ['spec', 'coverage'],
+    coverageIstanbulReporter: {
-
+      reports: ['html', 'lcovonly', 'text-summary']
-
-    coverageReporter: {
-      reporters: [{type: 'lcov'}]
     },
-
-
-    // web server port
-    port: 9876,
-
-
-    // enable / disable colors in the output (reporters and logs)
-    colors: true,
-
-
-    // level of logging
-    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-    logLevel: config.LOG_INFO,
-
-
-    // enable / disable watching file and executing tests whenever any file changes
     autoWatch: true,
-
-
-    // start these browsers
-    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
     browsers: ['PhantomJS'],
-
-
-    // Continuous Integration mode
-    // if true, Karma captures browsers, runs the tests and exits
     singleRun: true,
-
     browserNoActivityTimeout: 120000,
   })
-}
+};

package.json

@@ -16,7 +16,7 @@
     "build:css:min": "cleancss -o c3.min.css c3.css",
     "test": "npm run build && npm run lint && karma start karma.conf.js",
     "dist": "npm run build",
-    "codecov": "cat coverage/*/lcov.info | codecov"
+    "codecov": "codecov"
   },
   "repository": {
     "type": "git",
@@ -27,7 +27,11 @@
     "chart",
     "graph"
   ],
-  "author": "Masayuki Tanaka",
+  "authors": [
+    "Masayuki Tanaka",
+    "Ændrew Rininsland",
+    "Yoshiya Hinosawa"
+  ],
   "license": "MIT",
   "gitHead": "84e03109d9a590f9c8ef687c03d751f666080c6f",
   "readmeFilename": "README.md",
@@ -35,20 +39,31 @@
     "d3": "~3.5.0"
   },
   "devDependencies": {
+    "babel-plugin-istanbul": "^4.1.4",
+    "babel-preset-es2015": "^6.24.1",
+    "babelify": "^7.3.0",
+    "browserify": "^14.4.0",
     "clean-css-cli": "^4.1.3",
-    "codecov.io": "^0.1.6",
+    "codecov": "^2.2.0",
     "jasmine-core": "^2.3.4",
     "jshint": "^2.9.4",
     "jshint-stylish": "^2.1.0",
-    "karma": "^0.13.10",
+    "karma": "^1.7.0",
-    "karma-coverage": "^0.5.2",
+    "karma-browserify": "^5.1.1",
-    "karma-jasmine": "^0.3.6",
+    "karma-coverage-istanbul-reporter": "^1.3.0",
-    "karma-phantomjs-launcher": "^0.2.1",
+    "karma-jasmine": "^1.1.0",
-    "karma-spec-reporter": "0.0.20",
+    "karma-phantomjs-launcher": "^1.0.4",
+    "karma-spec-reporter": "0.0.31",
     "node-sass": "^4.5.3",
     "node-static": "^0.7.9",
-    "phantomjs": "^1.9.18",
+    "phantomjs": "^2.1.7",
     "rollup": "^0.41.6",
-    "uglify-js": "^3.0.15"
+    "uglify-js": "^3.0.15",
+    "watchify": "^3.9.0"
+  },
+  "nyc": {
+    "exclude": [
+      "src/polyfill.js"
+    ]
   }
 }

spec/axis-spec.js

@@ -587,7 +587,7 @@ describe('c3 chart axis', function () {
                 var box = chart.internal.main.select('.c3-axis-x').node().getBoundingClientRect(),
                     height = chart.internal.getHorizontalAxisHeight('x');
                 expect(box.height).toBeGreaterThan(50);
-                expect(height).toBeCloseTo(70, -1);
+                expect(height).toBeCloseTo(76, -1); // @TODO make this test better
             });
 
         });

spec/c3-helper.js

@@ -1,4 +1,8 @@
-function initDom() {
+import c3 from '../src';
+
+window.c3 = c3;
+
+window.initDom = function () {
     'use strict';
 
     var div = document.createElement('div');
@@ -7,10 +11,9 @@ function initDom() {
     div.style.height = '480px';
     document.body.appendChild(div);
     document.body.style.margin = '0px';
-}
+};
-typeof initDom !== 'undefined';
 
-function setMouseEvent(chart, name, x, y, element) {
+window.setMouseEvent = function(chart, name, x, y, element) {
     'use strict';
 
     var paddingLeft = chart.internal.main.node().transform.baseVal.getItem(0).matrix.e,
@@ -20,10 +23,9 @@ function setMouseEvent(chart, name, x, y, element) {
                        false, false, false, false, 0, null);
     chart.internal.d3.event = event;
     if (element) { element.dispatchEvent(event); }
-}
+};
-typeof setMouseEvent !== 'undefined';
 
-function initChart(chart, args, done) {
+window.initChart = function (chart, args, done) {
     'use strict';
 
     if (typeof chart === 'undefined') {
@@ -43,5 +45,4 @@ function initChart(chart, args, done) {
     }, 10);
 
     return chart;
-}
+};
-typeof initChart !== 'undefined';

spec/data-spec.js

@@ -1035,7 +1035,7 @@ describe('c3 chart data', function () {
 
                     it('should have y domain with proper padding', function () {
                         var domain = chart.internal.y.domain();
-                        expect(domain[0]).toBeCloseTo(-254, -1);
+                        expect(domain[0]).toBeCloseTo(-259, -1);
                         expect(domain[1]).toBeCloseTo(260, -1);
                     });
 
@@ -1058,7 +1058,7 @@ describe('c3 chart data', function () {
 
                     it('should have y domain with proper padding', function () {
                         var domain = chart.internal.y.domain();
-                        expect(domain[0]).toBeCloseTo(-254, -1);
+                        expect(domain[0]).toBeCloseTo(-259, -1);
                         expect(domain[1]).toBeCloseTo(260, -1);
                     });
 
@@ -1267,7 +1267,7 @@ describe('c3 chart data', function () {
 
                     it('should have y domain with proper padding', function () {
                         var domain = chart.internal.y.domain();
-                        expect(domain[0]).toBeCloseTo(-894, -1);
+                        expect(domain[0]).toBeCloseTo(-899, -1);
                         expect(domain[1]).toBeCloseTo(0, -1);
                     });
 
@@ -1290,8 +1290,8 @@ describe('c3 chart data', function () {
 
                     it('should have y domain with proper padding', function () {
                         var domain = chart.internal.y.domain();
-                        expect(domain[0]).toBeCloseTo(-894, -1);
+                        expect(domain[0]).toBeCloseTo(-899, -1);
-                        expect(domain[1]).toBeCloseTo(94, -1);
+                        expect(domain[1]).toBeCloseTo(101, -1);
                     });
 
                     it('should locate labels above each data point', function () {

spec/legend-spec.js

@@ -61,7 +61,7 @@ describe('c3 chart legend', function () {
 
         it('should be located on the center of chart', function () {
             var box = chart.internal.legend.node().getBoundingClientRect();
-            expect(box.left + box.right).toBe(640);
+            expect(box.left + box.right).toBe(638);
         });
 
     });
@@ -266,7 +266,7 @@ describe('c3 chart legend', function () {
             d3.selectAll('.c3-legend-item-padded1 .c3-legend-item-tile, .c3-legend-item-padded2 .c3-legend-item-tile').each(function (el, index) {
                 var itemWidth = d3.select(this).node().parentNode.getBBox().width,
                     textBoxWidth = d3.select(d3.select(this).node().parentNode).select('text').node().getBBox().width,
-                    tileWidth = 15, // default value is 10, plus 5 more for padding
+                    tileWidth = 17, // default value is 10, plus 7 more for padding @TODO verify this, seems PhantomJS@^2 adds another 1px to each side
                     expectedWidth = textBoxWidth + tileWidth + (index ? 0 : 10) + args.legend.padding;
 
                 expect(itemWidth).toBe(expectedWidth);