fix missing # in IE svg output, and test

Author: alexcjohnson

src/snapshot/tosvg.js

@@ -165,7 +165,7 @@ module.exports = function toSVG(gd, format, scale) {
         // url in svg are single quoted
         //   since we changed double to single
         //   we'll need to change these to double-quoted
-        s = s.replace(/(\('#)([^']*)('\))/gi, '(\"$2\")');
+        s = s.replace(/(\('#)([^']*)('\))/gi, '(\"#$2\")');
         // font names with spaces will be escaped single-quoted
         //   we'll need to change these to double-quoted
         s = s.replace(/(\\')/gi, '\"');

test/jasmine/tests/download_test.js

@@ -2,6 +2,9 @@ var Plotly = require('@lib/index');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var textchartMock = require('@mocks/text_chart_arrays.json');
+var fail = require('../assets/fail_test');
+
+var Lib = require('@src/lib');
 
 var LONG_TIMEOUT_INTERVAL = 2 * jasmine.DEFAULT_TIMEOUT_INTERVAL;
 
@@ -14,6 +17,11 @@ describe('Plotly.downloadImage', function() {
     //  download an image each time they are run
     //  full credit goes to @etpinard; thanks
     var createElement = document.createElement;
+    var msSaveBlob = navigator.msSaveBlob;
+    var isIE = Lib.isIE;
+    var slzProto = (new window.XMLSerializer()).__proto__;
+    var serializeToString = slzProto.serializeToString;
+
     beforeAll(function() {
         document.createElement = function(args) {
             var el = createElement.call(document, args);
@@ -24,6 +32,7 @@ describe('Plotly.downloadImage', function() {
 
     afterAll(function() {
         document.createElement = createElement;
+        navigator.msSaveBlob = msSaveBlob;
     });
 
     beforeEach(function() {
@@ -32,6 +41,8 @@ describe('Plotly.downloadImage', function() {
 
     afterEach(function() {
         destroyGraphDiv();
+        Lib.isIE = isIE;
+        slzProto.serializeToString = serializeToString;
     });
 
     it('should be attached to Plotly', function() {
@@ -59,8 +70,55 @@ describe('Plotly.downloadImage', function() {
     it('should create link, remove link, accept options', function(done) {
         downloadTest(gd, 'svg', done);
     }, LONG_TIMEOUT_INTERVAL);
-});
 
+    it('should produce the right SVG output in IE', function(done) {
+        // mock up IE behavior
+        Lib.isIE = function() { return true; };
+        slzProto.serializeToString = function() {
+            return serializeToString.apply(this, arguments)
+                .replace(/(\(#)([^")]*)(\))/gi, '(\"#$2\")');
+        };
+        var savedBlob;
+        navigator.msSaveBlob = function(blob) { savedBlob = blob; };
+
+        var expectedStart = '<svg class=\'main-svg\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' width=\'300\' height=\'300\' style=\'\' viewBox=\'0 0 300 300\'>';
+        var plotClip = /clip-path='url\("#clip[0-9a-f]{6}xyplot"\)/;
+        var legendClip = /clip-path=\'url\("#legend[0-9a-f]{6}"\)/;
+
+        Plotly.plot(gd, textchartMock.data, textchartMock.layout)
+        .then(function(gd) {
+            savedBlob = undefined;
+            return Plotly.downloadImage(gd, {
+                format: 'svg',
+                height: 300,
+                width: 300,
+                filename: 'plotly_download'
+            });
+        })
+        .then(function() {
+            expect(savedBlob).toBeDefined();
+            if(savedBlob === undefined) return;
+
+            return new Promise(function(resolve, reject) {
+                var reader = new FileReader();
+                reader.onloadend = function() {
+                    var res = reader.result;
+
+                    expect(res.substr(0, expectedStart.length)).toBe(expectedStart);
+                    expect(res.match(plotClip)).not.toBe(null);
+                    expect(res.match(legendClip)).not.toBe(null);
+
+                    resolve();
+                };
+                reader.onerror = function(e) { reject(e); };
+
+                reader.readAsText(savedBlob);
+            });
+        })
+        .catch(fail)
+        .then(done);
+    }, LONG_TIMEOUT_INTERVAL);
+});
 
 function downloadTest(gd, format, done) {
     // use MutationObserver to monitor the DOM