tor-browser

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

test_tree_15.html (2885B)

      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 scroll position when focusing items in traversal but not rendered.
      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 } =
     40      browserRequire("devtools/client/shared/vendor/react-dom-test-utils");
     41    const Tree =
     42      createFactory(browserRequire("devtools/client/shared/components/VirtualizedTree"));
     43 
     44    TEST_TREE.expanded = new Set("ABCDEFGHIJKLMNO".split(""));
     45 
     46    function renderTree(props) {
     47      const treeProps = Object.assign({},
     48        TEST_TREE_INTERFACE,
     49        {
     50          itemHeight: 10,
     51          onFocus: item => renderTree({ focused: item })
     52        },
     53        props
     54      );
     55      return ReactDOM.render(Tree(treeProps), window.document.body);
     56    }
     57 
     58    info("Test first focused.");
     59    const tree = renderTree({ focused: "A" });
     60    await forceRender(tree);
     61 
     62    isRenderedTree(document.body.textContent, [
     63      "A:true",
     64      "-B:false",
     65      "--E:false",
     66      "---K:false",
     67    ], "Should render initial correctly");
     68 
     69    info("Test last item focused when it was not yet rendered.");
     70    Simulate.keyDown(document.querySelector(".tree"), { key: "End" });
     71    await forceRender(tree);
     72 
     73    isRenderedTree(document.body.textContent, [
     74    "--J:false",
     75      "M:false",
     76      "-N:false",
     77      "--O:true",
     78    ], "Should render last focused item correctly");
     79 
     80    info("Test first item focused when it was not yet rendered.");
     81    Simulate.keyDown(document.querySelector(".tree"), { key: "Home" });
     82    await forceRender(tree);
     83 
     84    isRenderedTree(document.body.textContent, [
     85      "A:true",
     86      "-B:false",
     87      "--E:false",
     88      "---K:false",
     89    ], "Should render first focused item correctly");
     90  } catch (e) {
     91    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
     92  } finally {
     93    SimpleTest.finish();
     94  }
     95 };
     96 </script>
     97 </pre>
     98 </body>
     99 </html>