diff options
Diffstat (limited to 'devtools/client/styleeditor/test/browser_styleeditor_new.js')
-rw-r--r-- | devtools/client/styleeditor/test/browser_styleeditor_new.js | 113 |
1 files changed, 113 insertions, 0 deletions
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_new.js b/devtools/client/styleeditor/test/browser_styleeditor_new.js new file mode 100644 index 000000000..1fc5b4638 --- /dev/null +++ b/devtools/client/styleeditor/test/browser_styleeditor_new.js @@ -0,0 +1,113 @@ +/* vim: set ts=2 et sw=2 tw=80: */ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ +"use strict"; + +// Test that new sheets can be added and edited. + +const TESTCASE_URI = TEST_BASE_HTTP + "simple.html"; + +const TESTCASE_CSS_SOURCE = "body{background-color:red;"; + +add_task(function* () { + let { panel, ui } = yield openStyleEditorForURL(TESTCASE_URI); + + let editor = yield createNew(ui, panel.panelWindow); + yield testInitialState(editor); + + let originalHref = editor.styleSheet.href; + let waitForPropertyChange = onPropertyChange(editor); + + yield typeInEditor(editor, panel.panelWindow); + + yield waitForPropertyChange; + + testUpdated(editor, originalHref); +}); + +function createNew(ui, panelWindow) { + info("Creating a new stylesheet now"); + let deferred = defer(); + + ui.once("editor-added", (ev, editor) => { + editor.getSourceEditor().then(deferred.resolve); + }); + + waitForFocus(function () { + // create a new style sheet + let newButton = panelWindow.document + .querySelector(".style-editor-newButton"); + ok(newButton, "'new' button exists"); + + EventUtils.synthesizeMouseAtCenter(newButton, {}, panelWindow); + }, panelWindow); + + return deferred.promise; +} + +function onPropertyChange(editor) { + let deferred = defer(); + + editor.styleSheet.on("property-change", function onProp(property) { + // wait for text to be entered fully + let text = editor.sourceEditor.getText(); + if (property == "ruleCount" && text == TESTCASE_CSS_SOURCE + "}") { + editor.styleSheet.off("property-change", onProp); + deferred.resolve(); + } + }); + + return deferred.promise; +} + +function* testInitialState(editor) { + info("Testing the initial state of the new editor"); + + let summary = editor.summary; + + ok(editor.sourceLoaded, "new editor is loaded when attached"); + ok(editor.isNew, "new editor has isNew flag"); + + ok(editor.sourceEditor.hasFocus(), "new editor has focus"); + + summary = editor.summary; + let ruleCount = summary.querySelector(".stylesheet-rule-count").textContent; + is(parseInt(ruleCount, 10), 0, "new editor initially shows 0 rules"); + + let color = yield getComputedStyleProperty({ + selector: "body", + name: "background-color" + }); + is(color, "rgb(255, 255, 255)", + "content's background color is initially white"); +} + +function typeInEditor(editor, panelWindow) { + let deferred = defer(); + + waitForFocus(function () { + for (let c of TESTCASE_CSS_SOURCE) { + EventUtils.synthesizeKey(c, {}, panelWindow); + } + ok(editor.unsaved, "new editor has unsaved flag"); + + deferred.resolve(); + }, panelWindow); + + return deferred.promise; +} + +function testUpdated(editor, originalHref) { + info("Testing the state of the new editor after editing it"); + + is(editor.sourceEditor.getText(), TESTCASE_CSS_SOURCE + "}", + "rule bracket has been auto-closed"); + + let ruleCount = editor.summary.querySelector(".stylesheet-rule-count") + .textContent; + is(parseInt(ruleCount, 10), 1, + "new editor shows 1 rule after modification"); + + is(editor.styleSheet.href, originalHref, + "style sheet href did not change"); +} |