dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
431 lines (406 loc) • 15.8 kB
HTML
<html>
<head>
<title>robot InlineEditBox Test</title>
<style>
@import "../../../util/doh/robot/robot.css";
</style>
<!-- required: dojo.js -->
<script type="text/javascript" src="../../../dojo/dojo.js"
data-dojo-config="isDebug: true"></script>
<script type="text/javascript">
require([
"doh/runner", "dojo/robotx",
"dojo/_base/array", "dojo/aspect", "dojo/date/locale", "dojo/keys", "dojo/_base/lang", "dojo/query",
"dijit/tests/helpers", "dojo/domReady!"
], function(doh, robot, array, aspect, datelocale, keys, lang, query, helpers){
robot.initRobot('../test_InlineEditBox.html');
function moveAndClick(node){
robot.mouseMoveAt(node, 500, 1);
robot.mouseClick({left: true}, 500);
}
doh.register(function setup(){
// get pointer to registry in the iframe
registry = robot.window.require("dijit/registry");
});
doh.register("dijit.InlineEditBox autosave tests", [
{
name: "CurrencyTextBox invalid value: blur",
timeout: 10000,
runTest: function(){
var d = new doh.Deferred();
var inlineBox = registry.byId("dollar_as");
moveAndClick(inlineBox.domNode);
robot.typeKeys("dollar", 1000, 1200); // invalid
moveAndClick("predefined");
robot.sequence(d.getTestCallback(function(){
var currencyTextBox = inlineBox.wrapperWidget.editWidget;
doh.is('dollar', currencyTextBox.get("displayedValue"), "displayedValue");
doh.f(currencyTextBox.isValid(), "!isValid");
inlineBox.cancel(false);
doh.is('', inlineBox.get("value"), "value");
}), 1000);
return d;
}
},
{
name: "CurrencyTextBox invalid value: ENTER",
timeout: 10000,
runTest: function(){
var d = new doh.Deferred();
var inlineBox = registry.byId("dollar_as");
var displayedValue, isValid;
moveAndClick(inlineBox.domNode);
robot.typeKeys("dollar", 1000, 1200); // invalid
robot.keyPress(keys.ENTER, 500, {});
robot.sequence(function(){
var currencyTextBox = inlineBox.wrapperWidget.editWidget;
displayedValue = currencyTextBox.get("displayedValue");
isValid = currencyTextBox.isValid();
}, 1000);
robot.keyPress(keys.ESCAPE, 500, {});
robot.sequence(d.getTestCallback(function(){
doh.is('dollar', displayedValue, "displayedValue");
doh.f(isValid, "!isValid");
doh.is('', inlineBox.get("value"), "value");
}), 1000);
return d;
}
},
{
name: "CurrencyTextBox valid value: blur",
timeout: 10000,
runTest: function(){
var d = new doh.Deferred();
var inlineBox = registry.byId("dollar_as");
moveAndClick(inlineBox.domNode);
robot.typeKeys("123", 1000, 600);
moveAndClick("predefined");
robot.sequence(d.getTestCallback(function(){
doh.is("$123.00", inlineBox.get("value"), "value");
}), 1000);
return d;
}
},
{
name: "CurrencyTextBox valid value: ENTER",
timeout: 10000,
runTest: function(){
var d = new doh.Deferred();
var inlineBox = registry.byId("dollar_as");
moveAndClick(inlineBox.domNode);
robot.typeKeys("234", 1000, 600);
robot.keyPress(keys.ENTER, 500, {});
robot.sequence(d.getTestCallback(function(){
doh.is('$234.00', inlineBox.get("value"), "value");
}), 1000);
return d;
}
},
{
name: "CurrencyTextBox valid value: ESCAPE",
timeout: 10000,
runTest: function(){
var d = new doh.Deferred();
var inlineBox = registry.byId("dollar_as");
moveAndClick(inlineBox.domNode);
robot.typeKeys("345", 1000, 600);
robot.keyPress(keys.ESCAPE, 500, {});
robot.sequence(d.getTestCallback(function(){
doh.is("$234.00", inlineBox.get("value"), "value");
}), 1000);
return d;
}
},
{
name: "CurrencyTextBox valid value: TAB",
timeout: 10000,
runTest: function(){
var d = new doh.Deferred();
var inlineBox = registry.byId("dollar_as");
moveAndClick(inlineBox.domNode);
robot.typeKeys("456", 1000, 600);
robot.keyPress(keys.TAB, 500, {});
robot.sequence(d.getTestCallback(function(){
doh.is('$456.00', inlineBox.get("value"), "value");
}), 1000);
return d;
}
},
{
name: "Focus test",
timeout: 15000,
runTest: function(){
var d = new doh.Deferred();
var inlineBox = registry.byId("editable");
var initialOnChange = inlineBox._onChangeValue;
inlineBox.set("value", "");
inlineBox.edit();
robot.typeKeys("editable", 1000, 1600);
robot.keyPress(keys.TAB, 500, {});
robot.keyPress(keys.TAB, 1500, {}); // wait more than 1 second to TAB
robot.keyPress(keys.ENTER, 500, {});
robot.typeKeys("567", 500, 600);
robot.keyPress(keys.ENTER, 500, {});
robot.keyPress(keys.TAB, 500, {shift:true}); // do this fast
robot.keyPress(keys.TAB, 500, {shift:true}); // do this fast
robot.keyPress(keys.ENTER, 500, {}); // quickly back to editable
robot.keyPress(keys.RIGHT_ARROW, 500, {});
robot.typeKeys(" again", 1000, 1200);
robot.keyPress(keys.TAB, 500, {});
robot.sequence(d.getTestCallback(function(){
doh.is(undefined, initialOnChange, "no onChange value");
doh.is('$567.00', registry.byId("dollar_as").get("value"), "value");
doh.is('editable again', inlineBox.get("value"), "value");
doh.is('editable again', inlineBox._onChangeValue, "onChange value");
}), 1000);
return d;
}
},
{
name: "Textarea test",
timeout: 15000,
runTest: function(){
var d = new doh.Deferred();
var inlineBox = registry.byId("textarea");
moveAndClick(inlineBox.domNode);
robot.typeKeys("line 1", 1000, 1200);
robot.keyPress(keys.ENTER, 500, {});
robot.typeKeys("line 2", 500, 1200);
moveAndClick("predefined");
robot.sequence(d.getTestCallback(function(){
doh.is('line 1\\nline 2', inlineBox.get("value").replace(/\n/g, "\\n"), "textarea programmatic value was " + inlineBox.get("value").replace(/\n/g, "\\n"));
doh.is('line 1<br>line 2', inlineBox.domNode.innerHTML.toLowerCase(), "textarea rendered value was " + inlineBox.domNode.innerHTML);
}), 1000);
return d;
}
}
]);
// Testing that the initial display value of the InlineEditBox gets sent to the editor.
// For example, in this markup:
// <span dojoType="dijit.InlineEditBox" ...>01/05/2007</span>
// When the editor is clicked the calendar should open to that date.
array.forEach([
{ widget: "CurrencyTextBox", id: "dollar", textValue: "$2,000", widgetValue: 2000 },
{ widget: "NumberTextBox", id: "quantity", textValue: "3", widgetValue: 3 },
{ widget: "ComboBox", id: "item", textValue: "refrigerators", widgetValue: "refrigerators" },
{ widget: "DateTextBox", id: "purchase", textValue: "01/05/2007", widgetValue: datelocale.parse("01/05/2007", {datePattern: 'MM/dd/yyyy', selector:'date'}) },
{ widget: "FilteringSelect", id: "state", textValue: "Pennsylvania", widgetValue: "PA" },
{ widget: "Select", id: "country", textValue: "United States of America", widgetValue: "US" }
], function(test){
doh.register("preDefinedValue " + test.widget, {
timeout: 8000,
name: test.id,
runTest: function(){
var d = new doh.Deferred();
var inlineBox = registry.byId(test.id);
var handler = aspect.after(inlineBox, 'edit', function(){
handler.remove();
var editWidget = inlineBox.wrapperWidget.editWidget;
handler = aspect.after(editWidget, '_onFocus', function(){
handler.remove();
robot.sequence(function(){
var
textValue = test.textValue,
value = inlineBox.get("value"),
visible = helpers.isVisible(editWidget),
expected = test.widgetValue,
actual = editWidget.get("value"),
showHandler = aspect.after(inlineBox, 'save', d.getTestCallback(function(){
cancelHandler.remove();
showHandler.remove();
doh.t(false, "Save was clicked");
}), true),
cancelHandler = aspect.after(inlineBox, 'onCancel', function(){
cancelHandler.remove();
showHandler.remove();
robot.sequence(d.getTestCallback(function(){
doh.is(textValue, value, "inline text value");
doh.t(visible, "editor widget should be visible");
doh.is(typeof expected, typeof actual, "editor value typeof");
doh.is(expected.toString(), actual.toString(), "editor widget value");
doh.t(helpers.isHidden(inlineBox.wrapperWidget), "editor widget should be hidden");
}), 500);
}, true),
buttons = query(".dijitButton", inlineBox.domNode.parentNode);
moveAndClick(buttons[buttons.length-2]); // Save should be disabled so nothing happens
moveAndClick(buttons[buttons.length-1]);
}, 1500);
}, true);
}, true);
moveAndClick(inlineBox.domNode);
return d;
}
})
});
doh.register("renderAsHtml", [
// "plain text" mode, < > & have no special meaning
{
name: "false",
timeout: 10000,
runTest: function(){
var d = new doh.Deferred();
// confirm initial displayed value
var inlineBox = registry.byId("renderAsHtml_false");
doh.is("<B>not bold</B>&lt;input&gt;", lang.trim(inlineBox.domNode.innerHTML),
"confirm initial value (with special chars) wasn't modified");
doh.is("<B>not bold</B><input>", inlineBox.get("value"),
"confirm initial get('value')");
// launch editor, and make sure that special characters aren't mangled
moveAndClick(inlineBox.domNode);
robot.sequence(d.getTestErrback(function(){
var editor = inlineBox.wrapperWidget.editWidget;
doh.is("<B>not bold</B><input>", editor.get("value"), "initial editor value");
}), 1000);
// edit value and save
robot.keyPress(keys.RIGHT_ARROW, 1000, {});
robot.typeKeys("end", 2000, 1000);
robot.keyPress(keys.ENTER, 500, {});
// check that display value didn't mangle special characters
robot.sequence(d.getTestCallback(function(){
doh.is("<B>not bold</B>&lt;input&gt;end", lang.trim(inlineBox.domNode.innerHTML),
"displayed value after edit");
doh.is("<B>not bold</B><input>end", inlineBox.get("value"),
"get('value') after edit");
}), 1000);
return d;
}
},
// HTML mode, display mode has rich text, which is passed to editor
{
name: "true",
timeout: 10000,
runTest: function(){
var d = new doh.Deferred();
// confirm initial displayed value
var inlineBox = registry.byId("renderAsHtml_true");
doh.is("<b>not bold</b><b>bold</b>&lt;input&gt;",
lang.trim(inlineBox.domNode.innerHTML).toLowerCase(),
"confirm initial value (with special chars) wasn't modified");
doh.is("<b>not bold</b><b>bold</b>&lt;input&gt;",
inlineBox.get("value").toLowerCase(),
"confirm initial get('value')");
// launch editor, and make sure that value was passed to editor as HTML
moveAndClick(inlineBox.domNode);
robot.sequence(d.getTestErrback(function(){
var editor = inlineBox.wrapperWidget.editWidget;
doh.is("<b>not bold</b><b>bold</b>&lt;input&gt;",
editor.get("value").toLowerCase(),
"initial editor value");
}), 1000);
// edit value and save
robot.keyPress(keys.RIGHT_ARROW, 1000, {});
robot.typeKeys("end", 2000, 1000);
robot.keyPress(keys.ENTER, 500, {});
// check that display value didn't mangle special characters
robot.sequence(d.getTestCallback(function(){
doh.is("<b>not bold</b><b>bold</b>&lt;input&gt;end",
lang.trim(inlineBox.domNode.innerHTML).toLowerCase(),
"displayed value after edit");
doh.is("<b>not bold</b><b>bold</b>&lt;input&gt;end",
inlineBox.get("value").toLowerCase(),
"get('value') after edit");
}), 1000);
return d;
}
}
]);
doh.register("focus tests", [
{
name: "RTE",
timeout: 7000,
runTest: function(){
var d = new doh.Deferred();
var inlineBox = registry.byId("inlineRTE");
var handler = aspect.after(inlineBox, 'edit', function(){
handler.remove();
handler = aspect.after(inlineBox, 'save', function(){
handler.remove();
setTimeout(d.getTestCallback(function(){
doh.t(helpers.isHidden(inlineBox.wrapperWidget), "editor widget should be visible");
doh.t(inlineBox.get("value").indexOf('!start!') >= 0, "value changed");
}), 1000);
});
robot.typeKeys("!start!", 1, 1400);
var buttons = query(".saveButton", inlineBox.domNode.parentNode);
moveAndClick(buttons[buttons.length-1]);
});
moveAndClick(inlineBox.domNode);
return d;
}
}
]);
doh.register("positioning", [
{
name: "offscreen",
timeout: 4000,
runTest: function(){
var d = new doh.Deferred();
var inlineBox = registry.byId("areaEditable");
inlineBox.edit();
moveAndClick("disableAreaEditable");
robot.sequence(d.getTestCallback(function(){
doh.t(inlineBox.get("disabled"), "disabled");
inlineBox.set('disabled', false);
inlineBox.cancel();
}), 1000);
return d;
}
}
]);
doh.register("programmatic", [
{
name: "create",
timeout: 4000,
runTest: function(){
// Actually, it was already created by test_InlineEditBox
numWidgetsBeforeProgCreate = registry.length;
robot.window.programmaticCreate();
doh.t(!!robot.window.programmatic);
}
},
{
name: "set()",
timeout: 2000,
runTest: function(){
var d = new doh.Deferred();
var inlineBox = registry.byId("editable");
inlineBox.set("value", "programmatic value");
robot.sequence(d.getTestCallback(function(){
doh.is("programmatic value", inlineBox._onChangeValue, "programmatic set causes onChange");
}), 500);
return d;
}
},
{
name: "edit",
timeout: 2000,
runTest: function(){
var d = new doh.Deferred();
var inlineBox = robot.window.programmatic;
inlineBox.edit();
inlineBox.wrapperWidget.editWidget.set('value', 'changed');
inlineBox.save();
robot.sequence(d.getTestCallback(function(){
doh.is("changed", inlineBox._onChangeValue, "editing causes onChange");
}), 500);
return d;
}
},
{
name: "destroy",
timeout: 4000,
runTest: function(){
robot.window.programmatic.destroy();
var numWidgetsAfterDestroy = registry.length;
doh.is(numWidgetsBeforeProgCreate, numWidgetsAfterDestroy,
"no orphaned widgets");
}
}
]);
doh.run();
});
</script>
</head>
</html>