tor-browser

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

test_list.html (4478B)

      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 List renders correctly.
      8 -->
      9 <head>
     10  <meta charset="utf-8">
     11  <title>List 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 src="list.snapshots.js" type="application/javascript"></script>
     20 <script type="application/javascript">
     21 
     22 "use strict";
     23 
     24 window.onload = async function() {
     25  try {
     26    const { div } = require("devtools/client/shared/vendor/react-dom-factories");
     27    const React = browserRequire("devtools/client/shared/vendor/react");
     28    const {
     29      Simulate,
     30      renderIntoDocument,
     31      findRenderedDOMComponentWithClass,
     32      scryRenderedDOMComponentsWithTag,
     33      scryRenderedComponentsWithType,
     34    } = browserRequire("devtools/client/shared/vendor/react-dom-test-utils");
     35    const { List, ListItem } =
     36      browserRequire("devtools/client/shared/components/List");
     37 
     38    const testItems = [
     39      {
     40        component: div({ className: "item-1" }, "Test List Item 1"),
     41        className: "list-item-1",
     42        key: "list-item-1",
     43      },
     44      {
     45        component: div({ className: "item-2" }, "Test List Item 2"),
     46        className: "list-item-2",
     47        key: "list-item-2",
     48      },
     49      {
     50        component: div({ className: "item-3" }, "Test List Item 3"),
     51        className: "list-item-3",
     52        key: "list-item-3",
     53      },
     54    ];
     55 
     56    const listReactEl = React.createElement(List, {
     57      items: testItems,
     58      labelledBy: "test-labelledby",
     59    });
     60 
     61    const list = renderIntoDocument(listReactEl);
     62    const listEl = findRenderedDOMComponentWithClass(list, "list");
     63    const items = scryRenderedComponentsWithType(list, ListItem);
     64    const itemEls = scryRenderedDOMComponentsWithTag(list, "li");
     65 
     66    function testCurrent(index) {
     67      is(list.state.current, index, "Correct current item.");
     68      is(listEl.getAttribute("aria-activedescendant"), testItems[index].key,
     69         "Correct active descendant.");
     70    }
     71 
     72    is(items.length, 3, "Correct number of list item components in tree.");
     73    is(itemEls.length, 3, "Correct number of list items is rendered.");
     74    info("Testing initial tree properties.");
     75    for (let index = 0; index < items.length; index++) {
     76      const item = items[index];
     77      const itemEl = itemEls[index];
     78      const { active, current, item: itemProp } = item.props;
     79      const content = itemEl.querySelector(".list-item-content");
     80 
     81      is(active, false, "Correct active state.");
     82      is(current, false, "Correct current state.");
     83      is(itemProp, testItems[index], "Correct rendered item.");
     84      is(item.contentRef.current, content, "Correct content ref.");
     85 
     86      is(itemEl.className, testItems[index].className, "Correct list item class.");
     87      is(itemEl.id, testItems[index].key, "Correct list item it.");
     88      is(content.getAttribute("role"), "presentation", "Correct content role.");
     89 
     90      is(content.innerHTML,
     91         `<div class="item-${index + 1}">Test List Item ${index + 1}</div>`,
     92         "Content rendered correctly.");
     93    }
     94 
     95    is(list.state.current, null, "Current item is not set by default.");
     96    is(list.state.active, null, "Active item is not set by default.");
     97    is(list.listRef.current, listEl, "Correct list ref.");
     98 
     99    is(listEl.className, "list", "Correct list class.");
    100    is(listEl.tabIndex, 0, "List is focusable.");
    101    ok(!listEl.hasAttribute("aria-label"), "List has no label.");
    102    is(listEl.getAttribute("aria-labelledby"), "test-labelledby",
    103       "Correct list labelled by attribute.");
    104    ok(!listEl.hasAttribute("aria-activedescendant"),
    105      "No active descendant set by default.");
    106 
    107    Simulate.focus(listEl);
    108    testCurrent(0);
    109 
    110    Simulate.click(itemEls[2]);
    111    testCurrent(2);
    112 
    113    Simulate.blur(listEl);
    114    testCurrent(2);
    115 
    116    Simulate.focus(listEl);
    117    testCurrent(2);
    118  } catch (e) {
    119    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
    120  } finally {
    121    SimpleTest.finish();
    122  }
    123 };
    124 </script>
    125 </pre>
    126 </body>
    127 </html>