diff --git a/Gruntfile.js b/Gruntfile.js index 95d7042..ce748c5 100644 --- a/Gruntfile.js +++ b/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']); diff --git a/test/casperjs/SmokeTest.js b/test/casperjs/SmokeTest.js deleted file mode 100644 index 4b5ebb1..0000000 --- a/test/casperjs/SmokeTest.js +++ /dev/null @@ -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(); - }); -}); \ No newline at end of file diff --git a/test/casperjs/TestSuite.js b/test/casperjs/TestSuite.js deleted file mode 100644 index bb4c077..0000000 --- a/test/casperjs/TestSuite.js +++ /dev/null @@ -1,4 +0,0 @@ -(typeof exports != "undefined" ? exports : pskl_exports).tests = [ - 'SmokeTest.js', - 'DrawingTest.js' -]; \ No newline at end of file diff --git a/test/casperjs/integration/IntegrationSuite.js b/test/casperjs/integration/IntegrationSuite.js index bcc2139..a0cc377 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-resize-complete.js', 'settings/test-resize-default-size.js', 'settings/test-resize-input-synchronization.js', 'settings/test-resize.js', diff --git a/test/casperjs/integration/include.js b/test/casperjs/integration/include.js new file mode 100644 index 0000000..9e0c3bd --- /dev/null +++ b/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'); + }); +} diff --git a/test/casperjs/integration/settings/test-resize-complete.js b/test/casperjs/integration/settings/test-resize-complete.js new file mode 100644 index 0000000..a4be944 --- /dev/null +++ b/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(); + }); +}); \ No newline at end of file diff --git a/test/casperjs/integration/settings/test-resize-default-size.js b/test/casperjs/integration/settings/test-resize-default-size.js index 0920537..0de2b58 100644 --- a/test/casperjs/integration/settings/test-resize-default-size.js +++ b/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 () { - return pskl.UserSettings.get('DEFAULT_SIZE').width; - }), 321, 'Piskel width is now 321 pixels'); + test.assertEquals(evalLine('pskl.UserSettings.get("DEFAULT_SIZE").width'), + 321, 'Piskel width is now 321 pixels'); - test.assertEquals(casper.evaluate(function () { - return pskl.UserSettings.get('DEFAULT_SIZE').height; - }), 322, 'Piskel default height is now 322 pixels'); + test.assertEquals(evalLine('pskl.UserSettings.get("DEFAULT_SIZE").height'), + 322, 'Piskel height is now 322 pixels'); } casper diff --git a/test/casperjs/integration/settings/test-resize-input-synchronization.js b/test/casperjs/integration/settings/test-resize-input-synchronization.js index df6e401..852210f 100644 --- a/test/casperjs/integration/settings/test-resize-input-synchronization.js +++ b/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'); diff --git a/test/casperjs/integration/settings/test-resize.js b/test/casperjs/integration/settings/test-resize.js index 37a2b0e..da0214e 100644 --- a/test/casperjs/integration/settings/test-resize.js +++ b/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'); diff --git a/test/casperjs/integration/settings/test-settings-open-panels-on-click.js b/test/casperjs/integration/settings/test-settings-open-panels-on-click.js index ea60e4f..5d628da 100644 --- a/test/casperjs/integration/settings/test-settings-open-panels-on-click.js +++ b/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');