can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
162 lines (136 loc) • 5.11 kB
HTML
<html id="html">
<head>
<title>Testing dojo.NodeList-traverse extensions to dojo.NodeList</title>
<style type="text/css">
@import "../resources/dojo.css";
</style>
<script type="text/javascript" src="../dojo.js" data-dojo-config="isDebug: true, popup: true"></script>
<script type="text/javascript">
require(["doh", "dojo/query", "dojo/NodeList-traverse", "dojo/domReady!"], function(doh, query){
function verify(/*dojo.NodeList*/nl, /*Array*/ids, /*String*/ comment){
comment = comment || "verify";
for(var i = 0, node; (node = nl[i]); i++){
doh.is(ids[i], node.id, comment + " " + i);
}
//Make sure lengths are equal.
doh.is(ids.length, i, comment + " length");
}
var divs = query("div.testDiv");
doh.register([
function children(t){
verify(divs.last().children(), ["crass", "classy", "yeah"]);
},
function closest(t){
// test simple selector
var classy = query("#classy");
var closestDiv = classy.closest("div");
verify(closestDiv, ["third"], "closest('div')");
verify(closestDiv.end().closest(".classy"), ["classy"], "closestDiv.end().closest('.classy')");
// test descendant selector
var bang = query(".bang");
var closestFooBar = bang.closest(".foo > .bar");
verify(closestFooBar, ["level4"], ".foo > .bar");
// test descendant selector that doesn't match (".foo" alone matches nodes, but not
// ".bogus .foo")
var closestBogusFoo = bang.closest(".bogus .foo");
verify(closestBogusFoo, [], ".bogus .foo");
// positive test that scope argument works: .foo > .bar should match a scope
// of "level2" or above
closestFooBar = bang.closest(".foo > .bar", "level2");
verify(closestFooBar, ["level4"], ".foo > .bar query relative to level2");
// > .bar should match a scope of level3 or level1
var topBar = bang.closest("> .bar", "level3");
verify(topBar, ["level4"], "> .bar query relative to level3");
// negative test that scope argument works: .foo > .bar relative to level3
// doesn't match since .foo is level3, rather than a child of level3
closestFooBar = bang.closest(".foo > .bar", "level3");
verify(closestFooBar, [], ".foo > .bar query relative to level3");
// complex test of multiple elements in NodeList
// Only some of the elements in query("div") have a ".foo" ancestor,
// and three of those elements have the *same* .foo ancestor, so
// closest(".foo") should result in list of just two elements
var closestFoo = query("div").closest(".foo");
verify(closestFoo, ["level1", "level3"], ".foo from div");
},
function parent(t){
verify(query("#classy").parent(), ["third"]);
},
function parents(t){
var classy = query("#classy");
verify(classy.parents(), ["third", "body", "html"]);
verify(classy.parents(".third"), ["third"]);
verify(classy.parents("body"), ["body"]);
},
function siblings(t){
verify(query("#classy").siblings(), ["crass", "yeah"]);
},
function next(t){
verify(query("#crass").next(), ["classy"]);
},
function nextAll(t){
verify(query("#crass").nextAll(), ["classy", "yeah"]);
verify(query("#crass").nextAll("#yeah"), ["yeah"]);
},
function prev(t){
verify(query("#classy").prev(), ["crass"]);
},
function prevAll(t){
verify(query("#yeah").prevAll(), ["classy", "crass"]);
verify(query("#yeah").prevAll("#crass"), ["crass"]);
},
function andSelf(t){
verify(query("#yeah").prevAll().andSelf(), ["classy", "crass", "yeah"]);
},
function first(t){
verify(divs.first(), ["sq100"]);
},
function last(t){
verify(divs.last(), ["third"]);
},
function even(t){
var even = divs.even();
verify(even, ["t"]);
verify(even.end(), ["sq100", "t", "third"]);
},
function odd(t){
var odd = divs.odd();
verify(odd, ["sq100", "third"]);
verify(odd.end(), ["sq100", "t", "third"]);
}
]);
doh.run();
});
</script>
</head>
<body id="body" class="classy">
<h1 id="firstH1">testing dojo.NodeList-traverse</h1>
<div id="sq100" class="testDiv">
100px square, abs
</div>
<div id="t" class="testDiv">
<span id="c1">c1</span>
</div>
<div id="third" class="third testDiv">
<!-- This is the third top level div -->
<span id="crass">Crass, baby</span>
The third div
<span id="classy" class="classy">Classy, baby</span>
The third div, again
<!-- Another comment -->
<span id="yeah">Yeah, baby</span>
</div>
<div id="level1" class="foo">
<div id="level2" class="bar">
<div id="level3" class="foo">
<div id="level4" class="bar">
<div id="level5" class="bar">
<div id="level6" class="bang">foo bar bar bang</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>