tor-browser

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

test_tree_09.html (2865B)

      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 expanded or collapsed the appropriate event handler fires.
      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 </head>
     16 <body>
     17 <pre id="test">
     18 <script src="head.js" type="application/javascript"></script>
     19 <script type="application/javascript">
     20 
     21 'use strict'
     22 
     23 window.onload = async function () {
     24  try {
     25    const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     26    const { createFactory } = browserRequire("devtools/client/shared/vendor/react");
     27    const { Simulate } = browserRequire("devtools/client/shared/vendor/react-dom-test-utils");
     28    const Tree = createFactory(browserRequire("devtools/client/shared/components/VirtualizedTree"));
     29 
     30    let numberOfExpands = 0;
     31    let lastExpandedItem = null;
     32 
     33    let numberOfCollapses = 0;
     34    let lastCollapsedItem = null;
     35 
     36    function renderTree(props) {
     37      const treeProps = Object.assign({},
     38        TEST_TREE_INTERFACE,
     39        {
     40          autoExpandDepth: 0,
     41          onExpand: item => {
     42            lastExpandedItem = item;
     43            numberOfExpands++;
     44            TEST_TREE.expanded.add(item);
     45          },
     46          onCollapse: item => {
     47            lastCollapsedItem = item;
     48            numberOfCollapses++;
     49            TEST_TREE.expanded.delete(item);
     50          },
     51          onFocus: item => renderTree({ focused: item })
     52        },
     53        props
     54      );
     55      return ReactDOM.render(Tree(treeProps), window.document.body);
     56    }
     57 
     58    const tree = renderTree({ focused: "A" });
     59 
     60    is(lastExpandedItem, null);
     61    is(lastCollapsedItem, null);
     62 
     63    // Expand "A" via the keyboard and then let the component re-render.
     64    Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowRight" });
     65    await forceRender(tree);
     66 
     67    is(lastExpandedItem, "A", "Our onExpand callback should have been fired.");
     68    is(numberOfExpands, 1);
     69 
     70    // Now collapse "A" via the keyboard and then let the component re-render.
     71    Simulate.keyDown(document.querySelector(".tree"), { key: "ArrowLeft" });
     72    await forceRender(tree);
     73 
     74    is(lastCollapsedItem, "A", "Our onCollapsed callback should have been fired.");
     75    is(numberOfCollapses, 1);
     76  } catch(e) {
     77    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
     78  } finally {
     79    SimpleTest.finish();
     80  }
     81 };
     82 </script>
     83 </pre>
     84 </body>
     85 </html>