Bug 1246677 - 8 - Use addPRoperty and remove code duplication draft
authorPatrick Brosset <pbrosset@mozilla.com>
Thu, 11 Feb 2016 13:18:14 +0100
changeset 330660 c554376cad872eff2c000e5a3acb43ecf66b0618
parent 330659 038db1db352727691b8ac1b66d4ce4fea8c89edb
child 330661 c809a86e903acc94eb943d90e8c72de766e6409e
push id10801
push userpbrosset@mozilla.com
push dateFri, 12 Feb 2016 13:33:31 +0000
bugs1246677
milestone47.0a1
Bug 1246677 - 8 - Use addPRoperty and remove code duplication MozReview-Commit-ID: KQXgdZxdiw9
devtools/client/inspector/rules/test/browser_rules_add-property-cancel_01.js
devtools/client/inspector/rules/test/browser_rules_add-property-cancel_02.js
devtools/client/inspector/rules/test/browser_rules_add-property-cancel_03.js
devtools/client/inspector/rules/test/browser_rules_add-property-svg.js
devtools/client/inspector/rules/test/browser_rules_add-property_01.js
devtools/client/inspector/rules/test/browser_rules_add-property_02.js
devtools/client/inspector/rules/test/browser_rules_edit-selector_05.js
devtools/client/inspector/rules/test/browser_rules_guessIndentation.js
devtools/client/inspector/rules/test/browser_rules_lineNumbers.js
devtools/client/inspector/rules/test/browser_rules_search-filter_09.js
devtools/client/inspector/rules/test/head.js
--- a/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_01.js
@@ -22,17 +22,17 @@ add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
   yield selectNode("#testid", inspector);
   yield testCancelNew(view);
 });
 
 function* testCancelNew(view) {
   let elementRuleEditor = getRuleViewRuleEditor(view, 0);
-  let editor = yield focusEditableField(view, elementRuleEditor.closeBrace);
+  let editor = yield focusNewRuleViewProperty(elementRuleEditor);
   is(inplaceEditor(elementRuleEditor.newPropSpan), editor,
     "The new property editor got focused");
 
   info("Escape the new property editor");
   let onBlur = once(editor.input, "blur");
   EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
   yield onBlur;
 
--- a/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_02.js
@@ -16,66 +16,19 @@ const TEST_URI = `
 `;
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
   yield selectNode("#testid", inspector);
 
   info("Test creating a new property and escaping");
-
-  let elementRuleEditor = getRuleViewRuleEditor(view, 1);
-
-  info("Focusing a new property name in the rule-view");
-  let editor = yield focusEditableField(view, elementRuleEditor.closeBrace);
-
-  is(inplaceEditor(elementRuleEditor.newPropSpan), editor,
-    "The new property editor got focused.");
-
-  info("Entering a value in the property name editor");
-  editor.input.value = "color";
-
-  info("Pressing return to commit and focus the new value field");
-  let onValueFocus = once(elementRuleEditor.element, "focus", true);
-  let onRuleViewChanged = view.once("ruleview-changed");
-  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
-  yield onValueFocus;
-  yield onRuleViewChanged;
-
-  // Getting the new value editor after focus
-  editor = inplaceEditor(view.styleDocument.activeElement);
-  let textProp = elementRuleEditor.rule.textProps[1];
-
-  is(elementRuleEditor.rule.textProps.length, 2,
-    "Created a new text property.");
-  is(elementRuleEditor.propertyList.children.length, 2,
-    "Created a property editor.");
-  is(editor, inplaceEditor(textProp.editor.valueSpan),
-    "Editing the value span now.");
-
-  info("Entering a property value");
-  editor.input.value = "red";
-
-  // Setting the input value above schedules a preview to be shown in 10ms
-  // which triggers a ruleview-changed event. If the event arrives at just the
-  // right moment after pressing escape but before the new property is removed
-  // from the rule view (it's done after a tick), the test continues too soon
-  // and the assertions below fail as the new property is still there (bug
-  // 1209295).
-  //
-  // Thus, wait for the ruleview-changed event triggered by the preview before
-  // continuing to discard the new property.
-  info("Waiting for preview to be applied.");
-  yield view.once("ruleview-changed");
-
-  info("Escaping out of the field");
-  onRuleViewChanged = view.once("ruleview-changed");
-  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
-  yield onRuleViewChanged;
+  yield addProperty(view, 1, "color", "red", "VK_ESCAPE", false);
 
   is(view.styleDocument.documentElement, view.styleDocument.activeElement,
     "Correct element has focus");
 
+  let elementRuleEditor = getRuleViewRuleEditor(view, 1);
   is(elementRuleEditor.rule.textProps.length, 1,
     "Removed the new text property.");
   is(elementRuleEditor.propertyList.children.length, 1,
     "Removed the property editor.");
 });
