Merge pull request #914 from plotly/test-requirejs

Test plotly.min.js in Require.js environment

Author: etpinard

dist/plotly.min.js

@@ -110,6 +110,7 @@
     "open": "0.0.5",
     "prepend-file": "^1.3.0",
     "prettysize": "0.0.3",
+    "requirejs": "^2.3.1",
     "through2": "^2.0.0",
     "uglify-js": "^2.6.1",
     "watchify": "^3.7.0",

package.json

@@ -7,6 +7,7 @@ var UglifyJS = require('uglify-js');
 var constants = require('./util/constants');
 var common = require('./util/common');
 var compressAttributes = require('./util/compress_attributes');
+var patchMinified = require('./util/patch_minified');
 var doesFileExist = common.doesFileExist;
 
 /*
@@ -83,6 +84,7 @@ function _bundle(pathToIndex, pathToBundle, opts) {
 
         if(outputMinified) {
             var minifiedCode = UglifyJS.minify(buf.toString(), constants.uglifyOptions).code;
+            minifiedCode = patchMinified(minifiedCode);
 
             fs.writeFile(pathToMinBundle, minifiedCode, function(err) {
                 if(err) throw err;

tasks/bundle.js

@@ -7,6 +7,7 @@ var common = require('./util/common');
 makeCredentialsFile();
 makeSetPlotConfigFile();
 makeTestImageFolders();
+makeRequireJSFixture();
 
 // Create a credentials json file,
 // to be required in jasmine test suites and test dashboard
@@ -52,6 +53,16 @@ function makeTestImageFolders() {
     makeOne(constants.pathToTestImagesDiff, 'test image diff folder');
 }
 
+// Make script file that define plotly in a RequireJS context
+function makeRequireJSFixture() {
+    var bundle = fs.readFileSync(constants.pathToPlotlyDistMin, 'utf-8'),
+        template = 'define(\'plotly\', function(require, exports, module) { {{bundle}} });',
+        index = template.replace('{{bundle}}', bundle);
+
+    common.writeFile(constants.pathToRequireJSFixture, index);
+    logger('make build/requirejs_fixture.js');
+}
+
 function logger(task) {
     console.log('ok ' + task);
 }

tasks/pretest.js

@@ -66,6 +66,8 @@ module.exports = {
 
     pathToJasmineTests: path.join(pathToRoot, 'test/jasmine/tests'),
     pathToJasmineBundleTests: path.join(pathToRoot, 'test/jasmine/bundle_tests'),
+    pathToRequireJS: path.join(pathToRoot, 'node_modules', 'requirejs', 'require.js'),
+    pathToRequireJSFixture: path.join(pathToBuild, 'requirejs_fixture.js'),
 
     // this mapbox access token is 'public', no need to hide it
     // more info: https://www.mapbox.com/help/define-access-token/

tasks/util/constants.js

@@ -0,0 +1,15 @@
+var STR_TO_REPLACE = 'require("+a(r)+");';
+var STR_NEW = 'require("+ a(r) +");';
+
+/* Uber hacky in-house fix to
+ *
+ * https://github.com/substack/webworkify/issues/29
+ *
+ * so that plotly.min.js loads in Jupyter NBs, more info here:
+ *
+ * https://github.com/plotly/plotly.py/pull/545
+ *
+ */
+module.exports = function patchMinified(minifiedCode) {
+    return minifiedCode.replace(STR_TO_REPLACE, STR_NEW);
+};

tasks/util/patch_minified.js

@@ -0,0 +1,16 @@
+describe('plotly.js + require.js', function() {
+    'use strict';
+
+    it('should preserve require.js globals', function() {
+        expect(window.requirejs).toBeDefined();
+        expect(window.define).toBeDefined();
+        expect(window.require).toBeDefined();
+    });
+
+    it('should be able to import plotly.min.js', function(done) {
+        require(['plotly'], function(Plotly) {
+            expect(Plotly).toBeDefined();
+            done();
+        });
+    });
+});

test/jasmine/bundle_tests/requirejs_test.js

@@ -13,10 +13,13 @@
  *
  */
 
+var constants = require('../../tasks/util/constants');
+
 var arg = process.argv[4];
 
 var testFileGlob = arg ? arg : 'tests/*_test.js';
 var isSingleSuiteRun = (arg && arg.indexOf('bundle_tests/') === -1);
+var isRequireJSTest = (arg && arg.indexOf('bundle_tests/requirejs') !== -1);
 
 var pathToMain = '../../lib/index.js';
 var pathToJQuery = 'assets/jquery-1.8.3.min.js';
@@ -113,6 +116,13 @@ if(isSingleSuiteRun) {
     func.defaultConfig.preprocessors[pathToMain] = ['browserify'];
     func.defaultConfig.preprocessors[testFileGlob] = ['browserify'];
 }
+else if(isRequireJSTest) {
+    func.defaultConfig.files = [
+        constants.pathToRequireJS,
+        constants.pathToRequireJSFixture,
+        testFileGlob
+    ];
+}
 else {
     func.defaultConfig.files = [
         pathToJQuery,