1 files changed, 181 insertions, 0 deletions
diff --git a/devtools/server/tests/browser/browser_accessibility_infobar_show.js b/devtools/server/tests/browser/browser_accessibility_infobar_show.js
new file mode 100644
index 0000000000..9fedf6d3b4
--- /dev/null
+++ b/devtools/server/tests/browser/browser_accessibility_infobar_show.js
@@ -0,0 +1,181 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Checks for the AccessibleHighlighter's and XULWindowHighlighter's infobar components.
+
+add_task(async function () {
+  await BrowserTestUtils.withNewTab(
+    {
+      gBrowser,
+      url: MAIN_DOMAIN + "doc_accessibility_infobar.html",
+    },
+    async function (browser) {
+      await SpecialPowers.spawn(browser, [], async function () {
+        const { require } = ChromeUtils.importESModule(
+          "resource://devtools/shared/loader/Loader.sys.mjs"
+        );
+        const {
+          HighlighterEnvironment,
+        } = require("resource://devtools/server/actors/highlighters.js");
+        const {
+          AccessibleHighlighter,
+        } = require("resource://devtools/server/actors/highlighters/accessible.js");
+
+        /**
+         * Get whether or not infobar container is hidden.
+         *
+         * @param  {Object} infobar
+         *         Accessible highlighter's infobar component.
+         * @return {String|null} If the infobar container is hidden.
+         */
+        function isContainerHidden(infobar) {
+          return !!infobar
+            .getElement("infobar-container")
+            .getAttribute("hidden");
+        }
+
+        /**
+         * Get name of accessible object.
+         *
+         * @param  {Object} infobar
+         *         Accessible highlighter's infobar component.
+         * @return {String} The text content of the infobar-name element.
+         */
+        function getName(infobar) {
+          return infobar.getTextContent("infobar-name");
+        }
+
+        /**
+         * Get role of accessible object.
+         *
+         * @param  {Object} infobar
+         *         Accessible highlighter's infobar component.
+         * @return {String} The text content of the infobar-role element.
+         */
+        function getRole(infobar) {
+          return infobar.getTextContent("infobar-role");
+        }
+
+        /**
+         * Checks for updated content for an infobar with valid bounds.
+         *
+         * @param  {Object} infobar
+         *         Accessible highlighter's infobar component.
+         * @param  {Object} options
+         *         Options to pass for the highlighter's show method.
+         *         Available options:
+         *         - {String} role
+         *           Role value of the accessible.
+         *         - {String} name
+         *           Name value of the accessible.
+         *         - {Boolean} shouldBeHidden
+         *           If the infobar component should be hidden.
+         */
+        function checkInfobar(infobar, { shouldBeHidden, role, name }) {
+          is(
+            isContainerHidden(infobar),
+            shouldBeHidden,
+            "Infobar's hidden state is correct."
+          );
+
+          if (shouldBeHidden) {
+            return;
+          }
+
+          is(getRole(infobar), role, "infobarRole text content is correct");
+          is(
+            getName(infobar),
+            `"${name}"`,
+            "infoBarName text content is correct"
+          );
+        }
+
+        /**
+         * Checks for updated content of an infobar with valid bounds.
+         *
+         * @param  {Element} node
+         *         Node to check infobar content on.
+         * @param  {Object}  highlighter
+         *         Accessible highlighter.
+         */
+        function testInfobar(node, highlighter) {
+          const infobar = highlighter.accessibleInfobar;
+          const bounds = {
+            x: 0,
+            y: 0,
+            w: 250,
+            h: 100,
+          };
+
+          info("Check that infobar is shown with valid bounds.");
+          highlighter.show(node, {
+            ...bounds,
+            role: "button",
+            name: "Accessible Button",
+          });
+
+          checkInfobar(infobar, {
+            role: "button",
+            name: "Accessible Button",
+            shouldBeHidden: false,
+          });
+          highlighter.hide();
+
+          info("Check that infobar is hidden after .hide() is called.");
+          checkInfobar(infobar, { shouldBeHidden: true });
+
+          info("Check to make sure content is updated with new options.");
+          highlighter.show(node, {
+            ...bounds,
+            name: "Test link",
+            role: "link",
+          });
+          checkInfobar(infobar, {
+            name: "Test link",
+            role: "link",
+            shouldBeHidden: false,
+          });
+          highlighter.hide();
+        }
+
+        // Start testing. First, create highlighter environment and initialize.
+        const env = new HighlighterEnvironment();
+        env.initFromWindow(content.window);
+
+        // Wait for loading highlighter environment content to complete before creating the
+        // highlighter.
+        await new Promise(resolve => {
+          const doc = env.document;
+
+          function onContentLoaded() {
+            if (
+              doc.readyState === "interactive" ||
+              doc.readyState === "complete"
+            ) {
+              resolve();
+            } else {
+              doc.addEventListener("DOMContentLoaded", onContentLoaded, {
+                once: true,
+              });
+            }
+          }
+
+          onContentLoaded();
+        });
+
+        // Now, we can test the Infobar and XULWindowInfobar components with their
+        // respective highlighters.
+        const node = content.document.createElement("div");
+        content.document.body.append(node);
+
+        info("Checks for Infobar's show method");
+        const highlighter = new AccessibleHighlighter(env);
+        await highlighter.isReady;
+        testInfobar(node, highlighter);
+      });
+    }
+  );
+});