--- a/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_03.js
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_03.js
@@ -4,50 +4,42 @@
 
 "use strict";
 
 // Tests adding a new property and escapes the property name editor with a
 // value.
 
 const TEST_URI = `
   <style type='text/css'>
-    #testid {
+    div {
       background-color: blue;
     }
-    .testclass {
-      background-color: green;
-    }
   </style>
-  <div id='testid' class='testclass'>Styled Node</div>
+  <div>Test node</div>
 `;
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
-  yield selectNode("#testid", inspector);
-  yield testCancelNewOnEscape(inspector, view);
-});
+  yield selectNode("div", inspector);
 
-function* testCancelNewOnEscape(inspector, view) {
-  // Start at the beginning: start to add a rule to the element's style
-  // declaration, add some text, then press escape.
+  // Add a property to the element's style declaration, add some text,
+  // then press escape.
 
-  let elementRuleEditor = getRuleViewRuleEditor(view, 0);
-  let editor = yield focusEditableField(view, elementRuleEditor.closeBrace);
+  let elementRuleEditor = getRuleViewRuleEditor(view, 1);
+  let editor = yield focusNewRuleViewProperty(elementRuleEditor);
 
   is(inplaceEditor(elementRuleEditor.newPropSpan), editor,
     "Next focused editor should be the new property editor.");
 
   EventUtils.sendString("background", view.styleWindow);
 
   let onBlur = once(editor.input, "blur");
   EventUtils.synthesizeKey("VK_ESCAPE", {});
   yield onBlur;
 
   ok(!elementRuleEditor.rule._applyingModifications,
     "Shouldn't have an outstanding modification request after a cancel.");
-  is(elementRuleEditor.rule.textProps.length, 0,
+  is(elementRuleEditor.rule.textProps.length, 1,
     "Should have canceled creating a new text property.");
-  ok(!elementRuleEditor.propertyList.hasChildNodes(),
-    "Should not have any properties.");
   is(view.styleDocument.documentElement, view.styleDocument.activeElement,
     "Correct element has focus");
-}
+});
--- a/devtools/client/inspector/rules/test/browser_rules_add-property-svg.js
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-svg.js
@@ -8,54 +8,15 @@
 
 var TEST_URL = "chrome://global/skin/icons/warning.svg";
 var TEST_SELECTOR = "path";
 
 add_task(function*() {
   yield addTab(TEST_URL);
   let {inspector, view} = yield openRuleView();
   yield selectNode(TEST_SELECTOR, inspector);
-  yield testCreateNew(view);
-});
 
