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/shared/test/browser_mdn-docs-01.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/shared/test/browser_mdn-docs-01.js')
-rw-r--r-- | devtools/client/shared/test/browser_mdn-docs-01.js | 168 |
1 files changed, 168 insertions, 0 deletions
diff --git a/devtools/client/shared/test/browser_mdn-docs-01.js b/devtools/client/shared/test/browser_mdn-docs-01.js new file mode 100644 index 000000000..6490dfef7 --- /dev/null +++ b/devtools/client/shared/test/browser_mdn-docs-01.js @@ -0,0 +1,168 @@ +/* vim: set ts=2 et sw=2 tw=80: */ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +/** + * This file tests the MdnDocsWidget object, and specifically its + * loadCssDocs() function. + * + * The MdnDocsWidget is initialized with a document which has a specific + * structure. You then call loadCssDocs(), passing in a CSS property name. + * MdnDocsWidget then fetches docs for that property by making an XHR to + * a docs page, and loads the results into the document. While the XHR is + * still not resolved the document is put into an "initializing" state in + * which the devtools throbber is displayed. + * + * In this file we test: + * - the initial state of the document before the docs have loaded + * - the state of the document after the docs have loaded + */ + +"use strict"; + +const {setBaseCssDocsUrl, MdnDocsWidget} = require("devtools/client/shared/widgets/MdnDocsWidget"); + +/** + * Test properties + * + * In the real tooltip, a CSS property name is used to look up an MDN page + * for that property. + * In the test code, the names defined here is used to look up a page + * served by the test server. + */ +const BASIC_TESTING_PROPERTY = "html-mdn-css-basic-testing.html"; + +const BASIC_EXPECTED_SUMMARY = "A summary of the property."; +const BASIC_EXPECTED_SYNTAX = [{type: "comment", text: "/* The part we want */"}, + {type: "text", text: "\n"}, + {type: "property-name", text: "this"}, + {type: "text", text: ":"}, + {type: "text", text: " "}, + {type: "property-value", text: "is-the-part-we-want"}, + {type: "text", text: ";"}]; + +const URI_PARAMS = + "?utm_source=mozilla&utm_medium=firefox-inspector&utm_campaign=default"; + +add_task(function* () { + setBaseCssDocsUrl(TEST_URI_ROOT); + + yield addTab("about:blank"); + let [host, win] = yield createHost("bottom", "data:text/html," + + "<div class='mdn-container'></div>"); + let widget = new MdnDocsWidget(win.document.querySelector("div")); + + yield testTheBasics(widget); + + host.destroy(); + gBrowser.removeCurrentTab(); +}); + +/** + * Test all the basics + * - initial content, before docs have loaded, is as expected + * - throbber is set before docs have loaded + * - contents are as expected after docs have loaded + * - throbber is gone after docs have loaded + * - mdn link text is correct and onclick behavior is correct + */ +function* testTheBasics(widget) { + info("Test all the basic functionality in the widget"); + + info("Get the widget state before docs have loaded"); + let promise = widget.loadCssDocs(BASIC_TESTING_PROPERTY); + + info("Check initial contents before docs have loaded"); + checkTooltipContents(widget.elements, { + propertyName: BASIC_TESTING_PROPERTY, + summary: "", + syntax: "" + }); + + // throbber is set + ok(widget.elements.info.classList.contains("devtools-throbber"), + "Throbber is set"); + + info("Now let the widget finish loading"); + yield promise; + + info("Check contents after docs have loaded"); + checkTooltipContents(widget.elements, { + propertyName: BASIC_TESTING_PROPERTY, + summary: BASIC_EXPECTED_SUMMARY, + syntax: BASIC_EXPECTED_SYNTAX + }); + + // throbber is gone + ok(!widget.elements.info.classList.contains("devtools-throbber"), + "Throbber is not set"); + + info("Check that MDN link text is correct and onclick behavior is correct"); + + let mdnLink = widget.elements.linkToMdn; + let expectedHref = TEST_URI_ROOT + BASIC_TESTING_PROPERTY + URI_PARAMS; + is(mdnLink.href, expectedHref, "MDN link href is correct"); + + let uri = yield checkLinkClick(mdnLink); + is(uri, expectedHref, "New tab opened with the expected URI"); +} + + /** + * Clicking the "Visit MDN Page" in the tooltip panel + * should open a new browser tab with the page loaded. + * + * To test this we'll listen for a new tab opening, and + * when it does, add a listener to that new tab to tell + * us when it has loaded. + * + * Then we click the link. + * + * In the tab's load listener, we'll resolve the promise + * with the URI, which is expected to match the href + * in the orginal link. + * + * One complexity is that when you open a new tab, + * "about:blank" is first loaded into the tab before the + * actual page. So we ignore that first load event, and keep + * listening until "load" is triggered for a different URI. + */ +function checkLinkClick(link) { + function loadListener(tab) { + let browser = getBrowser().getBrowserForTab(tab); + let uri = browser.currentURI.spec; + + info("New browser tab has loaded"); + gBrowser.removeTab(tab); + info("Resolve promise with new tab URI"); + deferred.resolve(uri); + } + + function newTabListener(e) { + gBrowser.tabContainer.removeEventListener("TabOpen", newTabListener); + let tab = e.target; + BrowserTestUtils.browserLoaded(tab.linkedBrowser, false, url => url != "about:blank") + .then(url => loadListener(tab)); + } + + let deferred = defer(); + info("Check that clicking the link opens a new tab with the correct URI"); + gBrowser.tabContainer.addEventListener("TabOpen", newTabListener, false); + info("Click the link to MDN"); + link.click(); + return deferred.promise; +} + +/** + * Utility function to check content of the tooltip. + */ +function checkTooltipContents(doc, expected) { + is(doc.heading.textContent, + expected.propertyName, + "Property name is correct"); + + is(doc.summary.textContent, + expected.summary, + "Summary is correct"); + + checkCssSyntaxHighlighterOutput(expected.syntax, doc.syntax); +} |