add gif export integration test

src/js/utils/FrameUtils.js

@@ -172,6 +172,16 @@
       return pskl.utils.FrameUtils.createFromImageData_(imgData, w, h, preserveOpacity);
     },
 
+    createFromImageSrc : function (src, preserveOpacity, cb) {
+      var image = new Image();
+      image.addEventListener('load', function onImageLoaded() {
+        image.removeEventListener('load', onImageLoaded);
+        var frame = ns.FrameUtils.createFromImage(image, preserveOpacity);
+        cb(frame);
+      });
+      image.src = src;
+    },
+
     /*
      * Create a pskl.model.Frame from an Image object. By default transparent
      * pixels will be converted to completely opaque or completely transparent

test/casperjs/integration/IntegrationSuite.js

@@ -1,4 +1,5 @@
 (typeof exports != "undefined" ? exports : pskl_exports).tests = [
+  'settings/test-export-gif.js',
   'settings/test-resize-complete.js',
   'settings/test-resize-content-complete.js',
   'settings/test-resize-default-size.js',

test/casperjs/integration/include.js

@@ -56,3 +56,36 @@ function isDrawerExpanded() {
     return settingsElement.classList.contains('expanded');
   });
 }
+
+function waitForEvent(eventName, onSuccess, onError) {
+  var cleanup = function () {
+    casper.evaluate(
+    'function () {\
+      document.body.removeChild(document.getElementById("casper-' + eventName +'"));\
+    }');
+  };
+
+  casper.echo("Waiting for casper element");
+  casper.waitForSelector('#casper-' + eventName, function () {
+    // success
+    casper.echo("Successfully received event", eventName);
+    cleanup();
+    onSuccess();
+  }, function () {
+    // error
+    casper.echo("Failed to receive event", eventName);
+    cleanup();
+    onError();
+  }, 10000);
+
+  casper.echo("Subscribe to event:", eventName);
+  casper.evaluate(
+    'function () {\
+      $.subscribe("' + eventName + '", function onCasperEvent() {\
+        $.unsubscribe("' + eventName + '", onCasperEvent);\
+        var el = document.createElement("div");\
+        el.id = "casper-' + eventName +'";\
+        document.body.appendChild(el);\
+      });\
+    }');
+}

test/casperjs/integration/settings/test-export-gif.js

@@ -0,0 +1,125 @@
+/* globals casper, setPiskelFromGrid, isDrawerExpanded, getValue, isChecked, evalLine, waitForEvent */
+
+function setPiskelFromImageSrc(src) {
+  casper.evaluate(
+    'function () {\
+      pskl.utils.FrameUtils.createFromImageSrc("' + src + '", false, function (frame) {\
+        var layer = pskl.model.Layer.fromFrames("l1", [frame]);\
+        var piskel = pskl.model.Piskel.fromLayers([layer], 12, {\
+          name: "piskel",\
+          description: "description"\
+        });\
+        pskl.app.piskelController.setPiskel(piskel);\
+      });\
+    }');
+}
+
+// Source for a base64 encoded PNG, 20x20, with 400 different colors.
+var src = [
+  'data:image/png;base64,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'].join('');
+
+casper.test.begin('GIF export Test', 11, function(test) {
+  test.timeout = test.fail.bind(test, ['Test timed out']);
+
+  function onTestStart() {
+    test.assertExists('#drawing-canvas-container canvas', 'Piskel ready, test starting');
+
+    test.assert(!isDrawerExpanded(), 'settings drawer is closed');
+
+    waitForEvent('PISKEL_RESET', onPiskelReset, test.timeout);
+    setPiskelFromImageSrc(src);
+  }
+
+  function onPiskelReset() {
+    // Check the expected piskel was correctly loaded.
+    test.assertEquals(evalLine('pskl.app.piskelController.getPiskel().getWidth()'), 20, 'Piskel width is now 20 pixels');
+    test.assertEquals(evalLine('pskl.app.piskelController.getPiskel().getHeight()'), 20, 'Piskel height is now 20 pixels');
+
+    // Open export panel.
+    test.assertDoesntExist('.settings-section-export', 'Check if export panel is closed');
+    casper.click('[data-setting="export"]');
+
+    casper.waitForSelector('.settings-section-export', onExportPanelReady, test.timeout, 10000);
+  }
+
+  function onExportPanelReady() {
+    test.assert(isDrawerExpanded(), 'settings drawer is expanded');
+    test.assertExists('.settings-section-export', 'Check if export panel is opened');
+
+    test.assertEquals(
+      evalLine('typeof pskl.controller.settings.exportimage.GifExportController.prototype.downloadImageData_'),
+      'function', 'The prototype of GifExportController still contains downloadImageData_ as a function');
+
+    // Override the downloadImageData_ method on the GifExportController
+    casper.evaluate(
+      'function () {\
+        pskl.controller.settings.exportimage.GifExportController.prototype.downloadImageData_ = function (imageData) {\
+          window.casperImageData = imageData;\
+          var el = document.createElement("div");\
+          el.id = "casper-imagedata-ready";\
+          document.body.appendChild(el);\
+        };\
+    }');
+
+    test.assertExists('.gif-download-button', 'The gif download button is available');
+
+    casper.echo(evalLine('caca.downloadImageData_ + ""'));
+    casper.echo('Clicking on Download GIF button');
+    casper.click('.gif-download-button');
+
+    casper.echo('Wait for #casper-imagedata-ready');
+    casper.waitForSelector('#casper-imagedata-ready', onImageDataReady, test.timeout, 10000);
+  }
+
+  function onImageDataReady() {
+    casper.echo('Found casper-imagedata-ready element');
+
+    // cleanup
+    casper.evaluate(function () {
+      document.body.removeChild(document.getElementById('casper-imagedata-ready'));
+    });
+
+    var imageData = evalLine('window.casperImageData');
+    // Sadly we can't assert much more for now as the generated GIF in casper environment is invalid
+    test.assert(imageData.indexOf('data:image/gif;base64') === 0, 'The gif image data was generated');
+
+    // Click on export again to close the settings drawer.
+    casper.click('[data-setting="export"]');
+    casper.waitForSelector('[data-pskl-controller="settings"]:not(.expanded)', onDrawerClosed, test.timeout, 10000);
+  }
+
+  function onDrawerClosed() {
+    test.assert(!isDrawerExpanded(), 'settings drawer is closed');
+  }
+
+  casper
+    .start(casper.cli.get('baseUrl')+"/?debug")
+    .then(function () {
+      casper.echo("URL loaded");
+      casper.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 10000);
+    })
+    .run(function () {
+      test.done();
+    });
+});