test_tree_05.html (5181B)
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 focusing with the Tree component. 8 --> 9 <head> 10 <meta charset="utf-8"> 11 <title>Tree component test</title> 12 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 13 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"> 14 </head> 15 <body> 16 <pre id="test"> 17 <script src="head.js" type="application/javascript"></script> 18 <script type="application/javascript"> 19 20 "use strict"; 21 22 window.onload = async function () { 23 try { 24 const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom"); 25 const { createFactory } = browserRequire("devtools/client/shared/vendor/react"); 26 const { Simulate } = 27 browserRequire("devtools/client/shared/vendor/react-dom-test-utils"); 28 const Tree = 29 createFactory(browserRequire("devtools/client/shared/components/VirtualizedTree")); 30 31 function renderTree(props) { 32 const treeProps = Object.assign({}, 33 TEST_TREE_INTERFACE, 34 { onFocus: x => renderTree({ focused: x }) }, 35 props 36 ); 37 return ReactDOM.render(Tree(treeProps), window.document.body); 38 } 39 40 const tree = renderTree(); 41 const treeElem = document.querySelector(".tree"); 42 43 isAccessibleTree(tree); 44 TEST_TREE.expanded = new Set("ABCDEFGHIJKLMNO".split("")); 45 46 renderTree({ focused: "G" }); 47 isAccessibleTree(tree, { hasActiveDescendant: true }); 48 49 isRenderedTree(document.body.textContent, [ 50 "A:false", 51 "-B:false", 52 "--E:false", 53 "---K:false", 54 "---L:false", 55 "--F:false", 56 "--G:true", 57 "-C:false", 58 "--H:false", 59 "--I:false", 60 "-D:false", 61 "--J:false", 62 "M:false", 63 "-N:false", 64 "--O:false", 65 ], "G should be focused"); 66 67 // When tree gets focus by means other than mouse, do not set first node as 68 // focused node when there is already a focused node. 69 Simulate.focus(treeElem); 70 await forceRender(tree); 71 72 isRenderedTree(document.body.textContent, [ 73 "A:false", 74 "-B:false", 75 "--E:false", 76 "---K:false", 77 "---L:false", 78 "--F:false", 79 "--G:true", 80 "-C:false", 81 "--H:false", 82 "--I:false", 83 "-D:false", 84 "--J:false", 85 "M:false", 86 "-N:false", 87 "--O:false", 88 ], "G should remain focused"); 89 90 // Click the first tree node 91 document.querySelector(".tree-node").click(); 92 await forceRender(tree); 93 94 isRenderedTree(document.body.textContent, [ 95 "A:true", 96 "-B:false", 97 "--E:false", 98 "---K:false", 99 "---L:false", 100 "--F:false", 101 "--G:false", 102 "-C:false", 103 "--H:false", 104 "--I:false", 105 "-D:false", 106 "--J:false", 107 "M:false", 108 "-N:false", 109 "--O:false", 110 ], "A should be focused"); 111 112 // Mouse down and mouse up events set tree "mouseDown" state correctly. 113 ok(!tree.state.mouseDown, "Mouse down state is not set."); 114 Simulate.mouseDown(document.querySelector(".tree-node")); 115 ok(tree.state.mouseDown, "Mouse down state is set."); 116 Simulate.mouseUp(document.querySelector(".tree-node")); 117 ok(!tree.state.mouseDown, "Mouse down state is reset."); 118 119 // Unset focused tree state. 120 renderTree({ focused: null }); 121 isRenderedTree(document.body.textContent, [ 122 "A:false", 123 "-B:false", 124 "--E:false", 125 "---K:false", 126 "---L:false", 127 "--F:false", 128 "--G:false", 129 "-C:false", 130 "--H:false", 131 "--I:false", 132 "-D:false", 133 "--J:false", 134 "M:false", 135 "-N:false", 136 "--O:false", 137 ], "No node should be focused"); 138 139 // When tree gets focus while mouse is down, do not set first node as 140 // focused node. 141 Simulate.mouseDown(document.querySelector(".tree-node")); 142 Simulate.focus(treeElem); 143 Simulate.mouseUp(document.querySelector(".tree-node")); 144 await forceRender(tree); 145 146 isRenderedTree(document.body.textContent, [ 147 "A:false", 148 "-B:false", 149 "--E:false", 150 "---K:false", 151 "---L:false", 152 "--F:false", 153 "--G:false", 154 "-C:false", 155 "--H:false", 156 "--I:false", 157 "-D:false", 158 "--J:false", 159 "M:false", 160 "-N:false", 161 "--O:false", 162 ], "No node should have been focused"); 163 164 // When tree gets focus by means other than mouse, set first node as focused 165 // node if no nodes are focused. 166 Simulate.focus(treeElem); 167 await forceRender(tree); 168 169 isRenderedTree(document.body.textContent, [ 170 "A:true", 171 "-B:false", 172 "--E:false", 173 "---K:false", 174 "---L:false", 175 "--F:false", 176 "--G:false", 177 "-C:false", 178 "--H:false", 179 "--I:false", 180 "-D:false", 181 "--J:false", 182 "M:false", 183 "-N:false", 184 "--O:false", 185 ], "A should be focused"); 186 } catch (e) { 187 ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); 188 } finally { 189 SimpleTest.finish(); 190 } 191 }; 192 </script> 193 </pre> 194 </body> 195 </html>