mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Add integration tests for resize content and resize from other origin
This commit is contained in:
parent
a328e4d20e
commit
70085bc056
|
@ -1,7 +1,9 @@
|
||||||
(typeof exports != "undefined" ? exports : pskl_exports).tests = [
|
(typeof exports != "undefined" ? exports : pskl_exports).tests = [
|
||||||
'settings/test-resize-complete.js',
|
'settings/test-resize-complete.js',
|
||||||
|
'settings/test-resize-content-complete.js',
|
||||||
'settings/test-resize-default-size.js',
|
'settings/test-resize-default-size.js',
|
||||||
'settings/test-resize-input-synchronization.js',
|
'settings/test-resize-input-synchronization.js',
|
||||||
'settings/test-resize.js',
|
'settings/test-resize.js',
|
||||||
|
'settings/test-resize-origin.js',
|
||||||
'settings/test-settings-open-panels-on-click.js',
|
'settings/test-settings-open-panels-on-click.js',
|
||||||
];
|
];
|
|
@ -1,3 +1,5 @@
|
||||||
|
/* globals casper */
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Collection of shared methods for casperjs integration tests.
|
* 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() {
|
function isDrawerExpanded() {
|
||||||
return casper.evaluate(function () {
|
return casper.evaluate(function () {
|
||||||
var settingsElement = document.querySelector('[data-pskl-controller="settings"]');
|
var settingsElement = document.querySelector('[data-pskl-controller="settings"]');
|
||||||
|
|
|
@ -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) {
|
casper.test.begin('Test resize feature works, and check the output', 19, function(test) {
|
||||||
test.timeout = test.fail.bind(test, ['Test timed out']);
|
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');
|
test.assertExists('#drawing-canvas-container canvas', 'Piskel ready, test starting');
|
||||||
|
|
||||||
// Setup test Piskel
|
// Setup test Piskel
|
||||||
casper.evaluate(function () {
|
setPiskelFromGrid('[[B, T],' +
|
||||||
var B = '#000000', T = Constants.TRANSPARENT_COLOR;
|
' [T, B]]');
|
||||||
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.assert(!isDrawerExpanded(), 'settings drawer is closed');
|
||||||
test.assertDoesntExist('.settings-section-resize', 'Check if resize 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().getWidth()'), 4, 'Piskel width is now 4 pixels');
|
||||||
test.assertEquals(evalLine('pskl.app.piskelController.getPiskel().getHeight()'), 4, 'Piskel height is now 4 pixels');
|
test.assertEquals(evalLine('pskl.app.piskelController.getPiskel().getHeight()'), 4, 'Piskel height is now 4 pixels');
|
||||||
|
|
||||||
test.assert(casper.evaluate(function () {
|
// Check that the piskel content has been resized.
|
||||||
var B = '#000000', T = Constants.TRANSPARENT_COLOR;
|
test.assert(piskelFrameEqualsGrid('[\
|
||||||
var frame = pskl.app.piskelController.getPiskel().getLayerAt(0).getFrameAt(0);
|
[B, T, T, T], \
|
||||||
var grid = [
|
[T, B, T, T], \
|
||||||
[B, T, T, T],
|
[T, T, T, T], \
|
||||||
[T, B, T, T],
|
[T, T, T, T], \
|
||||||
[T, T, T, T],
|
]', 0, 0), 'Resized piskel content is as expected');
|
||||||
[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
|
casper
|
||||||
|
|
|
@ -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();
|
||||||
|
});
|
||||||
|
});
|
|
@ -1,3 +1,5 @@
|
||||||
|
/* globals casper, setPiskelFromGrid, isDrawerExpanded, getValue, isChecked, evalLine */
|
||||||
|
|
||||||
casper.test.begin('Test updating default size works', 14 , function(test) {
|
casper.test.begin('Test updating default size works', 14 , function(test) {
|
||||||
test.timeout = test.fail.bind(test, ['Test timed out']);
|
test.timeout = test.fail.bind(test, ['Test timed out']);
|
||||||
|
|
||||||
|
|
|
@ -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) {
|
casper.test.begin('Test resize panel width/height inputs are synchronized', 28 , function(test) {
|
||||||
test.timeout = test.fail.bind(test, ['Test timed out']);
|
test.timeout = test.fail.bind(test, ['Test timed out']);
|
||||||
|
|
||||||
|
|
86
test/casperjs/integration/settings/test-resize-origin.js
Normal file
86
test/casperjs/integration/settings/test-resize-origin.js
Normal file
|
@ -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();
|
||||||
|
});
|
||||||
|
});
|
|
@ -1,3 +1,5 @@
|
||||||
|
/* globals casper, setPiskelFromGrid, isDrawerExpanded, getValue, isChecked, evalLine */
|
||||||
|
|
||||||
casper.test.begin('Test resize feature works', 16 , function(test) {
|
casper.test.begin('Test resize feature works', 16 , function(test) {
|
||||||
test.timeout = test.fail.bind(test, ['Test timed out']);
|
test.timeout = test.fail.bind(test, ['Test timed out']);
|
||||||
|
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
/* globals casper, setPiskelFromGrid, isDrawerExpanded, getValue, isChecked, evalLine */
|
||||||
|
|
||||||
casper.test.begin('Settings Test', 18, function(test) {
|
casper.test.begin('Settings Test', 18, function(test) {
|
||||||
test.timeout = test.fail.bind(test, ['Test timed out']);
|
test.timeout = test.fail.bind(test, ['Test timed out']);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user