test_accordion.html (4036B)
1 <!-- This Source Code Form is subject to the terms of the Mozilla Public 2 - License, v. 2.0. If a copy of the MPL was not distributed with this 3 - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> 4 <!DOCTYPE HTML> 5 <html> 6 <!-- 7 Test that Accordion renders correctly. 8 --> 9 <head> 10 <meta charset="utf-8"> 11 <title>Accordion component test</title> 12 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 13 <script type="application/javascript" src="resource://testing-common/sinon-7.2.7.js"></script> 14 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> 15 <link rel="stylesheet" href="chrome://devtools/skin/light-theme.css" type="text/css"> 16 </head> 17 <body> 18 <pre id="test"> 19 <script src="head.js" type="application/javascript"></script> 20 <script src="accordion.snapshots.js" type="application/javascript"></script> 21 <script type="application/javascript"> 22 23 "use strict"; 24 25 /* global sinon */ 26 27 window.onload = async function() { 28 try { 29 const { button, div } = require("devtools/client/shared/vendor/react-dom-factories"); 30 const React = browserRequire("devtools/client/shared/vendor/react"); 31 const { 32 Simulate, 33 renderIntoDocument, 34 findAllInRenderedTree, 35 } = browserRequire("devtools/client/shared/vendor/react-dom-test-utils"); 36 const Accordion = 37 browserRequire("devtools/client/shared/components/Accordion"); 38 39 const testItems = [ 40 { 41 header: "Test Accordion Item 1", 42 id: "accordion-item-1", 43 component: div({}), 44 opened: false, 45 onToggle: sinon.spy(), 46 }, 47 { 48 header: "Test Accordion Item 2", 49 id: "accordion-item-2", 50 component: div({}), 51 buttons: button({}), 52 opened: false, 53 onToggle: sinon.spy(), 54 }, 55 { 56 header: "Test Accordion Item 3", 57 id: "accordion-item-3", 58 component: div({}), 59 opened: true, 60 onToggle: sinon.spy(), 61 }, 62 ]; 63 64 // Accordion basic render 65 const accordion = React.createElement(Accordion, { items: testItems }); 66 67 matchSnapshot("Accordion basic render.", accordion); 68 69 const tree = renderIntoDocument(accordion); 70 const toggles = findAllInRenderedTree(tree, c => c.className === "accordion-toggle"); 71 72 Simulate.click(toggles[0]); 73 ok(testItems[0].onToggle.calledOnce, "Handle toggling with click."); 74 ok(testItems[1].onToggle.notCalled, 75 "onToggle wasn't called on element we didn't click on."); 76 77 isDeeply( 78 tree.state, 79 { 80 everOpened: { 81 "accordion-item-1": true, 82 "accordion-item-2": false, 83 "accordion-item-3": true, 84 }, 85 opened: { 86 "accordion-item-1": true, 87 "accordion-item-2": false, 88 "accordion-item-3": true, 89 }, 90 }, 91 "State updated correctly" 92 ); 93 94 Simulate.click(toggles[0]); 95 ok(testItems[0].onToggle.calledTwice, "Handle toggling with clicks a second time."); 96 isDeeply( 97 tree.state, 98 { 99 everOpened: { 100 "accordion-item-1": true, 101 "accordion-item-2": false, 102 "accordion-item-3": true, 103 }, 104 opened: { 105 "accordion-item-1": false, 106 "accordion-item-2": false, 107 "accordion-item-3": true, 108 }, 109 }, 110 "State updated correctly" 111 ); 112 113 Simulate.click(toggles[1]); 114 ok(testItems[1].onToggle.calledOnce, "Handle toggling with clicks on another toggle."); 115 isDeeply( 116 tree.state, 117 { 118 everOpened: { 119 "accordion-item-1": true, 120 "accordion-item-2": true, 121 "accordion-item-3": true, 122 }, 123 opened: { 124 "accordion-item-1": false, 125 "accordion-item-2": true, 126 "accordion-item-3": true, 127 }, 128 }, 129 "State updated correctly" 130 ); 131 132 } catch (e) { 133 ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); 134 } finally { 135 SimpleTest.finish(); 136 } 137 }; 138 </script> 139 </pre> 140 </body> 141 </html>