tor-browser

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

test_tree-view_02.html (4426B)

      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 TreeView component filtering works with keyboard.
      8 -->
      9 <head>
     10  <meta charset="utf-8">
     11  <title>TreeView component filtering keyboard 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/light-theme.css" type="text/css">
     16  <link rel="stylesheet" href="chrome://devtools/content/shared/components/tree/TreeView.css" type="text/css">
     17  <style>
     18    .treeRow.hide {
     19      display: none;
     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 window.onload = function() {
     31  try {
     32    const React = browserRequire("devtools/client/shared/vendor/react");
     33    const {
     34      Simulate,
     35      findRenderedDOMComponentWithClass,
     36      scryRenderedDOMComponentsWithClass,
     37    } = browserRequire("devtools/client/shared/vendor/react-dom-test-utils");
     38    const TreeView = ChromeUtils.importESModule(
     39      "resource://devtools/client/shared/components/tree/TreeView.mjs"
     40    ).default;
     41 
     42      function testKeyboardInteraction(tree, treeViewEl, rows) {
     43        // Expected tree when filtered (C is filtered)
     44        //
     45        // A
     46        // |-- B
     47        // `-- D
     48        is(window.getComputedStyle(rows[1]).getPropertyValue("display"), "none",
     49          "Row C must be hidden by default.");
     50 
     51        const tests = [{
     52          name: "Selected row must be set to the first row on initial focus. " +
     53                "Keyboard focus must be set on TreeView's conatiner.",
     54          action: () => {
     55            Simulate.click(rows[0]);
     56          },
     57          activeElement: treeViewEl,
     58          state: { selected: "/B" },
     59        }, {
     60          name: "Selecting next row must skip hidden row on ArrowDown.",
     61          event: {
     62            type: "keyDown",
     63            el: treeViewEl,
     64            options: { key: "ArrowDown" },
     65          },
     66          state: { selected: "/D" },
     67        }, {
     68          name: "Selecting previous row must be skip hidden row on ArrowUp.",
     69          event: {
     70            type: "keyDown",
     71            el: treeViewEl,
     72            options: { key: "ArrowUp" },
     73          },
     74          state: { selected: "/B" },
     75        }];
     76 
     77        for (const test of tests) {
     78          const { action, event, state, name } = test;
     79 
     80          info(name);
     81          if (event) {
     82            const { type, options, el } = event;
     83            Simulate[type](el, options);
     84          } else if (action) {
     85            action();
     86          }
     87 
     88          for (const key in state) {
     89            is(tree.state[key], state[key], `${key} state is correct.`);
     90          }
     91        }
     92      }
     93 
     94    info("Test hiding rows via decorator.");
     95    const props = {
     96      ...TEST_TREE_VIEW_INTERFACE,
     97      decorator: {
     98        getRowClass: ({ label }) => {
     99          if (label === "C") {
    100            return ["hide"];
    101          }
    102          return [];
    103        }
    104      }
    105    };
    106    let treeView = React.createElement(TreeView, props);
    107    let tree = ReactDOM.render(treeView, document.body);
    108    let treeViewEl = findRenderedDOMComponentWithClass(tree, "treeTable");
    109    let rows = scryRenderedDOMComponentsWithClass(tree, "treeRow");
    110 
    111    testKeyboardInteraction(tree, treeViewEl, rows);
    112 
    113    // Remove TreeView component.
    114    ReactDOM.unmountComponentAtNode(document.body);
    115 
    116    info("Test hiding rows via onFilter.");
    117    props.decorator = null;
    118    props.onFilter = ({ label }) => {
    119      console.log(`onFILTER ${label !== "C"}`)
    120      return label !== "C";
    121    };
    122    treeView = React.createElement(TreeView, props);
    123    tree = ReactDOM.render(treeView, document.body);
    124    treeViewEl = findRenderedDOMComponentWithClass(tree, "treeTable");
    125    rows = scryRenderedDOMComponentsWithClass(tree, "treeRow");
    126 
    127    testKeyboardInteraction(tree, treeViewEl, rows);
    128  } catch (e) {
    129    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
    130  } finally {
    131    SimpleTest.finish();
    132  }
    133 };
    134 </script>
    135 </pre>
    136 </body>
    137 </html>