tor-browser

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

test_card_container.html (3582B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4  <meta charset="utf-8">
      5  <title>CardContainer Tests</title>
      6  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
      7  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
      8  <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
      9  <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
     10  <link rel="localization" href="browser/preferences/preferences.ftl"/>
     11  <link rel="localization" href="browser/firefoxView.ftl"/>
     12  <script type="module" src="chrome://browser/content/firefoxview/card-container.mjs"></script>
     13 </head>
     14 <body>
     15  <style>
     16  </style>
     17 <p id="display"></p>
     18 <div id="content">
     19  <card-container shortPageName="history" showViewAll="true">
     20    <h2 slot="header" data-l10n-id="history-header"></h2>
     21    <ul slot="main">
     22        <li>History Row 1</li>
     23        <li>History Row 2</li>
     24        <li>History Row 3</li>
     25        <li>History Row 4</li>
     26        <li>History Row 5</li>
     27    </ul>
     28  </card-container>
     29 </div>
     30 <pre id="test">
     31 <script class="testbody" type="application/javascript">
     32  const cardContainer = document.querySelector("card-container");
     33 
     34  /**
     35  * Tests that the card-container can expand and collapse when the summary element is clicked
     36  */
     37  add_task(async function test_open_close_card() {
     38    is(
     39      cardContainer.isExpanded,
     40      true,
     41      "The card-container is expanded initially"
     42    );
     43 
     44    // Click the summary to collapse the details disclosure
     45    cardContainer.summaryEl.click();
     46    is(
     47      cardContainer.detailsEl.hasAttribute("open"),
     48      false,
     49      "The card-container is collapsed"
     50    );
     51 
     52    // Click on the summary again to expand the details disclosure
     53    cardContainer.summaryEl.click();
     54    is(
     55      cardContainer.detailsEl.hasAttribute("open"),
     56      true,
     57      "The card-container is expanded"
     58    );
     59  });
     60 
     61   /**
     62   * Tests keyboard navigation of the card-container component
     63   */
     64  add_task(async function test_keyboard_navigation() {
     65    const tab = async shiftKey => {
     66      info(`Tab${shiftKey ? ' + Shift' : ''}`);
     67      synthesizeKey("KEY_Tab", { shiftKey });
     68    };
     69    const enter = async () => {
     70      info("Enter");
     71      synthesizeKey("KEY_Enter", {});
     72    };
     73 
     74     // Setting this pref allows the test to run as expected with a keyboard on MacOS
     75    await SpecialPowers.pushPrefEnv({
     76      set: [["accessibility.tabfocus", 7]],
     77    });
     78 
     79    cardContainer.summaryEl.focus();
     80    is(
     81      cardContainer.shadowRoot.activeElement,
     82      cardContainer.summaryEl,
     83      "Focus should be on the summary element within card-container"
     84    );
     85 
     86    // Tab to the 'View all' link
     87    await tab();
     88    is(
     89      cardContainer.shadowRoot.activeElement,
     90      cardContainer.viewAllLink,
     91      "Focus should be on the 'View all' link within card-container"
     92    );
     93 
     94    // Shift + Tab back to the summary element
     95    await tab(true);
     96    is(
     97      cardContainer.shadowRoot.activeElement,
     98      cardContainer.summaryEl,
     99      "Focus should be back on the summary element within card-container"
    100    );
    101 
    102    // Select the summary to collapse the details disclosure
    103    await enter();
    104    is(
    105      cardContainer.detailsEl.hasAttribute("open"),
    106      false,
    107      "The card-container is collapsed"
    108    );
    109 
    110    // Select the summary again to expand the details disclosure
    111    await enter();
    112    is(
    113      cardContainer.detailsEl.hasAttribute("open"),
    114      true,
    115      "The card-container is expanded"
    116    );
    117 
    118    await SpecialPowers.popPrefEnv();
    119  });
    120 </script>
    121 </pre>
    122 </body>
    123 </html>