UNPKG

dijit

Version:

Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u

507 lines (444 loc) 20 kB
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Accordion Widget Automated Test</title> <script src="../boilerplate.js"></script> <script type="text/javascript"> require([ "doh/runner", "dojo/_base/array", "dojo/data/ItemFileReadStore", "dojo/dom", "dojo/dom-geometry", "dojo/dom-style", "dojo/parser", "dojo/query", "dijit/registry", "dijit/layout/AccordionContainer", "dijit/layout/ContentPane", "dijit/_WidgetBase", "dijit/Tree", "dijit/tree/ForestStoreModel", "dijit/form/Button", "dojo/domReady!" ], function(doh, array, ItemFileReadStore, dom, domGeom, domStyle, parser, query, registry, AccordionContainer, ContentPane, _WidgetBase){ // Data used by Tree in markup test data = { identifier: 'id', label: 'name', items: [ { id: 'AF', name:'Africa', type:'continent', population:'900 million', area: '30,221,532 sq km', timezone: '-1 UTC to +4 UTC'}, { id: 'AS', name:'Asia', type:'continent' }, { id: 'OC', name:'Oceania', type:'continent', population:'21 million'}, { id: 'AU', name:'Australia', type:'country', population:'21 million'}, { id: 'EU', name:'Europe', type:'continent' }, { id: 'NA', name:'North America', type:'continent' }, { id: 'SA', name:'South America', type:'continent' } ] }; var accordion; doh.register("basic", [ { name: "create", runTest: function(t){ accordion = new AccordionContainer({style: "width: 400px; height: 400px;"}).placeAt(document.body); array.forEach([ "pane 1", "pane 2", "pane 3" ], function(title, i){ var content = new ContentPane({id: title, title: title, selected: i==1}); content.containerNode.innerHTML = "this is " + title; accordion.addChild(content); }); accordion.startup(); var titles = 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 = 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", registry.byNode(openPanes[0]).title, "pane 2 is initially open"); // And others are closed var closedPanes = 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 ContentPane({title: "pane 4", content: "this is pane 4"}); accordion.addChild(pane4); var titles = 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 ContentPane({id: "pane1half", title: "pane 1.5", content: "this is pane 1.5"}); accordion.addChild(pane1half, 1); var titles = 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(registry.byId('pane1half')); var titles = 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(registry.byId("pane1half"), "child removed but still exists"); } }, { name: "initially open pane (checking again)", runTest: function(t){ // Pane 2 is initially open var openPanes = 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", registry.byNode(openPanes[0]).title, "pane 2 is initially open"); // And others are closed var closedPanes = 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(registry.byId('pane 3')); // Pane 3 is now open var openPanes = 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", registry.byNode(openPanes[0]).title, "pane 3 is now open"); // And others are closed var closedPanes = 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(registry.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 = 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", registry.byNode(openPanes[0]).title, "pane 3 is now open"); // And others are closed var closedPanes = 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, registry.toArray().length, "accordion and subwidgets destroyed, pane1half remains"); } } ] ); doh.register("child events", function childEvents(t){ accordion = new AccordionContainer({style: "width: 400px; height: 400px;"}).placeAt(document.body); array.forEach([ "a", "b", "c" ], function(title, i){ var content = new 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 registry.byId("b").set("title", "b changed"); var titles = 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 registry.byId("c").set("tooltip", "c tooltip changed"); titles = 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 AccordionContainer({style: "width: 400px; height: 400px;"}).placeAt(document.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){ array.forEach([ "pane 10", "pane 11"], function(title, i){ var content = new 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 = registry.byId("pane 10"), pane11 = registry.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){ array.forEach([ "pane 12", "pane 13"], function(title, i){ var content = new 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(registry.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 AccordionContainer({style: "width: 400px; height: 400px;"}).placeAt(document.body); array.forEach([ "pane 1", "pane 2", "pane 3" ], function(title, i){ var content = new 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(domGeom.position(accordion.selectedChildWidget.domNode).h > 300, "child height > 300"); doh.t(domGeom.position(accordion.selectedChildWidget.domNode).h < 400, "child height < 400"); doh.is(domGeom.getMarginBox(accordion.selectedChildWidget.domNode).h, domGeom.getContentBox(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(registry.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(domGeom.position(accordion.selectedChildWidget.domNode).h > 300, "child height > 300"); doh.t(domGeom.position(accordion.selectedChildWidget.domNode).h < 400, "child height < 400"); doh.is(domGeom.getMarginBox(accordion.selectedChildWidget.domNode).h, domGeom.getContentBox(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(registry.byId("pane 2")); doh.is("pane 1", accordion.selectedChildWidget.title); // make sure size of selected child is correct doh.t(domGeom.position(accordion.selectedChildWidget.domNode).h > 300, "child height > 300"); doh.t(domGeom.position(accordion.selectedChildWidget.domNode).h < 400, "child height < 400"); doh.is(domGeom.getMarginBox(accordion.selectedChildWidget.domNode).h, domGeom.getContentBox(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(registry.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(domGeom.position(accordion.selectedChildWidget.domNode).h > 300, "child height > 300"); doh.t(domGeom.position(accordion.selectedChildWidget.domNode).h < 400, "child height < 400"); doh.is(domGeom.getMarginBox(accordion.selectedChildWidget.domNode).h, domGeom.getContentBox(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(domGeom.position(accordion.selectedChildWidget.domNode).h > 100, "child height > 150"); doh.t(domGeom.position(accordion.selectedChildWidget.domNode).h < 200, "child height < 200"); doh.is(domGeom.getMarginBox(accordion.selectedChildWidget.domNode).h, domGeom.getContentBox(accordion.selectedChildWidget._wrapperWidget.containerNode).h, "child height vs. wrapper height") } } ] ); doh.register("destroy", [ function setUp(){ accPane = new ContentPane({ id: "accPane", onContentError: function(msg){ throw new Error(msg); } }); accPane.placeAt(document.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(dom.byId("Accordion"), "accordion created #1"); accPane.set("content", html); //setting the content twice will initiate a destroy registry.byId("Accordion").destroy(); doh.is(undefined, dom.byId("Accordion"), "accordion destroyed #1"); }, function destroyStarted(){ // Try same tests again when wrapper ContentPane is started accPane.startup(); accPane.set("content", html); doh.t(dom.byId("Accordion"), "accordion created #2"); accPane.set("content", html); //setting the content twice will initiate a destroy registry.byId("Accordion").destroy(); doh.is(undefined, dom.byId("Accordion"), "accordion destroyed #2"); } ]); doh.register("markup", [ { name: "create", runTest: function(t){ parser.parse(); accordion = registry.byId("markupAccordion"); var titles = 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 ContentPane({id: "otherPane1half", title: "pane 1.5", content: "this is pane 1.5"}); accordion.addChild(pane1half, 1); var titles = 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.register("resize", [ { name: "no resize() method", runTest: function(t){ accordion = new AccordionContainer({style: "width: 400px; height: 400px;"}).placeAt(document.body); var child = new _WidgetBase({ id: "no resize", title: "No Resize" }); accordion.addChild(child); accordion.startup(); t.t(domStyle.get(child.domNode, "height") > 300, "child resized"); } } ]); doh.run(); }); </script> </head> <body class="claro" style="padding: 50px;" role="main"> <h1 class="testTitle">AccordionContainer Automated Tests</h1> <h2 class="testTitle">Markup Accordion</h2> <div data-dojo-type="dojo/data/ItemFileReadStore" data-dojo-id="continentStore" data="data"></div> <div data-dojo-type="dijit/tree/ForestStoreModel" data-dojo-id="continentModel" store="continentStore" query="{type:'continent'}" rootId="continentRoot" rootLabel="Continents" childrenAttrs="children"> </div> <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/Tree" model="continentModel" data-dojo-props='selected:true, title:"Tree Pane", iconClass:"dijitEditorIcon dijitEditorIconSave", tooltip:"tooltip for simple pane"'> </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>