// ========================================================================== // Project: SproutCore
- JavaScript Application Framework // Copyright: ©2006-2011 Strobe Inc. and contributors. // Portions ©2008-2011 Apple Inc. All rights reserved. // License: Licensed under MIT license (see license.js) // ==========================================================================
/*global module test htmlbody ok equals same stop start */
module(“SC.AlertPane UI”, {
setup: function(){ SC.TestDelegate = SC.Object.create(); }, teardown: function(){ delete SC.TestDelegate; }
});
var pane ;
function evaluatePane(pane, message, description, caption, button1Title, button2Title, button3Title, iconClass, themeName,
button1ToolTip, button2ToolTip, button3ToolTip, button1LayerId, button2LayerId, button3LayerId, defaultButton, cancelButton, localizeButton1, localizeButton2, localizeButton3) { // wrapper ok(pane.get('isVisibleInWindow'), 'pane.isVisibleInWindow should be YES'); ok(pane.$().hasClass('sc-alert'), 'pane should have sc-alert class'); ok(pane.childViews[0].get('isVisibleInWindow'), 'pane.div.isVisibleInWindow should be YES'); ok(pane.childViews[0].$().hasClass('sc-view'), 'pane.div should have sc-view class'); ok(pane.childViews[0].childViews[0].get('isVisibleInWindow'), 'pane.div.info.isVisibleInWindow should be YES'); ok(pane.childViews[0].childViews[0].$().hasClass('info'), 'pane.div.info should have info class'); ok(pane.childViews[0].childViews[1].get('isVisibleInWindow'), 'pane.div.div.isVisibleInWindow should be YES'); // content ok(pane.childViews[0].childViews[0].$('img'), 'pane.div.info.img existence should be YES'); ok(pane.childViews[0].childViews[0].$('img').hasClass('icon'), 'pane.div.info.img should have icon class'); ok(pane.childViews[0].childViews[0].$('img').hasClass(iconClass), 'pane.div.info.img should have %@ class'.fmt(iconClass)); ok(pane.childViews[0].childViews[0].$('h1'), 'pane.div.info.h1 existence should be YES'); equals(pane.childViews[0].childViews[0].$('h1').text(), 'AlertPane.message', 'pane.div.info.h1 should have title'); if (description) { ok(pane.childViews[0].childViews[0].$('p.description'), 'pane.div.info.description existence should be YES'); equals(pane.childViews[0].childViews[0].$('p.description').text(), 'AlertPane.description', 'pane.div.info.description should have description'); } else { equals(pane.childViews[0].childViews[0].$('p.description').length, 0, 'pane.div.info should have 0 description'); } if (caption) { ok(pane.childViews[0].childViews[0].$('p.caption'), 'pane.div.info.caption existence should be YES'); equals(pane.childViews[0].childViews[0].$('p.caption').text(), 'AlertPane.caption', 'pane.div.info.caption should have caption'); } else { equals(pane.childViews[0].childViews[0].$('p.caption').length, 0, 'pane.div.info should have 0 caption'); } // buttons ok(pane.childViews[0].childViews[1].$('div'), 'pane.div.div.div existence should be YES'); equals(pane.childViews[0].childViews[1].$('div.button').length, 2, 'pane.div.div should have 2 Buttons'); ok(pane.childViews[0].$('div'), 'pane.div.div existence should be YES'); var button1 = pane.childViews[0].childViews[1].childViews[1]; var button2 = pane.childViews[0].childViews[1].childViews[0]; var button3 = pane.childViews[0].childViews[2].childViews[0]; if (button1Title) { equals(button1.$('label').text(), button1Title, 'pane.div.div button1 should have custom title %@'.fmt(button1Title)); } else { equals(button1.$('label').text(), 'OK', 'pane.div.div button1 should have default title OK'); } if (button2Title) { equals(button2.$('label').text(), button2Title, 'pane.div.div button2 should have custom title %@'.fmt(button2Title)); } else { ok(button2.$().hasClass('sc-hidden'), 'pane.div.div button2 should be hidden'); } if (button3Title) { equals(button3.$('label').text(), button3Title, 'pane.div button3 should have custom title %@'.fmt(button3Title)); } else { ok(button3.$().hasClass('sc-hidden'), 'pane.div button3 should be hidden'); } if (localizeButton1) { ok(button1.get('localize'), "button1 is set to localize."); } if (localizeButton2) { ok(button2.get('localize'), "button2 is set to localize."); } if (localizeButton3) { ok(button3.get('localize'), "button3 is set to localize."); } if (button1ToolTip) { equals(button1.$('label').prop('title'), button1ToolTip, 'pane.div.div button1 should have custom toolTip %@'.fmt(button1ToolTip)); } else { equals(button1.$('label').prop('title'), '', 'pane.div.div button1 should have default toolTip BLANK'); } if (button2ToolTip) { equals(button2.$('label').prop('title'), button2ToolTip, 'pane.div.div button2 should have custom toolTip %@'.fmt(button2ToolTip)); } else { equals(button2.$('label').prop('title'), '', 'pane.div.div button2 should have default toolTip BLANK'); } if (button3ToolTip) { equals(button3.$('label').prop('title'), button3ToolTip, 'pane.div.div button3 should have custom toolTip %@'.fmt(button3ToolTip)); } else { equals(button3.$('label').prop('title'), '', 'pane.div.div button3 should have default toolTip BLANK'); } if (button1LayerId) { equals(button1.$().prop('id'), button1LayerId, 'pane.div.div button1 should have custom layerId %@'.fmt(button1LayerId)); } else { ok(button1.$().prop('id').indexOf('sc') === 0, 'pane.div.div button1 should have default layerId'); } if (button2LayerId) { equals(button2.$().prop('id'), button2LayerId, 'pane.div.div button2 should have custom layerId %@'.fmt(button2LayerId)); } else { ok(button2.$().prop('id').indexOf('sc') === 0, 'pane.div.div button2 should have default layerId'); } if (button3LayerId) { equals(button3.$().prop('id'), button3LayerId, 'pane.div.div button3 should have custom layerId %@'.fmt(button3LayerId)); } else { ok(button3.$().prop('id').indexOf('sc') === 0, 'pane.div.div button3 should have default layerId'); } if (defaultButton == null) defaultButton = 1; if (defaultButton === 1) { ok(button1.$().hasClass('def'), 'pane.div.div button1 should be default'); } else { ok(!button1.$().hasClass('def'), 'pane.div.div button1 should not be default'); } if (defaultButton === 2) { ok(button2.$().hasClass('def'), 'pane.div.div button2 should be default'); } else { ok(!button2.$().hasClass('def'), 'pane.div.div button2 should not be default'); } if (defaultButton === 3) { ok(button3.$().hasClass('def'), 'pane.div.div button3 should be default'); } else { ok(!button3.$().hasClass('def'), 'pane.div.div button3 should not be default'); } if (cancelButton == null) cancelButton = 2; if (cancelButton === 1) { ok(button1.$().hasClass('cancel'), 'pane.div.div button1 should be cancel'); } else { ok(!button1.$().hasClass('cancel'), 'pane.div.div button1 should not be cancel'); } if (cancelButton === 2) { ok(button2.$().hasClass('cancel'), 'pane.div.div button2 should be cancel'); } else { ok(!button2.$().hasClass('cancel'), 'pane.div.div button2 should not be cancel'); } if (cancelButton === 3) { ok(button3.$().hasClass('cancel'), 'pane.div.div button3 should be cancel'); } else { ok(!button3.$().hasClass('cancel'), 'pane.div.div button3 should not be cancel'); } if (!themeName) themeName = 'capsule'; ok(button1.$().hasClass(themeName), 'pane.div.div button1 should have class ' + themeName); ok(button2.$().hasClass(themeName), 'pane.div.div button2 should have class ' + themeName); ok(button3.$().hasClass(themeName), 'pane.div.div button3 should have class ' + themeName);
}
test(“AlertPane.show with icon, message, description, caption and 3 buttons”, function() {
SC.RunLoop.begin(); pane = SC.AlertPane.show({ message: 'AlertPane.message', description: 'AlertPane.description', caption: 'AlertPane.caption', icon: 'sc-icon-tools-24', delegate: this, buttons: [ { title: 'okButtonTitle' }, { title: 'cancelButtonTitle' }, { title: 'extraButtonTitle' } ] }); SC.RunLoop.end(); evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-tools-24'); pane.dismiss(); pane.destroy();
});
test(“AlertPane.show with 3 buttons with isDefault, isCancel, toolTip, layerId and localize”, function () {
SC.RunLoop.begin(); pane = SC.AlertPane.show({ message: 'AlertPane.message', description: 'AlertPane.description', caption: 'AlertPane.caption', icon: 'sc-icon-tools-24', delegate: this, buttons: [ { title: 'okButtonTitle', toolTip: 'okButtonToolTip', layerId: 'okButtonLayerId', isCancel: true, localize: true }, { title: 'cancelButtonTitle', toolTip: 'cancelButtonToolTip', layerId: 'cancelButtonLayerId', localize: true }, { title: 'extraButtonTitle', toolTip: 'extraButtonToolTip', layerId: 'extraButtonLayerId', isDefault: true, localize: true } ] }); SC.RunLoop.end(); evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-tools-24', null, 'okButtonToolTip', 'cancelButtonToolTip', 'extraButtonToolTip', 'okButtonLayerId', 'cancelButtonLayerId', 'extraButtonLayerId', 3, 1, true, true, true); pane.dismiss(); pane.destroy();
});
test(“AlertPane.show with icon, message, description, caption and 3 buttons - old style”, function() {
SC.RunLoop.begin(); pane = SC.AlertPane.show("AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-tools-24', this); SC.RunLoop.end(); evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-tools-24'); pane.dismiss(); pane.destroy();
});
test(“AlertPane.warn with icon, message, description, caption and 3 buttons”, function() {
SC.RunLoop.begin(); pane = SC.AlertPane.warn({ message: "AlertPane.message", description: 'AlertPane.description', caption: 'AlertPane.caption', buttons: [ { title: "okButtonTitle" }, { title: "cancelButtonTitle" }, { title: 'extraButtonTitle' } ], delegate: this }); SC.RunLoop.end(); evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-alert-48'); pane.dismiss(); pane.destroy();
});
test(“AlertPane.error with icon, message, description, caption and 3 buttons”, function() {
SC.RunLoop.begin(); pane = SC.AlertPane.error({ message: "AlertPane.message", description: 'AlertPane.description', caption: 'AlertPane.caption', buttons: [ { title: "okButtonTitle" }, { title: "cancelButtonTitle" }, { title: 'extraButtonTitle' } ], delegate: this }); SC.RunLoop.end(); evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-error-48'); pane.dismiss(); pane.destroy();
});
test(“AlertPane.plain with message, description, caption and 3 buttons”, function() {
SC.RunLoop.begin(); pane = SC.AlertPane.plain({ message: "AlertPane.message", description: 'AlertPane.description', caption: 'AlertPane.caption', buttons: [ { title: "okButtonTitle" }, { title: "cancelButtonTitle" }, { title: 'extraButtonTitle' } ], delegate: this }); SC.RunLoop.end(); evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'blank'); pane.dismiss(); pane.destroy();
});
test(“AlertPane.info with icon, message, description, caption and 3 buttons”, function() {
SC.RunLoop.begin(); pane = SC.AlertPane.info({ message: "AlertPane.message", description: 'AlertPane.description', caption: 'AlertPane.caption', buttons: [ { title: "okButtonTitle" }, { title: "cancelButtonTitle" }, { title: 'extraButtonTitle' } ], delegate: this }); SC.RunLoop.end(); evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-info-48'); pane.dismiss(); pane.destroy();
});
test(“AlertPane.info with icon, message and 1 default button (omit all optional parameters) - old style”, function() {
SC.RunLoop.begin(); pane = SC.AlertPane.info("AlertPane.message"); SC.RunLoop.end(); evaluatePane(pane, "AlertPane.message", null, null, null, null, null, 'sc-icon-info-48'); pane.dismiss(); pane.destroy();
});
test(“AlertPane.info with icon, message and 3 buttons (passing null to optional description and caption) - old style”, function() {
SC.RunLoop.begin(); pane = SC.AlertPane.info("AlertPane.message", null, null, "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', this); SC.RunLoop.end(); evaluatePane(pane, "AlertPane.message", null, null, "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-info-48'); pane.dismiss(); pane.destroy();
});
test(“AlertPane.info with icon, message, description, caption and 1 button (passing null to 3 buttons) - old style”, function() {
SC.RunLoop.begin(); pane = SC.AlertPane.info("AlertPane.message", 'AlertPane.description', 'AlertPane.caption', null, null, null, this); SC.RunLoop.end(); evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', null, null, null, 'sc-icon-info-48'); pane.dismiss(); pane.destroy();
});
test(“AlertPane.info with individual actions and targets for three buttons”, function() {
var clickValue = null; SC.TestDelegate.didClickOK = function() { clickValue = 'OK'; }; SC.TestDelegate.didClickCancel = function() { clickValue = 'Cancel'; }; function showPane(){ pane = SC.AlertPane.info({ message: 'AlertPane.message', description: 'AlertPane.description', caption: 'AlertPane.caption', icon: 'sc-icon-tools-24', buttons: [ { title: 'okButtonTitle', action: 'didClickOK', target: SC.TestDelegate }, { title: 'cancelButtonTitle', action: 'didClickCancel', target: 'SC.TestDelegate' }, { title: 'extraButtonTitle', action: function() { clickValue = 'Extra'; } } ] }); clickValue = null; } function clickButton(button) { var elem = button.get('layer'); var evt = SC.Event.simulateEvent(elem, 'mousedown', { which: 1 }); SC.Event.trigger(elem, 'mousedown', [evt]); SC.Event.trigger(elem, 'mouseup'); } SC.RunLoop.begin(); showPane(); clickButton(pane.get('button1')); SC.RunLoop.end(); equals(clickValue, 'OK', 'Action for the OK button was clicked'); SC.RunLoop.begin(); showPane(); clickButton(pane.get('button2')); SC.RunLoop.end(); equals(clickValue, 'Cancel', 'Action for the Cancel button was clicked'); SC.RunLoop.begin(); showPane(); clickButton(pane.get('button3')); SC.RunLoop.end(); equals(clickValue, 'Extra', 'Action for the Extra button was clicked'); pane.destroy();
});
test(“users interaction with mutiple alert panes with 1-3 buttons”, function() {
var didDismiss = NO; var delegate = SC.Object.create({ threeButtonAlertPane: function() { pane = SC.AlertPane.warn({ title: "AlertPane.warn title", description: 'Click OK to see this alert pane again. \nClick Other... to see other alert panes.', caption: 'Click cancel to dismiss.', buttons: [ { title: "OK" }, { title: "Cancel" }, { title: 'Other...' } ], delegate: this }); pane.dismiss(pane.get('button3')); pane.destroy(); }, twoButtonAlertPane: function() { pane = SC.AlertPane.error({ title: "AlertPane.error title", description: 'Click OK to see one button alert pane.', caption: 'Click cancel to dismiss.', buttons: [ { title: "OK" }, { title: "Cancel" } ], delegate: delegate }); pane.dismiss(pane.get('button2')); pane.destroy(); }, oneButtonAlertPane: function() { pane = SC.AlertPane.info({ title: "AlertPane.info title", description: 'Click OK to dismiss.', delegate: delegate }); pane.dismiss(pane.get('button1')); pane.destroy(); }, alertPaneDidDismiss: function(alert, status) { switch(status) { case SC.BUTTON1_STATUS: if (alert.icon && alert.icon.indexOf('info')!=-1){ didDismiss = YES; } break; case SC.BUTTON2_STATUS: if (alert.icon && alert.icon.indexOf('error')!=-1){ this.oneButtonAlertPane(); } break; case SC.BUTTON3_STATUS: if (alert.icon && alert.icon.indexOf('alert')!=-1){ this.twoButtonAlertPane(); } break; } } }); SC.RunLoop.begin(); delegate.threeButtonAlertPane(); SC.RunLoop.end(); ok(didDismiss, "should dismiss all buttons"); delegate.destroy();
}) ;
test(“users interaction with mutiple alert panes with 1-3 buttons - old style”, function() {
var didDismiss = NO; var delegate = SC.Object.create({ threeButtonAlertPane: function() { pane = SC.AlertPane.warn("AlertPane.warn title", 'Click OK to see this alert pane again. \nClick Other... to see other alert panes.', 'Click cancel to dismiss.', "OK", "Cancel", 'Other...', this); pane.dismiss(pane.get('button3')); pane.destroy(); }, twoButtonAlertPane: function() { pane = SC.AlertPane.error("AlertPane.error title", 'Click OK to see one button alert pane.', 'Click cancel to dismiss.', "OK", "Cancel", delegate); pane.dismiss(pane.get('button2')); pane.destroy(); }, oneButtonAlertPane: function() { pane = SC.AlertPane.info("AlertPane.info title", 'Click OK to dismiss.', delegate); pane.dismiss(pane.get('button1')); pane.destroy(); }, alertPaneDidDismiss: function(alert, status) { switch(status) { case SC.BUTTON1_STATUS: if (alert.icon && alert.icon.indexOf('info')!=-1){ didDismiss = YES; } break; case SC.BUTTON2_STATUS: if (alert.icon && alert.icon.indexOf('error')!=-1){ this.oneButtonAlertPane(); } break; case SC.BUTTON3_STATUS: if (alert.icon && alert.icon.indexOf('alert')!=-1){ this.twoButtonAlertPane(); } break; } } }); SC.RunLoop.begin(); delegate.threeButtonAlertPane(); SC.RunLoop.end(); ok(didDismiss, "should dismiss all buttons"); delegate.destroy();
}) ;
test(“AlertPane.show with custom themeName”, function() {
SC.RunLoop.begin(); pane = SC.AlertPane.show({ themeName: 'AlertPane.themeName', message: 'AlertPane.message', description: 'AlertPane.description', caption: 'AlertPane.caption', icon: 'sc-icon-tools-24', delegate: this, buttons: [ { title: 'okButtonTitle' }, { title: 'cancelButtonTitle' }, { title: 'extraButtonTitle' } ] }); SC.RunLoop.end(); evaluatePane(pane, "AlertPane.message", 'AlertPane.description', 'AlertPane.caption', "okButtonTitle", "cancelButtonTitle", 'extraButtonTitle', 'sc-icon-tools-24', 'AlertPane.themeName'); pane.dismiss(); pane.destroy();
});
test(“AlertPane.show with more than three buttons specified”, function() {
var didError = NO; SC.RunLoop.begin(); try { pane = SC.AlertPane.show({ themeName: 'AlertPane.themeName', message: 'AlertPane.message', description: 'AlertPane.description', caption: 'AlertPane.caption', icon: 'sc-icon-tools-24', delegate: this, buttons: [ { title: 'okButtonTitle' }, { title: 'cancelButtonTitle' }, { title: 'extraButtonTitle' }, { title: 'extraExtraButtonTitle' } ] }); } catch (e) { didError = YES; } SC.RunLoop.end(); ok(!didError, "Specifying more than three buttons doesn't trigger an unhandled error."); pane.destroy();
})