Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-02-04 13:07:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1273323 - Add integration tests for namespaced elements. r=jdescottes

Browse Source 
Add tests for :
- markup display
- add rule
- breadcrumb
- highlighter info bar
- markup search
- webconsole element output

Move webconsole dom output test to head.js as similar things are done
in several tests.


MozReview-Commit-ID: 6gclZhzd7sD

--HG--
extra : transplant_source : %8F%9C%B5%E5%04S%BC%5B%C9%E8QV%8F%E8i%C7%E8%9A%08%A6
This commit is contained in:
Nicolas Chevobbe 2016-05-22 00:03:42 +02:00
parent 10648eb845
commit 5c07ed3c81
12 changed files with 429 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
devtools/client/inspector/markup/test/browser.ini
View File

@ -109,8 +109,9 @@ subsuite = clipboard
[browser_markup_keybindings_scrolltonode.js]
[browser_markup_mutation_01.js]
[browser_markup_mutation_02.js]
[browser_markup_node_names.js]
[browser_markup_navigation.js]
[browser_markup_node_names.js]
[browser_markup_node_names_namespaced.js]
[browser_markup_node_not_displayed_01.js]
[browser_markup_node_not_displayed_02.js]
[browser_markup_pagesize_01.js]

43
devtools/client/inspector/markup/test/browser_markup_node_names_namespaced.js Normal file
View File

