siesta-lite
Version:
Stress-free JavaScript unit testing and functional testing tool, works in NodeJS and browsers
315 lines (224 loc) • 10.2 kB
JavaScript
StartTest(function (t) {
// should type in lower case, because typing uppercase letter includes pressing SHIFT (additional keydown/keyup)
var keys = " ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890".toLowerCase(),
box = new Ext.form.TextField({
width : 400,
enableKeyEvents : true,
renderTo : Ext.getBody()
}),
numberField = new Ext.form.NumberField({
width : 100,
enableKeyEvents : true,
renderTo : Ext.getBody(),
value : 0
}),
datePicker = new Ext.picker.Date({
renderTo : Ext.getBody(),
value : new Date(2011, 9, 5)
}),
rawLink = Ext.getBody().createChild({
tag : 'a',
html : 'testing link',
href : '#',
tabIndex : 1
});
rawLink.on('click', function (e, t) {
e.stopEvent();
});
function getDateCellFocusEl() {
return datePicker.el.down('.' + datePicker.selectedCls + ' a');
}
t.testExtJS({
// The date picker needs a few ms to alter focus to the each new date cell
actionDelay : 100
}, function (t) {
t.it('Should fire click when hitting ENTER on a link', function (t) {
// only verify the number of click events if touch events are not enabled
// if they are - Ext seems to ignore the 2nd DOM level `click` event
if (!(Ext.supports.TouchEvents || Ext.supports.MSPointerEvents || Ext.supports.PointerEvents))
t.willFireNTimes(rawLink, 'click', 2, 'Anchor tag');
t.chain(
{ action : 'click', target : rawLink },
{ action : 'type', target : rawLink, text : '[ENTER]' }
)
})
t.it('Should fire keydown, keypress, keyup for all keys', function (t) {
var nbrKeys = keys.length;
t.willFireNTimes(box, 'keydown', nbrKeys)
t.willFireNTimes(box, 'keyup', nbrKeys)
t.willFireNTimes(box, 'keypress', nbrKeys)
t.chain(
{ action : 'type', target : box, text : keys }
);
});
t.it('Should handle UP, DOWN on a NumberField', function (t) {
numberField.setValue(0);
t.willFireNTimes(numberField, 'specialkey', 4, 'NumberField specialkey');
t.chain(
{ click : numberField },
{ type : "[UP][UP][DOWN][UP]", target : numberField },
function() {
t.expect(numberField.getValue()).toBe(2)
}
);
});
t.it('Should handle LEFT, RIGHT etc on a DatePicker', function (t) {
t.willFireNTimes(datePicker, 'select', 2, 'DatePicker select');
t.chain(
{ click : '.' + datePicker.selectedCls },
// Two steps to the right, then Enter to select
{ type : '[RIGHT][RIGHT][LEFT][RIGHT][ENTER]' },
function () {
t.fieldHasValue(box, keys, "Correctly simulated normal character keys");
t.fieldHasValue(numberField, 2, "Correctly simulated up/down arrow keys");
t.fieldHasValue(datePicker, new Date(2011, 9, 7), "Correctly simulated LEFT/RIGHT/ENTER arrow keys");
}
);
});
t.it('Should handle a focus change on "keydown" event', function (t) {
var field = new Ext.form.TextField({
enableKeyEvents : true,
renderTo : Ext.getBody()
});
var field2 = new Ext.form.TextField({
enableKeyEvents : true,
renderTo : Ext.getBody()
});
field.on('keydown', function() { field2.focus(); })
t.chain(
{ click : field },
// Two steps to the right, then Enter to select
{ type : 'abc' },
function () {
t.fieldHasValue(field2, 'abc');
}
);
});
t.it('Should fire all type of key/input events', function (t) {
var supportsTextEvent = (function() {
var event;
try {
event = doc.createEvent('TextEvent');
} catch(e) {}
return !!(event && event.initTextEvent);
})();
document.body.innerHTML = '<input id="inp" type="text"/>';
var field = document.getElementById('inp');
t.firesOnce(field, 'keydown');
t.firesOnce(field, 'keypress');
t.firesOnce(field, 'keyup');
t.firesAtLeastNTimes(field, 'input', 1); // 2 in chrome
// DOM "value" property should be set at the point when 'input' is fired
t.waitForEvent(field, 'input', function() {
t.expect(field.value).toBe('a');
})
if (supportsTextEvent) {
t.firesOnce(field, t.browser.webkit ? 'textInput' : 'textinput');
}
t.chain(
// Two steps to the right, then Enter to select
{ type : 'a', target : field },
function () {
t.expect(field.value).toBe('a');
}
);
});
t.it('Should fire change event after field changed + ENTER key', function (t) {
document.body.innerHTML = '<input id="inp1" type="text" value="foo"/>';
var field = document.getElementById('inp1');
t.firesOnce(field, 'change');
t.chain(
{ click : field },
{ type : 'foo[ENTER]', target : field }
);
});
t.it('Should NOT fire change event after key input and field has not changed + ENTER key', function (t) {
document.body.innerHTML = '<input id="inp2" type="text" value="quix"/>';
var field = document.getElementById('inp2');
t.wontFire(field, 'change');
t.chain(
{ click : field },
function (next) {
// need to set the caret position to the end
// otherwise the click above and the click from previous "it" section can combine in double click
// and text in the input will be selected
// alternative would be to wait for 500ms to split the clicks
t.setCaretPosition(field, 100)
next()
},
{ type : 'f[BACKSPACE][ENTER]', target : field }
);
});
t.it('Should move caret when using arrow keys', function (t) {
document.body.innerHTML = '<input id="inp" type="text" style="height:50px;width:200px;font-size:18px"/>';
var field = document.getElementById('inp');
t.chain(
{ click : '#inp' },
{ type : 'faa[LEFT][LEFT]' },
function (next) {
var pos = t.getCaretPosition(field);
t.is(pos, 1, 'LEFT key stepped left');
next();
},
{ type : '[RIGHT][RIGHT]' },
function () {
var pos = t.getCaretPosition(field);
t.is(pos, 3, 'RIGHT key stepped right');
}
);
});
t.it('Should move caret to edge of text selection when using arrow keys, if text is selected', function (t) {
document.body.innerHTML = '<input id="inp" type="text" style="height:50px;width:200px;font-size:18px" value="aXXa"/>';
var field = document.getElementById('inp');
t.chain(
{ click : '#inp' },
{ selectText : [ '#inp', 1, 4 ] },
{ type : '[LEFT]' },
function (next) {
var pos = t.getCaretPosition(field);
var selText = this.getSelectedText(field);
t.notOk(selText, 'Text no longer selected');
t.is(pos, 1, 'LEFT key stepped to beginning of selection');
next();
},
{ selectText : [ '#inp', 1, 4 ] },
{ type : '[RIGHT]' },
function (next) {
var pos = t.getCaretPosition(field);
var selText = this.getSelectedText(field);
t.notOk(selText, 'Text no longer selected');
t.is(pos, 4, 'RIGHT key stepped to end of selection');
next();
}
);
});
t.it('Should fire change event after field changed and mouse clicks outside field', function (t) {
document.body.innerHTML = '<input id="inp1" type="text" value=""/>';
var field = document.getElementById('inp1');
t.firesOnce(field, 'change');
t.chain(
{ type : 'foo', target : field },
{ click : [10, 50]}
);
});
t.it('Should fire change event after field changed by TAB', function (t) {
document.body.innerHTML = '<input id="inp1" type="text" value=""/>';
var field = document.getElementById('inp1');
t.firesOnce(field, 'change');
t.chain(
{ type : 'foo[TAB]', target : field }
);
});
!bowser.gecko && t.it('Should fire change event after field changed and field is blurred programmatically', function (t) {
document.body.innerHTML = '<input id="inp1" type="text" value=""/>';
var field = document.getElementById('inp1');
t.firesOnce(field, 'change');
t.chain(
{ type : 'foo', target : field },
function() {
field.blur();
}
);
});
});
});