1 files changed, 139 insertions, 0 deletions
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_reverse_search_mouse_navigation.js b/devtools/client/webconsole/test/browser/browser_webconsole_reverse_search_mouse_navigation.js
new file mode 100644
index 0000000000..b6f14bd2f3
--- /dev/null
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_reverse_search_mouse_navigation.js
@@ -0,0 +1,139 @@
+/* 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/. */
+
+// Tests reverse search results mouse navigation.
+
+"use strict";
+
+const TEST_URI = `data:text/html,<!DOCTYPE html><meta charset=utf8>Test reverse search`;
+
+add_task(async function () {
+  const hud = await openNewTabAndConsole(TEST_URI);
+
+  const jstermHistory = [
+    `document`,
+    `document
+       .querySelectorAll("span")
+       .forEach(console.log)`,
+    `Dog = "Snoopy"`,
+  ];
+
+  const onLastMessage = waitForMessageByType(hud, `"Snoopy"`, ".result");
+  for (const input of jstermHistory) {
+    execute(hud, input);
+  }
+  await onLastMessage;
+
+  await openReverseSearch(hud);
+  EventUtils.sendString("d");
+  const infoElement = await waitFor(() => getReverseSearchInfoElement(hud));
+  is(
+    infoElement.textContent,
+    "3 of 3 results",
+    "The reverse info has the expected text"
+  );
+
+  is(getInputValue(hud), jstermHistory[2], "JsTerm has the expected input");
+  is(
+    hud.jsterm.autocompletePopup.isOpen,
+    false,
+    "Setting the input value did not trigger the autocompletion"
+  );
+
+  await navigateResultsAndCheckState(hud, {
+    direction: "previous",
+    expectedInfoText: "2 of 3 results",
+    expectedJsTermInputValue: jstermHistory[1],
+  });
+
+  await navigateResultsAndCheckState(hud, {
+    direction: "previous",
+    expectedInfoText: "1 of 3 results",
+    expectedJsTermInputValue: jstermHistory[0],
+  });
+
+  info(
+    "Check that we go back to the last matching item if we were at the first"
+  );
+  await navigateResultsAndCheckState(hud, {
+    direction: "previous",
+    expectedInfoText: "3 of 3 results",
+    expectedJsTermInputValue: jstermHistory[2],
+  });
+
+  await navigateResultsAndCheckState(hud, {
+    direction: "next",
+    expectedInfoText: "1 of 3 results",
+    expectedJsTermInputValue: jstermHistory[0],
+  });
+
+  await navigateResultsAndCheckState(hud, {
+    direction: "next",
+    expectedInfoText: "2 of 3 results",
+    expectedJsTermInputValue: jstermHistory[1],
+  });
+
+  await navigateResultsAndCheckState(hud, {
+    direction: "next",
+    expectedInfoText: "3 of 3 results",
+    expectedJsTermInputValue: jstermHistory[2],
+  });
+});
+
+async function navigateResultsAndCheckState(
+  hud,
+  { direction, expectedInfoText, expectedJsTermInputValue }
+) {
+  const onJsTermValueChanged = hud.jsterm.once("set-input-value");
+  if (direction === "previous") {
+    clickPreviousButton(hud);
+  } else {
+    clickNextButton(hud);
+  }
+  await onJsTermValueChanged;
+
+  is(getInputValue(hud), expectedJsTermInputValue, "JsTerm has expected value");
+
+  const infoElement = getReverseSearchInfoElement(hud);
+  is(
+    infoElement.textContent,
+    expectedInfoText,
+    "The reverse info has the expected text"
+  );
+  is(
+    isReverseSearchInputFocused(hud),
+    true,
+    "reverse search input is still focused"
+  );
+}
+
+function clickPreviousButton(hud) {
+  const reverseSearchElement = getReverseSearchElement(hud);
+  if (!reverseSearchElement) {
+    return;
+  }
+  const button = reverseSearchElement.querySelector(
+    ".search-result-button-prev"
+  );
+  if (!button) {
+    return;
+  }
+
+  button.click();
+}
+
+function clickNextButton(hud) {
+  const reverseSearchElement = getReverseSearchElement(hud);
+  if (!reverseSearchElement) {
+    return;
+  }
+  const button = reverseSearchElement.querySelector(
+    ".search-result-button-next"
+  );
+  if (!button) {
+    return;
+  }
+
+  button.click();
+}