Bug 968727 - Split browser/devtools/markupview/test/browser_inspector_markup_edit_outerhtml.js to avoid timeouts. r=bgrins, a=test-only
authorPatrick Brosset <pbrosset@mozilla.com>
Tue, 25 Mar 2014 09:55:09 +0100
changeset 192928 329ad4441fd9d2174f9138a5ee8e796e20af3770
parent 192927 bbdc0136061edb72bb94f131886b65cbf01f9737
child 192929 d4c886f9516a9ec051a99003b9d1f2472a007f68
push id474
push userasasaki@mozilla.com
push dateMon, 02 Jun 2014 21:01:02 +0000
treeherdermozilla-release@967f4cf1b31c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins, test-only
bugs968727
milestone30.0a2
Bug 968727 - Split browser/devtools/markupview/test/browser_inspector_markup_edit_outerhtml.js to avoid timeouts. r=bgrins, a=test-only
browser/devtools/markupview/test/browser.ini
browser/devtools/markupview/test/browser_inspector_markup_edit_outerhtml.js
browser/devtools/markupview/test/browser_inspector_markup_edit_outerhtml3.js
browser/devtools/markupview/test/head.js
--- a/browser/devtools/markupview/test/browser.ini
+++ b/browser/devtools/markupview/test/browser.ini
@@ -13,16 +13,17 @@ support-files =
 
 [browser_bug896181_css_mixed_completion_new_attribute.js]
 [browser_inspector_markup_edit.js]
 [browser_inspector_markup_edit_2.js]
 [browser_inspector_markup_edit_3.js]
 [browser_inspector_markup_edit_4.js]
 [browser_inspector_markup_add_attributes.js]
 [browser_inspector_markup_edit_outerhtml.js]
+[browser_inspector_markup_edit_outerhtml3.js]
 [browser_inspector_markup_edit_outerhtml2.js]
 [browser_inspector_markup_mutation.js]
 [browser_inspector_markup_mutation_flashing.js]
 [browser_inspector_markup_navigation.js]
 [browser_inspector_markup_subset.js]
 [browser_inspector_markup_765105_tooltip.js]
 [browser_inspector_markup_950732.js]
 [browser_inspector_markup_964014_copy_image_data.js]
