can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
558 lines (519 loc) • 15.5 kB
HTML
<html>
<head>
<title>dojo.html.set test</title>
<script src="../../dojo.js" data-dojo-config="isDebug:true, parseOnLoad:false"></script>
<script>
require([
"doh",
"dojo/_base/array", "dojo/aspect",
"dojo/_base/declare", "dojo/dom", "dojo/dom-construct", "dojo/html", "dojo/_base/lang", "dojo/parser",
"dojo/query", "dojo/NodeList-html","dojo/domReady!"
], function(doh, array, aspect, declare, dom, domConstruct, html, lang, parser, query){
/* 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
*/
declare("SimpleThing", null, {
constructor: function(params, node) {
node.setAttribute("test", "ok");
}
});
declare("ParserInstantiateTester", null, {
constructor: function(params, node) {
node.setAttribute("test", "ok");
}
});
declare("DeclarativeContentSetter", html._ContentSetter, {
postscript: function() {
this.set();
}
});
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 = dom.byId("pane1");
var msg = "Simple No-params Test";
console.log("targetNode has content: ", targetNode.innerHTML);
var result = "";
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 = dom.byId("pane1");
var msg = "setContentWithOnEnd Test";
var result = false;
html.set(
targetNode,
msg,
{
onEnd: function() {
lang.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 data-dojo-type="SimpleThing" data-dojo-id="ifrs" data="{}"></div>';
html.set(
dom.byId("pane1"),
cont,
{
postscript: function() {
this.set();
doh.t(typeof ifrs != "undefined" && ifrs.declaredClass=="SimpleThing");
doh.t(this.parseResults.length > 0);
},
parseContent: true
}
);
}
},
{
name: 'emptyElement',
runTest: function(t){
// Test of deprecated _emptyNode() method
console.log("basicChecks: " + this.name);
var msg = "setContentWithOnEnd Test";
var node = dom.byId("pane1");
node.innerHTML = '<div><span>just</span>some test<br/></div>text';
var cNodes = node.childNodes.length;
html._emptyNode(dom.byId("pane1"));
doh.t(node.childNodes.length == 0 && node.innerHTML == "");
}
},
{
name: 'changeContentTRHead',
runTest: function(t){
console.log("basicChecks: " + this.name);
targetNode = query('table#tableTest > thead > tr')[0];
var markup = "<td><div>This</div>Should<u>Work</u></td>";
html.set(
targetNode,
markup,
{
"testname": "basicChecks changeContentTRHead"
}
);
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
doh.is(markup.toLowerCase(), res);
},
tearDown: function(){
domConstruct.empty(targetNode);
}
},
{
name: 'changeContentTHead',
runTest: function(t){
console.log("basicChecks: " + this.name);
targetNode = query('table#tableTest > thead')[0];
var markup = "<tr><td><div>This</div>Should<u>Work</u></td></tr>";
html.set(
targetNode,
markup,
{
"testname": "basicChecks changeContentTHead"
}
);
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
doh.is(markup.toLowerCase(), res);
},
tearDown: function(){
domConstruct.empty(targetNode);
}
},
{
name: 'changeContentTRBody',
runTest: function(t){
console.log("basicChecks: " + this.name);
targetNode = query('table#tableTest > tbody > tr')[0];
var markup = "<td><div>This</div>Should<u>Work</u></td>";
html.set(
targetNode,
markup,
{
"testname": "basicChecks changeContentTRBody"
});
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
doh.is(markup.toLowerCase(), res);
},
tearDown: function(){
domConstruct.empty(targetNode);
}
},
{
name: 'changeContentTBody',
runTest: function(t){
console.log("basicChecks: " + this.name);
targetNode = query('table#tableTest > tbody')[0];
var markup = "<tr><td><div>This</div>Should<u>Work</u></td></tr>";
html.set(
targetNode, markup,
{
"testname": "basicChecks changeContentTBody"
});
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
doh.is(markup.toLowerCase(), res);
},
tearDown: function(){
domConstruct.empty(targetNode);
}
},
{
name: 'changeContentTable',
runTest: function(t){
console.log("basicChecks: " + this.name);
targetNode = query('table#tableTest')[0];
var markup = "<tbody><tr><td><div>This</div>Should<u>Work</u></td></tr></tbody>";
html.set(
targetNode, markup,
{
"testname": "basicChecks changeContentTable"
});
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
doh.is(markup.toLowerCase(), res);
},
tearDown: function(){
domConstruct.empty(targetNode);
}
},
{
name: 'setNodeList',
runTest: function(t){
console.log("basicChecks: " + this.name);
var tmpUL = domConstruct.create("ul");
domConstruct.create("li", { innerHTML: "item 1" }, tmpUL);
domConstruct.create("li", { innerHTML: "item 2" }, tmpUL);
console.log("ul content: ", tmpUL.innerHTML, tmpUL.childNodes.length);
targetNode = dom.byId("pane1");
html.set(
targetNode, tmpUL.childNodes,
{
"testname": "basicChecks setNodeList"
});
var res = query("li", dom.byId("pane1")).length;
doh.is(2, res);
},
tearDown: function(){
domConstruct.empty(targetNode);
}
},
{
name: 'setMixedContent',
runTest: function(t){
console.log("basicChecks: " + this.name);
targetNode = dom.byId("pane1");
var markup = '<h4>See Jane</h4>'
+ 'Look at her <span>Run</span>!';
html.set(
targetNode, markup,
{
"testname": "basicChecks setMixedContent"
});
var res = ieTrimSpaceBetweenTags(targetNode.innerHTML.toLowerCase());
doh.is(markup.toLowerCase(), res);
},
tearDown: function(){
domConstruct.empty(targetNode);
}
},
{
name: 'extractContent',
runTest: function(t){
console.log("basicChecks: " + this.name);
targetNode = dom.byId("pane1");
var markup = ''
+'<!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> ';
html.set(
targetNode, markup,
{
"testname": "basicChecks changeContentTable",
extractContent: true
});
doh.t(targetNode.innerHTML.indexOf("title") == -1);
doh.t(query("*", targetNode).length == 3);
},
tearDown: function(){
domConstruct.empty(targetNode);
}
}
]);
doh.register("nodelistExtension", [
{
name: 'nodelistHtml',
runTest: function(t){
console.log("nodelistExtension: " + this.name);
query(".zork").html("<li data-dojo-type='ParserInstantiateTester'>1</li><li data-dojo-type='ParserInstantiateTester'>2</li><li data-dojo-type='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 = 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( 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(){
// domConstruct.empty(targetNode);
}
},
{
name: "nodeListSimple",
runTest: function(t){
var txt = "foo";
query("#simpleText").html("<p>"+txt+"</p>");
// check if its there at all
var len = query("#simpleText p").length;
doh.is(1, len);
// check the inner html is right:
var p = query("#simpleText p")[0];
doh.t( p && p.innerHTML == txt );
}
}
]);
doh.register("fromMarkup", [
{
name: 'contentOpFromMarkup',
runTest: function(t){
console.log("fromMarkup: " + this.name);
parser.parse("markupSetContentOp");
doh.t(dom.byId("markupPane").innerHTML == "markupSetContentOp: new node content");
},
tearDown: function(){
dom.byId("markupPane").innerHTML = "initial content";
}
},
{
name: 'extendedContentOpFromMarkup',
runTest: function(t){
console.log("fromMarkup: " + this.name);
parser.parse("markupSetContentOpX");
doh.t(dom.byId("markupPane").innerHTML == "markupSetContentOpX: new node content".toUpperCase());
},
tearDown: function(){
dom.byId("markupPane").innerHTML = "initial content";
}
}
]);
doh.register("reuse", [
{
name: 'ContentSetterReUse',
runTest: function(t){
console.log("fromMarkup: " + this.name);
targetNode = dom.byId('pane1');
var args = [
[
"simple"
],
[
'<div data-dojo-type="SimpleThing" data-dojo-id="id00">parsed content</div>',
{
parseContent: true
}
],
[
'<div data-dojo-type="SimpleThing" data-dojo-id="id01">parsed content</div>',
{
parseContent: true
}
]
];
var setter = new html._ContentSetter({
node: targetNode
});
array.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(){
dom.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 data-dojo-type="SimpleThing" data-dojo-id="ifrs" data="{}"></div>';
var parserCalled, inherited;
handle = aspect.after(parser, "parse", function(args){
parserCalled = true;
inherited = args.inherited;
}, true);
html.set(
dom.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(){
handle.remove();
}
},
{
name: 'specified',
runTest: function(t){
var cont = '<div data-dojo-type="SimpleThing" data-dojo-id="ifrs" data="{}"></div>';
var parserCalled, inherited;
handle = aspect.after(parser, "parse", function(args){
parserCalled = true;
inherited = args.inherited;
}, true);
html.set(
dom.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(){
handle.remove();
}
}
]);
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 data-dojo-type="DeclarativeContentSetter" node="markupPane" content="markupSetContentOp: new node content"></div>
</div>
<div id="markupSetContentOpX">
<div data-dojo-type="DeclarativeContentSetter" data-dojo-id="markupSetContentOpX_setter" node="markupPane" content="markupSetContentOpX: new node content">
<script type="dojo/method" data-dojo-event="onBegin">
this.content = this.content.toUpperCase();
console.log(this.id + ", made my content look like this:" + this.content);
</script>
<script type="dojo/method" data-dojo-event="onFoo">
console.log("dojo/method supplied onBegin");
this.content = this.content.toUpperCase();
</script>
</div>
</div>
<div id="another">
<div id="myTest9" data-dojo-type="DeclarativeContentSetter">
Some content
<script type="dojo/method">
console.log("parsed me!");
</script>
</div>
</div>
<h1 id="simpleText">test</h1>
</body>
</html>