From 131fb3aaf17e80a621bebe8a7b0d0d59df757027 Mon Sep 17 00:00:00 2001 From: Razvan Caliman Date: Wed, 7 Nov 2018 10:33:32 +0000 Subject: [PATCH] Bug 1503896 - (Part 6) Add test for tracking changes to rule selectors; r=pbro Depends on D11116 Differential Revision: https://phabricator.services.mozilla.com/D11117 --HG-- extra : moz-landing-system : lando --- .../changes/components/CSSDeclaration.js | 2 +- .../client/inspector/changes/test/browser.ini | 1 + .../test/browser_changes_rule_selector.js | 66 +++++++++++++++++++ .../client/shared/test/shared-redux-head.js | 15 +++-- 4 files changed, 78 insertions(+), 6 deletions(-) create mode 100644 devtools/client/inspector/changes/test/browser_changes_rule_selector.js diff --git a/devtools/client/inspector/changes/components/CSSDeclaration.js b/devtools/client/inspector/changes/components/CSSDeclaration.js index f28c7eee2700..26b323cb7046 100644 --- a/devtools/client/inspector/changes/components/CSSDeclaration.js +++ b/devtools/client/inspector/changes/components/CSSDeclaration.js @@ -26,7 +26,7 @@ class CSSDeclaration extends PureComponent { render() { const { property, value, className } = this.props; - return dom.div({ className }, + return dom.div({ className: `declaration ${className}` }, dom.span({ className: "declaration-name theme-fg-color5"}, property), ":", dom.span({ className: "declaration-value theme-fg-color1"}, value), diff --git a/devtools/client/inspector/changes/test/browser.ini b/devtools/client/inspector/changes/test/browser.ini index 8e9b5dc5fd67..9239a5381623 100644 --- a/devtools/client/inspector/changes/test/browser.ini +++ b/devtools/client/inspector/changes/test/browser.ini @@ -15,3 +15,4 @@ support-files = [browser_changes_declaration_disable.js] [browser_changes_declaration_edit_value.js] [browser_changes_declaration_remove.js] +[browser_changes_rule_selector.js] diff --git a/devtools/client/inspector/changes/test/browser_changes_rule_selector.js b/devtools/client/inspector/changes/test/browser_changes_rule_selector.js new file mode 100644 index 000000000000..e6151a85d7bc --- /dev/null +++ b/devtools/client/inspector/changes/test/browser_changes_rule_selector.js @@ -0,0 +1,66 @@ +/* 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 renaming the selector of a CSS declaration in the Rule view is tracked as +// one rule removal with the old selector and one rule addition with the new selector. + +const TEST_URI = ` + +
+`; + +add_task(async function() { + await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); + const { inspector, view: ruleView } = await openRuleView(); + const { document: doc, store } = selectChangesView(inspector); + const panel = doc.querySelector("#sidebar-panel-changes"); + + await selectNode("div", inspector); + const ruleEditor = getRuleViewRuleEditor(ruleView, 1); + + info("Focusing the first rule's selector name in the Rule view"); + const editor = await focusEditableField(ruleView, ruleEditor.selectorText); + info("Entering a new selector name"); + editor.input.value = ".test"; + + // Expect two "TRACK_CHANGE" actions: one for rule removal, one for rule addition. + const onTrackChange = waitUntilAction(store, "TRACK_CHANGE", 2); + const onRuleViewChanged = once(ruleView, "ruleview-changed"); + info("Pressing Enter key to commit the change"); + EventUtils.synthesizeKey("KEY_Enter"); + info("Waiting for rule view to update"); + await onRuleViewChanged; + info("Wait for the change to be tracked"); + await onTrackChange; + + const rules = panel.querySelectorAll(".rule"); + is(rules.length, 2, "Two rules were tracked as changed"); + + const firstSelector = rules.item(0).querySelector(".selector"); + is(firstSelector.title, "div", "Old selector name was tracked."); + ok(firstSelector.classList.contains("diff-remove"), "Old selector was removed."); + + const secondSelector = rules.item(1).querySelector(".selector"); + is(secondSelector.title, ".test", "New selector name was tracked."); + ok(secondSelector.classList.contains("diff-add"), "New selector was added."); + + info("Checking that the two rules have identical declarations"); + const firstDecl = rules.item(0).querySelectorAll(".declaration"); + is(firstDecl.length, 1, "First rule has only one declaration"); + is(firstDecl.item(0).textContent, "color:red;", "First rule has correct declaration"); + ok(firstDecl.item(0).classList.contains("diff-remove"), + "First rule has declaration tracked as removed"); + + const secondDecl = rules.item(1).querySelectorAll(".declaration"); + is(secondDecl.length, 1, "Second rule has only one declaration"); + is(secondDecl.item(0).textContent, "color:red;", "Second rule has correct declaration"); + ok(secondDecl.item(0).classList.contains("diff-add"), + "Second rule has declaration tracked as added"); +}); diff --git a/devtools/client/shared/test/shared-redux-head.js b/devtools/client/shared/test/shared-redux-head.js index 50ad54307ed5..fe857c95b64b 100644 --- a/devtools/client/shared/test/shared-redux-head.js +++ b/devtools/client/shared/test/shared-redux-head.js @@ -43,14 +43,16 @@ function waitUntilState(store, predicate) { /** * Wait until a particular action has been emitted by the store. - * @param Store store + * @param {Store} store * The Redux store being used. - * @param string actionType + * @param {String} actionType * The expected action to wait for. + * @param {Number} count + * Number of times to expect the action to occur. Default is once. * @return Promise * Resolved once the expected action is emitted by the store. */ -function waitUntilAction(store, actionType) { +function waitUntilAction(store, actionType, count = 1) { const deferred = defer(); const unsubscribe = store.subscribe(check); const history = store.history; @@ -61,8 +63,11 @@ function waitUntilAction(store, actionType) { const action = history[index++]; if (action && action.type === actionType) { info(`Found action "${actionType}"`); - unsubscribe(); - deferred.resolve(store.getState()); + count--; + if (count === 0) { + unsubscribe(); + deferred.resolve(store.getState()); + } } }