Merge pull request #206 from plotly/bundle-tests

Add testing framework to test custom bundles

Author: etpinard

.gitignore

@@ -6,4 +6,4 @@ build/*
 !build/ploticon.js
 !build/README.md
 
-npm-debug.log
+npm-debug.log*

circle.yml

@@ -21,4 +21,5 @@ test:
   override:
     - sudo lxc-attach -n "$(docker inspect --format '{{.Id}}' mytestbed)" -- bash -c "cd /var/www/streambed/image_server/plotly.js && node test/image/compare_pixels_test.js"
     - npm run citest-jasmine
+    - npm run test-bundle
     - npm run test-syntax

package.json

@@ -24,15 +24,16 @@
     "preprocess": "node tasks/preprocess.js",
     "bundle": "node tasks/bundle.js",
     "header": "node tasks/header.js",
-    "build": "npm run preprocess && npm run bundle && npm run header",
+    "build": "npm dedupe && npm run preprocess && npm run bundle && npm run header",
     "cibuild": "node tasks/cibundle.js",
     "watch": "node tasks/watch_plotly.js",
     "lint": "eslint . || true",
     "test-jasmine": "karma start test/jasmine/karma.conf.js",
     "citest-jasmine": "karma start test/jasmine/karma.ciconf.js",
     "test-image": "./tasks/test_image.sh",
     "test-syntax": "node test/syntax_test.js",
-    "test": "npm run test-jasmine && npm test-image && npm test-syntax",
+    "test-bundle": "node tasks/test_bundle.js",
+    "test": "npm run citest-jasmine && npm run test-image && npm run test-syntax && npm run test-bundle",
     "start-test_dashboard": "node devtools/test_dashboard/server.js",
     "start-image_viewer": "node devtools/image_viewer/server.js",
     "baseline": "./tasks/baseline.sh",

tasks/test_bundle.js

@@ -0,0 +1,21 @@
+var path = require('path');
+var exec = require('child_process').exec;
+
+var glob = require('glob');
+
+var constants = require('./util/constants');
+var pathToJasmineBundleTests = path.join(constants.pathToJasmineBundleTests);
+
+
+glob(pathToJasmineBundleTests + '/*.js', function(err, files) {
+    files.forEach(function(file) {
+        var baseName = path.basename(file);
+        var cmd = 'npm run citest-jasmine -- bundle_tests/' + baseName;
+
+        exec(cmd, function(err, stdout) {
+            console.log(stdout);
+
+            if(err) throw err;
+        });
+    });
+});

tasks/util/constants.js

@@ -48,6 +48,7 @@ module.exports = {
     pathToTestImagesDiffList: path.join(pathToBuild, 'list_of_incorrect_images.txt'),
 
     pathToJasmineTests: path.join(pathToRoot, 'test/jasmine/tests'),
+    pathToJasmineBundleTests: path.join(pathToRoot, 'test/jasmine/bundle_tests'),
 
     uglifyOptions: {
         fromString: true,

test/jasmine/bundle_tests/bar_test.js

@@ -0,0 +1,34 @@
+var d3 = require('d3');
+
+var Plotly = require('@lib/core');
+var PlotlyBar = require('@lib/bar');
+
+var createGraphDiv = require('../assets/create_graph_div');
+var destroyGraphDiv = require('../assets/destroy_graph_div');
+
+
+describe('Bundle with bar', function() {
+    'use strict';
+
+    Plotly.register(PlotlyBar);
+
+    var mock = require('@mocks/bar_line.json');
+
+    beforeEach(function(done) {
+        Plotly.plot(createGraphDiv(), mock.data, mock.layout).then(done);
+    });
+
+    afterEach(destroyGraphDiv);
+
+    it('should graph scatter traces', function() {
+        var nodes = d3.selectAll('g.trace.scatter');
+
+        expect(nodes.size()).toEqual(1);
+    });
+
+    it('should graph bar traces', function() {
+        var nodes = d3.selectAll('g.trace.bars');
+
+        expect(nodes.size()).toEqual(1);
+    });
+});

test/jasmine/bundle_tests/choropleth_test.js

@@ -0,0 +1,28 @@
+var d3 = require('d3');
+
+var Plotly = require('@lib/core');
+var PlotlyChoropleth = require('@lib/choropleth');
+
+var createGraphDiv = require('../assets/create_graph_div');
+var destroyGraphDiv = require('../assets/destroy_graph_div');
+
+
+describe('Bundle with choropleth', function() {
+    'use strict';
+
+    Plotly.register(PlotlyChoropleth);
+
+    var mock = require('@mocks/geo_multiple-usa-choropleths.json');
+
+    beforeEach(function(done) {
+        Plotly.plot(createGraphDiv(), mock.data, mock.layout).then(done);
+    });
+
+    afterEach(destroyGraphDiv);
+
+    it('should graph choropleth traces', function() {
+        var nodes = d3.selectAll('g.trace.choropleth');
+
+        expect(nodes.size()).toEqual(4);
+    });
+});

test/jasmine/bundle_tests/contour_test.js

@@ -0,0 +1,34 @@
+var d3 = require('d3');
+
+var Plotly = require('@lib/core');
+var PlotlyContour = require('@lib/contour');
+
+var createGraphDiv = require('../assets/create_graph_div');
+var destroyGraphDiv = require('../assets/destroy_graph_div');
+
+
+describe('Bundle with contour', function() {
+    'use strict';
+
+    Plotly.register(PlotlyContour);
+
+    var mock = require('@mocks/contour_scatter.json');
+
+    beforeEach(function(done) {
+        Plotly.plot(createGraphDiv(), mock.data, mock.layout).then(done);
+    });
+
+    afterEach(destroyGraphDiv);
+
+    it('should graph scatter traces', function() {
+        var nodes = d3.selectAll('g.trace.scatter');
+
+        expect(nodes.size()).toEqual(1);
+    });
+
+    it('should graph contour traces', function() {
+        var nodes = d3.selectAll('g.contour');
+
+        expect(nodes.size()).toEqual(1);
+    });
+});

test/jasmine/bundle_tests/core_test.js

@@ -0,0 +1,37 @@
+var d3 = require('d3');
+
+var Plotly = require('@lib/core');
+
+var createGraphDiv = require('../assets/create_graph_div');
+var destroyGraphDiv = require('../assets/destroy_graph_div');
+
+
+describe('Bundle with core only', function() {
+    'use strict';
+
+    var mock = require('@mocks/bar_line.json');
+
+    beforeEach(function(done) {
+        spyOn(console, 'warn');
+
+        Plotly.plot(createGraphDiv(), mock.data, mock.layout).then(done);
+    });
+
+    afterEach(destroyGraphDiv);
+
+    it('should graph scatter traces', function() {
+        var nodes = d3.selectAll('g.trace.scatter');
+
+        expect(nodes.size()).toEqual(mock.data.length);
+    });
+
+    it('should not graph bar traces', function() {
+        var nodes = d3.selectAll('g.trace.bars');
+
+        expect(nodes.size()).toEqual(0);
+    });
+
+    it('should warn users about unregistered bar trace type', function() {
+        expect(console.warn).toHaveBeenCalled();
+    });
+});

test/jasmine/bundle_tests/histogram2dcontour_test.js

@@ -0,0 +1,41 @@
+var d3 = require('d3');
+
+var Plotly = require('@lib/core');
+var PlotlyHistogram2dContour = require('@lib/histogram2dcontour');
+var PlotlyHistogram = require('@lib/histogram');
+
+var createGraphDiv = require('../assets/create_graph_div');
+var destroyGraphDiv = require('../assets/destroy_graph_div');
+
+
+describe('Bundle with histogram2dcontour and histogram', function() {
+    'use strict';
+
+    Plotly.register([PlotlyHistogram2dContour, PlotlyHistogram]);
+
+    var mock = require('@mocks/2dhistogram_contour_subplots.json');
+
+    beforeEach(function(done) {
+        Plotly.plot(createGraphDiv(), mock.data, mock.layout).then(done);
+    });
+
+    afterEach(destroyGraphDiv);
+
+    it('should graph scatter traces', function() {
+        var nodes = d3.selectAll('g.trace.scatter');
+
+        expect(nodes.size()).toEqual(1);
+    });
+
+    it('should graph contour traces', function() {
+        var nodes = d3.selectAll('g.contour');
+
+        expect(nodes.size()).toEqual(1);
+    });
+
+    it('should graph histogram traces', function() {
+        var nodes = d3.selectAll('g.bars');
+
+        expect(nodes.size()).toEqual(2);
+    });
+});

test/jasmine/karma.conf.js

@@ -1,5 +1,20 @@
+/*eslint-env node*/
+
 // Karma configuration
 
