Updated
This commit is contained in:
Éric Lemoine
557
master/examples/test_set.html
Normal file
557
master/examples/test_set.html
Normal file
@@ -0,0 +1,557 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||||
"http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>dojo.html.set test</title>
|
||||
|
||||
<script src='../../dojo.js' djConfig='isDebug:true, parseOnLoad:false'></script>
|
||||
<script>
|
||||
require(["dojo", "doh", "dojo/html", "dojo/NodeList-html"], function(dojo, doh){
|
||||
|
||||
/* test goals
|
||||
* injecting content as string, node, nodelist.
|
||||
* injecting exotic nodes/markup e.g. table rows, lists
|
||||
* injecting whole html documents (extractContent option)
|
||||
* parsing resulting content
|
||||
|
||||
* cleanup when setting content
|
||||
*/
|
||||
dojo.declare("dojo.html.test.SimpleThing", null, {
|
||||
constructor: function(params, node) {
|
||||
node.setAttribute("test", "ok");
|
||||
}
|
||||
});
|
||||
|
||||
dojo.declare("dojo.html.test.ParserInstantiateTester", null, {
|
||||
constructor: function(params, node) {
|
||||
node.setAttribute("test", "ok");
|
||||
}
|
||||
});
|
||||
dojo.declare("dojo.html.test.DeclarativeContentSetter", dojo.html._ContentSetter, {
|
||||
postscript: function() {
|
||||
this.set();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
dojo.addOnLoad(function(){
|
||||
|
||||
function ieTrimSpaceBetweenTags(str){
|
||||
return str.replace(/(<[a-z]*[^>]*>)\s*/ig, "$1");
|
||||
}
|
||||
|
||||
|
||||
targetNode = null;
|
||||
|
||||
doh.register("basicChecks", [
|
||||
{
|
||||
name: 'set',
|
||||
runTest: function(t){
|
||||
console.log("basicChecks: " + this.name);
|
||||
targetNode = dojo.byId("pane1");
|
||||
var msg = "Simple No-params Test";
|
||||
console.log("targetNode has content: ", targetNode.innerHTML);
|
||||
var result = "";
|
||||
dojo.html.set(
|
||||
targetNode,
|
||||
msg
|
||||
);
|
||||
console.log("after set, targetNode has content: ", targetNode.innerHTML);
|
||||
doh.is(msg, targetNode.innerHTML);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'setContentWithOnEnd',
|
||||
runTest: function(t){
|
||||
console.log("basicChecks: " + this.name);
|
||||
targetNode = dojo.byId("pane1");
|
||||
var msg = "setContentWithOnEnd Test";
|
||||
var result = false;
|
||||
dojo.html.set(
|
||||
targetNode,
|
||||
msg,
|
||||
{
|
||||
onEnd: function() {
|
||||
dojo.getObject(this.declaredClass).prototype.onEnd.call(this);
|
||||
result = true;
|
||||
}
|
||||
}
|
||||
);
|
||||
doh.is(msg, targetNode.innerHTML);
|
||||
doh.t(result);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'setContent_with_parsing',
|
||||
runTest: function(t){
|
||||
console.log("basicChecks: " + this.name);
|
||||
var cont = '<div dojoType="dojo.html.test.SimpleThing" jsId="ifrs" data="{}"></div>';
|
||||
dojo.html.set(
|
||||
dojo.byId("pane1"),
|
||||
cont,
|
||||
{
|
||||
postscript: function() {
|
||||
this.set();
|
||||
|
||||
doh.t(typeof ifrs != "undefined" && ifrs.declaredClass=="dojo.html.test.SimpleThing");
|
||||
doh.t(this.parseResults.length > 0);
|
||||
},
|
||||
parseContent: true
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'emptyElement',
|
||||
runTest: function(t){
|
||||
console.log("basicChecks: " + this.name);
|
||||
var msg = "setContentWithOnEnd Test";
|
||||
var node = dojo.byId("pane1");
|
||||
node.innerHTML = '<div><span>just</span>some test<br/></div>text';
|
||||
var cNodes = node.childNodes.length;
|
||||
|
||||
dojo.html._emptyNode(dojo.byId("pane1"));
|
||||
doh.t(node.childNodes.length == 0 && node.innerHTML == "");
|
||||
}
|
||||
},
|
||||
// the following tests use the _emptyNode function, so ensure it passes before
|
||||
// head-scratching over any failures that follow
|
||||
{
|
||||
name: 'changeContentTRHead',
|
||||
runTest: function(t){
|
||||
console.log("basicChecks: " + this.name);
|
||||
targetNode = dojo.query('table#tableTest > thead > tr')[0];
|
||||
|
||||
var html = "<td><div>This</div>Should<u>Work</u></td>";
|
||||
dojo.html.set(
|
||||
targetNode,
|
||||
html,
|
||||
{
|
||||
"testname": "basicChecks changeContentTRHead"
|
||||
}
|
||||
);
|
||||
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
|
||||
doh.is(html.toLowerCase(), res);
|
||||
},
|
||||
tearDown: function(){
|
||||
dojo.html._emptyNode(targetNode);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'changeContentTHead',
|
||||
runTest: function(t){
|
||||
console.log("basicChecks: " + this.name);
|
||||
targetNode = dojo.query('table#tableTest > thead')[0];
|
||||
|
||||
var html = "<tr><td><div>This</div>Should<u>Work</u></td></tr>";
|
||||
dojo.html.set(
|
||||
targetNode,
|
||||
html,
|
||||
{
|
||||
"testname": "basicChecks changeContentTHead"
|
||||
}
|
||||
);
|
||||
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
|
||||
doh.is(html.toLowerCase(), res);
|
||||
},
|
||||
tearDown: function(){
|
||||
dojo.html._emptyNode(targetNode);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'changeContentTRBody',
|
||||
runTest: function(t){
|
||||
console.log("basicChecks: " + this.name);
|
||||
targetNode = dojo.query('table#tableTest > tbody > tr')[0];
|
||||
var html = "<td><div>This</div>Should<u>Work</u></td>";
|
||||
dojo.html.set(
|
||||
targetNode,
|
||||
html,
|
||||
{
|
||||
"testname": "basicChecks changeContentTRBody"
|
||||
});
|
||||
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
|
||||
doh.is(html.toLowerCase(), res);
|
||||
},
|
||||
tearDown: function(){
|
||||
dojo.html._emptyNode(targetNode);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'changeContentTBody',
|
||||
runTest: function(t){
|
||||
console.log("basicChecks: " + this.name);
|
||||
targetNode = dojo.query('table#tableTest > tbody')[0];
|
||||
var html = "<tr><td><div>This</div>Should<u>Work</u></td></tr>";
|
||||
dojo.html.set(
|
||||
targetNode, html,
|
||||
{
|
||||
"testname": "basicChecks changeContentTBody"
|
||||
});
|
||||
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
|
||||
doh.is(html.toLowerCase(), res);
|
||||
},
|
||||
tearDown: function(){
|
||||
dojo.html._emptyNode(targetNode);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'changeContentTable',
|
||||
runTest: function(t){
|
||||
console.log("basicChecks: " + this.name);
|
||||
targetNode = dojo.query('table#tableTest')[0];
|
||||
var html = "<tbody><tr><td><div>This</div>Should<u>Work</u></td></tr></tbody>";
|
||||
dojo.html.set(
|
||||
targetNode, html,
|
||||
{
|
||||
"testname": "basicChecks changeContentTable"
|
||||
});
|
||||
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
|
||||
doh.is(html.toLowerCase(), res);
|
||||
},
|
||||
tearDown: function(){
|
||||
dojo.html._emptyNode(targetNode);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'setNodeList',
|
||||
runTest: function(t){
|
||||
console.log("basicChecks: " + this.name);
|
||||
var tmpUL = dojo.create("ul");
|
||||
dojo.create("li", { innerHTML: "item 1" }, tmpUL);
|
||||
dojo.create("li", { innerHTML: "item 2" }, tmpUL);
|
||||
console.log("ul content: ", tmpUL.innerHTML, tmpUL.childNodes.length);
|
||||
targetNode = dojo.byId("pane1");
|
||||
dojo.html.set(
|
||||
targetNode, tmpUL.childNodes,
|
||||
{
|
||||
"testname": "basicChecks setNodeList"
|
||||
});
|
||||
var res = dojo.query("li", dojo.byId("pane1")).length;
|
||||
doh.is(2, res);
|
||||
},
|
||||
tearDown: function(){
|
||||
dojo.html._emptyNode(targetNode);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'setMixedContent',
|
||||
runTest: function(t){
|
||||
console.log("basicChecks: " + this.name);
|
||||
|
||||
targetNode = dojo.byId("pane1");
|
||||
var html = '<h4>See Jane</h4>'
|
||||
+ 'Look at her <span>Run</span>!';
|
||||
dojo.html.set(
|
||||
targetNode, html,
|
||||
{
|
||||
"testname": "basicChecks setMixedContent"
|
||||
});
|
||||
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
|
||||
doh.is(html.toLowerCase(), res);
|
||||
},
|
||||
tearDown: function(){
|
||||
dojo.html._emptyNode(targetNode);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'extractContent',
|
||||
runTest: function(t){
|
||||
console.log("basicChecks: " + this.name);
|
||||
targetNode = dojo.byId("pane1");
|
||||
var html = ''
|
||||
+'<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">'
|
||||
+'<html> '
|
||||
+' <head> '
|
||||
+' <title> '
|
||||
+' the title '
|
||||
+' </title> '
|
||||
+' </head> '
|
||||
+' <body> '
|
||||
+' <p> '
|
||||
+' This is the <b>Good Stuff</b><br> '
|
||||
+' </p> '
|
||||
+' </body> '
|
||||
+'</html> ';
|
||||
|
||||
dojo.html.set(
|
||||
targetNode, html,
|
||||
{
|
||||
"testname": "basicChecks changeContentTable",
|
||||
extractContent: true
|
||||
});
|
||||
doh.t(targetNode.innerHTML.indexOf("title") == -1);
|
||||
doh.t(dojo.query("*", targetNode).length == 3);
|
||||
},
|
||||
tearDown: function(){
|
||||
dojo.html._emptyNode(targetNode);
|
||||
}
|
||||
}
|
||||
]);
|
||||
doh.register("nodelistExtension", [
|
||||
{
|
||||
name: 'nodelistHtml',
|
||||
runTest: function(t){
|
||||
console.log("nodelistExtension: " + this.name);
|
||||
|
||||
dojo.query(".zork").html("<li dojoType='dojo.html.test.ParserInstantiateTester'>1</li><li dojoType='dojo.html.test.ParserInstantiateTester'>2</li><li dojoType='dojo.html.test.ParserInstantiateTester'>3</li>",
|
||||
{
|
||||
parseContent: true,
|
||||
onBegin: function() {
|
||||
this.content = this.content.replace(/([0-9])/g, "MOOO");
|
||||
this.inherited("onBegin", arguments);
|
||||
}
|
||||
}).removeClass("notdone").addClass("done");
|
||||
|
||||
var liNodes = dojo.query(".zork > li");
|
||||
|
||||
// test to make sure three li's were added to class="zork" node (3x 3 set li's)
|
||||
doh.is(9, liNodes.length);
|
||||
|
||||
// test the innerHTML's got replaced in our onBegin
|
||||
doh.t( liNodes.every(function(n) { return n.innerHTML.match(/MOOO/) }) );
|
||||
console.log(this.name + ": innerHTML.match subtest was ok");
|
||||
|
||||
// test the parent elements got the correct className
|
||||
doh.t( dojo.query(".zork").every(function(n) { return n.className == "zork done"; }) );
|
||||
console.log(this.name + ": li.className subtest was ok");
|
||||
|
||||
// and test the parser correctly created object from the child nodes
|
||||
// ...they should all have a test attribute now
|
||||
doh.t( liNodes.every(function(n) { return n.getAttribute("test") == "ok"; }) );
|
||||
console.log(this.name + ": Tester instantiation subtest(getAttribute) was ok");
|
||||
|
||||
},
|
||||
tearDown: function(){
|
||||
// dojo.html._emptyNode(targetNode);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "nodeListSimple",
|
||||
runTest: function(t){
|
||||
var txt = "foo";
|
||||
dojo.query("#simpleText").html("<p>"+txt+"</p>");
|
||||
|
||||
// check if its there at all
|
||||
var len = dojo.query("#simpleText p").length;
|
||||
doh.is(1, len);
|
||||
|
||||
// check the inner html is right:
|
||||
var p = dojo.query("#simpleText p")[0];
|
||||
doh.t( p && p.innerHTML == txt );
|
||||
}
|
||||
}
|
||||
]);
|
||||
doh.register("fromMarkup", [
|
||||
{
|
||||
name: 'contentOpFromMarkup',
|
||||
runTest: function(t){
|
||||
console.log("fromMarkup: " + this.name);
|
||||
|
||||
dojo.parser.parse("markupSetContentOp");
|
||||
doh.t(dojo.byId("markupPane").innerHTML == "markupSetContentOp: new node content");
|
||||
},
|
||||
tearDown: function(){
|
||||
dojo.byId("markupPane").innerHTML = "initial content";
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'extendedContentOpFromMarkup',
|
||||
runTest: function(t){
|
||||
console.log("fromMarkup: " + this.name);
|
||||
|
||||
dojo.parser.parse("markupSetContentOpX");
|
||||
|
||||
doh.t(dojo.byId("markupPane").innerHTML == "markupSetContentOpX: new node content".toUpperCase());
|
||||
},
|
||||
tearDown: function(){
|
||||
dojo.byId("markupPane").innerHTML = "initial content";
|
||||
}
|
||||
}
|
||||
]);
|
||||
doh.register("reuse", [
|
||||
{
|
||||
name: 'ContentSetterReUse',
|
||||
runTest: function(t){
|
||||
console.log("fromMarkup: " + this.name);
|
||||
|
||||
targetNode = dojo.byId('pane1');
|
||||
var args = [
|
||||
[
|
||||
"simple"
|
||||
],
|
||||
[
|
||||
'<div dojoType="dojo.html.test.SimpleThing" jsId="id00">parsed content</div>',
|
||||
{
|
||||
parseContent: true
|
||||
}
|
||||
],
|
||||
[
|
||||
'<div dojoType="dojo.html.test.SimpleThing" jsId="id01">parsed content</div>',
|
||||
{
|
||||
parseContent: true
|
||||
}
|
||||
]
|
||||
];
|
||||
var setter = new dojo.html._ContentSetter({
|
||||
node: targetNode
|
||||
});
|
||||
dojo.forEach(args, function(applyArgs) {
|
||||
setter.node = targetNode;
|
||||
setter.set.apply(setter, applyArgs);
|
||||
setter.tearDown();
|
||||
});
|
||||
doh.t(id00 && id01);
|
||||
// check we cleaned up after ourselves
|
||||
doh.f(setter.parseResults);
|
||||
},
|
||||
tearDown: function(){
|
||||
dojo.byId("markupPane").innerHTML = "initial content";
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
// Test specification of inherited attributes dir, lang, etc.
|
||||
var handle;
|
||||
doh.register("inherited", [
|
||||
{
|
||||
name: 'unspecified',
|
||||
runTest: function(t){
|
||||
var cont = '<div dojoType="dojo.html.test.SimpleThing" jsId="ifrs" data="{}"></div>';
|
||||
|
||||
var parserCalled, inherited;
|
||||
handle = dojo.connect(dojo.parser, "parse", function(args){
|
||||
parserCalled = true;
|
||||
inherited = args.inherited;
|
||||
});
|
||||
|
||||
dojo.html.set(
|
||||
dojo.byId("pane1"),
|
||||
cont,
|
||||
{
|
||||
parseContent: true
|
||||
}
|
||||
);
|
||||
doh.t(parserCalled, "parser was called");
|
||||
doh.f("dir" in inherited, "no dir specified");
|
||||
doh.f("lang" in inherited, "no lang specified");
|
||||
},
|
||||
tearDown: function(){
|
||||
dojo.disconnect(handle);
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'specified',
|
||||
runTest: function(t){
|
||||
var cont = '<div dojoType="dojo.html.test.SimpleThing" jsId="ifrs" data="{}"></div>';
|
||||
|
||||
var parserCalled, inherited;
|
||||
handle = dojo.connect(dojo.parser, "parse", function(args){
|
||||
parserCalled = true;
|
||||
inherited = args.inherited;
|
||||
});
|
||||
|
||||
dojo.html.set(
|
||||
dojo.byId("pane1"),
|
||||
cont,
|
||||
{
|
||||
dir: "rtl",
|
||||
lang: "it_it",
|
||||
textDir: "ltr",
|
||||
parseContent: true
|
||||
}
|
||||
);
|
||||
doh.t(parserCalled, "parser was called");
|
||||
doh.is("rtl", inherited.dir, "dir");
|
||||
doh.is("it_it", inherited.lang, "lang");
|
||||
doh.is("ltr", inherited.textDir, "textdir");
|
||||
},
|
||||
tearDown: function(){
|
||||
dojo.disconnect(handle);
|
||||
}
|
||||
}
|
||||
|
||||
]);
|
||||
|
||||
doh.run();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
@import "../../../dojo/resources/dojo.css";
|
||||
|
||||
.box {
|
||||
border: 1px solid black;
|
||||
height: 190px;
|
||||
width: 80%;
|
||||
overflow: auto;
|
||||
}
|
||||
.zork {
|
||||
width: 200px;
|
||||
margin: 10px;
|
||||
list-style-type: none;
|
||||
}
|
||||
.notdone {
|
||||
color: #999; background-color: #ccc;
|
||||
}
|
||||
.done {
|
||||
color: #fff; background-color: #090;
|
||||
}
|
||||
.done li {
|
||||
border: 1px; background-color: orange;
|
||||
width: 180px;
|
||||
}
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body class='tundra'>
|
||||
<h1>dojo.html.set</h1>
|
||||
|
||||
<div id="pane1"></div>
|
||||
<div id="pane2"></div>
|
||||
<table id='tableTest' class='box'>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tbody>
|
||||
</table>
|
||||
<ul class="zork notdone">initial content</ul>
|
||||
<ul class="zork notdone">initial content</ul>
|
||||
<ul class="zork notdone">initial content</ul>
|
||||
|
||||
<div id="markupPane">initial content</div>
|
||||
<div id="markupSetContentOp">
|
||||
<div dojoType="dojo.html.test.DeclarativeContentSetter" node="markupPane" content="markupSetContentOp: new node content"></div>
|
||||
</div>
|
||||
<div id="markupSetContentOpX">
|
||||
<div dojoType="dojo.html.test.DeclarativeContentSetter" jsId="markupSetContentOpX_setter" node="markupPane" content="markupSetContentOpX: new node content">
|
||||
<script type="dojo/method" event="onBegin">
|
||||
this.content = this.content.toUpperCase();
|
||||
console.log(this.id + ", made my content look like this:" + this.content);
|
||||
</script>
|
||||
<script type="dojo/method" event="onFoo">
|
||||
console.log("dojo/method supplied onBegin");
|
||||
this.content = this.content.toUpperCase();
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<div id="another">
|
||||
<div id="myTest9" dojoType="dojo.html.test.DeclarativeContentSetter">
|
||||
Some content
|
||||
<script type="dojo/method">
|
||||
console.log("parsed me!");
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
<h1 id="simpleText">test</h1>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user