Bug 1049598 - Re-write browser_styleeditor_new.js to remove race conditions. r=bgrins

browser/devtools/styleeditor/test/browser_styleeditor_new.js

@@ -4,85 +4,74 @@
 
 const TESTCASE_URI = TEST_BASE + "simple.html";
 
-let TRANSITION_CLASS = "moz-styleeditor-transitioning";
 let TESTCASE_CSS_SOURCE = "body{background-color:red;";
 
+let gOriginalHref;
 let gUI;
 
-function test()
-{
-  waitForExplicitFinish();
+waitForExplicitFinish();
 
-  addTabAndCheckOnStyleEditorAdded(panel => gUI = panel.UI, testEditorAdded);
+let test = asyncTest(function*() {
+  let panel = yield addTabAndOpenStyleEditors(2, null, TESTCASE_URI);
+  gUI = panel.UI;
 
-  content.location = TESTCASE_URI;
+  let editor = yield createNew();
+  testInitialState(editor);
+
+  let waitForPropertyChange = onPropertyChange(editor);
+
+  yield typeInEditor(editor);
+
+  yield waitForPropertyChange;
+
+  testUpdated(editor);
+
+  gUI = null;
+});
+
+function createNew() {
+  info("Creating a new stylesheet now");
+  let deferred = promise.defer();
+
+  gUI.once("editor-added", (ev, editor) => {
+    editor.getSourceEditor().then(deferred.resolve);
+  });
+
+  waitForFocus(function () {// create a new style sheet
+    let newButton = gPanelWindow.document.querySelector(".style-editor-newButton");
+    ok(newButton, "'new' button exists");
+
+    EventUtils.synthesizeMouseAtCenter(newButton, {}, gPanelWindow);
+  }, gPanelWindow);
+
+  return deferred.promise;
 }
 
-let gAddedCount = 0;  // to add new stylesheet after the 2 initial stylesheets
-let gNewEditor;       // to make sure only one new stylesheet got created
-let gOriginalHref;
+function onPropertyChange(aEditor) {
+  let deferred = promise.defer();
 
-let checksCompleted = 0;
-
-function testEditorAdded(aEditor)
-{
-  info("added " + gAddedCount + " editors");
-  if (++gAddedCount == 2) {
-    waitForFocus(function () {// create a new style sheet
-      let newButton = gPanelWindow.document.querySelector(".style-editor-newButton");
-      ok(newButton, "'new' button exists");
-
-      EventUtils.synthesizeMouseAtCenter(newButton, {}, gPanelWindow);
-    }, gPanelWindow);
-  }
-  if (gAddedCount < 3) {
-    return;
-  }
-
-  ok(!gNewEditor, "creating a new stylesheet triggers one EditorAdded event");
-  gNewEditor = aEditor; // above test will fail if we get a duplicate event
-
-  is(gUI.editors.length, 3,
-     "creating a new stylesheet added a new StyleEditor instance");
-
-  aEditor.styleSheet.once("style-applied", function() {
-    // when changes have been completely applied to live stylesheet after transisiton
-    ok(!content.document.documentElement.classList.contains(TRANSITION_CLASS),
-       "StyleEditor's transition class has been removed from content");
-
-    if (++checksCompleted == 3) {
-      cleanup();
+  aEditor.styleSheet.on("property-change", function onProp(property, value) {
+    // wait for text to be entered fully
+    let text = aEditor.sourceEditor.getText();
+    if (property == "ruleCount" && text == TESTCASE_CSS_SOURCE + "}") {
+      aEditor.styleSheet.off("property-change", onProp);
+      deferred.resolve();
     }
   });
 
-  aEditor.styleSheet.on("property-change", function(property) {
-    if (property == "ruleCount") {
-      let ruleCount = aEditor.summary.querySelector(".stylesheet-rule-count").textContent;
-      is(parseInt(ruleCount), 1,
-         "new editor shows 1 rule after modification");
-
-      if (++checksCompleted == 3) {
-        cleanup();
-      }
-    }
-  });
-
-  aEditor.getSourceEditor().then(testEditor);
+  return deferred.promise;
 }
 
-function testEditor(aEditor) {
-  waitForFocus(function () {
+function testInitialState(aEditor) {
+  info("Testing the initial state of the new editor");
   gOriginalHref = aEditor.styleSheet.href;
 
   let summary = aEditor.summary;
 
-  ok(aEditor.sourceLoaded,
-     "new editor is loaded when attached");
-  ok(aEditor.isNew,
-     "new editor has isNew flag");
+  ok(aEditor.sourceLoaded, "new editor is loaded when attached");
+  ok(aEditor.isNew, "new editor has isNew flag");
 
-  ok(aEditor.sourceEditor.hasFocus(),
-     "new editor has focus");
+  ok(aEditor.sourceEditor.hasFocus(), "new editor has focus");
 
   let summary = aEditor.summary;
   let ruleCount = summary.querySelector(".stylesheet-rule-count").textContent;
@@ -92,41 +81,33 @@ function testEditor(aEditor) {
   let computedStyle = content.getComputedStyle(content.document.body, null);
   is(computedStyle.backgroundColor, "rgb(255, 255, 255)",
      "content's background color is initially white");
-
-  for each (let c in TESTCASE_CSS_SOURCE) {
-    EventUtils.synthesizeKey(c, {}, gPanelWindow);
-  }
-
-  ok(aEditor.unsaved,
-     "new editor has unsaved flag");
-
-  // we know that the testcase above will start a CSS transition
-  content.addEventListener("transitionend", onTransitionEnd, false);
-}, gPanelWindow) ;
 }
 
-function onTransitionEnd() {
-  content.removeEventListener("transitionend", onTransitionEnd, false);
+function typeInEditor(aEditor) {
+  let deferred = promise.defer();
 
-  is(gNewEditor.sourceEditor.getText(), TESTCASE_CSS_SOURCE + "}",
+  waitForFocus(function () {
+    for each (let c in TESTCASE_CSS_SOURCE) {
+      EventUtils.synthesizeKey(c, {}, gPanelWindow);
+    }
+    ok(aEditor.unsaved, "new editor has unsaved flag");
+
+    deferred.resolve();
+  }, gPanelWindow);
+
+  return deferred.promise;
+}
+
+function testUpdated(aEditor) {
+  info("Testing the state of the new editor after editing it");
+
+  is(aEditor.sourceEditor.getText(), TESTCASE_CSS_SOURCE + "}",
      "rule bracket has been auto-closed");
 
-  let computedStyle = content.getComputedStyle(content.document.body, null);
-  is(computedStyle.backgroundColor, "rgb(255, 0, 0)",
-     "content's background color has been updated to red");
+  let ruleCount = aEditor.summary.querySelector(".stylesheet-rule-count").textContent;
+  is(parseInt(ruleCount), 1,
+     "new editor shows 1 rule after modification");
 
-  if (gNewEditor) {
-    is(gNewEditor.styleSheet.href, gOriginalHref,
-       "style sheet href did not change");
-  }
-
-  if (++checksCompleted == 3) {
-    cleanup();
-  }
-}
-
-function cleanup() {
-  gNewEditor = null;
-  gUI = null;
-  finish();
+  is(aEditor.styleSheet.href, gOriginalHref,
+     "style sheet href did not change");
 }