511 lines
21 KiB
HTML
511 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<title>Accordion Widget Automated Test</title>
|
|
|
|
<!-- only needed for test files: -->
|
|
<style type="text/css">
|
|
@import "../../themes/claro/document.css";
|
|
@import "../css/dijitTests.css";
|
|
</style>
|
|
|
|
<!-- required: the default dijit theme: -->
|
|
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
|
|
|
|
<!-- required: dojo.js -->
|
|
<script type="text/javascript" src="../../../dojo/dojo.js"
|
|
data-dojo-config="isDebug: true"></script>
|
|
|
|
<!-- only needed for alternate theme testing: -->
|
|
<script type="text/javascript" src="../_testCommon.js"></script>
|
|
|
|
<!-- helper methods -->
|
|
<script type="text/javascript" src="../helpers.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
dojo.require("doh.runner");
|
|
dojo.require("dojo.parser");
|
|
dojo.require("dijit.registry");
|
|
dojo.require("dijit.form.Button");
|
|
dojo.require("dijit.layout.AccordionContainer");
|
|
dojo.require("dijit.layout.ContentPane");
|
|
|
|
var accordion;
|
|
|
|
dojo.ready(function(){
|
|
doh.register("basic",
|
|
[
|
|
{
|
|
name: "create",
|
|
runTest: function(t){
|
|
accordion = new dijit.layout.AccordionContainer({style: "width: 400px; height: 400px;"}).placeAt(dojo.body());
|
|
|
|
dojo.forEach([ "pane 1", "pane 2", "pane 3" ], function(title, i){
|
|
var content = new dijit.layout.ContentPane({id: title, title: title, selected: i==1});
|
|
content.containerNode.innerHTML = "this is " + title;
|
|
accordion.addChild(content);
|
|
});
|
|
accordion.startup();
|
|
var titles = dojo.query(".dijitAccordionText", accordion.domNode);
|
|
t.is(3, titles.length, "number of titles");
|
|
t.is("pane 3", titles[2].innerHTML);
|
|
|
|
var children = accordion.getChildren();
|
|
t.is(3, children.length, "number of children (ie, contentpanes)");
|
|
}
|
|
},
|
|
{
|
|
name: "initially open pane",
|
|
runTest: function(t){
|
|
// Pane 2 is initially open
|
|
var openPanes = dojo.query(".dijitAccordionChildWrapper > *", accordion.containerNode).filter(function(node){
|
|
return node.parentNode.style.display != "none";
|
|
});
|
|
t.is(1, openPanes.length, "exactly one open pane");
|
|
t.is("pane 2", dijit.byNode(openPanes[0]).title, "pane 2 is initially open");
|
|
|
|
// And others are closed
|
|
var closedPanes = dojo.query(".dijitAccordionChildWrapper > *", accordion.containerNode).filter(function(node){
|
|
return node.parentNode.style.display == "none";
|
|
});
|
|
t.is(2, closedPanes.length, "n-1 closed panes");
|
|
}
|
|
},
|
|
{
|
|
name: "addChild at end",
|
|
runTest: function(t){
|
|
var pane4 = new dijit.layout.ContentPane({title: "pane 4", content: "this is pane 4"});
|
|
accordion.addChild(pane4);
|
|
|
|
var titles = dojo.query(".dijitAccordionText", accordion.domNode);
|
|
t.is(4, titles.length, "number of titles");
|
|
t.is("pane 4", titles[3].innerHTML);
|
|
|
|
var children = accordion.getChildren();
|
|
t.is(4, children.length, "number of children (ie, contentpanes)");
|
|
t.is(pane4, children[3], "last child is the newly inserted one");
|
|
}
|
|
},
|
|
{
|
|
name: "addChild after pane 1",
|
|
runTest: function(t){
|
|
pane1half = new dijit.layout.ContentPane({id: "pane1half", title: "pane 1.5", content: "this is pane 1.5"});
|
|
accordion.addChild(pane1half, 1);
|
|
|
|
var titles = dojo.query(".dijitAccordionText", accordion.domNode);
|
|
t.is(5, titles.length, "number of titles");
|
|
t.is("pane 1.5", titles[1].innerHTML);
|
|
|
|
var children = accordion.getChildren();
|
|
t.is(5, children.length, "number of children (ie, contentpanes)");
|
|
t.is(pane1half, children[1], "second child is the newly inserted one");
|
|
}
|
|
},
|
|
{
|
|
name: "removeChild(pane 1.5)",
|
|
runTest: function(t){
|
|
accordion.removeChild(dijit.byId('pane1half'));
|
|
|
|
var titles = dojo.query(".dijitAccordionText", accordion.domNode);
|
|
t.is(4, titles.length, "number of titles");
|
|
t.is("pane 2", titles[1].innerHTML);
|
|
|
|
var children = accordion.getChildren();
|
|
t.is(4, children.length, "number of children (ie, contentpanes)");
|
|
t.is("pane 2", children[1].title, "second child is again 'pane 2'");
|
|
|
|
// spec is that removing a child shouldn't delete it
|
|
t.t(dijit.byId("pane1half"), "child removed but still exists");
|
|
}
|
|
},
|
|
{
|
|
name: "initially open pane (checking again)",
|
|
runTest: function(t){
|
|
// Pane 2 is initially open
|
|
var openPanes = dojo.query(".dijitAccordionChildWrapper > *", accordion.containerNode).filter(function(node){
|
|
return node.parentNode.style.display != "none";
|
|
});
|
|
t.is(1, openPanes.length, "exactly one open pane");
|
|
t.is("pane 2", dijit.byNode(openPanes[0]).title, "pane 2 is initially open");
|
|
|
|
// And others are closed
|
|
var closedPanes = dojo.query(".dijitAccordionChildWrapper > *", accordion.containerNode).filter(function(node){
|
|
return node.parentNode.style.display == "none";
|
|
});
|
|
t.is(3, closedPanes.length, "n-1 closed panes");
|
|
}
|
|
},
|
|
{
|
|
name: "select new pane",
|
|
runTest: function(t){
|
|
// Selecting pane 3 should open it and close pane 1
|
|
|
|
// select w/out animation
|
|
accordion.selectChild(dijit.byId('pane 3'));
|
|
|
|
// Pane 3 is now open
|
|
var openPanes = dojo.query(".dijitAccordionChildWrapper > *", accordion.containerNode).filter(function(node){
|
|
return node.parentNode.style.display != "none";
|
|
});
|
|
t.is(1, openPanes.length, "exactly one open pane");
|
|
t.is("pane 3", dijit.byNode(openPanes[0]).title, "pane 3 is now open");
|
|
|
|
// And others are closed
|
|
var closedPanes = dojo.query(".dijitAccordionChildWrapper > *", accordion.containerNode).filter(function(node){
|
|
return node.parentNode.style.display == "none";
|
|
});
|
|
t.is(3, closedPanes.length, "n-1 closed panes");
|
|
}
|
|
},
|
|
{
|
|
name: "select new pane with animation",
|
|
timeout: 3000,
|
|
setUp: function(t){
|
|
// Note that this kicks off an animation so it might be a while before the
|
|
// bottom setTimeout() fires, likely longer than the 300ms specified
|
|
accordion.selectChild(dijit.byId('pane 2'), true);
|
|
},
|
|
runTest: function(t){
|
|
// Selecting pane 2 should open it and close pane 3
|
|
var d = new doh.Deferred();
|
|
setTimeout(d.getTestCallback(function(){
|
|
// Pane 2 is now open
|
|
var openPanes = dojo.query(".dijitAccordionChildWrapper > *", accordion.containerNode).filter(function(node){
|
|
return node.parentNode.style.display != "none";
|
|
});
|
|
t.is(1, openPanes.length, "exactly one open pane");
|
|
t.is("pane 2", dijit.byNode(openPanes[0]).title, "pane 3 is now open");
|
|
|
|
// And others are closed
|
|
var closedPanes = dojo.query(".dijitAccordionChildWrapper > *", accordion.containerNode).filter(function(node){
|
|
return node.parentNode.style.display == "none";
|
|
});
|
|
t.is(3, closedPanes.length, "n-1 closed panes");
|
|
}), 300);
|
|
return d;
|
|
}
|
|
},
|
|
{
|
|
name: "destroy recursive",
|
|
runTest: function(t){
|
|
accordion.destroyRecursive();
|
|
t.is(1, dijit.registry.toArray().length, "accordion and subwidgets destroyed, pane1half remains");
|
|
}
|
|
}
|
|
]
|
|
);
|
|
|
|
doh.register("child events", function childEvents(t){
|
|
accordion = new dijit.layout.AccordionContainer({style: "width: 400px; height: 400px;"}).placeAt(dojo.body());
|
|
|
|
dojo.forEach([ "a", "b", "c" ], function(title, i){
|
|
var content = new dijit.layout.ContentPane({id: title, title: title, selected: i==1});
|
|
content.containerNode.innerHTML = "this is " + title;
|
|
accordion.addChild(content);
|
|
});
|
|
accordion.startup();
|
|
|
|
// Change title of a pane, should change corresponding button label
|
|
dijit.byId("b").set("title", "b changed");
|
|
var titles = dojo.query(".dijitAccordionText", accordion.domNode);
|
|
t.is(3, titles.length, "number of titles");
|
|
t.is("b changed", titles[1].innerHTML);
|
|
|
|
// Change tooltip of a pane, should change corresponding button tooltip
|
|
dijit.byId("c").set("tooltip", "c tooltip changed");
|
|
titles = dojo.query(".dijitAccordionText", accordion.domNode);
|
|
t.is(3, titles.length, "number of titles");
|
|
t.is("c tooltip changed", titles[2].title);
|
|
});
|
|
|
|
doh.register("zero children",
|
|
[
|
|
{
|
|
name: "create w/no children",
|
|
runTest: function(t){
|
|
accordion = new dijit.layout.AccordionContainer({style: "width: 400px; height: 400px;"}).placeAt(dojo.body());
|
|
accordion.startup();
|
|
var children = accordion.getChildren();
|
|
t.is(0, children.length, "no children");
|
|
accordion.resize();
|
|
t.t(true, "resize ran w/out exception");
|
|
}
|
|
},
|
|
{
|
|
name: "add children",
|
|
runTest: function(t){
|
|
dojo.forEach([ "pane 10", "pane 11"], function(title, i){
|
|
var content = new dijit.layout.ContentPane({id: title, title: title});
|
|
content.containerNode.innerHTML = "this is " + title;
|
|
accordion.addChild(content);
|
|
});
|
|
var children = accordion.getChildren();
|
|
t.is(2, children.length, "2 children");
|
|
}
|
|
},
|
|
{
|
|
name: "remove all children",
|
|
runTest: function(t){
|
|
var pane10 = dijit.byId("pane 10"),
|
|
pane11 = dijit.byId("pane 11");
|
|
|
|
t.is(pane10, accordion.selectedChildWidget, "pane 10 initially selected");
|
|
|
|
accordion.removeChild(pane10);
|
|
t.is(pane11, accordion.selectedChildWidget, "after pane 10 removed, pane 11 selected");
|
|
|
|
accordion.removeChild(pane11);
|
|
t.f(accordion.selectedChildWidget, "after pane 11 removed, no pane selected");
|
|
var children = accordion.getChildren();
|
|
t.is(0, children.length, "all children removed");
|
|
}
|
|
},
|
|
{
|
|
name: "add back children",
|
|
runTest: function(t){
|
|
dojo.forEach([ "pane 12", "pane 13"], function(title, i){
|
|
var content = new dijit.layout.ContentPane({id: title, title: title});
|
|
content.containerNode.innerHTML = "this is " + title;
|
|
accordion.addChild(content);
|
|
});
|
|
|
|
var children = accordion.getChildren();
|
|
t.is(2, children.length, "two new children");
|
|
t.is(dijit.byId("pane 12"), accordion.selectedChildWidget, "pane 12 selected");
|
|
}
|
|
}
|
|
]
|
|
);
|
|
|
|
// This section tests that the animation doesn't leave residual height=... settings on the
|
|
// node that interfere with future operations
|
|
doh.register("animation",
|
|
[
|
|
{
|
|
name: "create",
|
|
runTest: function(t){
|
|
accordion = new dijit.layout.AccordionContainer({style: "width: 400px; height: 400px;"}).placeAt(dojo.body());
|
|
|
|
dojo.forEach([ "pane 1", "pane 2", "pane 3" ], function(title, i){
|
|
var content = new dijit.layout.ContentPane({id: title, title: title, selected: i==1});
|
|
content.containerNode.innerHTML = "this is " + title;
|
|
accordion.addChild(content);
|
|
});
|
|
accordion.startup();
|
|
|
|
// make sure size of selected child is correct
|
|
doh.t(dojo.position(accordion.selectedChildWidget.domNode).h > 300, "child height > 300");
|
|
doh.t(dojo.position(accordion.selectedChildWidget.domNode).h < 400, "child height < 400");
|
|
doh.is(dojo.marginBox(accordion.selectedChildWidget.domNode).h, dojo.contentBox(accordion.selectedChildWidget._wrapperWidget.containerNode).h, "child height vs. wrapper height")
|
|
}
|
|
},
|
|
{
|
|
name: "select new pane with animation",
|
|
timeout: 3000,
|
|
setUp: function(t){
|
|
// Note that this kicks off an animation so it might be a while before the
|
|
// bottom setTimeout() fires, likely longer than the 300ms specified
|
|
accordion.selectChild(dijit.byId('pane 2'), true);
|
|
},
|
|
runTest: function(t){
|
|
// Selecting pane 2 should open it and close pane 3
|
|
var d = new doh.Deferred();
|
|
setTimeout(d.getTestCallback(function(){
|
|
doh.is("pane 2", accordion.selectedChildWidget.title);
|
|
|
|
// make sure size of selected child is correct
|
|
doh.t(dojo.position(accordion.selectedChildWidget.domNode).h > 300, "child height > 300");
|
|
doh.t(dojo.position(accordion.selectedChildWidget.domNode).h < 400, "child height < 400");
|
|
doh.is(dojo.marginBox(accordion.selectedChildWidget.domNode).h, dojo.contentBox(accordion.selectedChildWidget._wrapperWidget.containerNode).h, "child height vs. wrapper height")
|
|
}), 300);
|
|
return d;
|
|
}
|
|
},
|
|
|
|
// Make sure that the animation didn't leave a residual height: 1px that affect
|
|
// pane #1 when it is reselected w/out an animation
|
|
{
|
|
name: "remove pane #2, reselecting pane #1",
|
|
runTest: function(t){
|
|
accordion.removeChild(dijit.byId("pane 2"));
|
|
|
|
doh.is("pane 1", accordion.selectedChildWidget.title);
|
|
|
|
// make sure size of selected child is correct
|
|
doh.t(dojo.position(accordion.selectedChildWidget.domNode).h > 300, "child height > 300");
|
|
doh.t(dojo.position(accordion.selectedChildWidget.domNode).h < 400, "child height < 400");
|
|
doh.is(dojo.marginBox(accordion.selectedChildWidget.domNode).h, dojo.contentBox(accordion.selectedChildWidget._wrapperWidget.containerNode).h, "child height vs. wrapper height")
|
|
}
|
|
},
|
|
{
|
|
name: "select pane #3 with animation",
|
|
timeout: 3000,
|
|
setUp: function(t){
|
|
// Note that this kicks off an animation so it might be a while before the
|
|
// bottom setTimeout() fires, likely longer than the 300ms specified
|
|
accordion.selectChild(dijit.byId('pane 3'), true);
|
|
},
|
|
runTest: function(t){
|
|
// Selecting pane 2 should open it and close pane 3
|
|
var d = new doh.Deferred();
|
|
setTimeout(d.getTestCallback(function(){
|
|
doh.is("pane 3", accordion.selectedChildWidget.title);
|
|
|
|
// make sure size of selected child is correct
|
|
doh.t(dojo.position(accordion.selectedChildWidget.domNode).h > 300, "child height > 300");
|
|
doh.t(dojo.position(accordion.selectedChildWidget.domNode).h < 400, "child height < 400");
|
|
doh.is(dojo.marginBox(accordion.selectedChildWidget.domNode).h, dojo.contentBox(accordion.selectedChildWidget._wrapperWidget.containerNode).h, "child height vs. wrapper height")
|
|
}), 300);
|
|
return d;
|
|
}
|
|
},
|
|
|
|
// Make sure that the wipe-in animation didn't leave a residual height: 300px type
|
|
// setting that will interfere with resizing
|
|
{
|
|
name: "resize",
|
|
timeout: 3000,
|
|
runTest: function(t){
|
|
accordion.resize({h: 200});
|
|
|
|
// make sure size of selected child is correct
|
|
doh.t(dojo.position(accordion.selectedChildWidget.domNode).h > 100, "child height > 150");
|
|
doh.t(dojo.position(accordion.selectedChildWidget.domNode).h < 200, "child height < 200");
|
|
doh.is(dojo.marginBox(accordion.selectedChildWidget.domNode).h, dojo.contentBox(accordion.selectedChildWidget._wrapperWidget.containerNode).h, "child height vs. wrapper height")
|
|
}
|
|
}
|
|
]
|
|
);
|
|
|
|
doh.register("destroy", [
|
|
function setUp(){
|
|
accPane = new dijit.layout.ContentPane({
|
|
id: "accPane",
|
|
onContentError: function(msg){
|
|
throw new Error(msg);
|
|
}
|
|
});
|
|
accPane.placeAt(dojo.body());
|
|
html='<div data-dojo-type="dijit.layout.AccordionContainer" id="Accordion" style="height: 300px;">' +
|
|
'<div data-dojo-type="dijit.layout.ContentPane" title="first" id="first">' +
|
|
'<div data-dojo-type=dijit.form.Button id=myButton>hello world</div></div>' +
|
|
'<div data-dojo-type="dijit.layout.ContentPane" title="second" id="second">second</div>' +
|
|
'</div>';
|
|
},
|
|
|
|
function destroyUnstarted(){
|
|
// Since the wrapper ContentPane hasn't been started yet, the Accordion won't be started, and wrapper
|
|
// (AccordionInnerContainer) widgets won't be created...
|
|
accPane.set("content", html);
|
|
doh.t(dojo.byId("Accordion"), "accordion created #1");
|
|
accPane.set("content", html); //setting the content twice will initiate a destroy
|
|
dijit.byId("Accordion").destroy();
|
|
doh.is(undefined, dojo.byId("Accordion"), "accordion destroyed #1");
|
|
},
|
|
|
|
function destroyStarted(){
|
|
// Try same tests again when wrapper ContentPane is started
|
|
accPane.startup();
|
|
|
|
accPane.set("content", html);
|
|
doh.t(dojo.byId("Accordion"), "accordion created #2");
|
|
accPane.set("content", html); //setting the content twice will initiate a destroy
|
|
dijit.byId("Accordion").destroy();
|
|
doh.is(undefined, dojo.byId("Accordion"), "accordion destroyed #2");
|
|
}
|
|
]);
|
|
|
|
doh.register("markup", [
|
|
{
|
|
name: "create",
|
|
runTest: function(t){
|
|
dojo.parser.parse();
|
|
|
|
accordion = dijit.byId("markupAccordion");
|
|
|
|
var titles = dojo.query(".dijitAccordionText", accordion.domNode);
|
|
t.is(3, titles.length, "number of titles");
|
|
t.is("Other Lazy Load Pane", titles[2].innerHTML);
|
|
|
|
var children = accordion.getChildren();
|
|
t.is(3, children.length, "number of children (ie, contentpanes)");
|
|
}
|
|
},
|
|
{
|
|
name: "addChild after pane 1",
|
|
runTest: function(t){
|
|
pane1half = new dijit.layout.ContentPane({id: "otherPane1half", title: "pane 1.5", content: "this is pane 1.5"});
|
|
accordion.addChild(pane1half, 1);
|
|
|
|
var titles = dojo.query(".dijitAccordionText", accordion.domNode);
|
|
t.is(4, titles.length, "number of titles");
|
|
t.is("pane 1.5", titles[1].innerHTML);
|
|
|
|
var children = accordion.getChildren();
|
|
t.is(4, children.length, "number of children (ie, contentpanes)");
|
|
t.is(pane1half, children[1], "second child is the newly inserted one");
|
|
}
|
|
}
|
|
]);
|
|
|
|
doh.run();
|
|
});
|
|
</script>
|
|
</head>
|
|
<body class="claro" style="padding: 50px;">
|
|
|
|
<h1 class="testTitle">AccordionContainer Automated Tests</h1>
|
|
|
|
<h2 class="testTitle">Markup Accordion</h2>
|
|
<div id="markupAccordion" data-dojo-type="dijit.layout.AccordionContainer"
|
|
data-dojo-props='style:"width: 400px; height: 300px; overflow: hidden"'>
|
|
<div id="pane1" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='selected:true,
|
|
title:"A Simple Pane", iconClass:"dijitEditorIcon dijitEditorIconSave", tooltip:"tooltip for simple pane" '>
|
|
<select>
|
|
<option>red</option>
|
|
<option>blue</option>
|
|
<option>green</option>
|
|
</select>
|
|
<p>
|
|
Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin
|
|
suscipit porta magna. Duis accumsan nunc in velit. Nam et nibh.
|
|
Nulla facilisi. Cras venenatis urna et magna. Aenean magna mauris,
|
|
bibendum sit amet, semper quis, aliquet nec, sapien. Aliquam
|
|
aliquam odio quis erat. Etiam est nisi, condimentum non, lacinia
|
|
ac, vehicula laoreet, elit. Sed interdum augue sit amet quam
|
|
dapibus semper. Nulla facilisi. Pellentesque lobortis erat nec
|
|
quam.
|
|
</p>
|
|
<p>
|
|
Sed arcu magna, molestie at, <input value="fringilla in, sodales"/> fringilla in, sodales eu, elit.
|
|
Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
|
|
vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
|
|
augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
|
|
metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
|
|
ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
|
|
euismod, magna nulla viverra libero, sit amet lacinia odio diam id
|
|
risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
|
|
porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
|
|
faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
|
|
consequat quis, varius interdum, nulla. Donec neque tortor,
|
|
sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
|
|
ut eros sit amet ante pharetra interdum.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- test lazy loading. margin style for testing size calculations. -->
|
|
<div id="lazyLoadPane1" data-dojo-type="dijit.layout.ContentPane"
|
|
data-dojo-props='title:"Lazy Load Pane", href:"doc1.html"'></div>
|
|
|
|
<!-- test lazy loading. margin style for testing size calculations. -->
|
|
<div id="lazyLoadPane2" data-dojo-type="dijit.layout.ContentPane"
|
|
data-dojo-props='title:"Other Lazy Load Pane", href:"doc1.html"'></div>
|
|
|
|
</div>
|
|
|
|
<h2 class="testTitle">Programmatic Accordions</h2>
|
|
|
|
</body>
|
|
</html>
|