refactor: change init order to defer DOM manipulations

bennypowers · Jan 29, 2020 · eb04752 · eb04752
1 parent ef1dc5a
commit eb04752
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/src/StripeBase.js b/src/StripeBase.js
@@ -2,6 +2,7 @@ import { LitElement, property, html } from 'lit-element';
 import { LitNotify } from '@morbidick/lit-element-notify';
 
 import { ifDefined } from 'lit-html/directives/if-defined';
+
 import bound from 'bound-decorator';
 
 import { ReadOnlyPropertiesMixin } from './lib/read-only-properties';
@@ -377,29 +378,29 @@ export class StripeBase extends ReadOnlyPropertiesMixin(LitNotify(LitElement)) {
     else return response;
   }
 
+  /**
+   * Removes all mount points from the DOM
+   * @private
+   */
+  destroyMountPoints() {
+    this.shadowHosts.forEach(removeAllMounts);
+    if (this.stripeMount) this.stripeMount.remove();
+  }
+
   /**
    * Reinitializes Stripe and mounts the element.
    * @private
    */
   async init() {
     await this.unmount();
-    this.destroyMountPoints();
-    this.initMountPoints();
     await this.initStripe();
     await this.initElement();
     this.initElementListeners();
+    this.destroyMountPoints();
+    this.initMountPoints();
     this.mount();
   }
 
-  /**
-   * Removes all mount points from the DOM
-   * @private
-   */
-  destroyMountPoints() {
-    this.shadowHosts.forEach(removeAllMounts);
-    if (this.stripeMount) this.stripeMount.remove();
-  }
-
   /**
    * Adds `ready`, `focus`, and `blur` listeners to the Stripe Element
    * @private

diff --git a/src/stripe-elements.test.js b/src/stripe-elements.test.js
@@ -377,6 +377,7 @@ describe('<stripe-elements>', function() {
         beforeEach(removeStripeMount);
         describe('then publishable key is set', function() {
           beforeEach(setProps({ publishableKey: PUBLISHABLE_KEY }));
+          beforeEach(nextFrame);
           it('rebuilds its DOM', function() {
             const { stripeMountId } = element;
             expect(element).lightDom.to.equal(expectedLightDOM({ stripeMountId }));

diff --git a/src/stripe-payment-request.test.js b/src/stripe-payment-request.test.js
@@ -396,6 +396,7 @@ describe('<stripe-payment-request>', function() {
             beforeEach(removeStripeMount);
             describe('then publishable key is set', function() {
               beforeEach(setProps({ publishableKey: PUBLISHABLE_KEY }));
+              beforeEach(nextFrame);
               it('rebuilds its DOM', function() {
                 const { stripeMountId } = element;
                 expect(element).lightDom.to.equal(expectedLightDOM({ stripeMountId }));