+/*
+ * Test file globs can be passed with an argument.
+ *
+ * Example:
+ *
+ *  $ npm run test-jasmine -- tests/axes_test.js
+ *
+ * will only run the tests in axes_test.js
+ *
+ */
+var testFileGlob = process.argv[4] ? process.argv[4] : 'tests/*_test.js';
+
+
 function func(config) {
 
     // level of logging
@@ -21,7 +36,7 @@ func.defaultConfig = {
     // list of files / patterns to load in the browser
     files: [
         'assets/jquery-1.8.3.min.js',
-        'tests/*_test.js'
+        testFileGlob
     ],
 
     // list of files to exclude
@@ -30,9 +45,9 @@ func.defaultConfig = {
 
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
-    preprocessors: {
-        'tests/*_test.js': ['browserify']
-    },
+    //
+    // N.B. this field is filled below
+    preprocessors: {},
 
     // test results reporter to use
     // possible values: 'dots', 'progress'
@@ -64,5 +79,7 @@ func.defaultConfig = {
     }
 };
 
+// browserify the test files
+func.defaultConfig.preprocessors[testFileGlob] = ['browserify'];
 
 module.exports = func;

test/syntax_test.js

@@ -6,16 +6,19 @@ var glob = require('glob');
 
 var constants = require('../tasks/util/constants');
 
-var focusGlobals = ['fdescribe', 'fit', 'xdescribe', 'xit'];
+var BLACK_LIST = ['fdescribe', 'fit', 'xdescribe', 'xit'];
 var logs = [];
 
+var testGlob = path.join(constants.pathToJasmineTests, '**/*.js');
+var bundleTestGlob = path.join(constants.pathToJasmineBundleTests, '**/*.js');
 
-glob(path.join(constants.pathToJasmineTests, '**/*.js'), function(err, files) {
+
+glob('{' + testGlob + ',' + bundleTestGlob + '}', function(err, files) {
     files.forEach(function(file) {
         var code = fs.readFileSync(file, 'utf-8');
 
         falafel(code, {locations: true}, function(node) {
-            if(node.type === 'Identifier' && focusGlobals.indexOf(node.name) !== -1) {
+            if(node.type === 'Identifier' && BLACK_LIST.indexOf(node.name) !== -1) {
                 logs.push([
                     path.basename(file),
                     '[line ' + node.loc.start.line + '] :',