@rebilly/instruments 1.0.1-beta → 1.0.2-beta.10

package/src/functions/mount.spec.js

@@ -1,172 +0,0 @@
-import { MockRebillyInstruments } from 'tests/mocks/rebilly-instruments-mock';
-import { createFramepayMock } from 'tests/mocks/framepay-mock';
-import { get, ok, post } from 'msw-when-then';
-import { when } from 'tests/msw/server';
-import { storefrontURL } from 'tests/mocks/storefront-api-mock';
-import PlanModel from '@/storefront/models/plan-model';
-import ProductModel from '@/storefront/models/product-model';
-import SummaryModel from '@/storefront/models/summary-model';
-
-describe('RebillyInstruments instance', () => {
-  it('should throw error when there is no DOM element to mount the form', () => {
-    document.body.innerHTML =
-    `
-      <div class="form-selector"></div>
-      <div class="summary-selector"></div>
-    `;
-
-    const rebillyInstruments = MockRebillyInstruments();
-    expect(async () => {
-      await rebillyInstruments.mount({})
-    }).rejects.toEqual(new Error('Could not find DOM element with CSS class or id ".rebilly-instruments" to mount form'));
-  });
-
-  it('should throw error when providing the wrong type for the form property', () => {
-    document.body.innerHTML =
-    `
-      <div class="form-selector"></div>
-      <div class="summary-selector"></div>
-    `;
-
-    const options = {
-      form: []
-    };
-
-    const rebillyInstruments = MockRebillyInstruments();
-    expect(async () => {
-      await rebillyInstruments.mount(options)
-    }).rejects.toEqual(new Error('Please provide a valid CSS class, id or DOM element for "form" property'));
-  });
-
-  it('should inject HTML to the merchant\'s website', async () => {
-    const testPlan = new PlanModel({name: 'Test Plan', id: 'test-plan-id-1'});
-    const testProduct = new ProductModel({description: 'My Awesome Product', id: 'test-product-1'});
-    const testSummary = new SummaryModel(
-      {
-        currency: 'USD',
-        lineItems: [
-          {
-            description: 'test-plan-id-1',
-            planId: 'test-plan-id-1',
-            productId: 'test-product-1',
-            quantity: 1,
-          }
-        ]
-      }
-    );
-    const framePayScriptUrl = 'https://framepay.rebilly.com/rebilly.js';
-    const framePayStyleUrl = 'https://dev.framepay.rebilly.com/rebilly.css';
-
-    when(post(`${storefrontURL}/ready-to-pay`)).thenReturn((() => {
-      return ok(
-        [{
-          method: 'payment-card',
-          feature: {
-            name: 'Google Pay'
-          },
-          brands: ['Visa', 'MasterCard', 'American Express', 'Discover'],
-          filters: []
-        }]
-      );
-    })());
-
-    when(post(`${storefrontURL}/preview-purchase`)).thenReturn((() => {
-      return ok(testSummary);
-    })());
-
-    when(get(`${storefrontURL}/plans`)).thenReturn((() => {
-      return ok([testPlan]);
-    })());
-
-    when(get(`${storefrontURL}/products`)).thenReturn((() => {
-      return ok([testProduct]);
-    })());
-
-    document.body.innerHTML =
-    `
-      <div class="form-selector"></div>
-      <div class="summary-selector"></div>
-    `;
-
-    const options = {
-      form: '.form-selector',
-      summary: '.summary-selector',
-      _dev: {
-        framePayStyleLink: framePayStyleUrl
-      },
-      options: {
-        locale: 'auto',
-        intent: {
-          items: [
-            {
-              planId: 'test-plan-id-1',
-              quantity: 1
-            }
-          ]
-        }
-      }
-    };
-
-    const framepayMock = createFramepayMock();
-    global.Rebilly = framepayMock;
-
-    const rebillyInstruments = MockRebillyInstruments({
-      theme: {
-        color: {
-          background: '#000'
-        }
-      },
-      css: `
-        .rebilly-instruments-summary-line-item-synopsis-title {
-          color: rgb(0, 68, 212);
-        }
-      `
-    });
-    await rebillyInstruments.mount(options);
-
-    // Mounts form and summary
-    expect(document.querySelector('.summary-selector').innerHTML).toMatch(testPlan.name);
-
-    // Theme config overrides initial styles
-    const SUMMARY_CONTAINER = document.querySelector('.rebilly-instruments-summary-container');
-    expect(getComputedStyle(SUMMARY_CONTAINER).background).toEqual('rgb(0, 0, 0)');
-
-    // CSS config property overrides initial styles
-    const LINE_ITEM_TITLE = document.querySelector('.rebilly-instruments-summary-line-item-synopsis-title');
-    expect(getComputedStyle(LINE_ITEM_TITLE).color).toEqual('rgb(0, 68, 212)');
-
-    // Mounts default FramePay script
-    const SCRIPTS = [...document.querySelectorAll('head script')];
-    const FRAMEPAY_SCRIPT = SCRIPTS.find(script => script.src === framePayScriptUrl);
-    expect(FRAMEPAY_SCRIPT.src).toEqual(framePayScriptUrl);
-
-    // Mounts _dev FramePay style
-    const STYLE_LINKS = [...document.querySelectorAll('head link')];
-    const FRAMEPAY_STYLE = STYLE_LINKS.find(script => script.href === framePayStyleUrl);
-    expect(FRAMEPAY_STYLE.href).toEqual(framePayStyleUrl);
-
-    // objectContaining allows matching a subset (this could be done with sinon + mocha too) 
-    expect(framepayMock.initialize).toHaveBeenCalledWith(expect.objectContaining({
-      digitalWallet: {
-        googlePayDisplayOptions: {
-          buttonColor: 'black',
-          buttonHeight: '44px',
-          buttonType: 'short',
-        },
-        merchantConfig: undefined,
-        transactionData: {
-          amount: 0,
-          countryCode: 'US',
-          currency: 'USD',
-          label: 'test-website-id',
-        },
-      },
-      organizationId: 'test-organization-id',
-      publishableKey: 'test-api-key',
-    }));
-
-    //Simulate that framepay is ready
-    framepayMock.simulateEvent('ready');
-  });
-});
-