tor-browser

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

test_confirm_delete_dialog.html (4958B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <!--
      4 Test the confirmation-dialog component
      5 -->
      6 <head>
      7  <meta charset="utf-8">
      8  <title>Test the confirmation-dialog component</title>
      9  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
     10  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
     11  <script type="module" src="chrome://browser/content/aboutlogins/components/confirmation-dialog.mjs"></script>
     12  <script src="aboutlogins_common.js"></script>
     13 
     14  <link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
     15 </head>
     16 <body>
     17  <p id="display">
     18  </p>
     19 <div id="content" style="display: none">
     20  <iframe id="templateFrame" src="chrome://browser/content/aboutlogins/aboutLogins.html"
     21          sandbox="allow-same-origin"></iframe>
     22 </div>
     23 <pre id="test">
     24 </pre>
     25 <script>
     26 /** Test the confirmation-dialog component */
     27 let isWin = navigator.platform.includes("Win");
     28 
     29 let options = {
     30  title: "confirm-delete-dialog-title",
     31  message: "confirm-delete-dialog-message",
     32  confirmButtonLabel: "confirm-delete-dialog-confirm-button"
     33 };
     34 let cancelButton, confirmButton, gConfirmationDialog;
     35 add_setup(async () => {
     36  let templateFrame = document.getElementById("templateFrame");
     37  let displayEl = document.getElementById("display");
     38  await importDependencies(templateFrame, displayEl);
     39 
     40  gConfirmationDialog = document.createElement("confirmation-dialog");
     41  displayEl.appendChild(gConfirmationDialog);
     42  ok(gConfirmationDialog, "The dialog should exist");
     43 
     44  cancelButton = gConfirmationDialog.shadowRoot.querySelector(".cancel-button");
     45  confirmButton = gConfirmationDialog.shadowRoot.querySelector(".confirm-button");
     46  ok(cancelButton, "The cancel button should exist");
     47  ok(confirmButton, "The confirm button should exist");
     48 });
     49 
     50 add_task(async function test_escape_key_to_cancel() {
     51  gConfirmationDialog.show(options);
     52  ok(!gConfirmationDialog.hidden, "The dialog should be visible");
     53  sendKey("ESCAPE");
     54  ok(gConfirmationDialog.hidden, "The dialog should be hidden after hitting Escape");
     55  gConfirmationDialog.hide();
     56 });
     57 
     58 add_task(async function test_initial_focus() {
     59  gConfirmationDialog.show(options);
     60  ok(!gConfirmationDialog.hidden, "The dialog should be visible");
     61  is(gConfirmationDialog.shadowRoot.activeElement, confirmButton,
     62     "After initially opening the dialog, the confirm button should be focused");
     63  gConfirmationDialog.hide();
     64 });
     65 
     66 add_task(async function test_tab_focus() {
     67  gConfirmationDialog.show(options);
     68  ok(!gConfirmationDialog.hidden, "The dialog should be visible");
     69  synthesizeKey("VK_TAB", { shiftKey: !isWin });
     70  is(gConfirmationDialog.shadowRoot.activeElement, cancelButton,
     71     "After opening the dialog and tabbing once, the cancel button should be focused");
     72  gConfirmationDialog.hide();
     73 });
     74 
     75 add_task(async function test_enter_key_to_cancel() {
     76  let showPromise = gConfirmationDialog.show(options);
     77  ok(!gConfirmationDialog.hidden, "The dialog should be visible");
     78  sendKey("RETURN");
     79  try {
     80    await showPromise;
     81    ok(true, "The dialog Promise should resolve after hitting Return with the confirm button focused");
     82  } catch (ex) {
     83    ok(false, "The dialog Promise should not reject after hitting Return with the confirm button focused");
     84  }
     85 });
     86 
     87 add_task(async function test_enter_key_to_confirm() {
     88  let showPromise = gConfirmationDialog.show(options);
     89  ok(!gConfirmationDialog.hidden, "The dialog should be visible");
     90  synthesizeKey("VK_TAB", { shiftKey: !isWin });
     91  sendKey("RETURN");
     92  try {
     93    await showPromise;
     94    ok(false, "The dialog Promise should not resolve after hitting Return with the cancel button focused");
     95  } catch (ex) {
     96    ok(true, "The dialog Promise should reject after hitting Return with the cancel button focused");
     97  }
     98 });
     99 
    100 add_task(async function test_dialog_focus_trap() {
    101  let displayEl = document.getElementById("display");
    102  let displayElChildSpan = document.createElement("span");
    103  displayElChildSpan.tabIndex = 0;
    104  displayElChildSpan.id = "display-child";
    105  displayEl.appendChild(displayElChildSpan);
    106 
    107  gConfirmationDialog.show(options);
    108 
    109  ok(!gConfirmationDialog.hidden, "The dialog should be visible");
    110  ok(displayElChildSpan.tabIndex === -1, "The tabIndex value for elements with a hardcoded tabIndex attribute should be reset to '-1'.")
    111  ok(displayElChildSpan.dataset.oldTabIndex === "0", "Existing tabIndex values should be stored in `dataset.oldTabIndex`.")
    112 
    113  const isActiveElemDialogOrHTMLorBODY = (elemTagName) => {
    114    return (["HTML", "BODY", "CONFIRMATION-DIALOG"].includes(elemTagName));
    115  }
    116 
    117  let iterator = 0;
    118  while(iterator < 20) {
    119    sendKey("TAB");
    120    isnot(document.activeElement.id, "display-child", "The display-child element should not gain focus when the dialog is showing");
    121    ok(isActiveElemDialogOrHTMLorBODY(document.activeElement.tagName), "The confirmation-dialog should always have focus when the dialog is showing");
    122    iterator++;
    123  }
    124 });
    125 
    126 </script>
    127 </body>
    128 </html>