summaryrefslogtreecommitdiffstats
path: root/devtools/client/shared/test/browser_mdn-docs-01.js
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /devtools/client/shared/test/browser_mdn-docs-01.js
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-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.js168
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);
+}