--- a/browser/devtools/markupview/test/browser_inspector_markup_edit_outerhtml.js
+++ b/browser/devtools/markupview/test/browser_inspector_markup_edit_outerhtml.js
@@ -35,90 +35,16 @@ const TEST_DATA = [
     }
   },
   {
     selector: "#changedTag",
     oldHTML: '<div id="changedTag">changedTag</div>',
     newHTML: '<p id="changedTag" class="important">changedTag</p>'
   },
   {
-    selector: "#badMarkup1",
-    oldHTML: '<div id="badMarkup1">badMarkup1</div>',
-    newHTML: '<div id="badMarkup1">badMarkup1</div> hanging</div>',
-    validate: function(pageNode, selectedNode) {
-      is(pageNode, selectedNode, "Original element is selected");
-
-      let textNode = pageNode.nextSibling;
-
-      is(textNode.nodeName, "#text", "Sibling is a text element");
-      is(textNode.data, " hanging", "New text node has expected text content");
-    }
-  },
-  {
-    selector: "#badMarkup2",
-    oldHTML: '<div id="badMarkup2">badMarkup2</div>',
-    newHTML: '<div id="badMarkup2">badMarkup2</div> hanging<div></div></div></div></body>',
-    validate: function(pageNode, selectedNode) {
-      is(pageNode, selectedNode, "Original element is selected");
-
-      let textNode = pageNode.nextSibling;
-
-      is(textNode.nodeName, "#text", "Sibling is a text element");
-      is(textNode.data, " hanging", "New text node has expected text content");
-    }
-  },
-  {
-    selector: "#badMarkup3",
-    oldHTML: '<div id="badMarkup3">badMarkup3</div>',
-    newHTML: '<div id="badMarkup3">badMarkup3 <em>Emphasized <strong> and strong</div>',
-    validate: function(pageNode, selectedNode) {
-      is(pageNode, selectedNode, "Original element is selected");
-
-      let em = getNode("#badMarkup3 em");
-      let strong = getNode("#badMarkup3 strong");
-
-      is(em.textContent, "Emphasized  and strong", "<em> was auto created");
-      is(strong.textContent, " and strong", "<strong> was auto created");
-    }
-  },
-  {
-    selector: "#badMarkup4",
-    oldHTML: '<div id="badMarkup4">badMarkup4</div>',
-    newHTML: '<div id="badMarkup4">badMarkup4</p>',
-    validate: function(pageNode, selectedNode) {
-      is(pageNode, selectedNode, "Original element is selected");
-
-      let div = getNode("#badMarkup4");
-      let p = getNode("#badMarkup4 p");
-
-      is(div.textContent, "badMarkup4", "textContent is correct");
-      is(div.tagName, "DIV", "did not change to <p> tag");
-      is(p.textContent, "", "The <p> tag has no children");
-      is(p.tagName, "P", "Created an empty <p> tag");
-    }
-  },
-  {
-    selector: "#badMarkup5",
-    oldHTML: '<p id="badMarkup5">badMarkup5</p>',
-    newHTML: '<p id="badMarkup5">badMarkup5 <div>with a nested div</div></p>',
-    validate: function(pageNode, selectedNode) {
-      is(pageNode, selectedNode, "Original element is selected");
-
-      let p = getNode("#badMarkup5");
-      let nodiv = getNode("#badMarkup5 div");
-      let div = getNode("#badMarkup5 ~ div");
-
-      ok(!nodiv, "The invalid markup got created as a sibling");
-      is(p.textContent, "badMarkup5 ", "The <p> tag does not take in the <div> content");
-      is(p.tagName, "P", "Did not change to a <div> tag");
-      is(div.textContent, "with a nested div", "textContent is correct");
-      is(div.tagName, "DIV", "Did not change to <p> tag");
-    }
-  },
-  {
     selector: "#siblings",
     oldHTML: '<div id="siblings">siblings</div>',
     newHTML: '<div id="siblings-before-sibling">before sibling</div>' +
              '<div id="siblings">siblings (updated)</div>' +
              '<div id="siblings-after-sibling">after sibling</div>',
     validate: function(pageNode, selectedNode) {
       let beforeSiblingNode = getNode("#siblings-before-sibling");
       let afterSiblingNode = getNode("#siblings-after-sibling");
@@ -136,64 +62,11 @@ const TEST_URL = "data:text/html," +
   "<head><meta charset='utf-8' /></head>" +
   "<body>" +
   [outer.oldHTML for (outer of TEST_DATA)].join("\n") +
   "</body>" +
   "</html>";
 
 let test = asyncTest(function*() {
   let {inspector} = yield addTab(TEST_URL).then(openInspector);
-
   inspector.markup._frame.focus();
-
-  for (let step of TEST_DATA) {
-    yield selectNode(step.selector, inspector);
-    yield executeStep(step, inspector);
-  }
+  yield runEditOuterHTMLTests(TEST_DATA, inspector);
 });
-
-function executeStep(step, inspector) {
-  let rawNode = getNode(step.selector);
-  let oldNodeFront = inspector.selection.nodeFront;
-
-  // markupmutation fires once the outerHTML is set, with a target
-  // as the parent node and a type of "childList".
-  return editHTML(step, inspector).then(mutations => {
-    // Check to make the sure the correct mutation has fired, and that the
-    // parent is selected (this will be reset to the child once the mutation is complete.
-    let node = inspector.selection.node;
-    let nodeFront = inspector.selection.nodeFront;
-    let mutation = mutations[0];
-    let isFromOuterHTML = mutation.removed.some(n => n === oldNodeFront);
-
-    ok(isFromOuterHTML, "The node is in the 'removed' list of the mutation");
-    is(mutation.type, "childList", "Mutation is a childList after updating outerHTML");
-    is(mutation.target, nodeFront, "Parent node is selected immediately after setting outerHTML");
-
-    // Wait for node to be reselected after outerHTML has been set
-    return inspector.selection.once("new-node").then(() => {
-      // Typically selectedNode will === pageNode, but if a new element has been injected in front
-      // of it, this will not be the case.  If this happens.
-      let selectedNode = inspector.selection.node;
-      let nodeFront = inspector.selection.nodeFront;
-      let pageNode = getNode(step.selector);
-
-      if (step.validate) {
-        step.validate(pageNode, selectedNode);
-      } else {
-        is(pageNode, selectedNode, "Original node (grabbed by selector) is selected");
-        is(pageNode.outerHTML, step.newHTML, "Outer HTML has been updated");
-      }
-
-      // Wait for the inspector to be fully updated to avoid causing errors by
-      // abruptly closing hanging requests when the test ends
-      return inspector.once("inspector-updated");
-    });
-  });
-}
-
-function editHTML({oldHTML, newHTML}, inspector) {
-  // markupmutation fires once the outerHTML is set, with a target
-  // as the parent node and a type of "childList".
-  let mutated = inspector.once("markupmutation");
-  inspector.markup.updateNodeOuterHTML(inspector.selection.nodeFront, newHTML, oldHTML);
-  return mutated;
-}
new file mode 100644
--- /dev/null
+++ b/browser/devtools/markupview/test/browser_inspector_markup_edit_outerhtml3.js
@@ -0,0 +1,96 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test outerHTML edition via the markup-view
+
+const TEST_DATA = [
+  {
+    selector: "#badMarkup1",
+    oldHTML: '<div id="badMarkup1">badMarkup1</div>',
+    newHTML: '<div id="badMarkup1">badMarkup1</div> hanging</div>',
+    validate: function(pageNode, selectedNode) {
+      is(pageNode, selectedNode, "Original element is selected");
+
+      let textNode = pageNode.nextSibling;
+
+      is(textNode.nodeName, "#text", "Sibling is a text element");
+      is(textNode.data, " hanging", "New text node has expected text content");
+    }
+  },
+  {
+    selector: "#badMarkup2",
+    oldHTML: '<div id="badMarkup2">badMarkup2</div>',
+    newHTML: '<div id="badMarkup2">badMarkup2</div> hanging<div></div></div></div></body>',
+    validate: function(pageNode, selectedNode) {
+      is(pageNode, selectedNode, "Original element is selected");
+
+      let textNode = pageNode.nextSibling;
+
+      is(textNode.nodeName, "#text", "Sibling is a text element");
+      is(textNode.data, " hanging", "New text node has expected text content");
+    }
+  },
+  {
+    selector: "#badMarkup3",
+    oldHTML: '<div id="badMarkup3">badMarkup3</div>',
+    newHTML: '<div id="badMarkup3">badMarkup3 <em>Emphasized <strong> and strong</div>',
+    validate: function(pageNode, selectedNode) {
+      is(pageNode, selectedNode, "Original element is selected");
+
+      let em = getNode("#badMarkup3 em");
+      let strong = getNode("#badMarkup3 strong");
+
+      is(em.textContent, "Emphasized  and strong", "<em> was auto created");
+      is(strong.textContent, " and strong", "<strong> was auto created");
+    }
+  },
+  {
+    selector: "#badMarkup4",
+    oldHTML: '<div id="badMarkup4">badMarkup4</div>',
+    newHTML: '<div id="badMarkup4">badMarkup4</p>',
+    validate: function(pageNode, selectedNode) {
+      is(pageNode, selectedNode, "Original element is selected");
+
+      let div = getNode("#badMarkup4");
+      let p = getNode("#badMarkup4 p");
+
+      is(div.textContent, "badMarkup4", "textContent is correct");
+      is(div.tagName, "DIV", "did not change to <p> tag");
+      is(p.textContent, "", "The <p> tag has no children");
+      is(p.tagName, "P", "Created an empty <p> tag");
+    }
+  },
+  {
+    selector: "#badMarkup5",
+    oldHTML: '<p id="badMarkup5">badMarkup5</p>',
+    newHTML: '<p id="badMarkup5">badMarkup5 <div>with a nested div</div></p>',
+    validate: function(pageNode, selectedNode) {
+      is(pageNode, selectedNode, "Original element is selected");
+
+      let p = getNode("#badMarkup5");
+      let nodiv = getNode("#badMarkup5 div");
+      let div = getNode("#badMarkup5 ~ div");
+
+      ok(!nodiv, "The invalid markup got created as a sibling");
+      is(p.textContent, "badMarkup5 ", "The <p> tag does not take in the <div> content");
+      is(p.tagName, "P", "Did not change to a <div> tag");
+      is(div.textContent, "with a nested div", "textContent is correct");
+      is(div.tagName, "DIV", "Did not change to <p> tag");
+    }
+  }
+];
+
+const TEST_URL = "data:text/html," +
+  "<!DOCTYPE html>" +
+  "<head><meta charset='utf-8' /></head>" +
+  "<body>" +
+  [outer.oldHTML for (outer of TEST_DATA)].join("\n") +
+  "</body>" +
+  "</html>";
+
+let test = asyncTest(function*() {
+  let {inspector} = yield addTab(TEST_URL).then(openInspector);
+  inspector.markup._frame.focus();
+  yield runEditOuterHTMLTests(TEST_DATA, inspector);
+});
--- a/browser/devtools/markupview/test/head.js
+++ b/browser/devtools/markupview/test/head.js
@@ -309,8 +309,84 @@ function getSelectorSearchBox(inspector)
  */
 function searchUsingSelectorSearch(selector, inspector) {
   info("Entering \"" + selector + "\" into the selector-search input field");
   let field = getSelectorSearchBox(inspector);
   field.focus();
   field.value = selector;
   EventUtils.sendKey("return", inspector.panelWin);
 }
+
+/**
+ * Run a series of edit-outer-html tests.
+ * This function will iterate over the provided tests array and run each test.
+ * Each test's goal is to provide a node (a selector) and a new outer-HTML to be
+ * inserted in place of the current one for that node.
+ * This test runner will wait for the mutation event to be fired and will check
+ * a few things. Each test may also provide its own validate function to perform
+ * assertions and verify that the new outer html is correct.
+ * @param {Array} tests See runEditOuterHTMLTest for the structure
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * opened
+ */
+function runEditOuterHTMLTests(tests, inspector) {
+  return Task.spawn(function* () {
+    for (let step of TEST_DATA) {
+      yield runEditOuterHTMLTest(step, inspector);
+    }
+  });
+}
+
+/**
+ * Run a single edit-outer-html test.
+ * See runEditOuterHTMLTests for a description.
+ * @param {Object} test A test object should contain the following properties:
+ *        - selector {String} a css selector targeting the node to edit
+ *        - oldHTML {String}
+ *        - newHTML {String}
+ *        - validate {Function} will be executed when the edition test is done,
+ *        after the new outer-html has been inserted. Should be used to verify
+ *        the actual DOM, see if it corresponds to the newHTML string provided
+ * @param {InspectorPanel} inspector The instance of InspectorPanel currently
+ * opened
+ */
+function* runEditOuterHTMLTest(test, inspector) {
+  info("Running an edit outerHTML test on '" + test.selector + "'");
+  yield selectNode(test.selector, inspector);
+  let oldNodeFront = inspector.selection.nodeFront;
+
+  info("Listening for the markupmutation event");
+  // This event fires once the outerHTML is set, with a target as the parent node and a type of "childList".
+  let mutated = inspector.once("markupmutation");
+  info("Editing the outerHTML");
+  inspector.markup.updateNodeOuterHTML(inspector.selection.nodeFront, test.newHTML, test.oldHTML);
+  let mutations = yield mutated;
+  ok(true, "The markupmutation event has fired, mutation done");
+
+  info("Check to make the sure the correct mutation event was fired, and that the parent is selected");
+  let nodeFront = inspector.selection.nodeFront;
+  let mutation = mutations[0];
+  let isFromOuterHTML = mutation.removed.some(n => n === oldNodeFront);
+
+  ok(isFromOuterHTML, "The node is in the 'removed' list of the mutation");
+  is(mutation.type, "childList", "Mutation is a childList after updating outerHTML");
+  is(mutation.target, nodeFront, "Parent node is selected immediately after setting outerHTML");
+
+  // Wait for node to be reselected after outerHTML has been set
+  yield inspector.selection.once("new-node");
+
+  // Typically selectedNode will === pageNode, but if a new element has been injected in front
+  // of it, this will not be the case.  If this happens.
+  let selectedNode = inspector.selection.node;
+  let nodeFront = inspector.selection.nodeFront;
+  let pageNode = getNode(test.selector);
+
+  if (test.validate) {
+    test.validate(pageNode, selectedNode);
+  } else {
+    is(pageNode, selectedNode, "Original node (grabbed by selector) is selected");
+    is(pageNode.outerHTML, test.newHTML, "Outer HTML has been updated");
+  }
+
+  // Wait for the inspector to be fully updated to avoid causing errors by
+  // abruptly closing hanging requests when the test ends
+  yield inspector.once("inspector-updated");
+}