From 8b1b21368c49198a18cea0068f90b64f158c9fc5 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Sun, 29 Jan 2017 02:42:42 +0100 Subject: [PATCH] add gif export integration test --- src/js/utils/FrameUtils.js | 10 ++ test/casperjs/integration/IntegrationSuite.js | 1 + test/casperjs/integration/include.js | 33 +++++ .../integration/settings/test-export-gif.js | 125 ++++++++++++++++++ 4 files changed, 169 insertions(+) create mode 100644 test/casperjs/integration/settings/test-export-gif.js diff --git a/src/js/utils/FrameUtils.js b/src/js/utils/FrameUtils.js index 9ebc17c..e604f85 100644 --- a/src/js/utils/FrameUtils.js +++ b/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 diff --git a/test/casperjs/integration/IntegrationSuite.js b/test/casperjs/integration/IntegrationSuite.js index 3cd67a7..095c313 100644 --- a/test/casperjs/integration/IntegrationSuite.js +++ b/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', diff --git a/test/casperjs/integration/include.js b/test/casperjs/integration/include.js index 87950ad..dfea8a3 100644 --- a/test/casperjs/integration/include.js +++ b/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);\ + });\ + }'); +} diff --git a/test/casperjs/integration/settings/test-export-gif.js b/test/casperjs/integration/settings/test-export-gif.js new file mode 100644 index 0000000..c3b491d --- /dev/null +++ b/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(); + }); +});