Merge pull request #607 from juliandescottes/controller-tests

Add first integration tests

Gruntfile.js

@@ -32,8 +32,19 @@ module.exports = function(grunt) {
   var stylePaths = require('./src/piskel-style-list.js').styles;
   var piskelStyles = prefixPaths(stylePaths, "src/");
 
-  var casperTestPaths = require('./test/casperjs/TestSuite.js').tests;
-  var casperTests = prefixPaths(casperTestPaths, "test/casperjs/");
+  // Casper JS tests
+  var casperjsOptions = [
+    '--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 integrationTestPaths = require('./test/casperjs/integration/IntegrationSuite.js').tests;
+  var integrationTests = prefixPaths(integrationTestPaths, "test/casperjs/integration/");
 
   var getConnectConfig = function (base, port, host) {
     if (typeof base === 'string') {
@@ -265,19 +276,22 @@ module.exports = function(grunt) {
     },
 
     casperjs : {
-      files : {
-        src: casperTests
-      },
-      options : {
-        casperjsOptions: [
-          '--baseUrl=http://' + hostname + ':' + PORT.TEST,
-          '--mode=?debug',
-          '--verbose=false',
-          '--log-level=info',
-          '--print-command=false',
-          '--print-file-paths=true',
-        ]
+      drawing : {
+        files : {
+          src: ['test/casperjs/DrawingTest.js']
+        },
+        options : {
+          casperjsOptions: casperjsOptions
+        }
       },
+      integration : {
+        files : {
+          src: integrationTests
+        },
+        options : {
+          casperjsOptions: casperjsOptions
+        }
+      }
     },
 
     /**
@@ -311,11 +325,14 @@ module.exports = function(grunt) {
   grunt.registerTask('lint', ['jscs:js', 'leadingIndent:css', 'jshint']);
   // Run unit-tests
   grunt.registerTask('unit-test', ['karma']);
-  // Run linting, unit tests and drawing tests
-  grunt.registerTask('test', ['lint', 'unit-test', 'build-dev', 'connect:test', 'casperjs']);
+  // Run integration tests
+  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']);
 
   // Run the tests, even if the linting fails
-  grunt.registerTask('test-nolint', ['unit-test', 'build-dev', 'connect:test', 'casperjs']);
+  grunt.registerTask('test-nolint', ['unit-test', 'build-dev', 'connect:test', 'casperjs:drawing', 'casperjs:integration']);
+
   // Used by optional precommit hook
   grunt.registerTask('precommit', ['test']);
 

src/js/controller/settings/exportimage/PngExportController.js

@@ -3,11 +3,9 @@
 
   var dimensionInfoPattern = '{{width}} x {{height}} px, {{frames}}<br/>{{columns}}, {{rows}}.';
 
-  // Shortcut to pskl.utils.Template.replace
   var replace = pskl.utils.Template.replace;
 
-  // Helper to return "X items" or "1 item" if X is 1. Can be cnsidered as an overkill,
-  // but the one-liner equivalent is hard to read.
+  // Helper to return "X items" or "1 item" if X is 1.
   var pluralize = function (word, count) {
     if (count === 1) {
       return '1 ' + word;
@@ -120,7 +118,7 @@
       value = 1;
     }
 
-    // Force the value to be in bounds, in the user tried to update it by directly typing
+    // Force the value to be in bounds, if the user tried to update it by directly typing
     // a value.
     value = pskl.utils.Math.minmax(value, 1, this.piskelController.getFrameCount());
     this.columnsInput.value = value;

src/templates/settings/application.html

@@ -24,7 +24,7 @@
       </div>
 
       <div class="settings-item">
-        <label for="grid-width">Pixel Grid</label>
+        <label for="grid-width">Pixel grid</label>
         <select id="grid-width" class="grid-width-select">
           <option value="0">Disabled</option>
           <option value="1">1px</option>
@@ -35,7 +35,7 @@
       </div>
 
       <div class="settings-item">
-        <label>Layer Opacity</label>
+        <label>Layer opacity</label>
         <input type="range" class="settings-opacity-input layer-opacity-input" name="layer-opacity" min="0"  max="1" step="0.05"/>
         <span class="settings-opacity-text layer-opacity-text"></span>
       </div>

src/templates/settings/resize.html

@@ -61,7 +61,7 @@
           <input type="text" class="textfield resize-size-field" autocomplete="off" name="default-height"/>
           <span>px</span>
         </div>
-        <input type="submit" class="button button-primary resize-button" value="Set default" />
+        <input type="submit" class="button button-primary default-size-button" value="Set default" />
       </form>
     </div>
   </div>

test/casperjs/DrawingTest.js

@@ -40,5 +40,4 @@
 
     runTest(0);
   });
-
-})();
+})();

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

@@ -0,0 +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

@@ -0,0 +1,58 @@
+/* globals casper */
+
+/**
+ * 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 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"]');
+    return settingsElement.classList.contains('expanded');
+  });
+}

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

@@ -0,0 +1,77 @@
+/* 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']);
+
+  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');
+
+    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, T, T, T],                     \
+      [T, B, T, T],                     \
+      [T, T, T, T],                     \
+      [T, T, T, T],                     \
+    ]', 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-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

@@ -0,0 +1,61 @@
+/* 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']);
+
+  function onTestStart() {
+    test.assertExists('#drawing-canvas-container canvas', 'Piskel ready, test starting');
+
+    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');
+
+    testSetDefaultSize();
+  }
+
+  function testSetDefaultSize() {
+    test.assertExists('[name="default-width"]', 'Check if width input is available');
+    test.assertExists('[name="default-height"]', 'Check if height input is available');
+
+    test.assertEquals(getValue('[name="default-width"]'), "32", 'Default width is 32px');
+    test.assertEquals(getValue('[name="default-height"]'), "32", 'Default height is 32px');
+
+    // Update width/height
+    casper.sendKeys('[name="default-width"]', "1");
+    casper.sendKeys('[name="default-height"]', "2");
+    test.assertEquals(getValue('[name="default-width"]'), "321", 'Default width is 321px');
+    test.assertEquals(getValue('[name="default-height"]'), "322", 'Default height is 322px');
+
+    casper.click('.default-size-button');
+    // Changing the piskel default size 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.UserSettings.get("DEFAULT_SIZE").width'),
+      321, 'Piskel width is now 321 pixels');
+
+    test.assertEquals(evalLine('pskl.UserSettings.get("DEFAULT_SIZE").height'),
+      322, 'Piskel height is now 322 pixels');
+  }
+
+  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-input-synchronization.js

@@ -0,0 +1,97 @@
+/* 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']);
+
+  function onTestStart() {
+    test.assertExists('#drawing-canvas-container canvas', 'Piskel ready, test starting');
+
+    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');
+
+    testInputSynchronization();
+  }
+
+  function testInputSynchronization() {
+    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"]'), "32", 'Resize width is 32px');
+    test.assertEquals(getValue('[name="resize-height"]'), "32", 'Resize height is 32px');
+
+    // Check that the resize ratio checkbox is available and checked.
+    test.assertExists('.resize-ratio-checkbox', 'Check if resize ratio checkbox is available');
+    test.assert(casper.evaluate(function () {
+      return document.querySelector('.resize-ratio-checkbox').checked;
+    }), 'Keep ratio checkbox is checked');
+
+    // Check inputs are synchronized
+    casper.sendKeys('[name="resize-width"]', casper.page.event.key.Backspace);
+    test.assertEquals(getValue('[name="resize-width"]'), "3", 'Resize width is 3px');
+    test.assertEquals(getValue('[name="resize-height"]'), "3", 'Resize height is 3px');
+
+    casper.sendKeys('[name="resize-width"]', "0");
+    test.assertEquals(getValue('[name="resize-width"]'), "30", 'Resize width is 30px');
+    test.assertEquals(getValue('[name="resize-height"]'), "30", 'Resize height is 30px');
+
+    // Check the synchronization also works when editing height field
+    casper.sendKeys('[name="resize-height"]', "0");
+    test.assertEquals(getValue('[name="resize-width"]'), "300", 'Resize width is 300px');
+    test.assertEquals(getValue('[name="resize-height"]'), "300", 'Resize height is 300px');
+
+    casper.sendKeys('[name="resize-height"]', casper.page.event.key.Backspace);
+    test.assertEquals(getValue('[name="resize-width"]'), "30", 'Resize width is 30px');
+    test.assertEquals(getValue('[name="resize-height"]'), "30", 'Resize height is 30px');
+
+    // Uncheck the resize ratio checkbox.
+    casper.click('.resize-ratio-checkbox');
+
+    // Check inputs are no longer synchronized
+    casper.sendKeys('[name="resize-width"]', casper.page.event.key.Backspace);
+    test.assertEquals(getValue('[name="resize-width"]'), "3", 'Resize width is 3px');
+    test.assertEquals(getValue('[name="resize-height"]'), "30", 'Resize height is 30px');
+
+    casper.sendKeys('[name="resize-width"]', "2");
+    test.assertEquals(getValue('[name="resize-width"]'), "32", 'Resize width is 32px');
+    test.assertEquals(getValue('[name="resize-height"]'), "30", 'Resize height is 30px');
+
+    casper.sendKeys('[name="resize-height"]', casper.page.event.key.Backspace);
+    test.assertEquals(getValue('[name="resize-width"]'), "32", 'Resize width is 32px');
+    test.assertEquals(getValue('[name="resize-height"]'), "3", 'Resize height is 3px');
+
+    casper.sendKeys('[name="resize-height"]', "2");
+    test.assertEquals(getValue('[name="resize-width"]'), "32", 'Resize width is 32px');
+    test.assertEquals(getValue('[name="resize-height"]'), "32", 'Resize height is 32px');
+
+    // Check the resize ratio checkbox again
+    casper.click('.resize-ratio-checkbox');
+
+    // Send ESCAPE to close the resize panel. (!!! does not work for some reason ...)
+    // casper.page.sendEvent('keydown', casper.page.event.key.Escape);
+    casper.click('[data-setting="resize"]');
+    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 () {
+      this.echo("URL loaded");
+      this.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 10000);
+    })
+    .run(function () {
+      test.done();
+    });
+});

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

@@ -0,0 +1,63 @@
+/* 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']);
+
+  function onTestStart() {
+    test.assertExists('#drawing-canvas-container canvas', 'Piskel ready, test starting');
+
+    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"]'), "32", 'Resize width is 32px');
+    test.assertEquals(getValue('[name="resize-height"]'), "32", 'Resize height is 32px');
+
+    // Check that the resize ratio checkbox is available and checked.
+    test.assertExists('.resize-ratio-checkbox', 'Check if resize ratio checkbox is available');
+    test.assert(casper.evaluate(function () {
+      return document.querySelector('.resize-ratio-checkbox').checked;
+    }), 'Keep ratio checkbox is checked');
+
+    // Update width/height
+    casper.sendKeys('[name="resize-width"]', "0");
+    test.assertEquals(getValue('[name="resize-width"]'), "320", 'Resize width is 320px');
+    test.assertEquals(getValue('[name="resize-height"]'), "320", 'Resize height is 320px');
+
+    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()'), 320, 'Piskel width is now 320 pixels');
+    test.assertEquals(evalLine('pskl.app.piskelController.getPiskel().getHeight()'), 320, 'Piskel height is now 320 pixels');
+  }
+
+  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-settings-open-panels-on-click.js

@@ -0,0 +1,83 @@
+/* globals casper, setPiskelFromGrid, isDrawerExpanded, getValue, isChecked, evalLine */
+
+casper.test.begin('Settings Test', 18, 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');
+    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');
+
+    // Open application settings panel.
+    test.assertDoesntExist('.settings-section-application', 'Check if application settings panel is closed');
+    this.click('[data-setting="user"]');
+
+    this.waitForSelector('.settings-section-application', onApplicationPanelReady, test.timeout, 10000);
+  }
+
+  function onApplicationPanelReady() {
+    test.assert(isDrawerExpanded(), 'settings drawer is expanded');
+    test.assertExists('.settings-section-application', 'Check if application settings panel is opened');
+
+    // Open save panel.
+    test.assertDoesntExist('.settings-section-save', 'Check if save panel is closed');
+    this.click('[data-setting="save"]');
+
+    this.waitForSelector('.settings-section-save', onSavePanelReady, test.timeout, 10000);
+  }
+
+  function onSavePanelReady() {
+    test.assert(isDrawerExpanded(), 'settings drawer is expanded');
+    test.assertExists('.settings-section-save', 'Check if save panel is opened');
+
+    // Open export panel.
+    test.assertDoesntExist('.settings-section-export', 'Check if export panel is closed');
+    this.click('[data-setting="export"]');
+
+    this.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');
+
+    // Open import panel.
+    test.assertDoesntExist('.settings-section-import', 'Check if import panel is closed');
+    this.click('[data-setting="import"]');
+
+    this.waitForSelector('.settings-section-import', onImportPanelReady, test.timeout, 10000);
+  }
+
+  function onImportPanelReady() {
+    test.assert(isDrawerExpanded(), 'settings drawer is expanded');
+    test.assertExists('.settings-section-import', 'Check if import panel is opened');
+
+    // Click on import again to close the settings drawer.
+    this.click('[data-setting="import"]');
+    this.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 () {
+      this.echo("URL loaded");
+      this.waitForSelector('#drawing-canvas-container canvas', onTestStart, test.timeout, 10000);
+    })
+    .run(function () {
+      test.done();
+    });
+});