piskel/test/casperjs/integration/settings/test-export-png-scale.js

/* globals casper, setPiskelFromGrid, isDrawerExpanded, getValue, isChecked,
   evalLine, waitForEvent, piskelFrameEqualsGrid, replaceFunction, setPiskelFromImageSrc */

casper.test.begin('PNG export test, with 2x scaling', 16, 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');

        // Setup test Piskel
    setPiskelFromGrid('['+
      '[B, T],' +
      '[T, B],' +
    ']');

    // 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() {
    casper.echo('Export panel ready');

    test.assert(isDrawerExpanded(), 'settings drawer is expanded');
    test.assertExists('.settings-section-export', 'Check if export panel is opened');

    // Switch to PNG export tab.
    test.assertDoesntExist('.export-panel-png', 'Check if PNG export panel is hidden');
    casper.click('[data-tab-id="png"]');

    casper.waitForSelector('.export-panel-png', onPngExportTabReady, test.timeout, 10000);
  }

  function onPngExportTabReady() {
    casper.echo('Png export tab ready');

    replaceFunction(test,
      'pskl.controller.settings.exportimage.PngExportController.prototype.downloadCanvas_',
      function (canvas) {
        window.casperImageData = canvas.toDataURL('image/png');
        var el = document.createElement("div");
        el.id = "casper-imagedata-ready";
        document.body.appendChild(el);
      }
    );

    casper.echo('Test that the scaling works');

    test.assertExists('[name="resize-width"]', 'The resize width input is available');
    casper.sendKeys('[name="resize-width"]', casper.page.event.key.Backspace);
    casper.sendKeys('[name="resize-width"]', "4");

    // Check the scale and height inputs have been synchronized as expected.
    test.assertEquals(getValue('[name="scale-input"]'), "2", 'Resize scale is 2');
    test.assertEquals(getValue('[name="resize-height"]'), "4", 'Resize height is 4px');
    test.assertEquals(getValue('[name="resize-height"]'), "4", 'Resize height is 4px');

    casper.echo('Clicking on Download PNG button');
    casper.click('.png-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');

    // Check the exported gif is valid
    test.assert(imageData.indexOf('data:image/png;base64') === 0, 'The png image data was generated');

    // Recreate a new piskel from the source
    waitForEvent('PISKEL_RESET', onPiskelReset, test.timeout);
    setPiskelFromImageSrc(imageData);
  }

  function onPiskelReset() {
    casper.echo('Received PISKEL_RESET event after loading piskel from scaled GIF source');

    // Check the expected piskel was correctly loaded.
    test.assertEquals(evalLine('pskl.app.piskelController.getPiskel().getWidth()'), 4, 'Piskel width is now 4 pixels');
    test.assertEquals(evalLine('pskl.app.piskelController.getPiskel().getHeight()'), 4, 'Piskel height is now 4 pixels');

    // Check that the piskel content has been resized.
    test.assert(piskelFrameEqualsGrid('['+
      '[B, B, T, T],' +
      '[B, B, T, T],' +
      '[T, T, B, B],' +
      '[T, T, B, B],' +
    ']', 0, 0), 'Scaled piskel content is as expected');

    // 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();
    });
});