Bug 1463545 - Copy stylesheets from the payment dialog into mochitests. r=jaws
authorMatthew Noorenberghe <mozilla@noorenberghe.ca>
Thu, 20 Sep 2018 21:07:07 +0000
changeset 437503 7106b3f8d717
parent 437502 fba337077a68
child 437504 913329feffe4
push id69702
push usermozilla@noorenberghe.ca
push dateThu, 20 Sep 2018 21:12:27 +0000
treeherderautoland@216c54f4650e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1463545
milestone64.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1463545 - Copy stylesheets from the payment dialog into mochitests. r=jaws Differential Revision: https://phabricator.services.mozilla.com/D6233
browser/components/payments/test/mochitest/payments_common.js
browser/components/payments/test/mochitest/test_payment_dialog.html
browser/components/payments/test/mochitest/test_payment_dialog_required_top_level_items.html
--- a/browser/components/payments/test/mochitest/payments_common.js
+++ b/browser/components/payments/test/mochitest/payments_common.js
@@ -1,12 +1,12 @@
 "use strict";
 
 /* exported asyncElementRendered, promiseStateChange, promiseContentToChromeMessage, deepClone,
-   PTU, registerConsoleFilter, fillField */
+   PTU, registerConsoleFilter, fillField, importDialogDependencies */
 
 const PTU = SpecialPowers.Cu.import("resource://testing-common/PaymentTestUtils.jsm", {})
                             .PaymentTestUtils;
 
 /**
  * A helper to await on while waiting for an asynchronous rendering of a Custom
  * Element.
  * @returns {Promise}
@@ -38,16 +38,37 @@ function promiseContentToChromeMessage(m
         return;
       }
       document.removeEventListener("paymentContentToChrome", onCToC);
       resolve(event.detail);
     });
   });
 }
 
+/**
+ * Import the templates and stylesheets from the real shipping dialog to avoid
+ * duplication in the tests.
+ * @param {HTMLIFrameElement} templateFrame - Frame to copy the resources from
+ * @param {HTMLElement} destinationEl - Where to append the copied resources
+ */
+function importDialogDependencies(templateFrame, destinationEl) {
+  for (let template of templateFrame.contentDocument.querySelectorAll("template")) {
+    let imported = document.importNode(template, true);
+    destinationEl.appendChild(imported);
+  }
+
+  let baseURL = new URL("../../res/", window.location.href);
+  let stylesheetLinks = templateFrame.contentDocument.querySelectorAll("link[rel~='stylesheet']");
+  for (let stylesheet of stylesheetLinks) {
+    let imported = document.importNode(stylesheet, true);
+    imported.href = new URL(imported.getAttribute("href"), baseURL);
+    destinationEl.appendChild(imported);
+  }
+}
+
 function deepClone(obj) {
   return JSON.parse(JSON.stringify(obj));
 }
 
 /**
  * @param {HTMLElement} field
  * @param {string} value
  * @note This is async in case we need to make it async to handle focus in the future.
--- a/browser/components/payments/test/mochitest/test_payment_dialog.html
+++ b/browser/components/payments/test/mochitest/test_payment_dialog.html
@@ -14,18 +14,19 @@ Test the payment-dialog custom element
   <script src="../../res/vendor/custom-elements.min.js"></script>
   <script src="../../res/unprivileged-fallbacks.js"></script>
 
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
   <link rel="stylesheet" type="text/css" href="../../res/paymentRequest.css"/>
   <link rel="stylesheet" type="text/css" href="../../res/containers/rich-picker.css"/>
 </head>
 <body>
-  <p id="display">
-    <iframe id="templateFrame" src="../../res/paymentRequest.xhtml" width="0" height="0"></iframe>
+  <p id="display" style="height: 100vh; margin: 0;">
+    <iframe id="templateFrame" src="../../res/paymentRequest.xhtml" width="0" height="0"
+            style="float: left;"></iframe>
   </p>
 <div id="content" style="display: none">
 
 </div>
 <pre id="test">
 </pre>
 <script type="module">
 /** Test the payment-dialog element **/
@@ -34,23 +35,18 @@ Test the payment-dialog custom element
 
 import PaymentDialog from "../../res/containers/payment-dialog.js";
 
 let el1;
 
 add_task(async function setup_once() {
   let templateFrame = document.getElementById("templateFrame");
   await SimpleTest.promiseFocus(templateFrame.contentWindow);
-
   let displayEl = document.getElementById("display");
-  // Import the templates from the real shipping dialog to avoid duplication.
-  for (let template of templateFrame.contentDocument.querySelectorAll("template")) {
-    let imported = document.importNode(template, true);
-    displayEl.appendChild(imported);
-  }
+  importDialogDependencies(templateFrame, displayEl);
 
   el1 = new PaymentDialog();
   displayEl.appendChild(el1);
 
   sinon.spy(el1, "render");
   sinon.spy(el1, "stateChangeCallback");
 });
 
--- a/browser/components/payments/test/mochitest/test_payment_dialog_required_top_level_items.html
+++ b/browser/components/payments/test/mochitest/test_payment_dialog_required_top_level_items.html
@@ -13,18 +13,19 @@ Test the payment-dialog custom element
   <script src="../../res/vendor/custom-elements.min.js"></script>
   <script src="../../res/unprivileged-fallbacks.js"></script>
 
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
   <link rel="stylesheet" type="text/css" href="../../res/paymentRequest.css"/>
   <link rel="stylesheet" type="text/css" href="../../res/containers/rich-picker.css"/>
 </head>
 <body>
-  <p id="display">
-    <iframe id="templateFrame" src="../../res/paymentRequest.xhtml" width="0" height="0"></iframe>
+  <p id="display" style="height: 100vh; margin: 0;">
+    <iframe id="templateFrame" src="../../res/paymentRequest.xhtml" width="0" height="0"
+            style="float: left;"></iframe>
   </p>
 <div id="content" style="display: none">
 
 </div>
 <pre id="test">
 </pre>
 <script type="module">
 /** Test the payment-dialog element **/
@@ -35,21 +36,17 @@ import PaymentDialog from "../../res/con
 
 let el1;
 
 add_task(async function setupOnce() {
   let templateFrame = document.getElementById("templateFrame");
   await SimpleTest.promiseFocus(templateFrame.contentWindow);
 
   let displayEl = document.getElementById("display");
-  // Import the templates from the real shipping dialog to avoid duplication.
-  for (let template of templateFrame.contentDocument.querySelectorAll("template")) {
-    let imported = document.importNode(template, true);
-    displayEl.appendChild(imported);
-  }
+  importDialogDependencies(templateFrame, displayEl);
 
   el1 = new PaymentDialog();
   displayEl.appendChild(el1);
 });
 
 async function setup({shippingRequired, payerRequired}) {
   let state = deepClone(el1.requestStore.getState());
   state.request.paymentDetails.shippingOptions = shippingRequired ? [{