@ -0,0 +1,43 @@
/* 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 namespaced element node names in the markupview.
const XHTML = `
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<body>
<svg:svg width="100" height="100">
<svg:clipPath id="clip">
<svg:rect id="rectangle" x="0" y="0" width="10" height="5"></svg:rect>
</svg:clipPath>
<svg:circle cx="0" cy="0" r="5"></svg:circle>
</svg:svg>
</body>
</html>
`;
const TEST_URI = "data:application/xhtml+xml;charset=utf-8," + encodeURI(XHTML);
add_task(function* () {
let {inspector} = yield openInspectorForURL(TEST_URI);
// Get and open the svg element to show its children.
let svgNodeFront = yield getNodeFront("svg", inspector);
yield inspector.markup.expandNode(svgNodeFront);
yield waitForMultipleChildrenUpdates(inspector);
let clipPathContainer = yield getContainerForSelector("clipPath", inspector);
info("Checking the clipPath element");
ok(clipPathContainer.editor.tag.textContent === "svg:clipPath",
"svg:clipPath node is correctly displayed");
let circlePathContainer = yield getContainerForSelector("circle", inspector);
info("Checking the circle element");
ok(circlePathContainer.editor.tag.textContent === "svg:circle",
"svg:circle node is correctly displayed");
});

1
devtools/client/inspector/rules/test/browser.ini
View File

@ -52,6 +52,7 @@ support-files =
[browser_rules_add-rule_03.js]
[browser_rules_add-rule_04.js]
[browser_rules_add-rule_05.js]
[browser_rules_add-rule_06.js]
[browser_rules_add-rule_pseudo_class.js]
[browser_rules_add-rule_iframes.js]
[browser_rules_authored.js]

49
devtools/client/inspector/rules/test/browser_rules_add-rule_06.js Normal file
View File

@ -0,0 +1,49 @@
/* 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 the behaviour of adding a new rule using the add rule button
// on namespaced elements.
const XHTML = `
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<body>
<svg:svg width="100" height="100">
<svg:clipPath>
<svg:rect x="0" y="0" width="10" height="5"></svg:rect>
</svg:clipPath>
<svg:circle cx="0" cy="0" r="5"></svg:circle>
</svg:svg>
</body>
</html>
`;
const TEST_URI = "data:application/xhtml+xml;charset=utf-8," + encodeURI(XHTML);
const TEST_DATA = [
{ node: "clipPath", expected: "clipPath" },
{ node: "rect", expected: "rect" },
{ node: "circle", expected: "circle" }
];
add_task(function* () {
yield addTab(TEST_URI);
let {inspector, view} = yield openRuleView();
for (let data of TEST_DATA) {
let {node, expected} = data;
yield selectNode(node, inspector);
yield addNewRule(inspector, view);
yield testNewRule(view, expected, 1);
}
});
function* testNewRule(view, expected, index) {
let idRuleEditor = getRuleViewRuleEditor(view, index);
let editor = idRuleEditor.selectorText.ownerDocument.activeElement;
is(editor.value, expected,
"Selector editor value is as expected: " + expected);
}

3
devtools/client/inspector/test/browser.ini
View File

@ -46,6 +46,7 @@ support-files =
[browser_inspector_breadcrumbs_keyboard_trap.js]
skip-if = os == "mac" # Full keyboard navigation on OSX only works if Full Keyboard Access setting is set to All Control in System Keyboard Preferences
[browser_inspector_breadcrumbs_mutations.js]
[browser_inspector_breadcrumbs_namespaced.js]
[browser_inspector_delete-selected-node-01.js]
[browser_inspector_delete-selected-node-02.js]
[browser_inspector_delete-selected-node-03.js]
@ -91,6 +92,7 @@ skip-if = os == "mac" # Full keyboard navigation on OSX only works if Full Keybo
[browser_inspector_highlighter-zoom.js]
[browser_inspector_iframe-navigation.js]
[browser_inspector_infobar_01.js]
[browser_inspector_infobar_02.js]
[browser_inspector_initialization.js]
skip-if = (e10s && debug) # Bug 1250058 - Docshell leak on debug e10s
[browser_inspector_inspect-object-element.js]
@ -126,6 +128,7 @@ subsuite = clipboard
[browser_inspector_search-05.js]
[browser_inspector_search-06.js]
[browser_inspector_search-07.js]
[browser_inspector_search-08.js]
[browser_inspector_search_keyboard_trap.js]
[browser_inspector_search-reserved.js]
[browser_inspector_search-selection.js]

55
devtools/client/inspector/test/browser_inspector_breadcrumbs_namespaced.js Normal file
View File

@ -0,0 +1,55 @@
/* 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 content for namespaced elements is correct.
const XHTML = `
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<body>
<svg:svg width="100" height="100">
<svg:clipPath id="clip">
<svg:rect id="rectangle" x="0" y="0" width="10" height="5"></svg:rect>
</svg:clipPath>
<svg:circle cx="0" cy="0" r="5"></svg:circle>
</svg:svg>
</body>
</html>
`;
const TEST_URI = "data:application/xhtml+xml;charset=utf-8," + encodeURI(XHTML);
const NODES = [
{selector: "clipPath", nodes: ["svg:svg", "svg:clipPath"],
nodeName: "svg:clipPath", title: "svg:clipPath#clip"},
{selector: "circle", nodes: ["svg:svg", "svg:circle"],
nodeName: "svg:circle", title: "svg:circle"},
];
add_task(function* () {
let { inspector } = yield openInspectorForURL(TEST_URI);
let container = inspector.panelDoc.getElementById("inspector-breadcrumbs");
for (let node of NODES) {
info("Testing node " + node.selector);
info("Selecting node and waiting for breadcrumbs to update");
let breadcrumbsUpdated = inspector.once("breadcrumbs-updated");
yield selectNode(node.selector, inspector);
yield breadcrumbsUpdated;
info("Performing checks for node " + node.selector);
let checkedButton = container.querySelector("button[checked]");
let labelTag = checkedButton.querySelector(".breadcrumbs-widget-item-tag");
is(labelTag.textContent, node.nodeName,
"Node " + node.selector + " has the expected tag name");
is(checkedButton.getAttribute("tooltiptext"), node.title,
"Node " + node.selector + " has the expected tooltip");
}
});

50
devtools/client/inspector/test/browser_inspector_infobar_02.js Normal file
View File

@ -0,0 +1,50 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
// Check the text content of the highlighter info bar for namespaced elements.
const XHTML = `
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<body>
<svg:svg width="100" height="100">
<svg:circle cx="0" cy="0" r="5"></svg:circle>
</svg:svg>
</body>
</html>
`;
const TEST_URI = "data:application/xhtml+xml;charset=utf-8," + encodeURI(XHTML);
add_task(function* () {
let {inspector, testActor} = yield openInspectorForURL(TEST_URI);
let testData = [
{
selector: "svg",
tag: "svg:svg"
},
{
selector: "circle",
tag: "svg:circle"
},
];
for (let currTest of testData) {
yield testNode(currTest, inspector, testActor);
}
});
function* testNode(test, inspector, testActor) {
info("Testing " + test.selector);
yield selectAndHighlightNode(test.selector, inspector);
let tag = yield testActor.getHighlighterNodeTextContent(
"box-model-nodeinfobar-tagname");
is(tag, test.tag, "node " + test.selector + ": tagName matches.");
}

64
devtools/client/inspector/test/browser_inspector_search-08.js Normal file
View File

@ -0,0 +1,64 @@
/* 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 searching for namespaced elements does work.
const XHTML = `
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<body>
<svg:svg width="100" height="100">
<svg:clipPath>
<svg:rect x="0" y="0" width="10" height="5"></svg:rect>
</svg:clipPath>
<svg:circle cx="0" cy="0" r="5"></svg:circle>
</svg:svg>
</body>
</html>
`;
const TEST_URI = "data:application/xhtml+xml;charset=utf-8," + encodeURI(XHTML);
// An array of (key, suggestions) pairs where key is a key to press and
// suggestions is an array of suggestions that should be shown in the popup.
const TEST_DATA = [{
key: "c",
suggestions: ["circle", "clipPath"]
}, {
key: "VK_BACK_SPACE",
suggestions: []
}, {
key: "s",
suggestions: ["svg"]
}];
add_task(function* () {
let {inspector} = yield openInspectorForURL(TEST_URI);
let {searchBox} = inspector;
let popup = inspector.searchSuggestions.searchPopup;
yield focusSearchBoxUsingShortcut(inspector.panelWin);
for (let {key, suggestions} of TEST_DATA) {
info("Pressing " + key + " to get " + suggestions.join(", "));
let command = once(searchBox, "command");
EventUtils.synthesizeKey(key, {}, inspector.panelWin);
yield command;
info("Waiting for search query to complete and getting the suggestions");
yield inspector.searchSuggestions._lastQuery;
let actualSuggestions = popup.getItems().reverse();
is(popup.isOpen ? actualSuggestions.length : 0, suggestions.length,
"There are expected number of suggestions.");
for (let i = 0; i < suggestions.length; i++) {
is(actualSuggestions[i].label, suggestions[i],
"The suggestion at " + i + "th index is correct.");
}
}
});

1
devtools/client/webconsole/test/browser.ini
View File

@ -366,6 +366,7 @@ skip-if = e10s # Bug 1042253 - webconsole e10s tests (Linux debug timeout)
[browser_webconsole_output_dom_elements_03.js]
[browser_webconsole_output_dom_elements_04.js]
skip-if = e10s # Bug 1042253 - webconsole e10s tests (Linux debug timeout)
[browser_webconsole_output_dom_elements_05.js]
[browser_webconsole_output_events.js]
[browser_webconsole_output_regexp.js]
[browser_webconsole_output_table.js]

88
devtools/client/webconsole/test/browser_webconsole_output_dom_elements_02.js
View File

@ -4,7 +4,7 @@
* http://creativecommons.org/publicdomain/zero/1.0/ */
// Test the inspector links in the webconsole output for DOM Nodes actually
// open the inspector and select the right node
// open the inspector and select the right node.
"use strict";
@ -18,13 +18,13 @@ const TEST_DATA = [
// inspector-updated event
input: "testNode()",
output: '<p some-attribute="some-value">',
tagName: "P",
displayName: "p",
attrs: [{name: "some-attribute", value: "some-value"}]
},
{
input: "testBodyNode()",
output: '<body class="body-class" id="body-id">',
tagName: "BODY",
displayName: "body",
attrs: [
{
name: "class", value: "body-class"
@ -37,13 +37,13 @@ const TEST_DATA = [
{
input: "testNodeInIframe()",
output: "<p>",
tagName: "P",
displayName: "p",
attrs: []
},
{
input: "testDocumentElement()",
output: '<html dir="ltr" lang="en-US">',
tagName: "HTML",
displayName: "html",
attrs: [
{
name: "dir",
@ -61,82 +61,6 @@ function test() {
Task.spawn(function* () {
let {tab} = yield loadTab(TEST_URI);
let hud = yield openConsole(tab);
let toolbox = gDevTools.getToolbox(hud.target);
// Loading the inspector panel at first, to make it possible to listen for
// new node selections
yield toolbox.selectTool("inspector");
let inspector = toolbox.getCurrentPanel();
yield toolbox.selectTool("webconsole");
info("Iterating over the test data");
for (let data of TEST_DATA) {
let [result] = yield jsEval(data.input, hud, {text: data.output});
let {msg} = yield getWidgetAndMessage(result);
let inspectorIcon = msg.querySelector(".open-inspector");
ok(inspectorIcon, "Inspector icon found in the ElementNode widget");
info("Clicking on the inspector icon and waiting for the " +
"inspector to be selected");
let onInspectorSelected = toolbox.once("inspector-selected");
let onInspectorUpdated = inspector.once("inspector-updated");
let onNewNode = toolbox.selection.once("new-node-front");
let onNodeHighlight = toolbox.once("node-highlight");
EventUtils.synthesizeMouseAtCenter(inspectorIcon, {},
inspectorIcon.ownerDocument.defaultView);
yield onInspectorSelected;
yield onInspectorUpdated;
yield onNodeHighlight;
let nodeFront = yield onNewNode;
ok(true, "Inspector selected and new node got selected");
is(nodeFront.tagName, data.tagName, "The correct node was highlighted");
let attrs = nodeFront.attributes;
for (let i in data.attrs) {
is(attrs[i].name, data.attrs[i].name,
"The correct node was highlighted");
is(attrs[i].value, data.attrs[i].value,
"The correct node was highlighted");
}
info("Unhighlight the node by moving away from the markup view");
let onNodeUnhighlight = toolbox.once("node-unhighlight");
let btn = inspector.toolbox.doc.querySelector(".toolbox-dock-button");
EventUtils.synthesizeMouseAtCenter(btn, {type: "mousemove"},
inspector.toolbox.win);
yield onNodeUnhighlight;
info("Switching back to the console");
yield toolbox.selectTool("webconsole");
}
yield checkDomElementHighlightingForInputs(hud, TEST_DATA);
}).then(finishTest);
}
function jsEval(input, hud, message) {
info("Executing '" + input + "' in the web console");
hud.jsterm.clearOutput();
hud.jsterm.execute(input);
return waitForMessages({
webconsole: hud,
messages: [message]
});
}
function* getWidgetAndMessage(result) {
info("Getting the output ElementNode widget");
let msg = [...result.matched][0];
let widget = [...msg._messageObject.widgets][0];
ok(widget, "ElementNode widget found in the output");
info("Waiting for the ElementNode widget to be linked to the inspector");
yield widget.linkToInspector();
return {widget: widget, msg: msg};
}

47
devtools/client/webconsole/test/browser_webconsole_output_dom_elements_05.js Normal file
View File

@ -0,0 +1,47 @@
/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
/* 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 the inspector links in the webconsole output for namespaced elements
// actually open the inspector and select the right node.
const XHTML = `
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<body>
<svg:svg width="100" height="100">
<svg:clipPath id="clip">
<svg:rect id="rectangle" x="0" y="0" width="10" height="5"></svg:rect>
</svg:clipPath>
<svg:circle cx="0" cy="0" r="5"></svg:circle>
</svg:svg>
</body>
</html>
`;
const TEST_URI = "data:application/xhtml+xml;charset=utf-8," + encodeURI(XHTML);
const TEST_DATA = [
{
input: 'document.querySelector("clipPath")',
output: '<svg:clipPath id="clip">',
displayName: "svg:clipPath"
},
{
input: 'document.querySelector("circle")',
output: '<svg:circle cx="0" cy="0" r="5">',
displayName: "svg:circle"
},
];
function test() {
Task.spawn(function* () {
let {tab} = yield loadTab(TEST_URI);
let hud = yield openConsole(tab);
yield checkDomElementHighlightingForInputs(hud, TEST_DATA);
}).then(finishTest);
}

108
devtools/client/webconsole/test/head.js
View File

@ -1584,6 +1584,114 @@ function checkOutputForInputs(hud, inputTests) {
return Task.spawn(runner);
}
/**
* Check the web console DOM element output for the given inputs.
* Each input is checked for the expected JS eval result. The JS eval result is
* also checked if it opens the inspector with the correct node selected on
* inspector icon click
*
* @param object hud
* The web console instance to work with.
* @param array inputTests
* An array of input tests. An input test element is an object. Each
* object has the following properties:
* - input: string, JS input value to execute.
*
* - output: string, expected JS eval result.
*
* - displayName: string, expected NodeFront's displayName.
*
* - attr: Array, expected NodeFront's attributes
*/
function checkDomElementHighlightingForInputs(hud, inputs) {
function* runner() {
let toolbox = gDevTools.getToolbox(hud.target);
// Loading the inspector panel at first, to make it possible to listen for
// new node selections
yield toolbox.selectTool("inspector");
let inspector = toolbox.getCurrentPanel();
yield toolbox.selectTool("webconsole");
info("Iterating over the test data");
for (let data of inputs) {
let [result] = yield jsEval(data.input, {text: data.output});
let {msg} = yield checkWidgetAndMessage(result);
yield checkNodeHighlight(toolbox, inspector, msg, data);
}
}
function jsEval(input, message) {
info("Executing '" + input + "' in the web console");
hud.jsterm.clearOutput();
hud.jsterm.execute(input);
return waitForMessages({
webconsole: hud,
messages: [message]
});
}
function* checkWidgetAndMessage(result) {
info("Getting the output ElementNode widget");
let msg = [...result.matched][0];
let widget = [...msg._messageObject.widgets][0];
ok(widget, "ElementNode widget found in the output");
info("Waiting for the ElementNode widget to be linked to the inspector");
yield widget.linkToInspector();
return {widget, msg};
}
function* checkNodeHighlight(toolbox, inspector, msg, testData) {
let inspectorIcon = msg.querySelector(".open-inspector");
ok(inspectorIcon, "Inspector icon found in the ElementNode widget");
info("Clicking on the inspector icon and waiting for the " +
"inspector to be selected");
let onInspectorSelected = toolbox.once("inspector-selected");
let onInspectorUpdated = inspector.once("inspector-updated");
let onNewNode = toolbox.selection.once("new-node-front");
let onNodeHighlight = toolbox.once("node-highlight");
EventUtils.synthesizeMouseAtCenter(inspectorIcon, {},
inspectorIcon.ownerDocument.defaultView);
yield onInspectorSelected;
yield onInspectorUpdated;
yield onNodeHighlight;
let nodeFront = yield onNewNode;
ok(true, "Inspector selected and new node got selected");
is(nodeFront.displayName, testData.displayName,
"The correct node was highlighted");
if (testData.attrs) {
let attrs = nodeFront.attributes;
for (let i in testData.attrs) {
is(attrs[i].name, testData.attrs[i].name,
"Expected attribute's name is present");
is(attrs[i].value, testData.attrs[i].value,
"Expected attribute's value is present");
}
}
info("Unhighlight the node by moving away from the markup view");
let onNodeUnhighlight = toolbox.once("node-unhighlight");
let btn = inspector.toolbox.doc.querySelector(".toolbox-dock-button");
EventUtils.synthesizeMouseAtCenter(btn, {type: "mousemove"},
inspector.toolbox.win);
yield onNodeUnhighlight;
info("Switching back to the console");
yield toolbox.selectTool("webconsole");
}
return Task.spawn(runner);
}
/**
* Finish the request and resolve with the request object.