@ordergroove/offers 2.34.0 → 2.34.1-alpha-PR-737-9.24

package/examples/index.js

@@ -58,9 +58,11 @@ const settings = {
 const textCopy = {
   showTooltip: true,
   offerOptInLabel: 'Subscribe to save',
+  prepaidOptInLabel: 'Prepaid Subscription',
   offerIncentiveText: 'Save {{ogIncentive DiscountPercent}} when you subscribe',
   offerOptOutLabel: 'Deliver one-time only',
   offerEveryLabel: 'Deliver every',
+  prepaidShipmentsLabel: 'Number of prepaid shipments',
   offerTooltipTrigger: '[?]',
   offerTooltipContent: 'Seems this is a great subscription offering. Many fun details about this program exist.',
   optinButtonLabel: '•',
@@ -78,7 +80,9 @@ const textCopy = {
   upsellModalCancelLabel: 'Cancel',
   defaultFrequencyCopy: '(Recommended)',
   prepaidShipmentSelectAppend: 'and save {{ogPrepaid PercentageSavings}}, delivered monthly',
-  prepaidExplainer: 'You will be billed {{ogPrepaid TotalPrice}} today ({{ogPrepaid PerDeliveryPrice}}/delivery)'
+  prepaidExplainer: 'You will be billed {{ogPrepaid TotalPrice}} today ({{ogPrepaid PerDeliveryPrice}}/delivery)',
+  subscribeToSaveExplainer: 'You will be billed {{ogPrice Regular}} today',
+  prepaidOfferIncentiveText: 'Save {{ogPrepaid PercentageSavings}} when paying upfront',
 };
 
 const offersExamples = [
@@ -191,6 +195,18 @@ const offersExamples = [
       textCopy: { ...textCopy }
     }
   },
+  {
+    name: 'Prepaid Button PDP',
+    defaultPreviewMode: 'prepaid',
+    selector: 'og-offer[location="prepaid-button-pdp"]',
+    config: {
+      settings: {
+        ...settings,
+        offerType: 'prepaid-enabled-button'
+      },
+      textCopy: { ...textCopy }
+    }
+  },
   {
     name: 'Prepaid Cart',
     defaultPreviewMode: 'prepaid',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.34.0",
+  "version": "2.34.1-alpha-PR-737-9.24+1283e175",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -45,7 +45,7 @@
     "throttle-debounce": "^2.1.0"
   },
   "devDependencies": {
-    "@ordergroove/offers-templates": "^0.9.0"
+    "@ordergroove/offers-templates": "^0.9.1-alpha-PR-737-9.24+1283e175"
   },
-  "gitHead": "b37b875ce3128d52dfa2acced94a422bd0145cad"
+  "gitHead": "1283e175ce345b5235170707b551e44913f8be92"
 }

package/src/components/OptinButton.js

@@ -13,7 +13,9 @@ export class OptinButton extends OptinStatus {
       ...super.properties,
       frequency: { type: String, reflect: true },
       defaultFrequency,
-      optinButtonLabel: { type: String }
+      optinButtonLabel: { type: String },
+      prepaidShipmentsOptedIn: { type: Number },
+      disableWhenPrepaidEnabled: { type: Boolean, reflect: true, attribute: 'disable-when-prepaid-enabled' }
     };
   }
 
@@ -51,10 +53,17 @@ export class OptinButton extends OptinStatus {
     ev.preventDefault();
   }
 
