test_tree_06.html (9017B)
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 keyboard navigation 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 42 isAccessibleTree(tree); 43 TEST_TREE.expanded = new Set("ABCDEFGHIJKLMNO".split("")); 44 45 // UP ---------------------------------------------------------------------- 46 47 info("Up to the previous sibling."); 48 renderTree({ focused: "L" }); 49 Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowUp" }); 50 await forceRender(tree); 51 52 isRenderedTree(document.body.textContent, [ 53 "A:false", 54 "-B:false", 55 "--E:false", 56 "---K:true", 57 "---L:false", 58 "--F:false", 59 "--G:false", 60 "-C:false", 61 "--H:false", 62 "--I:false", 63 "-D:false", 64 "--J:false", 65 "M:false", 66 "-N:false", 67 "--O:false", 68 ], "After the UP, K should be focused."); 69 70 info("Up to the parent."); 71 Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowUp" }); 72 await forceRender(tree); 73 74 isRenderedTree(document.body.textContent, [ 75 "A:false", 76 "-B:false", 77 "--E:true", 78 "---K:false", 79 "---L:false", 80 "--F:false", 81 "--G:false", 82 "-C:false", 83 "--H:false", 84 "--I:false", 85 "-D:false", 86 "--J:false", 87 "M:false", 88 "-N:false", 89 "--O:false", 90 ], "After the UP, E should be focused."); 91 92 info("Try and navigate up, past the first item."); 93 renderTree({ focused: "A" }); 94 Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowUp" }); 95 await forceRender(tree); 96 97 isRenderedTree(document.body.textContent, [ 98 "A:true", 99 "-B:false", 100 "--E:false", 101 "---K:false", 102 "---L:false", 103 "--F:false", 104 "--G:false", 105 "-C:false", 106 "--H:false", 107 "--I:false", 108 "-D:false", 109 "--J:false", 110 "M:false", 111 "-N:false", 112 "--O:false", 113 ], "After the UP, A should be focused and we shouldn't have overflowed past it."); 114 115 // DOWN -------------------------------------------------------------------- 116 117 info("Down to next sibling."); 118 renderTree({ focused: "K" }); 119 Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowDown" }); 120 await forceRender(tree); 121 122 isRenderedTree(document.body.textContent, [ 123 "A:false", 124 "-B:false", 125 "--E:false", 126 "---K:false", 127 "---L:true", 128 "--F:false", 129 "--G:false", 130 "-C:false", 131 "--H:false", 132 "--I:false", 133 "-D:false", 134 "--J:false", 135 "M:false", 136 "-N:false", 137 "--O:false", 138 ], "After the DOWN, L should be focused."); 139 140 info("Down to parent's next sibling."); 141 Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowDown" }); 142 await forceRender(tree); 143 144 isRenderedTree(document.body.textContent, [ 145 "A:false", 146 "-B:false", 147 "--E:false", 148 "---K:false", 149 "---L:false", 150 "--F:true", 151 "--G:false", 152 "-C:false", 153 "--H:false", 154 "--I:false", 155 "-D:false", 156 "--J:false", 157 "M:false", 158 "-N:false", 159 "--O:false", 160 ], "After the DOWN, F should be focused."); 161 162 info("Try and go down past the last item."); 163 renderTree({ focused: "O" }); 164 Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowDown" }); 165 await forceRender(tree); 166 167 isRenderedTree(document.body.textContent, [ 168 "A:false", 169 "-B:false", 170 "--E:false", 171 "---K:false", 172 "---L:false", 173 "--F:false", 174 "--G:false", 175 "-C:false", 176 "--H:false", 177 "--I:false", 178 "-D:false", 179 "--J:false", 180 "M:false", 181 "-N:false", 182 "--O:true", 183 ], "After the DOWN, O should still be focused " + 184 "and we shouldn't have overflowed past it."); 185 186 // LEFT -------------------------------------------------------------------- 187 188 info("Left to go to parent."); 189 renderTree({ focused: "L" }); 190 Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowLeft" }); 191 await forceRender(tree); 192 193 isRenderedTree(document.body.textContent, [ 194 "A:false", 195 "-B:false", 196 "--E:true", 197 "---K:false", 198 "---L:false", 199 "--F:false", 200 "--G:false", 201 "-C:false", 202 "--H:false", 203 "--I:false", 204 "-D:false", 205 "--J:false", 206 "M:false", 207 "-N:false", 208 "--O:false", 209 ], "After the LEFT, E should be focused."); 210 211 info("Left to collapse children."); 212 Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowLeft" }); 213 await forceRender(tree); 214 215 isRenderedTree(document.body.textContent, [ 216 "A:false", 217 "-B:false", 218 "--E:true", 219 "--F:false", 220 "--G:false", 221 "-C:false", 222 "--H:false", 223 "--I:false", 224 "-D:false", 225 "--J:false", 226 "M:false", 227 "-N:false", 228 "--O:false", 229 ], "After the LEFT, E's children should be collapsed."); 230 231 // RIGHT ------------------------------------------------------------------- 232 233 info("Right to expand children."); 234 Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowRight" }); 235 await forceRender(tree); 236 237 isRenderedTree(document.body.textContent, [ 238 "A:false", 239 "-B:false", 240 "--E:true", 241 "---K:false", 242 "---L:false", 243 "--F:false", 244 "--G:false", 245 "-C:false", 246 "--H:false", 247 "--I:false", 248 "-D:false", 249 "--J:false", 250 "M:false", 251 "-N:false", 252 "--O:false", 253 ], "After the RIGHT, E's children should be expanded again."); 254 255 info("Right on already expanded node."); 256 Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowRight" }); 257 await forceRender(tree); 258 259 isRenderedTree(document.body.textContent, [ 260 "A:false", 261 "-B:false", 262 "--E:true", 263 "---K:false", 264 "---L:false", 265 "--F:false", 266 "--G:false", 267 "-C:false", 268 "--H:false", 269 "--I:false", 270 "-D:false", 271 "--J:false", 272 "M:false", 273 "-N:false", 274 "--O:false", 275 ], "After the RIGHT on already expanded node, E should remain focused."); 276 277 info("Right when preventNavigationOnArrowRight is unset to go to next item."); 278 renderTree({ focused: "E", preventNavigationOnArrowRight: false }); 279 Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowRight" }); 280 await forceRender(tree); 281 282 isRenderedTree(document.body.textContent, [ 283 "A:false", 284 "-B:false", 285 "--E:false", 286 "---K:true", 287 "---L:false", 288 "--F:false", 289 "--G:false", 290 "-C:false", 291 "--H:false", 292 "--I:false", 293 "-D:false", 294 "--J:false", 295 "M:false", 296 "-N:false", 297 "--O:false", 298 ], "After the RIGHT, K should be focused."); 299 300 // Check that keys are ignored if any modifier is present. 301 const keysWithModifier = [ 302 { key: "ArrowDown", altKey: true }, 303 { key: "ArrowDown", ctrlKey: true }, 304 { key: "ArrowDown", metaKey: true }, 305 { key: "ArrowDown", shiftKey: true }, 306 ]; 307 await forceRender(tree); 308 309 for (const key of keysWithModifier) { 310 Simulate.keyDown(document.querySelector(".tree"), key); 311 await forceRender(tree); 312 313 isRenderedTree(document.body.textContent, [ 314 "A:false", 315 "-B:false", 316 "--E:false", 317 "---K:true", 318 "---L:false", 319 "--F:false", 320 "--G:false", 321 "-C:false", 322 "--H:false", 323 "--I:false", 324 "-D:false", 325 "--J:false", 326 "M:false", 327 "-N:false", 328 "--O:false", 329 ], "After DOWN + (alt|ctrl|meta|shift), K should remain focused."); 330 } 331 } catch (e) { 332 ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); 333 } finally { 334 SimpleTest.finish(); 335 } 336 }; 337 </script> 338 </pre> 339 </body> 340 </html>