test_HSplitBox_01.html (5454B)
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 Basic tests for the HSplitBox 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 <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.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/splitters.css" type="text/css"/> 16 <link rel="stylesheet" href="chrome://devtools/skin/components-h-split-box.css" type="text/css"/> 17 <style> 18 html { 19 --theme-splitter-color: black; 20 } 21 </style> 22 </head> 23 <body> 24 <pre id="test"> 25 <script src="head.js" type="application/javascript"></script> 26 <script type="application/javascript"> 27 28 'use strict' 29 30 const FUDGE_FACTOR = .1; 31 function aboutEq(a, b) { 32 dumpn(`Checking ${a} ~= ${b}`); 33 return Math.abs(a - b) < FUDGE_FACTOR; 34 } 35 36 window.onload = async function () { 37 try { 38 const React = browserRequire("devtools/client/shared/vendor/react"); 39 const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom"); 40 41 const HSplitBox = React.createFactory(browserRequire("devtools/client/shared/components/HSplitBox")); 42 ok(HSplitBox, "Should get HSplitBox"); 43 44 const newSizes = []; 45 46 async function renderBox(props) { 47 const boxProps = Object.assign({ 48 start: "hello!", 49 end: "world!", 50 startWidth: .5, 51 onResize(newSize) { 52 newSizes.push(newSize); 53 } 54 }, props); 55 const el = ReactDOM.render(HSplitBox(boxProps), window.document.body); 56 // wait until the element is rendered. 57 await SimpleTest.promiseWaitForCondition( 58 () => document.querySelector(".devtools-side-splitter") 59 ); 60 return el; 61 } 62 63 await renderBox(); 64 65 // Test that we properly rendered our two panes. 66 67 let panes = document.querySelectorAll(".h-split-box-pane"); 68 is(panes.length, 2, "Should get two panes"); 69 is(panes[0].style.flexGrow, "0.5", "Each pane should have .5 width"); 70 is(panes[1].style.flexGrow, "0.5", "Each pane should have .5 width"); 71 is(panes[0].textContent.trim(), "hello!", "First pane should be hello"); 72 is(panes[1].textContent.trim(), "world!", "Second pane should be world"); 73 74 // Now change the left width and assert that the changes are reflected. 75 76 await renderBox({ startWidth: .25 }); 77 panes = document.querySelectorAll(".h-split-box-pane"); 78 is(panes.length, 2, "Should still have two panes"); 79 is(panes[0].style.flexGrow, "0.25", "First pane's width should be .25"); 80 is(panes[1].style.flexGrow, "0.75", "Second pane's width should be .75"); 81 82 // Mouse moves without having grabbed the splitter should have no effect. 83 84 const container = document.querySelector(".h-split-box"); 85 ok(container, "Should get our container .h-split-box"); 86 87 const { left, top, width } = container.getBoundingClientRect(); 88 const middle = left + width / 2; 89 const oneQuarter = left + width / 4; 90 const threeQuarters = left + 3 * width / 4; 91 92 synthesizeMouse(container, middle, top, { type: "mousemove" }, window); 93 is(newSizes.length, 0, "Mouse moves without dragging the splitter should have no effect"); 94 95 // Send a mouse down on the splitter, and then move the mouse a couple 96 // times. Now we should get resizes. 97 98 const splitter = document.querySelector(".devtools-side-splitter"); 99 ok(splitter, "Should get our splitter"); 100 101 synthesizeMouseAtCenter(splitter, { button: 0, type: "mousedown" }, window); 102 function mouseMove(clientX, win) { 103 synthesizeMouseAtPoint( 104 clientX, 105 top, 106 { type: "mousemove" }, 107 win 108 ); 109 } 110 111 // Move the splitter with events from the splitter's own window. 112 mouseMove(middle, window); 113 is(newSizes.length, 1, "Should get 1 resize"); 114 ok(aboutEq(newSizes[0], .5), "New size should be ~.5"); 115 116 mouseMove(left, window); 117 is(newSizes.length, 2, "Should get 2 resizes"); 118 ok(aboutEq(newSizes[1], 0), "New size should be ~0"); 119 120 mouseMove(oneQuarter, window); 121 is(newSizes.length, 3, "Sould get 3 resizes"); 122 ok(aboutEq(newSizes[2], .25), "New size should be ~.25"); 123 124 mouseMove(threeQuarters, window); 125 is(newSizes.length, 4, "Should get 4 resizes"); 126 ok(aboutEq(newSizes[3], .75), "New size should be ~.75"); 127 128 // Move the splitter with events from the splitter's parent window. 129 mouseMove(middle, window.top); 130 is(newSizes.length, 5, "Should get 5 resizes"); 131 ok(aboutEq(newSizes[4], .5), "New size should be ~.5"); 132 133 mouseMove(left, window.top); 134 is(newSizes.length, 6, "Should get 6 resizes"); 135 ok(aboutEq(newSizes[5], 0), "New size should be ~0"); 136 137 synthesizeMouseAtCenter(splitter, { button: 0, type: "mouseup" }, window); 138 139 // Now that we have let go of the splitter, mouse moves should not result in resizes. 140 141 synthesizeMouse(container, middle, top, { type: "mousemove" }, window); 142 is(newSizes.length, 6, "Should still have 6 resizes"); 143 144 } catch(e) { 145 ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); 146 } finally { 147 SimpleTest.finish(); 148 } 149 }; 150 </script> 151 </pre> 152 </body> 153 </html>