+  get isActive() {
+    if (this.disableWhenPrepaidEnabled && this.prepaidShipmentsOptedIn > 0) {
+      return false;
+    }
+    return this.subscribed;
+  }
+
   render() {
     return html`
       <slot name="default">
-        <button id="action-trigger" class="btn radio ${this.subscribed ? 'active' : ''}"></button>
+        <button id="action-trigger" class="btn radio ${this.isActive ? ' active' : ''}"></button>
         <label for="action-trigger">
           <slot>
             <slot name="label"><og-text key="offerOptInLabel"></og-text></slot>

package/src/components/OptinStatus.js

@@ -2,6 +2,7 @@ import { html, css } from 'lit-element';
 import {
   makeOptedinSelector,
   makeProductDefaultFrequencySelector,
+  makeProductPrepaidShipmentsOptedInSelector,
   makeProductFrequencySelector,
   configSelector,
   templatesSelector
@@ -131,6 +132,7 @@ export const mapStateToProps = (state, ownProps = {}) => ({
   subscribed: makeOptedinSelector(ownProps.product)(state),
   frequency: makeProductFrequencySelector(ownProps.product)(state),
   productDefaultFrequency: makeProductDefaultFrequencySelector((ownProps.product || {}).id)(state),
+  prepaidShipmentsOptedIn: makeProductPrepaidShipmentsOptedInSelector(ownProps.product)(state),
   ...configSelector(state, ownProps, 'defaultFrequency'),
   ...configSelector(state, ownProps, 'frequencies'),
   ...templatesSelector(state, ownProps)

package/src/components/PrepaidButton.js

@@ -0,0 +1,98 @@
+import { html, css } from 'lit-element';
+
+import {
+  makeProductPrepaidShipmentOptionsSelector,
+  makeProductPrepaidShipmentsOptedInSelector,
+  makePrepaidShipmentsSelectedSelector
+} from '../core/selectors';
+import { productChangePrepaidShipments } from '../core/actions';
+import { connect } from '../core/connect';
+import { PrepaidStatus } from './PrepaidStatus';
+
+export class PrepaidButton extends PrepaidStatus {
+  constructor() {
+    super();
+    this.addEventListener('click', this.handleClick.bind(this));
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        cursor: pointer;
+        display: inline-block;
+      }
+
+      :host[hidden] {
+        display: none;
+      }
+
+      .btn {
+        position: relative;
+        width: var(--og-radio-width, 1.4em);
+        height: var(--og-radio-height, 1.4em);
+        margin: var(--og-radio-margin, 0);
+        padding: 0;
+        border: 1px solid var(--og-primary-color, var(--og-border-color, black));
+        background: #fff;
+        border-radius: 100%;
+        vertical-align: middle;
+        color: var(--og-primary-color, var(--og-btn-color, black));
+      }
+
+      .radio {
+        text-indent: -9999px;
+        flex-shrink: 0;
+      }
+
+      .radio {
+        border-color: var(--og-checkbox-border-color, black);
+      }
+
+      .radio.active::after {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        background: var(--og-checkbox-border-color, black);
+      }
+
+      .radio.active::after {
+        content: ' ';
+        border-radius: 100%;
+        border: 2px solid #fff;
+      }
+    `;
+  }
+
+  handleClick(ev) {
+    if (!this.checked) {
+      this.productChangePrepaidShipments(this.product, this.selectedNumberOfShipments, this.offer);
+    } else {
+      this.productChangePrepaidShipments(this.product, null, this.offer);
+    }
+    ev.preventDefault();
+  }
+
+  render() {
+    return html`
+      <slot name="default">
+        <button id="action-trigger" class="btn radio ${this.checked ? 'active' : ''}"></button>
+        <label for="action-trigger">
+          <slot name="label"><og-text key="prepaidOptInLabel"></og-text></slot>
+        </label>
+      </slot>
+    `;
+  }
+}
+
+const mapStateToProps = (state, ownProps) => ({
+  options: makeProductPrepaidShipmentOptionsSelector(ownProps.product.id)(state),
+  shipmentsOptedIn: makeProductPrepaidShipmentsOptedInSelector(ownProps.product)(state),
+  prepaidShipmentsSelected: makePrepaidShipmentsSelectedSelector(ownProps.product)(state)
+});
+
+export const ConnectedPrepaidButton = connect(mapStateToProps, { productChangePrepaidShipments })(PrepaidButton);
+
+export default ConnectedPrepaidButton;

package/src/components/PrepaidSelect.js

