add resize test checking frame content

Moved shared methods to a head.js file

Gruntfile.js

@@ -37,14 +37,12 @@ module.exports = function(grunt) {
     '--baseUrl=http://' + hostname + ':' + PORT.TEST,
     '--mode=?debug',
     '--verbose=false',
+    '--includes=test/casperjs/integration/include.js',
     '--log-level=info',
     '--print-command=false',
     '--print-file-paths=true',
   ];
 
-  var drawingTestPaths = require('./test/casperjs/TestSuite.js').tests;
-  var drawingTests = prefixPaths(drawingTestPaths, "test/casperjs/");
-
   var integrationTestPaths = require('./test/casperjs/integration/IntegrationSuite.js').tests;
   var integrationTests = prefixPaths(integrationTestPaths, "test/casperjs/integration/");
 
@@ -280,7 +278,7 @@ module.exports = function(grunt) {
     casperjs : {
       drawing : {
         files : {
-          src: drawingTests
+          src: ['test/casperjs/DrawingTest.js']
         },
         options : {
           casperjsOptions: casperjsOptions
@@ -328,7 +326,7 @@ module.exports = function(grunt) {
   // Run unit-tests
   grunt.registerTask('unit-test', ['karma']);
   // Run integration tests
-  grunt.registerTask('test-integration', ['build-dev', 'connect:test', 'casperjs:integration']);
+  grunt.registerTask('integration-test', ['build-dev', 'connect:test', 'casperjs:integration']);
   // Run linting, unit tests, drawing tests and integration tests
   grunt.registerTask('test', ['lint', 'unit-test', 'build-dev', 'connect:test', 'casperjs:drawing', 'casperjs:integration']);
 

test/casperjs/SmokeTest.js

@@ -1,15 +0,0 @@
-casper.test.begin('Smoke Test', 1, function(test) {
-  casper
-    .start(casper.cli.get('baseUrl')+"/?debug")
-    .then(function () {
-      this.echo(casper.cli.get('baseUrl')+"/?debug");
-      this.waitForSelector('#drawing-canvas-container canvas', function() {
-        test.assertExists('#drawing-canvas-container canvas', 'Check if drawing canvas element is created');
-      }, function () {
-        test.fail('Test timed out');
-      }, 10000);
-    })
-    .run(function () {
-      test.done();
-    });
-});

test/casperjs/TestSuite.js

@@ -1,4 +0,0 @@
-(typeof exports != "undefined" ? exports : pskl_exports).tests = [
-  'SmokeTest.js',
-  'DrawingTest.js'
-];

test/casperjs/integration/IntegrationSuite.js

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

test/casperjs/integration/include.js

@@ -0,0 +1,30 @@
+/**
+ * Collection of shared methods for casperjs integration tests.
+ */
+
+function evalLine(line) {
+  return casper.evaluate(
+    'function () {return ' + line + '}'
+  );
+}
+
+function getValue(selector) {
+  return casper.evaluate(
+    'function () { \
+      return document.querySelector(\'' + selector + '\').value;\
+    }');
+}
+
+function isChecked(selector) {
+  return casper.evaluate(
+    'function () { \
+      return document.querySelector(\'' + selector + '\').checked;\
+    }');
+}
+
+function isDrawerExpanded() {
+  return casper.evaluate(function () {
+    var settingsElement = document.querySelector('[data-pskl-controller="settings"]');
+    return settingsElement.classList.contains('expanded');
+  });
+}

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

@@ -0,0 +1,91 @@
+casper.test.begin('Test resize feature works, and check the output', 19, 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
+    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);
+    });
+
+    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');
+
+    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(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');
+  }
+
+  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,18 +1,5 @@
 casper.test.begin('Test updating default size works', 14 , function(test) {
   test.timeout = test.fail.bind(test, ['Test timed out']);
-  function getValue(selector) {
-    return casper.evaluate(
-      'function () { \
-        return document.querySelector(\'' + selector + '\').value;\
-      }');
-  };
-
-  function isDrawerExpanded() {
-    return casper.evaluate(function () {
-      var settingsElement = document.querySelector('[data-pskl-controller="settings"]');
-      return settingsElement.classList.contains('expanded');
-    });
-  }
 
   function onTestStart() {
     test.assertExists('#drawing-canvas-container canvas', 'Piskel ready, test starting');
@@ -53,13 +40,11 @@ casper.test.begin('Test updating default size works', 14 , function(test) {
   function onDrawerClosed() {
     test.assert(!isDrawerExpanded(), 'settings drawer is closed');
 
-    test.assertEquals(casper.evaluate(function () {
+    test.assertEquals(evalLine('pskl.UserSettings.get("DEFAULT_SIZE").width'),
-      return pskl.UserSettings.get('DEFAULT_SIZE').width;
+      321, 'Piskel width is now 321 pixels');
-    }), 321, 'Piskel width is now 321 pixels');
 
-    test.assertEquals(casper.evaluate(function () {
+    test.assertEquals(evalLine('pskl.UserSettings.get("DEFAULT_SIZE").height'),
-      return pskl.UserSettings.get('DEFAULT_SIZE').height;
+      322, 'Piskel height is now 322 pixels');
-    }), 322, 'Piskel default height is now 322 pixels');
   }
 
   casper

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

@@ -1,18 +1,5 @@
 casper.test.begin('Test resize panel width/height inputs are synchronized', 28 , function(test) {
   test.timeout = test.fail.bind(test, ['Test timed out']);
-  function getValue(selector) {
-    return casper.evaluate(
-      'function () { \
-        return document.querySelector(\'' + selector + '\').value;\
-      }');
-  };
-
-  function isDrawerExpanded() {
-    return casper.evaluate(function () {
-      var settingsElement = document.querySelector('[data-pskl-controller="settings"]');
-      return settingsElement.classList.contains('expanded');
-    });
-  }
 
   function onTestStart() {
     test.assertExists('#drawing-canvas-container canvas', 'Piskel ready, test starting');

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

@@ -1,18 +1,5 @@
 casper.test.begin('Test resize feature works', 16 , function(test) {
   test.timeout = test.fail.bind(test, ['Test timed out']);
-  function getValue(selector) {
-    return casper.evaluate(
-      'function () { \
-        return document.querySelector(\'' + selector + '\').value;\
-      }');
-  };
-
-  function isDrawerExpanded() {
-    return casper.evaluate(function () {
-      var settingsElement = document.querySelector('[data-pskl-controller="settings"]');
-      return settingsElement.classList.contains('expanded');
-    });
-  }
 
   function onTestStart() {
     test.assertExists('#drawing-canvas-container canvas', 'Piskel ready, test starting');

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

@@ -1,13 +1,6 @@
 casper.test.begin('Settings Test', 18, function(test) {
   test.timeout = test.fail.bind(test, ['Test timed out']);
 
-  function isDrawerExpanded() {
-    return casper.evaluate(function () {
-      var settingsElement = document.querySelector('[data-pskl-controller="settings"]');
-      return settingsElement.classList.contains('expanded');
-    });
-  }
-
   function onTestStart() {
     test.assertExists('#drawing-canvas-container canvas', 'Piskel ready, test starting');