toolkit/components/aboutprocesses/tests/browser/browser_aboutprocesses_twisty.js

   1 /* Any copyright is dedicated to the Public Domain.
   2  * http://creativecommons.org/publicdomain/zero/1.0/ */
   3
   4 "use strict";
   5
   6 let doc, tbody, tabAboutProcesses;
   7
   8 const rowTypes = ["process", "window", "thread-summary", "thread"];
   9
  10 function promiseUpdate() {
  11   return promiseAboutProcessesUpdated({
  12     doc,
  13     tbody,
  14     force: true,
  15     tabAboutProcesses,
  16   });
  17 }
  18
  19 add_setup(async function () {
  20   Services.prefs.setBoolPref("toolkit.aboutProcesses.showThreads", true);
  21
  22   info("Setting up about:processes");
  23   tabAboutProcesses = await BrowserTestUtils.openNewForegroundTab({
  24     gBrowser,
  25     opening: "about:processes",
  26     waitForLoad: true,
  27   });
  28
  29   doc = tabAboutProcesses.linkedBrowser.contentDocument;
  30   tbody = doc.getElementById("process-tbody");
  31   await promiseUpdate();
  32 });
  33
  34 add_task(function testTwistyImageButtonSetup() {
  35   let twistyBtn = doc.querySelector("tr.thread-summary .twisty");
  36   let groupRow = twistyBtn.parentNode.parentNode;
  37   let groupRowId = groupRow.firstChild.children[1].getAttribute("id");
  38   let groupRowLabelId = groupRowId.split(":")[1];
  39
  40   info("Verify twisty button is properly set up.");
  41   Assert.ok(
  42     twistyBtn.hasAttribute("aria-labelledby"),
  43     "the Twisty image button has an aria-labelledby"
  44   );
  45   Assert.equal(
  46     twistyBtn.getAttribute("aria-labelledby"),
  47     `${groupRowLabelId}-label ${groupRowId}`,
  48     "the Twisty image button's aria-labelledby refers to a valid 'id' that is the Name of its row"
  49   );
  50   Assert.equal(
  51     twistyBtn.getAttribute("role"),
  52     "button",
  53     "the Twisty image is programmatically a button"
  54   );
  55   Assert.equal(
  56     twistyBtn.getAttribute("tabindex"),
  57     "0",
  58     "the Twisty image button is included in the focus order"
  59   );
  60   Assert.equal(
  61     twistyBtn.getAttribute("aria-expanded"),
  62     "false",
  63     "the Twisty image button is collapsed by default"
  64   );
  65 });
  66
  67 add_task(function testTwistyImageButtonClicking() {
  68   let twistyBtn = doc.querySelector("tr.thread-summary .twisty");
  69   let groupRow = twistyBtn.parentNode.parentNode;
  70
  71   info(
  72     "Verify we can toggle/open a list of threads by clicking the twisty button."
  73   );
  74   twistyBtn.click();
  75
  76   Assert.ok(
  77     groupRow.nextSibling.classList.contains("thread") &&
  78       !groupRow.nextSibling.classList.contains("thread-summary"),
  79     "clicking a collapsed Twisty adds subitems after the row"
  80   );
  81   Assert.equal(
  82     twistyBtn.getAttribute("aria-expanded"),
  83     "true",
  84     "the Twisty image button is expanded after a click"
  85   );
  86 });
  87
  88 add_task(function testTwistyImageButtonKeypressing() {
  89   let twistyBtn = doc.querySelector("tr.thread-summary .twisty");
  90   let groupRow = twistyBtn.parentNode.parentNode;
  91
  92   info(
  93     `Verify we can toggle/close a list of threads by pressing Enter or
  94     Space on the twisty button.`
  95   );
  96   // Verify the twisty button can be focused with a keyboard.
  97   twistyBtn.focus();
  98   Assert.equal(
  99     twistyBtn,
 100     doc.activeElement,
 101     "the Twisty image button can be focused"
 102   );
 103
 104   // Verify we can toggle subitems with a keyboard.
 105   // Twisty is expanded
 106   EventUtils.synthesizeKey("KEY_Enter");
 107   Assert.ok(
 108     !groupRow.nextSibling.classList.contains("thread") ||
 109       groupRow.nextSibling.classList.contains("thread-summary"),
 110     "pressing Enter on expanded Twisty hides a list of threads after the row"
 111   );
 112   Assert.equal(
 113     twistyBtn.getAttribute("aria-expanded"),
 114     "false",
 115     "the Twisty image button is collapsed after an Enter keypress"
 116   );
 117   // Twisty is collapsed
 118   EventUtils.synthesizeKey(" ");
 119   Assert.ok(
 120     groupRow.nextSibling.classList.contains("thread") &&
 121       !groupRow.nextSibling.classList.contains("thread-summary"),
 122     "pressing Space on collapsed Twisty shows a list of threads after the row"
 123   );
 124   Assert.equal(
 125     twistyBtn.getAttribute("aria-expanded"),
 126     "true",
 127     "the Twisty image button is expanded after a Space keypress"
 128   );
 129 });
 130
 131 add_task(function cleanup() {
 132   BrowserTestUtils.removeTab(tabAboutProcesses);
 133   Services.prefs.clearUserPref("toolkit.aboutProcesses.showThreads");
 134 });