-function* testCreateNew(ruleView) {
   info("Test creating a new property");
-
-  let elementRuleEditor = getRuleViewRuleEditor(ruleView, 0);
-
-  info("Focusing a new property name in the rule-view");
-  let editor = yield focusEditableField(ruleView, elementRuleEditor.closeBrace);
-
-  is(inplaceEditor(elementRuleEditor.newPropSpan), editor,
-    "Next focused editor should be the new property editor.");
-
-  let input = editor.input;
-
-  info("Entering the property name");
-  input.value = "fill";
-
-  info("Pressing RETURN and waiting for the value field focus");
-  let onFocus = once(elementRuleEditor.element, "focus", true);
-  EventUtils.sendKey("return", ruleView.styleWindow);
-  yield onFocus;
-  yield elementRuleEditor.rule._applyingModifications;
-
-  editor = inplaceEditor(ruleView.styleDocument.activeElement);
-
-  is(elementRuleEditor.rule.textProps.length, 1,
-    "Should have created a new text property.");
-  is(elementRuleEditor.propertyList.children.length, 1,
-    "Should have created a property editor.");
-  let textProp = elementRuleEditor.rule.textProps[0];
-  is(editor, inplaceEditor(textProp.editor.valueSpan),
-    "Should be editing the value span now.");
-
-  editor.input.value = "red";
-  let onBlur = once(editor.input, "blur");
-  EventUtils.sendKey("return", ruleView.styleWindow);
-  yield onBlur;
-  yield elementRuleEditor.rule._applyingModifications;
-
-  is(textProp.value, "red", "Text prop should have been changed.");
+  yield addProperty(view, 0, "fill", "red");
 
   is((yield getComputedStyleProperty(TEST_SELECTOR, null, "fill")),
-    "rgb(255, 0, 0)", "The fill was changed to red");
-}
+     "rgb(255, 0, 0)", "The fill was changed to red");
+});
--- a/devtools/client/inspector/rules/test/browser_rules_add-property_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property_01.js
@@ -1,17 +1,15 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
-// Testing various inplace-editor behaviors in the rule-view
-// FIXME: To be split in several test files, and some of the inplace-editor
-// focus/blur/commit/revert stuff should be factored out in head.js
+// Test adding an invalid property.
 
 const TEST_URI = `
   <style type='text/css'>
     #testid {
       background-color: blue;
     }
     .testclass {
       background-color: green;
@@ -19,56 +17,16 @@ const TEST_URI = `
   </style>
   <div id='testid' class='testclass'>Styled Node</div>
 `;
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
   yield selectNode("#testid", inspector);
-  yield testCreateNew(view);
-});
 
-function* testCreateNew(view) {
   info("Test creating a new property");
-
-  let elementRuleEditor = getRuleViewRuleEditor(view, 0);
-
-  info("Focusing a new property name in the rule-view");
-  let editor = yield focusEditableField(view, elementRuleEditor.closeBrace);
-
-  is(inplaceEditor(elementRuleEditor.newPropSpan), editor,
-    "The new property editor got focused");
-  let input = editor.input;
-
-  info("Entering background-color in the property name editor");
-  input.value = "background-color";
-
-  info("Pressing return to commit and focus the new value field");
-  let onModifications = view.once("ruleview-changed");
-  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
-  yield onModifications;
-
-  // Getting the new value editor after focus
-  editor = inplaceEditor(view.styleDocument.activeElement);
-  let textProp = elementRuleEditor.rule.textProps[0];
-
-  is(elementRuleEditor.rule.textProps.length, 1,
-    "Created a new text property.");
-  is(elementRuleEditor.propertyList.children.length, 1,
-    "Created a property editor.");
-  is(editor, inplaceEditor(textProp.editor.valueSpan),
-    "Editing the value span now.");
-
-  ok(!textProp.editor.element.classList.contains("ruleview-overridden"),
-    "property should not be overridden.");
-
-  info("Entering a value and bluring the field to expect a rule change");
-  editor.input.value = "#XYZ";
-
-  onModifications = view.once("ruleview-changed");
-  editor.input.blur();
-  yield onModifications;
+  let textProp = yield addProperty(view, 0, "background-color", "#XYZ");
 
   is(textProp.value, "#XYZ", "Text prop should have been changed.");
   is(textProp.overridden, true, "Property should be overridden");
   is(textProp.editor.isValid(), false, "#XYZ should not be a valid entry");
-}
+});
--- a/devtools/client/inspector/rules/test/browser_rules_add-property_02.js
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property_02.js
@@ -1,16 +1,15 @@
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
-// Tests all sorts of additions and updates of properties in the rule-view.
-// FIXME: TO BE SPLIT IN *MANY* SMALLER TESTS
+//
 
 const TEST_URI = `
   <style type="text/css">
     #testid {
       background-color: blue;
     }
     .testclass, .unmatched {
       background-color: green;
@@ -18,57 +17,53 @@ const TEST_URI = `
   </style>
   <div id='testid' class='testclass'>Styled Node</div>
   <div id='testid2'>Styled Node</div>
 `;
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
-  yield testCreateNew(inspector, view);
-});
 