@@ -0,0 +1,74 @@
+import { html, css } from 'lit-element';
+import { connect } from '../core/connect';
+import {
+  makeProductPrepaidShipmentOptionsSelector,
+  makeProductPrepaidShipmentsOptedInSelector,
+  makePrepaidShipmentsSelectedSelector
+} from '../core/selectors';
+import { productChangePrepaidShipments } from '../core/actions';
+import { PrepaidStatus } from './PrepaidStatus';
+
+export class PrepaidSelect extends PrepaidStatus {
+  constructor() {
+    super();
+    this.options = [];
+    this.text = 'shipments';
+  }
+
+  static get properties() {
+    return {
+      ...super.properties,
+      text: { type: String }
+    };
+  }
+
+  static get styles() {
+    return css`
+      og-select {
+        display: inline-block;
+        cursor: pointer;
+        background-color: var(--og-select-bg-color, #fff);
+        border: var(--og-select-border, 1px solid #aaa);
+        border-width: var(--og-select-border-width, 1px);
+        box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
+        z-index: 1;
+      }
+    `;
+  }
+
+  render() {
+    if (this.options.length === 0) {
+      return html``;
+    }
+
+    const displayOptions = this.options.map(value => ({
+      value: value,
+      text: `${value} ${this.text}`
+    }));
+
+    return html`
+      ${this.options.length > 1
+        ? html`
+            <og-select
+              .options=${displayOptions}
+              .selected=${this.selectedNumberOfShipments}
+              .onChange="${e => this.handleSelect(e)}"
+            ></og-select>
+          `
+        : html`
+            <span>${displayOptions[0].text}</span>
+          `}
+      <slot name="append"></slot>
+    `;
+  }
+}
+
+const mapStateToProps = (state, ownProps) => ({
+  options: makeProductPrepaidShipmentOptionsSelector(ownProps.product.id)(state),
+  shipmentsOptedIn: makeProductPrepaidShipmentsOptedInSelector(ownProps.product)(state),
+  prepaidShipmentsSelected: makePrepaidShipmentsSelectedSelector(ownProps.product)(state)
+});
+
+const ConnectedPrepaidSelect = connect(mapStateToProps, { productChangePrepaidShipments })(PrepaidSelect);
+
+export { ConnectedPrepaidSelect };

package/src/components/PrepaidStatus.js

@@ -0,0 +1,61 @@
+import { LitElement, html, css } from 'lit-element';
+import { connect } from '../core/connect';
+import {
+  makeProductPrepaidShipmentOptionsSelector,
+  makeProductPrepaidShipmentsOptedInSelector,
+  makePrepaidShipmentsSelectedSelector
+} from '../core/selectors';
+import { productChangePrepaidShipments } from '../core/actions';
+import { withProduct } from '../core/resolveProperties';
+
+export class PrepaidStatus extends withProduct(LitElement) {
+  static get properties() {
+    return {
+      options: { type: Array },
+      shipmentsOptedIn: { type: Number },
+      prepaidShipmentsSelected: { type: Number },
+      defaultPrepaidShipments: { type: Number, attribute: 'default-prepaid-shipments' }
+    };
+  }
+
+  get checked() {
+    return this.shipmentsOptedIn > 1;
+  }
+
+  get selectedNumberOfShipments() {
+    return this.prepaidShipmentsSelected || this.shipmentsOptedIn || this.getDefaultPrepaidShipments();
+  }
+
+  getDefaultPrepaidShipments() {
+    return this.options.includes(this.defaultPrepaidShipments)
+      ? this.defaultPrepaidShipments
+      : this.options[1] || this.options[0];
+  }
+
+  handleChange(e) {
+    if (e.target.checked) {
+      this.productChangePrepaidShipments(this.product, this.selectedNumberOfShipments, this.offer);
+    } else {
+      this.productChangePrepaidShipments(this.product, null, this.offer);
+    }
+  }
+
+  handleSelect({ target: { value } }) {
+    const valueAsNumber = +value;
+    this.productChangePrepaidShipments(this.product, valueAsNumber, this.offer);
+  }
+
+  render() {
+    return html``;
+  }
+}
+
+export const mapStateToProps = (state, ownProps) => ({
+  options: makeProductPrepaidShipmentOptionsSelector(ownProps.product.id)(state),
+  shipmentsOptedIn: makeProductPrepaidShipmentsOptedInSelector(ownProps.product)(state),
+  prepaidShipmentsSelected: makePrepaidShipmentsSelectedSelector(ownProps.product)(state)
+});
+
+export const ConnectedPrepaidStatus = connect(mapStateToProps, { productChangePrepaidShipments })(PrepaidStatus);
+
+export default ConnectedPrepaidStatus;

