tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

test_tree_11.html (2821B)

      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 when an item in the Tree component is focused by arrow key, the view is scrolled.
      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  <link rel="stylesheet" href="chrome://devtools/skin/light-theme.css" type="text/css">
     15  <style>
     16   .tree {
     17     height: 30px;
     18     overflow: auto;
     19     display: block;
     20   }
     21 
     22   .tree-node {
     23     font-size: 10px;
     24     height: 10px;
     25   }
     26  </style>
     27 </head>
     28 <body>
     29 <pre id="test">
     30 <script src="head.js" type="application/javascript"></script>
     31 <script type="application/javascript">
     32 
     33 'use strict'
     34 
     35 window.onload = async function () {
     36  try {
     37    const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     38    const { createFactory } = browserRequire("devtools/client/shared/vendor/react");
     39    const { Simulate } = browserRequire("devtools/client/shared/vendor/react-dom-test-utils");
     40    const Tree = createFactory(browserRequire("devtools/client/shared/components/VirtualizedTree"));
     41 
     42    TEST_TREE.expanded = new Set("ABCDEFGHIJKLMNO".split(""));
     43 
     44    function renderTree(props) {
     45      const treeProps = Object.assign({},
     46        TEST_TREE_INTERFACE,
     47        {
     48          itemHeight: 10,
     49          onFocus: item => renderTree({ focused: item })
     50        },
     51        props
     52      );
     53      return ReactDOM.render(Tree(treeProps), window.document.body);
     54    }
     55 
     56    const tree = renderTree({ focused: "K" });
     57 
     58    tree.setState({ scroll: 10 });
     59 
     60    isRenderedTree(document.body.textContent, [
     61      "A:false",
     62      "-B:false",
     63      "--E:false",
     64      "---K:true",
     65      "---L:false",
     66    ], "Should render initial correctly");
     67 
     68    await new Promise(resolve => {
     69      const treeElem = document.querySelector(".tree");
     70      treeElem.addEventListener("scroll", function onScroll() {
     71        dumpn("Got scroll event");
     72        treeElem.removeEventListener("scroll", onScroll);
     73        resolve();
     74      });
     75 
     76      dumpn("Sending ArrowDown key");
     77      Simulate.keyDown(treeElem, { key: "ArrowDown" });
     78    });
     79 
     80    dumpn("Forcing re-render");
     81    await forceRender(tree);
     82 
     83    isRenderedTree(document.body.textContent, [
     84      "-B:false",
     85      "--E:false",
     86      "---K:false",
     87      "---L:true",
     88      "--F:false",
     89    ], "Should have scrolled down one");
     90 
     91  } catch(e) {
     92    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
     93  } finally {
     94    SimpleTest.finish();
     95  }
     96 };
     97 </script>
     98 </pre>
     99 </body>
    100 </html>