Snapshot: Test all image format downloads

Author: mdtusz

test/jasmine/tests/download_test.js

@@ -44,45 +44,84 @@ describe('Plotly.downloadImage', function() {
     });
 
     it('should create link, remove link, accept options', function(done) {
-        //use MutationObserver to monitor the DOM
-        //for changes
-        //code modeled after
-        //https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
-        // select the target node
-        var target = document.body;
-        var domchanges = [];
-
-        // create an observer instance
-        var observer = new MutationObserver(function(mutations) {
-            mutations.forEach(function(mutation) {
-                domchanges.push(mutation);
-            });
-        });
+        downloadTest(gd, 'jpeg', done);
+    });
 
-        Plotly.plot(gd, textchartMock.data, textchartMock.layout).then(function(gd) {
-            // start observing dom
-            // configuration of the observer:
-            var config = { childList: true };
-
-            // pass in the target node and observer options
-            observer.observe(target, config);
-
-            return Plotly.downloadImage(gd, {format: 'jpeg', height: 300, width: 300, filename: 'plotly_download'});
-        }).then(function(filename) {
-            // stop observing
-            observer.disconnect();
-            // look for an added and removed link
-            var linkadded = domchanges[domchanges.length - 2].addedNodes[0].outerHTML;
-            var linkdeleted = domchanges[domchanges.length - 1].removedNodes[0].outerHTML;
-
-            // check for a <a element and proper file type
-            expect(linkadded.split('href="')[1].split('jpeg;')[0]).toEqual('data:image/');
-            // check that filename option handled properly
-            expect(filename).toBe('plotly_download.jpeg');
-
-            // check that link removed
-            expect(linkadded).toBe(linkdeleted);
-            done();
+    it('should create link, remove link, accept options', function(done) {
+        downloadTest(gd, 'png', done);
+    });
+
+    it('should create link, remove link, accept options', function(done) {
+        checkWebp(function(supported) {
+            if(supported) {
+                downloadTest(gd, 'webp', done);
+            } else {
+                done();
+            }
         });
+
+    });
+
+    it('should create link, remove link, accept options', function(done) {
+        downloadTest(gd, 'svg', done);
     });
 });
+
+
+function downloadTest(gd, format, done) {
+    //use MutationObserver to monitor the DOM
+    //for changes
+    //code modeled after
+    //https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
+    // select the target node
+    var target = document.body;
+    var domchanges = [];
+
+    // create an observer instance
+    var observer = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+            domchanges.push(mutation);
+        });
+    });
+
+    Plotly.plot(gd, textchartMock.data, textchartMock.layout).then(function(gd) {
+        // start observing dom
+        // configuration of the observer:
+        var config = { childList: true };
+
+        // pass in the target node and observer options
+        observer.observe(target, config);
+
+        return Plotly.downloadImage(gd, {format: format, height: 300, width: 300, filename: 'plotly_download'});
+    }).then(function(filename) {
+        // stop observing
+        observer.disconnect();
+        // look for an added and removed link
+        var linkadded = domchanges[domchanges.length - 2].addedNodes[0];
+        var linkdeleted = domchanges[domchanges.length - 1].removedNodes[0];
+
+        // check for a <a element and proper file type
+        expect(linkadded.getAttribute('href').split(format)[0]).toEqual('data:image/');
+        // check that filename option handled properly
+        expect(filename).toEqual('plotly_download.' + format);
+
+        // check that link removed
+        expect(linkadded).toBe(linkdeleted);
+        done();
+    });
+}
+
+
+// Only chrome supports webp at the time of writing
+function checkWebp(cb) {
+    var img = new Image();
+    img.onload = function() {
+        cb(true);
+    };
+
+    img.onerror = function() {
+        cb(false);
+    };
+
+    img.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
+}

test/jasmine/tests/toimage_test.js

@@ -105,7 +105,7 @@ describe('Plotly.toImage', function() {
             // now do svg
             return Plotly.toImage(gd, {format: 'svg'});
         }).then(function(url) {
-            expect(url.substr(1, 3)).toBe('svg');
+            expect(url.split('svg')[0]).toBe('data:image/');
             done();
         });
     });