add resize test checking frame content

Moved shared methods to a head.js file
This commit is contained in:
Julian Descottes 2017-01-08 18:15:04 +01:00 committed by juliandescottes
parent 569b508fd5
commit a328e4d20e
10 changed files with 129 additions and 76 deletions

View file

@ -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']);

View file

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

View file

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

View file

@ -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',

View file

@ -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');
});
}

View file

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

View file

@ -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

View file

@ -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');

View file

@ -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');

View file

@ -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');