focusblur.html revision 63d012ee193ba8c768b2a2aade99081422759213
<html>
<head>
</head>
<body class="yui3-skin-sam">
<div id="container">
<button id="button-1">Click Me!</button>
<input type="text" id="text-1">
</div>
<!-- YUI3 Core //-->
<!-- Initialization process //-->
<script type="text/javascript">
YUI({
filter: 'raw',
filters: { 'event': 'debug' }
}).use('console', 'test', 'event', 'event-simulate', function (Y) {
var Assert = Y.Assert;
// creating the console...
new Y.Console({ /*useBrowserConsole: true*/ }).render();
// starting the testing process
// add the test cases and suites
Y.Test.Runner.add(new Y.Test.Case({
name: "Event Focus And Blur Test",
_should: {
fail: {
test_purge_focus: true, // until bug #2528244 is fixed
test_purge_blur: true // until bug #2528244 is fixed
}
},
tearDown: function () {
Y.one('#container').purge(true);
},
test_add_focus: function(){
var foo = false,
target,
boundEl,
onFocus = function(e) {
foo = true;
boundEl = this;
target = e.target;
};
Y.on('focus', onFocus, '#container');
Y.one('#button-1').focus();
Assert.isTrue(foo, "simple focus fails, container should pickup the focus event");
Assert.areEqual(Y.one('#button-1'), target, "the target is the incorrect node, should be the actual focus target");
Assert.areEqual(Y.one('#container'), boundEl, "the default scope should be the bound element");
foo = false;
target = null;
boundEl = null;
Y.one('#text-1').focus();
Y.one('#button-1').focus();
Assert.isTrue(foo, "simple focus fails, container should pickup the focus event");
Assert.areEqual(Y.one('#button-1'), target, "the target is the incorrect node, should be the actual focus target");
Assert.areEqual(Y.one('#container'), boundEl, "the default scope should be the bound element");
Y.one('#button-1').blur();
},
test_remove_focus: function () {
var foo = false,
onFocus = function(e) {
foo = true;
};
var handle = Y.on('focus', onFocus, '#container');
Y.one('#button-1').focus();
Assert.isTrue(foo, "simple focus fails, container should pickup the focus event");
Y.one('#button-1').blur();
foo = false;
Y.one('#button-1').focus();
Assert.isFalse(foo, "container should not pickup the focus event after listener is removed");
Y.one('#button-1').blur();
},
test_purge_focus: function () {
var foo = false,
onFocus = function(e) {
foo = true;
};
Y.on('focus', onFocus, '#container');
Y.one('#button-1').focus();
Assert.isTrue(foo, "simple focus fails, container should pickup the focus event");
Y.Event.purgeElement('#container', false, 'focus');
Y.one('#button-1').blur();
foo = false;
Y.one('#button-1').focus();
Assert.isFalse(foo, "container should not pickup the focus event after listener has been purged");
},
test_bubble_order: function () {
var from = [],
doc = Y.one(Y.config.doc),
body = Y.one('body'),
container = Y.one('#container');
function onFocus(e) {
from.push(this);
}
container.on('focus', onFocus);
doc.on('focus', onFocus);
body.on('focus', onFocus);
Y.one('#anchor-1').focus();
Y.ArrayAssert.itemsAreSame([container, body, doc], from);//,
//"Incorrect bubble order");
},
test_add_blur: function () {
var foo = false,
target,
boundEl,
onBlur = function(e) {
foo = true;
boundEl = this;
target = e.target;
};
Y.on('blur', onBlur, '#container');
Y.one('#button-1').focus();
Y.one('#button-1').blur();
Assert.isTrue(foo, "simple blur fails, container should pickup the focus event");
Assert.areEqual(target, Y.one('#button-1'), "the target is the incorrect node, should be the actual blur target");
Assert.areEqual(boundEl, Y.one('#container'), "the default scope should be the bound element");
foo = false;
target = null;
boundEl = null;
Y.one('#button-1').focus();
Y.one('#text-1').focus();
Assert.isTrue(foo, "simple blur fails, container should pickup the focus event");
Assert.areEqual(target, Y.one('#button-1'), "the target is the incorrect node, should be the actual blur target");
Assert.areEqual(boundEl, Y.one('#container'), "the default scope should be the bound element");
},
test_remove_blur: function () {
var foo = false,
onBlur = function(e) {
foo = true;
};
var handle = Y.on('blur', onBlur, '#container');
Y.one('#button-1').focus();
Y.one('#button-1').blur();
Assert.isTrue(foo, "simple focus fails, container should pickup the focus event");
foo = false;
Y.one('#button-1').focus();
Y.one('#text-1').focus();
Assert.isFalse(foo, "container should not pickup the blur event after listener has been removed");
},
test_purge_blur: function () {
var foo = false,
onBlur = function(e) {
foo = true;
};
Y.on('blur', onBlur, '#container');
Y.one('#button-1').focus();
Y.one('#button-1').blur();
Assert.isTrue(foo, "simple focus fails, container should pickup the focus event");
foo = false;
Y.Event.purgeElement('#container', false, 'blur');
Y.one('#button-1').focus();
Y.one('#text-1').focus();
Assert.isFalse(foo, "container should not pickup the blur event after listener has been purged");
}
}));
//run all tests
/* finishing the testing process */
});
</script>
</body>
</html>