Add integration tests for resize content and resize from other origin

test/casperjs/integration/IntegrationSuite.js

@@ -1,7 +1,9 @@
 (typeof exports != "undefined" ? exports : pskl_exports).tests = [
   'settings/test-resize-complete.js',
+  'settings/test-resize-content-complete.js',
   'settings/test-resize-default-size.js',
   'settings/test-resize-input-synchronization.js',
   'settings/test-resize.js',
+  'settings/test-resize-origin.js',
   'settings/test-settings-open-panels-on-click.js',
 ];

test/casperjs/integration/include.js

@@ -1,3 +1,5 @@
+/* globals casper */
+
 /**
  * Collection of shared methods for casperjs integration tests.
  */
@@ -22,6 +24,32 @@ function isChecked(selector) {
     }');
 }
 
+function setPiskelFromGrid(grid) {
+  casper.evaluate(
+    'function () {\
+      var B = "#000000", T = Constants.TRANSPARENT_COLOR;\
+      var frame = pskl.model.Frame.fromPixelGrid(' + grid + ');\
+      var layer = pskl.model.Layer.fromFrames("l1", [frame]);\
+      var piskel = pskl.model.Piskel.fromLayers([layer], 12, {name : "test", description : ""});\
+      pskl.app.piskelController.setPiskel(piskel);\
+    }');
+}
+
+function piskelFrameEqualsGrid(grid, layer, frame) {
+  return casper.evaluate(
+    'function () {\
+      var B = "#000000", T = Constants.TRANSPARENT_COLOR;\
+      var piskel = pskl.app.piskelController.getPiskel();\
+      var frame = piskel.getLayerAt(' + layer +').getFrameAt(' + frame + ');\
+      var grid = ' + grid +';\
+      var isValid = true;\
+      frame.forEachPixel(function (color, col, row) {\
+        isValid = isValid && pskl.utils.colorToInt(color) === pskl.utils.colorToInt(grid[row][col]);\
+      });\
+      return isValid;\
+    }');
+}
+
 function isDrawerExpanded() {
   return casper.evaluate(function () {
     var settingsElement = document.querySelector('[data-pskl-controller="settings"]');

test/casperjs/integration/settings/test-resize-complete.js

@@ -1,3 +1,5 @@
+/* globals casper, setPiskelFromGrid, piskelFrameEqualsGrid, isDrawerExpanded, getValue, isChecked, evalLine */
+
 casper.test.begin('Test resize feature works, and check the output', 19, function(test) {
   test.timeout = test.fail.bind(test, ['Test timed out']);
 
@@ -5,16 +7,8 @@ casper.test.begin('Test resize feature works, and check the output', 19, functio
     test.assertExists('#drawing-canvas-container canvas', 'Piskel ready, test starting');
 
     // Setup test Piskel
-    casper.evaluate(function () {
-      var B = '#000000', T = Constants.TRANSPARENT_COLOR;
-      var frame = pskl.model.Frame.fromPixelGrid([
-        [B, T],
-        [T, B]
-      ]);
-      var layer = pskl.model.Layer.fromFrames('l1', [frame]);
-      var piskel = pskl.model.Piskel.fromLayers([layer], 12, {name : 'test', description : ''});
-      pskl.app.piskelController.setPiskel(piskel);
-    });
+    setPiskelFromGrid('[[B, T],' +
+                      ' [T, B]]');
 
     test.assert(!isDrawerExpanded(), 'settings drawer is closed');
     test.assertDoesntExist('.settings-section-resize', 'Check if resize settings drawer is closed');
@@ -62,21 +56,13 @@ casper.test.begin('Test resize feature works, and check the output', 19, functio
     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');
 
-    test.assert(casper.evaluate(function () {
-      var B = '#000000', T = Constants.TRANSPARENT_COLOR;
-      var frame = pskl.app.piskelController.getPiskel().getLayerAt(0).getFrameAt(0);
-      var grid = [
-        [B, T, T, T],
-        [T, B, T, T],
-        [T, T, T, T],
-        [T, T, T, T],
-      ]
-      var isValid = true;
-      frame.forEachPixel(function (color, col, row) {
-        isValid = isValid && pskl.utils.colorToInt(color) === pskl.utils.colorToInt(grid[row][col]);
-      });
-      return isValid;
-    }), 'Resized piskel content is as expected');
+    // Check that the piskel content has been resized.
+    test.assert(piskelFrameEqualsGrid('[\
+      [B, T, T, T],                     \
+      [T, B, T, T],                     \
+      [T, T, T, T],                     \
+      [T, T, T, T],                     \
+    ]', 0, 0), 'Resized piskel content is as expected');
   }
 
   casper

test/casperjs/integration/settings/test-resize-content-complete.js

@@ -0,0 +1,78 @@
+/* globals casper, setPiskelFromGrid, piskelFrameEqualsGrid, isDrawerExpanded, getValue, isChecked, evalLine */
+
+casper.test.begin('Test resize content works, and check the output', 18, function(test) {
+  test.timeout = test.fail.bind(test, ['Test timed out']);
+
+  function onTestStart() {
+    test.assertExists('#drawing-canvas-container canvas', 'Piskel ready, test starting');
+
+    // Setup test Piskel
+    setPiskelFromGrid('[[B, T],' +
+                      ' [T, B]]');
+
+    test.assert(!isDrawerExpanded(), 'settings drawer is closed');
+    test.assertDoesntExist('.settings-section-resize', 'Check if resize settings drawer is closed');
+
+    // Open resize panel.
+    this.click('[data-setting="resize"]');
+    this.waitForSelector('.settings-section-resize', onResizePanelReady, test.timeout, 10000);
+  }
+
+  function onResizePanelReady() {
+    test.assert(isDrawerExpanded(), 'settings drawer is expanded');
+    test.assertExists('.settings-section-resize', 'Check if resize panel is opened');
+
+    // Check resize inputs have the proper initial values
+    test.assertEquals(getValue('[name="resize-width"]'), "2", 'Resize width is 2px');
+    test.assertEquals(getValue('[name="resize-height"]'), "2", 'Resize height is 2px');
+    // Check that the resize ratio checkbox is available and checked.
+    test.assertExists('.resize-ratio-checkbox', 'Check if resize ratio checkbox is available');
+    test.assert(isChecked('.resize-ratio-checkbox'), 'Keep ratio checkbox is checked');
+
+    // Update width/height
+    casper.sendKeys('[name="resize-width"]', casper.page.event.key.Backspace);
+    casper.sendKeys('[name="resize-width"]', "4");
+    // Check resize inputs have the proper value
+    test.assertEquals(getValue('[name="resize-width"]'), "4", 'Resize width is 4px');
+    test.assertEquals(getValue('[name="resize-height"]'), "4", 'Resize height is 4px');
+
+    test.assertExists('.resize-content-checkbox', 'Check if resize ratio checkbox is available');
+    test.assert(!isChecked('.resize-content-checkbox'), 'Keep content checkbox is unchecked');
+    test.assertExists('.resize-origin-container:not(.disabled)', 'Check the resize origin widget is currently disabled');
+
+    casper.click('.resize-content-checkbox');
+    // Enabling "Resize content" will disabled the resize origin widget.
+    casper.waitForSelector('.resize-origin-container.disabled', onResizeOriginDisabled, test.timeout, 10000);
+  }
+
+  function onResizeOriginDisabled() {
+    casper.click('.resize-button');
+    // Resizing the piskel should close the panel automatically
+    casper.waitForSelector('[data-pskl-controller="settings"]:not(.expanded)', onDrawerClosed, test.timeout, 10000);
+  }
+
+  function onDrawerClosed() {
+    test.assert(!isDrawerExpanded(), 'settings drawer is closed');
+
+    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), 'Resized piskel content is as expected');
+  }
+
+  casper
+    .start(casper.cli.get('baseUrl')+"/?debug")
+    .then(function () {
+      this.echo("URL loaded");
+      this.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 10000);
+    })
+    .run(function () {
+      test.done();
+    });
+});

test/casperjs/integration/settings/test-resize-default-size.js

@@ -1,3 +1,5 @@
+/* globals casper, setPiskelFromGrid, isDrawerExpanded, getValue, isChecked, evalLine */
+
 casper.test.begin('Test updating default size works', 14 , function(test) {
   test.timeout = test.fail.bind(test, ['Test timed out']);
 

test/casperjs/integration/settings/test-resize-input-synchronization.js

@@ -1,3 +1,5 @@
+/* globals casper, setPiskelFromGrid, isDrawerExpanded, getValue, isChecked, evalLine */
+
 casper.test.begin('Test resize panel width/height inputs are synchronized', 28 , function(test) {
   test.timeout = test.fail.bind(test, ['Test timed out']);
 

test/casperjs/integration/settings/test-resize-origin.js

@@ -0,0 +1,86 @@
+/* globals casper, setPiskelFromGrid, piskelFrameEqualsGrid, isDrawerExpanded, getValue, isChecked, evalLine */
+
+casper.test.begin('Test resize feature works, and check the output', 20, function(test) {
+  test.timeout = test.fail.bind(test, ['Test timed out']);
+
+  function onTestStart() {
+    test.assertExists('#drawing-canvas-container canvas', 'Piskel ready, test starting');
+
+    // Setup test Piskel
+    setPiskelFromGrid('[[B, T],' +
+                      ' [T, B]]');
+
+    test.assert(!isDrawerExpanded(), 'settings drawer is closed');
+    test.assertDoesntExist('.settings-section-resize', 'Check if resize settings drawer is closed');
+
+    // Open resize panel.
+    this.click('[data-setting="resize"]');
+    this.waitForSelector('.settings-section-resize', onResizePanelReady, test.timeout, 10000);
+  }
+
+  function onResizePanelReady() {
+    test.assert(isDrawerExpanded(), 'settings drawer is expanded');
+    test.assertExists('.settings-section-resize', 'Check if resize panel is opened');
+
+    testResizePiskel();
+  }
+
+  function testResizePiskel() {
+    test.assertExists('[name="resize-width"]', 'Check if width input is available');
+    test.assertExists('[name="resize-height"]', 'Check if height input is available');
+
+    test.assertEquals(getValue('[name="resize-width"]'), "2", 'Resize width is 2px');
+    test.assertEquals(getValue('[name="resize-height"]'), "2", 'Resize height is 2px');
+
+    // Check that the resize ratio checkbox is available and checked.
+    test.assertExists('.resize-ratio-checkbox', 'Check if resize ratio checkbox is available');
+    test.assert(isChecked('.resize-ratio-checkbox'), 'Keep ratio checkbox is checked');
+
+    // Update width/height
+    casper.sendKeys('[name="resize-width"]', casper.page.event.key.Backspace);
+    casper.sendKeys('[name="resize-width"]', "4");
+    test.assertEquals(getValue('[name="resize-width"]'), "4", 'Resize width is 4px');
+    test.assertEquals(getValue('[name="resize-height"]'), "4", 'Resize height is 4px');
+
+    test.assertExists('.resize-content-checkbox', 'Check if resize ratio checkbox is available');
+    test.assert(!isChecked('.resize-content-checkbox'), 'Keep content checkbox is unchecked');
+
+    // Check that the default origin selected is top left.
+    var selectedOrigin = evalLine('document.querySelector(".resize-origin-option.selected").getAttribute("data-origin")');
+    test.assertEquals(selectedOrigin, 'TOPLEFT');
+
+    // Change the origin to bottom right.
+    casper.click('[data-origin="BOTTOMRIGHT"]');
+    casper.waitForSelector('[data-origin="BOTTOMRIGHT"].selected', onBottomRightOriginSelected, test.timeout, 10000);
+  }
+
+  function onBottomRightOriginSelected() {
+    casper.click('.resize-button');
+    // Resizing the piskel should close the panel automatically
+    casper.waitForSelector('[data-pskl-controller="settings"]:not(.expanded)', onDrawerClosed, test.timeout, 10000);
+  }
+
+  function onDrawerClosed() {
+    test.assert(!isDrawerExpanded(), 'settings drawer is closed');
+
+    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');
+
+    test.assert(piskelFrameEqualsGrid('[\
+      [T, T, T, T],                     \
+      [T, T, T, T],                     \
+      [T, T, B, T],                     \
+      [T, T, T, B],                     \
+    ]', 0, 0), 'Resized piskel content is as expected');
+  }
+
+  casper
+    .start(casper.cli.get('baseUrl')+"/?debug")
+    .then(function () {
+      this.echo("URL loaded");
+      this.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 10000);
+    })
+    .run(function () {
+      test.done();
+    });
+});

test/casperjs/integration/settings/test-resize.js

@@ -1,3 +1,5 @@
+/* globals casper, setPiskelFromGrid, isDrawerExpanded, getValue, isChecked, evalLine */
+
 casper.test.begin('Test resize feature works', 16 , function(test) {
   test.timeout = test.fail.bind(test, ['Test timed out']);
 

test/casperjs/integration/settings/test-settings-open-panels-on-click.js

@@ -1,3 +1,5 @@
+/* globals casper, setPiskelFromGrid, isDrawerExpanded, getValue, isChecked, evalLine */
+
 casper.test.begin('Settings Test', 18, function(test) {
   test.timeout = test.fail.bind(test, ['Test timed out']);