1 files changed, 108 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_class_panel_add.js b/devtools/client/inspector/rules/test/browser_rules_class_panel_add.js
new file mode 100644
index 0000000000..dfba3a63bf
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_add.js
@@ -0,0 +1,108 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that classes can be added in the class panel
+
+// This array contains the list of test cases. Each test case contains these properties:
+// - {String} textEntered The text to be entered in the field
+// - {Boolean} expectNoMutation Set to true if we shouldn't wait for a DOM mutation
+// - {Array} expectedClasses The expected list of classes to be applied to the DOM and to
+//   be found in the class panel
+const TEST_ARRAY = [
+  {
+    textEntered: "",
+    expectNoMutation: true,
+    expectedClasses: [],
+  },
+  {
+    textEntered: "class",
+    expectedClasses: ["class"],
+  },
+  {
+    textEntered: "class",
+    expectNoMutation: true,
+    expectedClasses: ["class"],
+  },
+  {
+    textEntered: "a a a a a a a a a a",
+    expectedClasses: ["class", "a"],
+  },
+  {
+    textEntered: "class2 class3",
+    expectedClasses: ["class", "a", "class2", "class3"],
+  },
+  {
+    textEntered: "                       ",
+    expectNoMutation: true,
+    expectedClasses: ["class", "a", "class2", "class3"],
+  },
+  {
+    textEntered: "          class4",
+    expectedClasses: ["class", "a", "class2", "class3", "class4"],
+  },
+  {
+    textEntered: "    \t      class5      \t \t\t             ",
+    expectedClasses: ["class", "a", "class2", "class3", "class4", "class5"],
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8,");
+  const { inspector, view } = await openRuleView();
+
+  info("Open the class panel");
+  view.showClassPanel();
+
+  const textField = inspector.panelDoc.querySelector(
+    "#ruleview-class-panel .add-class"
+  );
+  ok(textField, "The input field exists in the class panel");
+
+  textField.focus();
+
+  let onMutation;
+  for (const { textEntered, expectNoMutation, expectedClasses } of TEST_ARRAY) {
+    if (!expectNoMutation) {
+      onMutation = inspector.once("markupmutation");
+    }
+
+    info(`Enter the test string in the field: ${textEntered}`);
+    for (const key of textEntered.split("")) {
+      const onPreviewMutation = inspector.once("markupmutation");
+      EventUtils.synthesizeKey(key, {}, view.styleWindow);
+      await onPreviewMutation;
+    }
+
+    info("Submit the change and wait for the textfield to become empty");
+    const onEmpty = waitForFieldToBeEmpty(textField);
+    EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+
+    if (!expectNoMutation) {
+      info("Wait for the DOM to change");
+      await onMutation;
+    }
+
+    await onEmpty;
+
+    info("Check the state of the DOM node");
+    const className = await getContentPageElementAttribute("body", "class");
+    const expectedClassName = expectedClasses.length
+      ? expectedClasses.join(" ")
+      : null;
+    is(className, expectedClassName, "The DOM node has the right className");
+
+    info("Check the content of the class panel");
+    checkClassPanelContent(
+      view,
+      expectedClasses.map(name => {
+        return { name, state: true };
+      })
+    );
+  }
+});
+
+function waitForFieldToBeEmpty(textField) {
+  return waitForSuccess(() => !textField.value);
+}