-function* testCreateNew(inspector, ruleView) {
-  // Create a new property.
-  let elementRuleEditor = getRuleViewRuleEditor(ruleView, 0);
-  let editor = yield focusEditableField(ruleView, elementRuleEditor.closeBrace);
+  info("Focus the new property name field");
+  let elementRuleEditor = getRuleViewRuleEditor(view, 0);
+  let editor = yield focusNewRuleViewProperty(elementRuleEditor);
+  let input = editor.input;
 
   is(inplaceEditor(elementRuleEditor.newPropSpan), editor,
     "Next focused editor should be the new property editor.");
-
-  let input = editor.input;
-
   ok(input.selectionStart === 0 && input.selectionEnd === input.value.length,
     "Editor contents are selected.");
 
   // Try clicking on the editor's input again, shouldn't cause trouble
   // (see bug 761665).
-  EventUtils.synthesizeMouse(input, 1, 1, {}, ruleView.styleWindow);
+  EventUtils.synthesizeMouse(input, 1, 1, {}, view.styleWindow);
   input.select();
 
   info("Entering the property name");
-  input.value = "background-color";
+  editor.input.value = "background-color";
 
   info("Pressing RETURN and waiting for the value field focus");
-  let onFocus = once(elementRuleEditor.element, "focus", true);
-  EventUtils.sendKey("return", ruleView.styleWindow);
-  yield onFocus;
-  yield elementRuleEditor.rule._applyingModifications;
+  let onNameAdded = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  yield onNameAdded;
 
-  editor = inplaceEditor(ruleView.styleDocument.activeElement);
+  editor = inplaceEditor(view.styleDocument.activeElement);
 
   is(elementRuleEditor.rule.textProps.length, 1,
     "Should have created a new text property.");
   is(elementRuleEditor.propertyList.children.length, 1,
     "Should have created a property editor.");
   let textProp = elementRuleEditor.rule.textProps[0];
   is(editor, inplaceEditor(textProp.editor.valueSpan),
     "Should be editing the value span now.");
 
+  info("Entering the property value");
+  // We're editing inline style, so expect a style attribute mutation.
   let onMutated = inspector.once("markupmutation");
+  let onValueAdded = view.once("ruleview-changed");
   editor.input.value = "purple";
-  let onBlur = once(editor.input, "blur");
-  EventUtils.sendKey("return", ruleView.styleWindow);
-  yield onBlur;
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  yield onValueAdded;
   yield onMutated;
 
   is(textProp.value, "purple", "Text prop should have been changed.");
-}
+});
--- a/devtools/client/inspector/rules/test/browser_rules_edit-selector_05.js
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_05.js
@@ -66,48 +66,13 @@ function* testEditSelector(view, name) {
 
 function* checkModifiedElement(view, name) {
   is(view._elementStyle.rules.length, 3, "Should have 3 rules.");
   ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
 }
 
 function* testAddProperty(view) {
   info("Test creating a new property");
-
-  let ruleEditor = getRuleViewRuleEditor(view, 1);
-
-  info("Focusing a new property name in the rule-view");
-  let editor = yield focusEditableField(view, ruleEditor.closeBrace);
-
-  is(inplaceEditor(ruleEditor.newPropSpan), editor,
-    "The new property editor got focused");
-  let input = editor.input;
-
-  info("Entering text-align in the property name editor");
-  input.value = "text-align";
-
-  info("Pressing return to commit and focus the new value field");
-  let onValueFocus = once(ruleEditor.element, "focus", true);
-  let onRuleViewChanged = view.once("ruleview-changed");
-  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
-  yield onValueFocus;
-  yield onRuleViewChanged;
-
-  // Getting the new value editor after focus
-  editor = inplaceEditor(view.styleDocument.activeElement);
-  let textProp = ruleEditor.rule.textProps[0];
-
-  is(ruleEditor.rule.textProps.length, 1, "Created a new text property.");
-  is(ruleEditor.propertyList.children.length, 1, "Created a property editor.");
-  is(editor, inplaceEditor(textProp.editor.valueSpan),
-    "Editing the value span now.");
-
-  info("Entering a value and bluring the field to expect a rule change");
-  editor.input.value = "center";
-  let onBlur = once(editor.input, "blur");
-  onRuleViewChanged = waitForNEvents(view, "ruleview-changed", 2);
-  editor.input.blur();
-  yield onBlur;
-  yield onRuleViewChanged;
+  let textProp = yield addProperty(view, 1, "text-align", "center");
 
   is(textProp.value, "center", "Text prop should have been changed.");
   is(textProp.overridden, false, "Property should not be overridden");
 }
--- a/devtools/client/inspector/rules/test/browser_rules_guessIndentation.js
+++ b/devtools/client/inspector/rules/test/browser_rules_guessIndentation.js
@@ -29,45 +29,19 @@ div {
        color: chartreuse;
 }
 `;
 
 add_task(function*() {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {toolbox, inspector, view} = yield openRuleView();
   yield selectNode("#testid", inspector);
-  yield testIndentation(toolbox, inspector, view);
-});
-
-function* testIndentation(toolbox, inspector, view) {
-  let ruleEditor = getRuleViewRuleEditor(view, 2);
-
-  info("Focusing a new property name in the rule-view");
-  let editor = yield focusEditableField(view, ruleEditor.closeBrace);
-
-  let input = editor.input;
-
-  info("Entering color in the property name editor");
-  input.value = "color";
 
-  info("Pressing return to commit and focus the new value field");
-  let onValueFocus = once(ruleEditor.element, "focus", true);
-  let onModifications = ruleEditor.rule._applyingModifications;
-  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
-  yield onValueFocus;
-  yield onModifications;
+  info("Add a new property in the rule-view");
+  yield addProperty(view, 2, "color", "chartreuse");
 
-  // Getting the new value editor after focus
-  editor = inplaceEditor(view.styleDocument.activeElement);
-  info("Entering a value and bluring the field to expect a rule change");
-  editor.input.value = "chartreuse";
-  let onBlur = once(editor.input, "blur");
-  onModifications = ruleEditor.rule._applyingModifications;
-  editor.input.blur();
-  yield onBlur;
-  yield onModifications;
-
+  info("Switch to the style-editor");
   let { UI } = yield toolbox.selectTool("styleeditor");
 
   let styleEditor = yield UI.editors[0].getSourceEditor();
   let text = styleEditor.sourceEditor.getText();
   is(text, expectedText, "style inspector changes are synced");
-}
+});
--- a/devtools/client/inspector/rules/test/browser_rules_lineNumbers.js
+++ b/devtools/client/inspector/rules/test/browser_rules_lineNumbers.js
@@ -8,45 +8,22 @@
 // rules in the rule view.
 
 const TESTCASE_URI = URL_ROOT + "doc_ruleLineNumbers.html";
 
 add_task(function*() {
   yield addTab(TESTCASE_URI);
   let { inspector, view } = yield openRuleView();
   yield selectNode("#testid", inspector);
-  let elementRuleEditor = getRuleViewRuleEditor(view, 1);
 
   let bodyRuleEditor = getRuleViewRuleEditor(view, 3);
   let value = getRuleViewLinkTextByIndex(view, 2);
   // Note that this is relative to the <style>.
   is(value.slice(-2), ":6", "initial rule line number is 6");
 
-  info("Focusing a new property name in the rule-view");
-  let editor = yield focusEditableField(view, elementRuleEditor.closeBrace);
-
-  is(inplaceEditor(elementRuleEditor.newPropSpan), editor,
-    "The new property editor got focused");
-  let input = editor.input;
-
-  info("Entering font-size in the property name editor");
-  input.value = "font-size";
-
-  info("Pressing return to commit and focus the new value field");
   let onLocationChanged = once(bodyRuleEditor.rule.domRule, "location-changed");
-  let onValueFocus = once(elementRuleEditor.element, "focus", true);
-  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
-  yield onValueFocus;
-  yield elementRuleEditor.rule._applyingModifications;
-
-  // Getting the new value editor after focus
-  editor = inplaceEditor(view.styleDocument.activeElement);
-  info("Entering a value and bluring the field to expect a rule change");
-  editor.input.value = "23px";
-  editor.input.blur();
-  yield elementRuleEditor.rule._applyingModifications;
-
+  yield addProperty(view, 1, "font-size", "23px");
   yield onLocationChanged;
 
   let newBodyTitle = getRuleViewLinkTextByIndex(view, 2);
   // Note that this is relative to the <style>.
   is(newBodyTitle.slice(-2), ":7", "updated rule line number is 7");
 });
--- a/devtools/client/inspector/rules/test/browser_rules_search-filter_09.js
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_09.js
@@ -25,17 +25,17 @@ add_task(function*() {
   yield selectNode("#testid", inspector);
 
   info("Enter the test value in the search filter");
   yield setSearchFilter(view, SEARCH);
 
   info("Start entering a new property in the rule");
   let ruleEditor = getRuleViewRuleEditor(view, 1);
   let rule = ruleEditor.rule;
-  let editor = yield focusEditableField(view, ruleEditor.closeBrace);
+  let editor = yield focusNewRuleViewProperty(ruleEditor);
 
   info("Check that the correct rules are visible");
   is(view.element.children.length, 2, "Should have 2 rules.");
   is(rule.selectorText, "#testid", "Second rule is #testid.");
   ok(rule.textProps[0].editor.container.classList
     .contains("ruleview-highlight"),
     "width text property is correctly highlighted.");
   ok(!rule.textProps[1].editor.container.classList
--- a/devtools/client/inspector/rules/test/head.js
+++ b/devtools/client/inspector/rules/test/head.js
@@ -576,43 +576,66 @@ function getRuleViewRuleEditor(view, chi
  * @param {Number} ruleIndex
  *        The index of the rule to use. Note that if ruleIndex is 0, you might
  *        want to also listen to markupmutation events in your test since
  *        that's going to change the style attribute of the selected node.
  * @param {String} name
  *        The name for the new property
  * @param {String} value
  *        The value for the new property
+ * @param {String} commitValueWith
+ *        Which key should be used to commit the new value. VK_RETURN is used by
+ *        default, but tests might want to use another key to test cancelling
+ *        for exmple.
+ * @param {Boolean} blurNewProperty
+ *        After the new value has been added, a new property would have been
+ *        focused. This parameter is true by default, and that causes the new
+ *        property to be blurred. Set to false if you don't want this.
  * @return {TextProperty} The instance of the TextProperty that was added
  */
-var addProperty = Task.async(function*(view, ruleIndex, name, value) {
+var addProperty = Task.async(function*(view, ruleIndex, name, value,
+                                       commitValueWith = "VK_RETURN",
+                                       blurNewProperty = true) {
   info("Adding new property " + name + ":" + value + " to rule " + ruleIndex);
 
   let ruleEditor = getRuleViewRuleEditor(view, ruleIndex);
   let editor = yield focusNewRuleViewProperty(ruleEditor);
+  let nbOfProps = ruleEditor.rule.textProps.length;
 
   info("Adding name " + name);
   editor.input.value = name;
   let onNameAdded = view.once("ruleview-changed");
   EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
   yield onNameAdded;
 
   // Focus has moved to the value inplace-editor automatically.
   editor = inplaceEditor(view.styleDocument.activeElement);
   let textProps = ruleEditor.rule.textProps;
   let textProp = textProps[textProps.length - 1];
 
+  is(ruleEditor.rule.textProps.length, nbOfProps + 1,
+     "A new test property was added");
+  is(editor, inplaceEditor(textProp.editor.valueSpan),
+     "The inplace editor appeared for the value");
+
   info("Adding value " + value);
+  // Setting the input value schedules a preview to be shown in 10ms which
+  // triggers a ruleview-changed event (see bug 1209295).
+  let onPreview = view.once("ruleview-changed");
   editor.input.value = value;
+  yield onPreview;
+
   let onValueAdded = view.once("ruleview-changed");
-  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  EventUtils.synthesizeKey(commitValueWith, {}, view.styleWindow);
   yield onValueAdded;
 
-  // Blur the new property field that was focused by default.
-  view.styleDocument.activeElement.blur();
+  if (blurNewProperty) {
+    view.styleDocument.activeElement.blur();
+  }
+
   return textProp;
 });
 
 /**
  * Simulate changing the value of a property in a rule in the rule-view.
  *
  * @param {CssRuleView} view
  *        The instance of the rule-view panel