test_tree_12.html (3993B)
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/activation with the VirtualizedTree 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 = { 33 ...TEST_TREE_INTERFACE, 34 onFocus: x => renderTree({ focused: x }), 35 ...props 36 }; 37 38 return ReactDOM.render(Tree(treeProps), window.document.body); 39 } 40 41 const tree = renderTree(); 42 43 TEST_TREE.expanded = new Set("ABCDEFGHIJKLMNO".split("")); 44 45 // Test Home key ----------------------------------------------------------- 46 47 info("Press Home to move to the first node."); 48 renderTree({ focused: "L" }); 49 Simulate.keyDown(document.querySelector(".tree"), { key: "Home" }); 50 await forceRender(tree); 51 52 isRenderedTree(document.body.textContent, [ 53 "A:true", 54 "-B:false", 55 "--E:false", 56 "---K:false", 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 Home key, A should be focused."); 69 70 info("Press Home again when already on first node."); 71 Simulate.keyDown(document.querySelector(".tree"), { key: "Home" }); 72 await forceRender(tree); 73 74 isRenderedTree(document.body.textContent, [ 75 "A:true", 76 "-B:false", 77 "--E:false", 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 Home key again, A should still be focused."); 91 92 // Test End key ------------------------------------------------------------ 93 94 info("Press End to move to the last node."); 95 Simulate.keyDown(document.querySelector(".tree"), { key: "End" }); 96 await forceRender(tree); 97 98 isRenderedTree(document.body.textContent, [ 99 "A:false", 100 "-B:false", 101 "--E:false", 102 "---K:false", 103 "---L:false", 104 "--F:false", 105 "--G:false", 106 "-C:false", 107 "--H:false", 108 "--I:false", 109 "-D:false", 110 "--J:false", 111 "M:false", 112 "-N:false", 113 "--O:true", 114 ], "After the End key, O should be focused."); 115 116 info("Press End again when already on last node."); 117 Simulate.keyDown(document.querySelector(".tree"), { key: "End" }); 118 await forceRender(tree); 119 120 isRenderedTree(document.body.textContent, [ 121 "A:false", 122 "-B:false", 123 "--E:false", 124 "---K:false", 125 "---L:false", 126 "--F:false", 127 "--G:false", 128 "-C:false", 129 "--H:false", 130 "--I:false", 131 "-D:false", 132 "--J:false", 133 "M:false", 134 "-N:false", 135 "--O:true", 136 ], "After the End key again, O should still be focused."); 137 } catch (e) { 138 ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); 139 } finally { 140 SimpleTest.finish(); 141 } 142 }; 143 </script> 144 </pre> 145 </body> 146 </html>