1 files changed, 181 insertions, 0 deletions
diff --git a/devtools/client/webconsole/test/browser/browser_jsterm_editor_toolbar.js b/devtools/client/webconsole/test/browser/browser_jsterm_editor_toolbar.js
new file mode 100644
index 0000000000..d804005074
--- /dev/null
+++ b/devtools/client/webconsole/test/browser/browser_jsterm_editor_toolbar.js
@@ -0,0 +1,181 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Check that the editor toolbar works as expected when in editor mode.
+
+"use strict";
+
+const TEST_URI =
+  "data:text/html;charset=utf8,<!DOCTYPE html><p>Test editor toolbar";
+
+add_task(async function () {
+  await pushPref("devtools.webconsole.input.editor", false);
+
+  const tab = await addTab(TEST_URI);
+  let hud = await openConsole(tab);
+
+  info("Test that the toolbar is not displayed when in editor mode");
+  let toolbar = getEditorToolbar(hud);
+  is(toolbar, null, "The toolbar isn't displayed when not in editor mode");
+  await closeToolbox();
+
+  await pushPref("devtools.webconsole.input.editor", true);
+  hud = await openConsole(tab);
+
+  info("Test that the toolbar is displayed when in editor mode");
+  toolbar = getEditorToolbar(hud);
+  ok(toolbar, "The toolbar is displayed when in editor mode");
+
+  info("Test that the toolbar has the expected items");
+  const runButton = toolbar.querySelector(
+    ".webconsole-editor-toolbar-executeButton"
+  );
+  is(runButton.textContent, "Run", "The button has the expected text");
+  const keyShortcut =
+    (Services.appinfo.OS === "Darwin" ? "Cmd" : "Ctrl") + " + Enter";
+  is(
+    runButton.getAttribute("title"),
+    `Run expression (${keyShortcut}). This won’t clear the input.`,
+    "The Run Button has the correct title"
+  );
+
+  info("Test that clicking on the Run button works as expected");
+
+  const jsTestStatememts = Object.entries({
+    // input: output,
+    "`${1 + 1} = 2`": "2 = 2",
+    '`${"area" + 51} = aliens?`': "area51 = aliens?",
+  });
+
+  for (const [input, output] of jsTestStatememts) {
+    // Setting the input value.
+    setInputValue(hud, input);
+    runButton.click();
+    await waitFor(() => findMessageByType(hud, input, ".command"));
+    await waitFor(() => findEvaluationResultMessage(hud, output));
+    ok(true, "The expression and its result are displayed in the output");
+    ok(
+      isInputFocused(hud),
+      "input is still focused after clicking the Run button"
+    );
+  }
+  // Clear JS Term beform testing history buttons
+  setInputValue(hud, "");
+
+  info("Test that clicking the previous expression button works as expected");
+  const prevHistoryButton = toolbar.querySelector(
+    ".webconsole-editor-toolbar-history-prevExpressionButton"
+  );
+  is(
+    prevHistoryButton.getAttribute("title"),
+    "Previous Expression",
+    "The Previous Expression Button has the correct title"
+  );
+  for (const [input] of jsTestStatememts.slice().reverse()) {
+    prevHistoryButton.click();
+    is(
+      getInputValue(hud),
+      input,
+      `The JS Terminal Editor has the correct previous expresion ${input}`
+    );
+  }
+
+  info("Test that clicking the next expression button works as expected");
+  const nextHistoryButton = toolbar.querySelector(
+    ".webconsole-editor-toolbar-history-nextExpressionButton"
+  );
+  is(
+    nextHistoryButton.getAttribute("title"),
+    "Next Expression",
+    "The Next Expression Button has the correct title"
+  );
+  nextHistoryButton.click();
+  const [nextHistoryJsStatement] = jsTestStatememts.slice(-1).pop();
+  is(
+    getInputValue(hud),
+    nextHistoryJsStatement,
+    `The JS Terminal Editor has the correct next expresion ${nextHistoryJsStatement}`
+  );
+  nextHistoryButton.click();
+  is(getInputValue(hud), "");
+
+  info("Test that clicking the pretty print button works as expected");
+  const expressionToPrettyPrint = [
+    // [raw, prettified, prettifiedWithTab, prettifiedWith4Spaces]
+    ["fn=n=>n*n", "fn = n => n * n", "fn = n => n * n", "fn = n => n * n"],
+    [
+      "{x:1, y:2}",
+      "{\n  x: 1,\n  y: 2\n}",
+      "{\n\tx: 1,\n\ty: 2\n}",
+      "{\n    x: 1,\n    y: 2\n}",
+    ],
+    [
+      "async function test() {await new Promise(res => {})}",
+      "async function test() {\n  await new Promise(res => {})\n}",
+      "async function test() {\n\tawait new Promise(res => {})\n}",
+      "async function test() {\n    await new Promise(res => {})\n}",
+    ],
+  ];
+
+  const prettyPrintButton = toolbar.querySelector(
+    ".webconsole-editor-toolbar-prettyPrintButton"
+  );
+  ok(prettyPrintButton, "The pretty print button is displayed in editor mode");
+  for (const [
+    input,
+    output,
+    outputWithTab,
+    outputWith4Spaces,
+  ] of expressionToPrettyPrint) {
+    // Setting the input value.
+    setInputValue(hud, input);
+    await pushPref("devtools.editor.tabsize", 2);
+    prettyPrintButton.click();
+    is(
+      getInputValue(hud),
+      output,
+      `Pretty print works for expression ${input}`
+    );
+    // Turn on indent with tab.
+    await pushPref("devtools.editor.expandtab", false);
+    prettyPrintButton.click();
+    is(
+      getInputValue(hud),
+      outputWithTab,
+      `Pretty print works for expression ${input} when expandtab is false`
+    );
+    await pushPref("devtools.editor.expandtab", true);
+    // Set indent size to 4.
+    await pushPref("devtools.editor.tabsize", 4);
+    prettyPrintButton.click();
+    is(
+      getInputValue(hud),
+      outputWith4Spaces,
+      `Pretty print works for expression ${input} when tabsize is 4`
+    );
+    await pushPref("devtools.editor.tabsize", 2);
+    ok(
+      isInputFocused(hud),
+      "input is still focused after clicking the pretty print button"
+    );
+  }
+
+  info("Test that clicking the close button works as expected");
+  const closeButton = toolbar.querySelector(
+    ".webconsole-editor-toolbar-closeButton"
+  );
+  const closeKeyShortcut =
+    (Services.appinfo.OS === "Darwin" ? "Cmd" : "Ctrl") + " + B";
+  is(
+    closeButton.title,
+    `Switch back to inline mode (${closeKeyShortcut})`,
+    "Close button has expected title"
+  );
+  closeButton.click();
+  await waitFor(() => !isEditorModeEnabled(hud));
+  ok(true, "Editor mode is disabled when clicking on the close button");
+});
+
+function getEditorToolbar(hud) {
+  return hud.ui.outputNode.querySelector(".webconsole-editor-toolbar");
+}