test_tree_04.html (3952B)
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 we only render visible tree items. 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 function getSpacerHeights() { 25 return { 26 top: document.querySelector(".tree > div:first-of-type").clientHeight, 27 bottom: document.querySelector(".tree > div:last-of-type").clientHeight, 28 }; 29 } 30 31 const ITEM_HEIGHT = 3; 32 33 const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom"); 34 const React = browserRequire("devtools/client/shared/vendor/react"); 35 const Tree = React.createFactory(browserRequire("devtools/client/shared/components/VirtualizedTree")); 36 37 const tree = ReactDOM.render( 38 Tree(Object.assign({}, TEST_TREE_INTERFACE, { itemHeight: ITEM_HEIGHT })), 39 window.document.body); 40 41 TEST_TREE.expanded = new Set("ABCDEFGHIJKLMNO".split("")); 42 43 await setState(tree, { 44 height: 3 * ITEM_HEIGHT, 45 scroll: 1 * ITEM_HEIGHT 46 }); 47 48 isAccessibleTree(tree); 49 isRenderedTree(document.body.textContent, [ 50 "A:false", 51 "-B:false", 52 "--E:false", 53 "---K:false", 54 "---L:false", 55 ], "Tree should show the 2nd, 3rd, and 4th items + buffer of 1 item at each end"); 56 57 let spacers = getSpacerHeights(); 58 is(spacers.top, 0, "Top spacer has the correct height"); 59 is(spacers.bottom, 10 * ITEM_HEIGHT, "Bottom spacer has the correct height"); 60 61 await setState(tree, { 62 height: 2 * ITEM_HEIGHT, 63 scroll: 3 * ITEM_HEIGHT 64 }); 65 66 isAccessibleTree(tree); 67 isRenderedTree(document.body.textContent, [ 68 "--E:false", 69 "---K:false", 70 "---L:false", 71 "--F:false", 72 ], "Tree should show the 4th and 5th item + buffer of 1 item at each end"); 73 74 spacers = getSpacerHeights(); 75 is(spacers.top, 2 * ITEM_HEIGHT, "Top spacer has the correct height"); 76 is(spacers.bottom, 9 * ITEM_HEIGHT, "Bottom spacer has the correct height"); 77 78 // Set height to 2 items + 1 pixel at each end, scroll so that 4 items are visible 79 // (2 fully, 2 partially with 1 visible pixel) 80 await setState(tree, { 81 height: 2 * ITEM_HEIGHT + 2, 82 scroll: 3 * ITEM_HEIGHT - 1 83 }); 84 85 isRenderedTree(document.body.textContent, [ 86 "-B:false", 87 "--E:false", 88 "---K:false", 89 "---L:false", 90 "--F:false", 91 "--G:false", 92 ], "Tree should show the 4 visible items + buffer of 1 item at each end"); 93 94 spacers = getSpacerHeights(); 95 is(spacers.top, 1 * ITEM_HEIGHT, "Top spacer has the correct height"); 96 is(spacers.bottom, 8 * ITEM_HEIGHT, "Bottom spacer has the correct height"); 97 98 await setState(tree, { 99 height: 20 * ITEM_HEIGHT, 100 scroll: 0 101 }); 102 103 isRenderedTree(document.body.textContent, [ 104 "A:false", 105 "-B:false", 106 "--E:false", 107 "---K:false", 108 "---L:false", 109 "--F:false", 110 "--G:false", 111 "-C:false", 112 "--H:false", 113 "--I:false", 114 "-D:false", 115 "--J:false", 116 "M:false", 117 "-N:false", 118 "--O:false", 119 ], "Tree should show all rows"); 120 121 spacers = getSpacerHeights(); 122 is(spacers.top, 0, "Top spacer has zero height"); 123 is(spacers.bottom, 0, "Bottom spacer has zero height"); 124 } catch(e) { 125 ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); 126 } finally { 127 SimpleTest.finish(); 128 } 129 }; 130 </script> 131 </pre> 132 </body> 133 </html>