Bug 968727 - Split browser_inspector_markup_add_attributes.js to avoid timeouts;r=bgrins

browser/devtools/markupview/test/browser.ini

@@ -29,3 +29,4 @@ support-files =
 [browser_markupview_tag_edit_03.js]
 [browser_markupview_tag_edit_04.js]
 [browser_markupview_tag_edit_05.js]
+[browser_markupview_tag_edit_06.js]

browser/devtools/markupview/test/browser_markupview_tag_edit_05.js

@@ -13,51 +13,49 @@ http://creativecommons.org/publicdomain/zero/1.0/ */
  * - Redo the change, check that the node change was made again correctly.
  */
 
-requestLongerTimeout(2);
-
 let TEST_URL = "data:text/html,<div>markup-view attributes addition test</div>";
 let TEST_DATA = [{
   desc: "Add an attribute value without closing \"",
-  enteredText: 'style="display: block;',
+  text: 'style="display: block;',
   expectedAttributes: {
     style: "display: block;"
   }
 }, {
   desc: "Add an attribute value without closing '",
-  enteredText: "style='display: inline;",
+  text: "style='display: inline;",
   expectedAttributes: {
     style: "display: inline;"
   }
 }, {
   desc: "Add an attribute wrapped with with double quotes double quote in it",
-  enteredText: 'style="display: "inline',
+  text: 'style="display: "inline',
   expectedAttributes: {
     style: "display: ",
     inline: ""
   }
 }, {
   desc: "Add an attribute wrapped with single quotes with single quote in it",
-  enteredText: "style='display: 'inline",
+  text: "style='display: 'inline",
   expectedAttributes: {
     style: "display: ",
     inline: ""
   }
 }, {
   desc: "Add an attribute with no value",
-  enteredText: "disabled",
+  text: "disabled",
   expectedAttributes: {
     disabled: ""
   }
 }, {
   desc: "Add multiple attributes with no value",
-  enteredText: "disabled autofocus",
+  text: "disabled autofocus",
   expectedAttributes: {
     disabled: "",
     autofocus: ""
   }
 }, {
   desc: "Add multiple attributes with no value, and some with value",
-  enteredText: "disabled name='name' data-test='test' autofocus",
+  text: "disabled name='name' data-test='test' autofocus",
   expectedAttributes: {
     disabled: "",
     autofocus: "",
@@ -66,100 +64,13 @@ let TEST_DATA = [{
   }
 }, {
   desc: "Add attribute with xmlns",
-  enteredText: "xmlns:edi='http://ecommerce.example.org/schema'",
+  text: "xmlns:edi='http://ecommerce.example.org/schema'",
   expectedAttributes: {
     'xmlns:edi': "http://ecommerce.example.org/schema"
   }
-}, {
-  desc: "Mixed single and double quotes",
-  enteredText: "name=\"hi\" maxlength='not a number'",
-  expectedAttributes: {
-    maxlength: "not a number",
-    name: "hi"
-  }
-}, {
-  desc: "Invalid attribute name",
-  enteredText: "x='y' <why-would-you-do-this>=\"???\"",
-  expectedAttributes: {
-    x: "y"
-  }
-}, {
-  desc: "Double quote wrapped in single quotes",
-  enteredText: "x='h\"i'",
-  expectedAttributes: {
-    x: "h\"i"
-  }
-}, {
-  desc: "Single quote wrapped in double quotes",
-  enteredText: "x=\"h'i\"",
-  expectedAttributes: {
-    x: "h'i"
-  }
-}, {
-  desc: "No quote wrapping",
-  enteredText: "a=b x=y data-test=Some spaced data",
-  expectedAttributes: {
-    a: "b",
-    x: "y",
-    "data-test": "Some",
-    spaced: "",
-    data: ""
-  }
-}, {
-  desc: "Duplicate Attributes",
-  enteredText: "a=b a='c' a=\"d\"",
-  expectedAttributes: {
-    a: "b"
-  }
-}, {
-  desc: "Inline styles",
-  enteredText: "style=\"font-family: 'Lucida Grande', sans-serif; font-size: 75%;\"",
-  expectedAttributes: {
-    style: "font-family: 'Lucida Grande', sans-serif; font-size: 75%;"
-  }
-}, {
-  desc: "Object attribute names",
-  enteredText: "toString=\"true\" hasOwnProperty=\"false\"",
-  expectedAttributes: {
-    toString: "true",
-    hasOwnProperty: "false"
-  }
-}, {
-  desc: "Add event handlers",
-  enteredText: "onclick=\"javascript: throw new Error('wont fire');\" onload=\"alert('here');\"",
-  expectedAttributes: {
-    onclick: "javascript: throw new Error('wont fire');",
-    onload: "alert('here');"
-  }
 }];
 
 let test = asyncTest(function*() {
-  info("Opening the inspector on the test URL");
   let {inspector} = yield addTab(TEST_URL).then(openInspector);
-  let markup = inspector.markup;
-
-  info("Selecting the test node");
-  let div = getNode("div");
-  yield selectNode(div, inspector);
-  let editor = getContainerForRawNode(div, inspector).editor;
-
-  for (let test of TEST_DATA) {
-    info("Starting test: " + test.desc);
-
-    info("Enter the new attribute(s) test: " + test.enteredText);
-    let nodeMutated = inspector.once("markupmutation");
-    setEditableFieldValue(editor.newAttr, test.enteredText, inspector);
-    yield nodeMutated;
-
-    info("Assert that the attribute(s) has/have been applied correctly");
-    assertAttributes(div, test.expectedAttributes);
-
-    info("Undo the change");
-    yield undoChange(inspector);
-
-    info("Assert that the attribute(s) has/have been removed correctly");
-    assertAttributes(div, {});
-  }
-
-  yield inspector.once("inspector-updated");
+  yield runAddAttributesTests(TEST_DATA, "div", inspector)
 });

browser/devtools/markupview/test/browser_markupview_tag_edit_06.js

@@ -0,0 +1,83 @@
+/* Any copyright", " is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests that adding various types of attributes to nodes in the markup-view
+ * works as expected. Also checks that the changes are properly undoable and
+ * redoable. For each step in the test, we:
+ * - Create a new DIV
+ * - Make the change, check that the change was made as we expect
+ * - Undo the change, check that the node is back in its original state
+ * - Redo the change, check that the node change was made again correctly.
+ */
+
+let TEST_URL = "data:text/html,<div>markup-view attributes addition test</div>";
+let TEST_DATA = [{
+  desc: "Mixed single and double quotes",
+  text: "name=\"hi\" maxlength='not a number'",
+  expectedAttributes: {
+    maxlength: "not a number",
+    name: "hi"
+  }
+}, {
+  desc: "Invalid attribute name",
+  text: "x='y' <why-would-you-do-this>=\"???\"",
+  expectedAttributes: {
+    x: "y"
+  }
+}, {
+  desc: "Double quote wrapped in single quotes",
+  text: "x='h\"i'",
+  expectedAttributes: {
+    x: "h\"i"
+  }
+}, {
+  desc: "Single quote wrapped in double quotes",
+  text: "x=\"h'i\"",
+  expectedAttributes: {
+    x: "h'i"
+  }
+}, {
+  desc: "No quote wrapping",
+  text: "a=b x=y data-test=Some spaced data",
+  expectedAttributes: {
+    a: "b",
+    x: "y",
+    "data-test": "Some",
+    spaced: "",
+    data: ""
+  }
+}, {
+  desc: "Duplicate Attributes",
+  text: "a=b a='c' a=\"d\"",
+  expectedAttributes: {
+    a: "b"
+  }
+}, {
+  desc: "Inline styles",
+  text: "style=\"font-family: 'Lucida Grande', sans-serif; font-size: 75%;\"",
+  expectedAttributes: {
+    style: "font-family: 'Lucida Grande', sans-serif; font-size: 75%;"
+  }
+}, {
+  desc: "Object attribute names",
+  text: "toString=\"true\" hasOwnProperty=\"false\"",
+  expectedAttributes: {
+    toString: "true",
+    hasOwnProperty: "false"
+  }
+}, {
+  desc: "Add event handlers",
+  text: "onclick=\"javascript: throw new Error('wont fire');\" onload=\"alert('here');\"",
+  expectedAttributes: {
+    onclick: "javascript: throw new Error('wont fire');",
+    onload: "alert('here');"
+  }
+}];
+
+let test = asyncTest(function*() {
+  let {inspector} = yield addTab(TEST_URL).then(openInspector);
+  yield runAddAttributesTests(TEST_DATA, "div", inspector)
+});

browser/devtools/markupview/test/head.js

@@ -231,6 +231,28 @@ function setEditableFieldValue(field, value, inspector) {
   EventUtils.sendKey("return", inspector.panelWin);
 }
 
+/**
+ * Focus the new-attribute inplace-editor field of the nodeOrSelector's markup
+ * container, and enters the given text, then wait for it to be applied and the
+ * for the node to mutates (when new attribute(s) is(are) created)
+ * @param {DOMNode|String} nodeOrSelector The node or node selector to edit.
+ * @param {String} text The new attribute text to be entered (e.g. "id='test'")
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * loaded in the toolbox
+ * @return a promise that resolves when the node has mutated
+ */
+function addNewAttributes(nodeOrSelector, text, inspector) {
+  info("Entering text '" + text + "' in node '" + nodeOrSelector + "''s new attribute field");
+
+  let container = getContainerForRawNode(nodeOrSelector, inspector);
+  ok(container, "The container for '" + nodeOrSelector + "' was found");
+
+  info("Listening for the markupmutation event");
+  let nodeMutated = inspector.once("markupmutation");
+  setEditableFieldValue(container.editor.newAttr, text, inspector);
+  return nodeMutated;
+}
+
 /**
  * Checks that a node has the given attributes
  *
@@ -315,6 +337,66 @@ function searchUsingSelectorSearch(selector, inspector) {
   EventUtils.sendKey("return", inspector.panelWin);
 }
 
+/**
+ * Run a series of add-attributes tests.
+ * This function will iterate over the provided tests array and run each test.
+ * Each test's goal is to provide some text to be entered into the test node's
+ * new-attribute field and check that the given attributes have been created.
+ * After each test has run, the markup-view's undo command will be called and
+ * the test runner will check if all the new attributes are gone.
+ * @param {Array} tests See runAddAttributesTest for the structure
+ * @param {DOMNode|String} nodeOrSelector The node or node selector
+ * corresponding to an element on the current test page that has *no attributes*
+ * when the test starts. It will be used to add and remove attributes.
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * opened
+ * @return a promise that resolves when the tests have run
+ */
+function runAddAttributesTests(tests, nodeOrSelector, inspector) {
+  info("Running " + tests.length + " add-attributes tests");
+  return Task.spawn(function*() {
+    info("Selecting the test node");
+    let div = getNode("div");
+    yield selectNode(div, inspector);
+
+    for (let test of tests) {
+      yield runAddAttributesTest(test, div, inspector);
+    }
+
+    yield inspector.once("inspector-updated");
+  });
+}
+
+/**
+ * Run a single add-attribute test.
+ * See runAddAttributesTests for a description.
+ * @param {Object} test A test object should contain the following properties:
+ *        - desc {String} a textual description for that test, to help when
+ *        reading logs
+ *        - text {String} the string to be inserted into the new attribute field
+ *        - expectedAttributes {Object} a key/value pair object that will be
+ *        used to check the attributes on the test element
+ * @param {DOMNode|String} nodeOrSelector The node or node selector
+ * corresponding to the test element
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * opened
+ */
+function* runAddAttributesTest(test, nodeOrSelector, inspector) {
+  let element = getNode(nodeOrSelector);
+
+  info("Starting add-attribute test: " + test.desc);
+  yield addNewAttributes(element, test.text, inspector);
+
+  info("Assert that the attribute(s) has/have been applied correctly");
+  assertAttributes(element, test.expectedAttributes);
+
+  info("Undo the change");
+  yield undoChange(inspector);
+
+  info("Assert that the attribute(s) has/have been removed correctly");
+  assertAttributes(element, {});
+}
+
 /**
  * Run a series of edit-outer-html tests.
  * This function will iterate over the provided tests array and run each test.
@@ -326,8 +408,10 @@ function searchUsingSelectorSearch(selector, inspector) {
  * @param {Array} tests See runEditOuterHTMLTest for the structure
  * @param {InspectorPanel} inspector The instance of InspectorPanel currently
  * opened
+ * @return a promise that resolves when the tests have run
  */
 function runEditOuterHTMLTests(tests, inspector) {
+  info("Running " + tests.length + " edit-outer-html tests");
   return Task.spawn(function* () {
     for (let step of TEST_DATA) {
       yield runEditOuterHTMLTest(step, inspector);