package/src/components/PrepaidToggle.js

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit-element';
+import { html, css } from 'lit-element';
 import { connect } from '../core/connect';
 import {
   makeProductPrepaidShipmentOptionsSelector,
@@ -6,9 +6,9 @@ import {
   makePrepaidShipmentsSelectedSelector
 } from '../core/selectors';
 import { productChangePrepaidShipments } from '../core/actions';
-import { withProduct } from '../core/resolveProperties';
+import { PrepaidStatus } from './PrepaidStatus';
 
-export class PrepaidToggle extends withProduct(LitElement) {
+export class PrepaidToggle extends PrepaidStatus {
   constructor() {
     super();
     this.options = [];
@@ -17,11 +17,8 @@ export class PrepaidToggle extends withProduct(LitElement) {
 
   static get properties() {
     return {
-      options: { type: Array },
-      text: { type: String },
-      shipmentsOptedIn: { type: Number },
-      prepaidShipmentsSelected: { type: Number },
-      defaultPrepaidShipments: { type: Number, attribute: 'default-prepaid-shipments' }
+      ...super.properties,
+      text: { type: String }
     };
   }
 
@@ -47,33 +44,6 @@ export class PrepaidToggle extends withProduct(LitElement) {
     `;
   }
 
-  get checked() {
-    return this.shipmentsOptedIn > 1;
-  }
-
-  get selectedShipments() {
-    return this.prepaidShipmentsSelected || this.shipmentsOptedIn || this.getDefaultPrepaidShipments();
-  }
-
-  getDefaultPrepaidShipments() {
-    return this.options.includes(this.defaultPrepaidShipments)
-      ? this.defaultPrepaidShipments
-      : this.options[1] || this.options[0];
-  }
-
-  handleChange(e) {
-    if (e.target.checked) {
-      this.productChangePrepaidShipments(this.product, this.selectedShipments, this.offer);
-    } else {
-      this.productChangePrepaidShipments(this.product, null, this.offer);
-    }
-  }
-
-  handleSelect({ target: { value } }) {
-    const valueAsNumber = +value;
-    this.productChangePrepaidShipments(this.product, valueAsNumber, this.offer);
-  }
-
   render() {
     if (this.options.length === 0) {
       return html``;
@@ -93,7 +63,7 @@ export class PrepaidToggle extends withProduct(LitElement) {
             ? html`
                 <og-select
                   .options=${displayOptions}
-                  .selected=${this.selectedShipments}
+                  .selected=${this.selectedNumberOfShipments}
                   .onChange="${e => this.handleSelect(e)}"
                 ></og-select>
               `

package/src/components/__tests__/OptinButton.spec.js

@@ -20,6 +20,16 @@ describe('OptinButton', function() {
       await appendToBody(element);
       expect(element.shadowRoot.querySelector('button').innerText).toEqual('');
     });
+
+    it('should show empty label if subscribed when opted in to prepaid', async () => {
+      const element = new OptinButton();
+      element.setAttribute('product', '123');
+      element.setAttribute('disable-when-prepaid-enabled', true);
+      element.subscribed = true;
+      element.prepaidShipmentsOptedIn = 3;
+      await appendToBody(element);
+      expect(element.shadowRoot.querySelector('button').innerText).toEqual('');
+    });
   });
 
   describe('dispatch', () => {

package/src/components/__tests__/PrepaidButton.spec.js

@@ -0,0 +1,77 @@
+import { html } from 'lit-html';
+import { PrepaidButton } from '../PrepaidButton';
+import { simulateClick, querySelector, renderTemplate } from './utils';
+
+const TEST_CONTAINER_ID = 'test-container';
+const TAG_NAME_UNDER_TEST = 'og-some-prepaid-button';
+customElements.define(TAG_NAME_UNDER_TEST, PrepaidButton);
+
+function getPrepaidButtonTemplate(options = [3, 6]) {
+  return html`
+    <og-some-prepaid-button product="yum product" .options=${options}> </og-some-prepaid-button>
+  `;
+}
+
+function expectPrepaidShipmentsAction(button, numShipments) {
+  expect(button.productChangePrepaidShipments).toHaveBeenCalledWith({ id: 'yum product' }, numShipments, undefined);
+  button.productChangePrepaidShipments.calls.reset();
+}
+
+describe('PrepaidButton', () => {
+  let button;
+
+  beforeEach(async () => {
+    // create a dedicated container to render the templates into
+    // otherwise we get race conditions
+    const testContainer = document.createElement('div');
+    testContainer.id = TEST_CONTAINER_ID;
+    document.body.appendChild(testContainer);
+    button = await renderTemplate(getPrepaidButtonTemplate(), TAG_NAME_UNDER_TEST);
+    button.productChangePrepaidShipments = jasmine.createSpy('productChangePrepaidShipments');
+    await button.updateComplete;
+  });
+
+  afterEach(() => {
+    document.body.querySelector('og-some-prepaid-button').remove();
+
+    const testContainer = document.getElementById(TEST_CONTAINER_ID);
+    testContainer.remove();
+  });
+
+  it('should optin to prepaid', async () => {
+    await simulateClick(button, 'button');
+    await button.updateComplete;
+
+    expectPrepaidShipmentsAction(button, 6);
+  });
+
+  it('should optin to prepaid when default option is set', async () => {
+    button.defaultPrepaidShipments = 3;
+
+    await simulateClick(button, 'button');
+    await button.updateComplete;
+
+    expectPrepaidShipmentsAction(button, 3);
+  });
+
+  it('should render active button', async () => {
+    button.productChangePrepaidShipments = jasmine.createSpy('productChangePrepaidShipments');
+    button.shipmentsOptedIn = 3;
+    await button.updateComplete;
+
+    expect(querySelector(button, 'button.active')).toBeTruthy();
+  });
+
+  it('should render inactive button', async () => {
+    expect(querySelector(button, 'button.active')).toBeFalsy();
+  });
+
+  it('should optout from prepaid', async () => {
+    button.shipmentsOptedIn = 3;
+
+    await simulateClick(button, 'button');
+    await button.updateComplete;
+
+    expectPrepaidShipmentsAction(button, null);
+  });
+});

package/src/components/__tests__/PrepaidSelect.spec.js

@@ -0,0 +1,81 @@
+import { html } from 'lit-html';
+import { PrepaidSelect } from '../PrepaidSelect';
+import { renderTemplate } from './utils';
+
+const TEST_CONTAINER_ID = 'test-container';
+const TAG_NAME_UNDER_TEST = 'og-some-prepaid-select';
+customElements.define(TAG_NAME_UNDER_TEST, PrepaidSelect);
+
+function getPrepaidSelectTemplate(options = [3, 6]) {
+  return html`
+    <og-some-prepaid-select product="yum product" .options=${options}> </og-some-prepaid-select>
+  `;
+}
+
+describe('PrepaidSelect', () => {
+  beforeEach(() => {
+    // create a dedicated container to render the templates into
+    // otherwise we get race conditions
+    const testContainer = document.createElement('div');
+    testContainer.id = TEST_CONTAINER_ID;
+    document.body.appendChild(testContainer);
+  });
+
+  afterEach(() => {
+    const testContainer = document.getElementById(TEST_CONTAINER_ID);
+    testContainer.remove();
+  });
+
+  it('should render with select options', async () => {
+    const selectElement = await renderTemplate(getPrepaidSelectTemplate(), TAG_NAME_UNDER_TEST);
+
+    const select = selectElement.shadowRoot.querySelector('og-select');
+    expect(select).toBeTruthy();
+    expect(select.options).toEqual([
+      { value: 3, text: '3 shipments' },
+      { value: 6, text: '6 shipments' }
+    ]);
+  });
+
+  it('should render static text when only one option and opt in', async () => {
+    const selectElement = await renderTemplate(getPrepaidSelectTemplate([3]), TAG_NAME_UNDER_TEST);
+    selectElement.productChangePrepaidShipments = jasmine.createSpy('productChangePrepaidShipments');
+
+    const select = selectElement.shadowRoot.querySelector('og-select');
+    expect(select).toBeFalsy();
+
+    const label = selectElement.shadowRoot.querySelector('span');
+    expect(label.innerText).toBe('3 shipments');
+  });
+
+  it('should preselect a value if shipments is set', async () => {
+    const selectElement = await renderTemplate(getPrepaidSelectTemplate(), TAG_NAME_UNDER_TEST);
+    selectElement.shipmentsOptedIn = 6;
+
+    await selectElement.updateComplete;
+
+    const select = selectElement.shadowRoot.querySelector('og-select');
+    expect(select.selected).toBe(6);
+  });
+
+  it('should handle empty options', async () => {
+    const selectElement = await renderTemplate(getPrepaidSelectTemplate([]), TAG_NAME_UNDER_TEST);
+    // should render an empty component and not throw
+    expect(selectElement.shadowRoot.textContent).toBe('');
+  });
+
+  it('should select default prepaid shipments if provided', async () => {
+    const selectElement = await renderTemplate(getPrepaidSelectTemplate([3, 6, 9]), TAG_NAME_UNDER_TEST);
+    selectElement.defaultPrepaidShipments = 9;
+
+    await selectElement.updateComplete;
+
+    const select = selectElement.shadowRoot.querySelector('og-select');
+    expect(select.selected).toBe(9);
+
+    // if provided default value is not present in options, it should fall back to the 2nd option
+    selectElement.defaultPrepaidShipments = 10;
+    await selectElement.updateComplete;
+    expect(select.selected).toBe(6);
+  });
+});

package/src/components/__tests__/PrepaidToggle.spec.js

@@ -1,19 +1,11 @@
-import { html, render } from 'lit-html';
+import { html } from 'lit-html';
 import { PrepaidToggle } from '../PrepaidToggle';
+import { renderTemplate } from './utils';
 
 const TEST_CONTAINER_ID = 'test-container';
 const TAG_NAME_UNDER_TEST = 'og-some-prepaid-toggle';
 customElements.define(TAG_NAME_UNDER_TEST, PrepaidToggle);
 
-async function renderTemplate(template) {
-  // make sure the element was cleaned up
-  expect(document.body.querySelector(TAG_NAME_UNDER_TEST)).toBeFalsy();
-  render(template, document.getElementById(TEST_CONTAINER_ID));
-  const element = document.querySelector(TAG_NAME_UNDER_TEST);
-  await element.updateComplete;
-  return element;
-}
-
 function getPrepaidToggleTemplate(options = [3, 6]) {
   return html`
     <og-some-prepaid-toggle product="yum product" .options=${options}> </og-some-prepaid-toggle>
@@ -51,7 +43,7 @@ describe('PrepaidToggle', () => {
   });
 
   it('should render with select options', async () => {
-    const toggle = await renderTemplate(getPrepaidToggleTemplate());
+    const toggle = await renderTemplate(getPrepaidToggleTemplate(), TAG_NAME_UNDER_TEST);
 
     const select = toggle.shadowRoot.querySelector('og-select');
     expect(select).toBeTruthy();
@@ -62,7 +54,7 @@ describe('PrepaidToggle', () => {
   });
 
   it('should render static text when only one option and opt in', async () => {
-    const toggle = await renderTemplate(getPrepaidToggleTemplate([3]));
+    const toggle = await renderTemplate(getPrepaidToggleTemplate([3]), TAG_NAME_UNDER_TEST);
     toggle.productChangePrepaidShipments = jasmine.createSpy('productChangePrepaidShipments');
 
     const select = toggle.shadowRoot.querySelector('og-select');
@@ -76,7 +68,7 @@ describe('PrepaidToggle', () => {
   });
 
   it('should opt into prepaid when no default shipments set', async () => {
-    const toggle = await renderTemplate(getPrepaidToggleTemplate());
+    const toggle = await renderTemplate(getPrepaidToggleTemplate(), TAG_NAME_UNDER_TEST);
     toggle.productChangePrepaidShipments = jasmine.createSpy('productChangePrepaidShipments');
     const checkbox = toggle.shadowRoot.querySelector('input');
 
@@ -101,7 +93,7 @@ describe('PrepaidToggle', () => {
   });
 
   it('should preselect a value if shipments is set', async () => {
-    const toggle = await renderTemplate(getPrepaidToggleTemplate());
+    const toggle = await renderTemplate(getPrepaidToggleTemplate(), TAG_NAME_UNDER_TEST);
     toggle.shipmentsOptedIn = 6;
 
     await toggle.updateComplete;
@@ -114,13 +106,13 @@ describe('PrepaidToggle', () => {
   });
 
   it('should handle empty options', async () => {
-    const toggle = await renderTemplate(getPrepaidToggleTemplate([]));
+    const toggle = await renderTemplate(getPrepaidToggleTemplate([]), TAG_NAME_UNDER_TEST);
     // should render an empty component and not throw
     expect(toggle.shadowRoot.textContent).toBe('');
   });
 
   it('should select default prepaid shipments if provided', async () => {
-    const toggle = await renderTemplate(getPrepaidToggleTemplate([3, 6, 9]));
+    const toggle = await renderTemplate(getPrepaidToggleTemplate([3, 6, 9]), TAG_NAME_UNDER_TEST);
     toggle.defaultPrepaidShipments = 9;
 
     await toggle.updateComplete;

package/src/components/__tests__/utils.js

@@ -1,3 +1,5 @@
+import { render } from 'lit-html';
+
 export const appendToBody = async element => {
   document.querySelector('body').appendChild(element);
   await element.updateComplete;
@@ -16,3 +18,16 @@ export const simulateChange = async (element, value) => {
 };
 
 export const querySelector = (element, sel) => (element.shadowRoot || element.host).querySelector(sel);
+
+export async function renderTemplate(
+  template,
+  TAG_NAME_UNDER_TEST = 'og-some-prepaid-button',
+  TEST_CONTAINER_ID = 'test-container'
+) {
+  // make sure the element was cleaned up
+  expect(document.body.querySelector(TAG_NAME_UNDER_TEST)).toBeFalsy();
+  render(template, document.getElementById(TEST_CONTAINER_ID));
+  const element = document.querySelector(TAG_NAME_UNDER_TEST);
+  await element.updateComplete;
+  return element;
+}