refactor: remove label property

bennypowers · Jan 19, 2020 · 396ce61 · 396ce61
1 parent f88b653
commit 396ce61
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 22 deletions.
diff --git a/src/StripeElements.js b/src/StripeElements.js
@@ -56,9 +56,9 @@ function applyCustomCss() {
   }
 }
 
-const stripeCardTemplate = ({ action, id, label, paymentMethod, source, token }) => html`
+const stripeCardTemplate = ({ action, id, paymentMethod, source, token }) => html`
   <form action="${ifDefined(action || undefined)}" method="post">
-    <div id="${ifDefined(id)}" class="stripe-mount" aria-label="${ifDefined(label)}"></div>
+    <div id="${ifDefined(id)}" class="stripe-mount" aria-label="Credit or Debit Card"></div>
     <input ?disabled="${!paymentMethod}" type="hidden" name="stripePaymentMethod" value="${ifDefined(paymentMethod || undefined)}">
     <input ?disabled="${!source}" type="hidden" name="stripeSource" value="${ifDefined(source || undefined)}">
     <input ?disabled="${!token}" type="hidden" name="stripeToken" value="${ifDefined(token || undefined)}">
@@ -237,12 +237,6 @@ export class StripeElements extends LitNotify(StripeBase) {
    */
   @property({ type: String, attribute: 'icon-style' }) iconStyle = 'default';
 
-  /**
-   * aria-label attribute for the credit card form.
-   * @type {String}
-   */
-  @property({ type: String }) label = 'Credit or Debit Card';
-
   /**
    * Prefilled values for form. Example {postalCode: '90210'}
    * @type {Object}
@@ -439,7 +433,7 @@ export class StripeElements extends LitNotify(StripeBase) {
     this.shadowHosts = [this];
     while (host = host.getRootNode().host) this.shadowHosts.push(host); // eslint-disable-line prefer-destructuring, no-loops/no-loops
 
-    const { shadowHosts, stripeMountId: id, action, label, token } = this;
+    const { shadowHosts, stripeMountId: id, action, token } = this;
 
     // Prepare the shallowest breadcrumb slot at document level
     const hosts = [...shadowHosts];
@@ -452,11 +446,11 @@ export class StripeElements extends LitNotify(StripeBase) {
     const container = root.querySelector('[slot="stripe-card"]');
 
     // hedge against shenanigans
-    const isDomCorrupt = container.querySelector('form') && !document.querySelector(`.stripe-mount[aria-label="${this.label}"]`);
+    const isDomCorrupt = container.querySelector('form') && !document.querySelector(`.stripe-mount[aria-label="Credit or Debit Card"]`);
     const renderTemplate = isDomCorrupt ? render : appendTemplate;
 
     // Render the form to the document, so that Stripe.js can mount
-    renderTemplate(stripeCardTemplate({ action, id, token, label }), container);
+    renderTemplate(stripeCardTemplate({ action, id, token }), container);
 
     // Append breadcrumb slots to each shadowroot in turn,
     // from the document down to the <stripe-elements> instance.
@@ -468,9 +462,9 @@ export class StripeElements extends LitNotify(StripeBase) {
    * @private
    */
   initShadyDOMMount() {
-    const { action, token, label } = this;
+    const { action, token } = this;
     const id = this.stripeMountId;
-    const mountTemplate = stripeCardTemplate({ action, id, label, token });
+    const mountTemplate = stripeCardTemplate({ action, id, token });
     appendTemplate(mountTemplate, this);
   }
 

diff --git a/src/lib/read-only-properties.js b/src/lib/read-only-properties.js
@@ -28,6 +28,7 @@ export const ReadOnlyPropertiesMixin = baseElement => {
 
           set(value) {
             // allow for class field initialization
+            /* istanbul ignore if */
             if (this._readOnlyPropertyInitializedMap.get(name)) return;
             this[privateName] = value;
             this._readOnlyPropertyInitializedMap.set(name, true);

diff --git a/src/stripe-elements.test.js b/src/stripe-elements.test.js
@@ -60,7 +60,7 @@ import { elem, not } from './lib/predicates.js';
 
 const assignedNodes = el => el.assignedNodes();
 
-const formLightDOM = ({ label, stripeMountId }) => `
+const formLightDOM = ({ label = 'Credit or Debit Card', stripeMountId }) => `
   <form method="post">
     <div id="${stripeMountId}" aria-label="${label}" class="stripe-mount"></div>
     <input disabled type="hidden" name="stripePaymentMethod"/>
@@ -69,7 +69,7 @@ const formLightDOM = ({ label, stripeMountId }) => `
   </form>
 `;
 
-const expectedLightDOM = ({ label, stripeMountId }) => `<div slot="stripe-card">${formLightDOM({ label, stripeMountId })}</div> `;
+const expectedLightDOM = ({ label = 'Credit or Debit Card', stripeMountId }) => `<div slot="stripe-card">${formLightDOM({ label, stripeMountId })}</div> `;
 
 describe('stripe-elements', function() {
   beforeEach(spyConsoleWarn);
@@ -135,12 +135,11 @@ describe('stripe-elements', function() {
     let secondaryHost;
     let tertiaryHost;
     let stripeMountId;
-    let label;
     describe('when nested one shadow-root deep', function() {
       beforeEach(async function setupOneRoot() {
         primaryHost = await fixture(`<primary-host></primary-host>`);
         ({ nestedElement } = primaryHost);
-        ({ stripeMountId, label } = nestedElement);
+        ({ stripeMountId } = nestedElement);
       });
 
       it('leaves one breadcrumb on its way up to the document', async function breadcrumbs() {
@@ -149,7 +148,7 @@ describe('stripe-elements', function() {
       });
 
       it('slots mount point in to its light DOM', function() {
-        expect(primaryHost).lightDom.to.equal(expectedLightDOM({ stripeMountId, label }));
+        expect(primaryHost).lightDom.to.equal(expectedLightDOM({ stripeMountId }));
       });
 
       it('finds its form', async function() {
@@ -174,7 +173,7 @@ describe('stripe-elements', function() {
       });
 
       it('slots mount point in to the light DOM of the secondary shadow host', function() {
-        expect(secondaryHost).lightDom.to.equal(expectedLightDOM({ stripeMountId, label }));
+        expect(secondaryHost).lightDom.to.equal(expectedLightDOM({ stripeMountId }));
       });
 
       it('appends a slot to the shadow DOM of the secondary shadow host', function() {
@@ -213,7 +212,7 @@ describe('stripe-elements', function() {
       });
 
       it('slots mount point in to the light DOM of the tertiary shadow host', function() {
-        expect(tertiaryHost).lightDom.to.equal(expectedLightDOM({ stripeMountId, label }));
+        expect(tertiaryHost).lightDom.to.equal(expectedLightDOM({ stripeMountId }));
       });
 
       it('appends a slot to the shadow DOM of the tertiary shadow host', function() {
@@ -327,8 +326,8 @@ describe('stripe-elements', function() {
         describe('then publishable key is set', function() {
           beforeEach(setProps({ publishableKey: PUBLISHABLE_KEY }));
           it('rebuilds its DOM', function() {
-            const { label, stripeMountId } = element;
-            expect(element).lightDom.to.equal(expectedLightDOM({ stripeMountId, label }));
+            const { stripeMountId } = element;
+            expect(element).lightDom.to.equal(expectedLightDOM({ stripeMountId }));
             expect(element.stripeMount, 'mount').to.be.ok;
           });