diff options
author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
---|---|---|
committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
tree | 10027f336435511475e392454359edea8e25895d /devtools/client/inspector/test/browser_inspector_breadcrumbs_mutations.js | |
parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
download | UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip |
Add m-esr52 at 52.6.0
Diffstat (limited to 'devtools/client/inspector/test/browser_inspector_breadcrumbs_mutations.js')
-rw-r--r-- | devtools/client/inspector/test/browser_inspector_breadcrumbs_mutations.js | 212 |
1 files changed, 212 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_breadcrumbs_mutations.js b/devtools/client/inspector/test/browser_inspector_breadcrumbs_mutations.js new file mode 100644 index 000000000..100ee275a --- /dev/null +++ b/devtools/client/inspector/test/browser_inspector_breadcrumbs_mutations.js @@ -0,0 +1,212 @@ +/* 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"; + +// Test that the breadcrumbs widget refreshes correctly when there are markup +// mutations (and that it doesn't refresh when those mutations don't change its +// output). + +const TEST_URI = URL_ROOT + "doc_inspector_breadcrumbs.html"; + +// Each item in the TEST_DATA array is a test case that should contain the +// following properties: +// - desc {String} A description of this test case (will be logged). +// - setup {Function*} A generator function (can yield promises) that sets up +// the test case. Useful for selecting a node before starting the test. +// - run {Function*} A generator function (can yield promises) that runs the +// actual test case, i.e, mutates the content DOM to cause the breadcrumbs +// to refresh, or not. +// - shouldRefresh {Boolean} Once the `run` function has completed, and the test +// has detected that the page has changed, this boolean instructs the test to +// verify if the breadcrumbs has refreshed or not. +// - output {Array} A list of strings for the text that should be found in each +// button after the test has run. +const TEST_DATA = [{ + desc: "Adding a child at the end of the chain shouldn't change anything", + setup: function* (inspector) { + yield selectNode("#i1111", inspector); + }, + run: function* ({walker, selection}) { + yield walker.setInnerHTML(selection.nodeFront, "<b>test</b>"); + }, + shouldRefresh: false, + output: ["html", "body", "article#i1", "div#i11", "div#i111", "div#i1111"] +}, { + desc: "Updating an ID to an displayed element should refresh", + setup: function* () {}, + run: function* ({walker}) { + let node = yield walker.querySelector(walker.rootNode, "#i1"); + yield node.modifyAttributes([{ + attributeName: "id", + newValue: "i1-changed" + }]); + }, + shouldRefresh: true, + output: ["html", "body", "article#i1-changed", "div#i11", "div#i111", + "div#i1111"] +}, { + desc: "Updating an class to a displayed element should refresh", + setup: function* () {}, + run: function* ({walker}) { + let node = yield walker.querySelector(walker.rootNode, "body"); + yield node.modifyAttributes([{ + attributeName: "class", + newValue: "test-class" + }]); + }, + shouldRefresh: true, + output: ["html", "body.test-class", "article#i1-changed", "div#i11", + "div#i111", "div#i1111"] +}, { + desc: "Updating a non id/class attribute to a displayed element should not " + + "refresh", + setup: function* () {}, + run: function* ({walker}) { + let node = yield walker.querySelector(walker.rootNode, "#i11"); + yield node.modifyAttributes([{ + attributeName: "name", + newValue: "value" + }]); + }, + shouldRefresh: false, + output: ["html", "body.test-class", "article#i1-changed", "div#i11", + "div#i111", "div#i1111"] +}, { + desc: "Moving a child in an element that's not displayed should not refresh", + setup: function* () {}, + run: function* ({walker}) { + // Re-append #i1211 as a last child of #i2. + let parent = yield walker.querySelector(walker.rootNode, "#i2"); + let child = yield walker.querySelector(walker.rootNode, "#i211"); + yield walker.insertBefore(child, parent); + }, + shouldRefresh: false, + output: ["html", "body.test-class", "article#i1-changed", "div#i11", + "div#i111", "div#i1111"] +}, { + desc: "Moving an undisplayed child in a displayed element should not refresh", + setup: function* () {}, + run: function* ({walker}) { + // Re-append #i2 in body (move it to the end). + let parent = yield walker.querySelector(walker.rootNode, "body"); + let child = yield walker.querySelector(walker.rootNode, "#i2"); + yield walker.insertBefore(child, parent); + }, + shouldRefresh: false, + output: ["html", "body.test-class", "article#i1-changed", "div#i11", + "div#i111", "div#i1111"] +}, { + desc: "Updating attributes on an element that's not displayed should not " + + "refresh", + setup: function* () {}, + run: function* ({walker}) { + let node = yield walker.querySelector(walker.rootNode, "#i2"); + yield node.modifyAttributes([{ + attributeName: "id", + newValue: "i2-changed" + }, { + attributeName: "class", + newValue: "test-class" + }]); + }, + shouldRefresh: false, + output: ["html", "body.test-class", "article#i1-changed", "div#i11", + "div#i111", "div#i1111"] +}, { + desc: "Removing the currently selected node should refresh", + setup: function* (inspector) { + yield selectNode("#i2-changed", inspector); + }, + run: function* ({walker, selection}) { + yield walker.removeNode(selection.nodeFront); + }, + shouldRefresh: true, + output: ["html", "body.test-class"] +}, { + desc: "Changing the class of the currently selected node should refresh", + setup: function* () {}, + run: function* ({selection}) { + yield selection.nodeFront.modifyAttributes([{ + attributeName: "class", + newValue: "test-class-changed" + }]); + }, + shouldRefresh: true, + output: ["html", "body.test-class-changed"] +}, { + desc: "Changing the id of the currently selected node should refresh", + setup: function* () {}, + run: function* ({selection}) { + yield selection.nodeFront.modifyAttributes([{ + attributeName: "id", + newValue: "new-id" + }]); + }, + shouldRefresh: true, + output: ["html", "body#new-id.test-class-changed"] +}]; + +add_task(function* () { + let {inspector} = yield openInspectorForURL(TEST_URI); + let breadcrumbs = inspector.panelDoc.getElementById("inspector-breadcrumbs"); + let container = breadcrumbs.querySelector(".html-arrowscrollbox-inner"); + let win = container.ownerDocument.defaultView; + + for (let {desc, setup, run, shouldRefresh, output} of TEST_DATA) { + info("Running test case: " + desc); + + info("Listen to markupmutation events from the inspector to know when a " + + "test case has completed"); + let onContentMutation = inspector.once("markupmutation"); + + info("Running setup"); + yield setup(inspector); + + info("Listen to mutations on the breadcrumbs container"); + let hasBreadcrumbsMutated = false; + let observer = new win.MutationObserver(mutations => { + // Only consider childList changes or tooltiptext/checked attributes + // changes. The rest may be mutations caused by the overflowing arrowbox. + for (let {type, attributeName} of mutations) { + let isChildList = type === "childList"; + let isAttributes = type === "attributes" && + (attributeName === "checked" || + attributeName === "tooltiptext"); + if (isChildList || isAttributes) { + hasBreadcrumbsMutated = true; + break; + } + } + }); + observer.observe(container, { + attributes: true, + childList: true, + subtree: true + }); + + info("Running the test case"); + yield run(inspector); + + info("Wait until the page has mutated"); + yield onContentMutation; + + if (shouldRefresh) { + info("The breadcrumbs is expected to refresh, so wait for it"); + yield inspector.once("inspector-updated"); + } else { + ok(!inspector._updateProgress, + "The breadcrumbs widget is not currently updating"); + } + + is(shouldRefresh, hasBreadcrumbsMutated, "Has the breadcrumbs refreshed?"); + observer.disconnect(); + + info("Check the output of the breadcrumbs widget"); + is(container.childNodes.length, output.length, "Correct number of buttons"); + for (let i = 0; i < container.childNodes.length; i++) { + is(output[i], container.childNodes[i].textContent, + "Text content for button " + i + " is correct"); + } + } +}); |