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

package/dist/i18n/index.js

@@ -5,91 +5,68 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Translate = void 0;
 
-var _lodash = require("lodash");
+var _lodash = _interopRequireDefault(require("lodash.merge"));
 
 var _en = _interopRequireDefault(require("./en.json"));
 
 var _es = _interopRequireDefault(require("./es.json"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-var Translate = /*#__PURE__*/function () {
-  function Translate() {
-    _classCallCheck(this, Translate);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+class Translate {
+  constructor() {
     this.locale = '';
     this.items = [];
     this.languages = {};
   }
 
-  _createClass(Translate, [{
-    key: "init",
-    value: function init(locale, messages) {
-      this.items = document.querySelectorAll('[data-rebilly-i18n]');
-      this.locale = this.getLocale(locale);
-      this.languages = (0, _lodash.merge)(_objectSpread(_objectSpread({}, _en["default"]), _es["default"]), messages);
-    }
-  }, {
-    key: "translateItems",
-    value: function translateItems() {
-      var _this = this;
-
-      this.items = document.querySelectorAll('[data-rebilly-i18n]');
+  init(locale, messages) {
+    this.items = document.querySelectorAll('[data-rebilly-i18n]');
+    this.locale = this.getLocale(locale);
+    this.languages = (0, _lodash.default)({ ..._en.default,
+      ..._es.default
+    }, messages);
+  }
 
-      if (this.locale in this.languages) {
-        return this.items.forEach(function (item) {
-          var translate = _this.getTranslation(_this.languages[_this.locale], item.dataset.rebillyI18n);
+  translateItems() {
+    this.items = document.querySelectorAll('[data-rebilly-i18n]');
 
-          if (translate) {
-            item.innerHTML = translate;
-          }
-        });
-      }
+    if (this.locale in this.languages) {
+      return this.items.forEach(item => {
+        const translate = this.getTranslation(this.languages[this.locale], item.dataset.rebillyI18n);
 
-      return false;
+        if (translate) {
+          item.innerHTML = translate;
+        }
+      });
     }
-  }, {
-    key: "getLocale",
-    value: function getLocale() {
-      var locale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.locale;
 
-      if (!locale.includes('-') || locale in this.languages) {
-        return locale;
-      }
+    return false;
+  }
 
-      locale = locale.replace(/[-._]\w+$/gi, '');
-      return this.getLocale(locale);
-    }
-  }, {
-    key: "translateItem",
-    value: function translateItem(item) {
-      var locale = this.getLocale();
-      return this.getTranslation(this.languages[locale], item.dataset.rebillyI18n);
-    }
-  }, {
-    key: "getTranslation",
-    value: function getTranslation() {
-      var lan = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.locale;
-      var prop = arguments.length > 1 ? arguments[1] : undefined;
-      return prop.split('.').reduce(function (acc, val) {
-        return acc === null || acc === void 0 ? void 0 : acc[val];
-      }, lan);
+  updateTranslationsToNewLocale(newLocale) {
+    this.locale = newLocale;
+    this.translateItems();
+  }
+
+  getLocale(locale = this.locale) {
+    if (!locale.includes('-') || locale in this.languages) {
+      return locale;
     }
-  }]);
 
-  return Translate;
-}();
+    locale = locale.replace(/[-._]\w+$/gi, '');
+    return this.getLocale(locale);
+  }
+
+  translateItem(item) {
+    const locale = this.getLocale();
+    return this.getTranslation(this.languages[locale], item.dataset.rebillyI18n);
+  }
+
+  getTranslation(lan = this.locale, prop) {
+    return prop.split('.').reduce((acc, val) => acc === null || acc === void 0 ? void 0 : acc[val], lan);
+  }
+
+}
 
 exports.Translate = Translate;

package/dist/index.js

@@ -3,101 +3,100 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.RebillyInstrumentsInstance = void 0;
-
-var _initialize = require("./functions/initialize");
+exports.default = exports.RebillyInstrumentsInstance = exports.InstrumentsState = void 0;
 
 var _mount = require("./functions/mount");
 
+var _purchase = require("./functions/purchase");
+
+var _on = require("./functions/on");
+
 var _update = require("./functions/update");
 
 var _destroy = require("./functions/destroy");
 
-var _purchase = require("./functions/purchase");
+var _loader = require("./loader");
 
-var _show = require("./functions/show");
+var _i18n = require("./i18n");
 
-var _on = require("./functions/on");
+var _initialize = require("./functions/initialize");
 
-var _readyToPay = require("./storefront/ready-to-pay");
+var _show = require("./functions/show");
 
-var _summary = require("./storefront/summary");
+class InstrumentsState {
+  constructor() {
+    this.options = null;
+    this.mountingPoints = null;
+    this.storefront = null;
+    this.form = null;
+    this.summary = null;
+    this.loader = new _loader.Loader();
+    this.translate = new _i18n.Translate();
+    this.iframeComponents = [];
+    this.hasMounted = false;
+  }
 
-var _plans = require("./storefront/plans");
+}
 
-var _products = require("./storefront/products");
+exports.InstrumentsState = InstrumentsState;
 
-var _purchase2 = require("./storefront/purchase");
+class RebillyInstrumentsInstance {
+  constructor() {
+    this.state = new InstrumentsState(); // TODO: mountConfirmation, mountResult have different contract shape when they look similar
+    // TODO: review test coverage of UpdateSummary and UpdateMethodSelector as no tests were broken
+    // when commenting them
+  }
 
-var _summary2 = require("./components/summary");
+  initialize(configs) {
+    (0, _initialize.initialize)({
+      state: this.state,
+      configs
+    });
+  }
 
-var _form = require("./components/form/form");
+  async mount(options) {
+    await (0, _mount.mount)({
+      state: this.state,
+      ...options
+    });
+  }
 
-var _confirmation = require("./components/confirmation");
+  async destroy() {
+    await (0, _destroy.destroy)({
+      state: this.state
+    });
+  }
 
-var _result = require("./components/result");
+  async update(newConfig) {
+    await (0, _update.update)(this.state, newConfig);
+  }
 
-var _loader = require("./loader");
+  async purchase(payload) {
+    await (0, _purchase.purchase)({
+      state: this.state,
+      payload
+    });
+  }
 
-var _i18n = require("./i18n");
+  async show(componentName, payload) {
+    await (0, _show.show)({
+      componentName,
+      payload,
+      state: this.state
+    });
+  }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-var RebillyInstrumentsInstance = function RebillyInstrumentsInstance() {
-  var _this = this;
-
-  _classCallCheck(this, RebillyInstrumentsInstance);
-
-  this.configs = null;
-  this.options = null;
-  this.mountingPoints = null;
-  this.storefront = null;
-  this.form = null;
-  this.summary = null;
-  this.loader = new _loader.Loader();
-  this.translate = new _i18n.Translate();
-  this.zoidComponents = {};
-  var functionsMap = {
-    // "Private" functions
-    _fetchReadyToPay: _readyToPay.FetchReadyToPay,
-    _fetchSummary: _summary.FetchSummary,
-    _fetchPlans: _plans.FetchPlans,
-    _fetchProducts: _products.FetchProducts,
-    _postPurchase: _purchase2.PostPurchase,
-    _mountSummary: _summary2.MountSummary,
-    _mountForm: _form.MountForm,
-    _mountConfirmation: _confirmation.MountConfirmation,
-    _mountResult: _result.MountResult,
-    // Public Functions
-    initialize: _initialize.Initialize,
-    mount: _mount.Mount,
-    update: _update.Update,
-    destroy: _destroy.Destroy,
-    purchase: _purchase.Purchase,
-    show: _show.Show,
-    on: _on.On
-  }; // eslint-disable-next-line no-restricted-syntax
-
-  var _loop = function _loop() {
-    var local = _Object$keys[_i];
-
-    // eslint-disable-next-line func-names
-    _this[local] = function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-
-      return functionsMap[local].apply(this, args);
-    };
-  };
-
-  for (var _i = 0, _Object$keys = Object.keys(functionsMap); _i < _Object$keys.length; _i++) {
-    _loop();
+  on(eventName, callback) {
+    (0, _on.on)({
+      eventName,
+      callback
+    });
   }
-};
+
+}
 
 exports.RebillyInstrumentsInstance = RebillyInstrumentsInstance;
 
 var _default = new RebillyInstrumentsInstance();
 
-exports["default"] = _default;
+exports.default = _default;

package/dist/index.spec.js

@@ -1,42 +1,37 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 var _index = _interopRequireWildcard(require("./index"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _asyncUtilities = require("../tests/async-utilities");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _initialize = require("./functions/initialize");
 
-describe('RebillyInstruments instance', function () {
-  var rebillyInstruments;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-  function setupInstance() {
-    var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-      test: 'value'
-    };
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+describe('RebillyInstruments instance', () => {
+  let rebillyInstruments;
+
+  function setupInstance(config = {
+    test: 'value'
+  }) {
     rebillyInstruments.initialize(config);
   }
 
-  beforeEach(function () {
-    rebillyInstruments = _index["default"];
+  beforeEach(() => {
+    rebillyInstruments = _index.default;
   });
-  it('should have default export as instance of class', function () {
-    expect(_index["default"]).toBeInstanceOf(_index.RebillyInstrumentsInstance);
+  it('should have default export as instance of class', () => {
+    expect(_index.default).toBeInstanceOf(_index.RebillyInstrumentsInstance);
   });
-  it('should be initializable', function () {
-    jest.spyOn(rebillyInstruments, 'initialize');
-    var config = {
-      test: 'value'
-    };
-    rebillyInstruments.initialize(config);
-    expect(rebillyInstruments.initialize).toHaveBeenCalledTimes(1);
-    expect(rebillyInstruments.initialize).toHaveBeenCalledWith(config);
-  });
-  it('should be mountable', function () {
+  it('should be mountable', async () => {
     jest.spyOn(rebillyInstruments, 'mount');
-    document.body.innerHTML = "\n      <div class=\"form-selector\"></div>\n      <div class=\"summary-selector\"></div>\n    ";
-    var options = {
+    document.body.innerHTML = `
+      <div class="form-selector"></div>
+      <div class="summary-selector"></div>
+    `;
+    const options = {
       form: '.form-selector',
       test: 'value'
     };
@@ -44,26 +39,11 @@ describe('RebillyInstruments instance', function () {
     rebillyInstruments.mount(options);
     expect(rebillyInstruments.mount).toHaveBeenCalledTimes(1);
     expect(rebillyInstruments.mount).toHaveBeenCalledWith(options);
+    await (0, _asyncUtilities.avoidUnhandledPromises)();
   });
-  it('should be updateable', function () {
-    jest.spyOn(rebillyInstruments, 'update');
-    var config = {
-      test: 'value'
-    };
-    setupInstance();
-    rebillyInstruments.update(config);
-    expect(rebillyInstruments.update).toHaveBeenCalledTimes(1);
-    expect(rebillyInstruments.update).toHaveBeenCalledWith(config);
-  });
-  it('should be destroyable', function () {
-    jest.spyOn(rebillyInstruments, 'destroy');
-    setupInstance();
-    rebillyInstruments.destroy();
-    expect(rebillyInstruments.destroy).toHaveBeenCalledTimes(1);
-  });
-  it('should be able to trigger a purchase', function () {
+  it('should be able to trigger a purchase', () => {
     jest.spyOn(rebillyInstruments, 'purchase');
-    var instrument = {};
+    const instrument = {};
     setupInstance();
     rebillyInstruments.purchase(instrument);
     expect(rebillyInstruments.purchase).toHaveBeenCalledTimes(1);

package/dist/loader/index.js

@@ -7,86 +7,87 @@ exports.Loader = void 0;
 
 var _isDomElement = _interopRequireDefault(require("../utils/is-dom-element"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-var Loader = /*#__PURE__*/function () {
-  function Loader() {
-    _classCallCheck(this, Loader);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+class Loader {
+  constructor() {
     this.summary = [];
     this.form = [];
+    this.modal = [];
     this.DOM = {
-      loading: "\n                <div class=\"rebilly-instruments-loader active\">\n                    <div class=\"rebilly-instruments-loader-spinner\"></div>\n                </div>\n            "
+      loading: `
+                <div class="rebilly-instruments-loader is-active">
+                    <div class="rebilly-instruments-loader-spinner"></div>
+                </div>
+            `
     };
   }
 
-  _createClass(Loader, [{
-    key: "addDOMElement",
-    value: function addDOMElement() {
-      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          _ref$section = _ref.section,
-          section = _ref$section === void 0 ? 'form' : _ref$section,
-          _ref$el = _ref.el,
-          el = _ref$el === void 0 ? null : _ref$el;
+  addDOMElement({
+    section = 'form',
+    el = null
+  } = {}) {
+    const minHeight = '200px';
 
-      var minHeight = '200px';
-
-      if ((0, _isDomElement["default"])(el)) {
-        el.style.position = 'relative';
-        el.style.minHeight = minHeight;
-        el.style.paddingTop = section === 'form' ? '8px' : '0px';
-        this.DOM[section] = el;
-      }
+    if ((0, _isDomElement.default)(el)) {
+      el.style.position = 'relative';
+      el.style.minHeight = minHeight;
+      this.DOM[section] = el;
     }
-  }, {
-    key: "startLoading",
-    value: function startLoading() {
-      var _this$DOM;
+  }
 
-      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          _ref2$section = _ref2.section,
-          section = _ref2$section === void 0 ? 'form' : _ref2$section,
-          _ref2$id = _ref2.id,
-          id = _ref2$id === void 0 ? '' : _ref2$id;
+  startLoading({
+    section = 'form',
+    id = ''
+  } = {}) {
+    var _this$DOM;
 
-      this[section].push(id);
+    this[section].push(id);
 
-      if ((_this$DOM = this.DOM) !== null && _this$DOM !== void 0 && _this$DOM[section]) {
-        if (!this.DOM[section].querySelector('.rebilly-instruments-loader')) {
-          this.DOM[section].innerHTML = this.DOM.loading;
-        } else {
-          this.DOM[section].querySelector('.rebilly-instruments-loader').classList.add('active');
-        }
+    if ((_this$DOM = this.DOM) !== null && _this$DOM !== void 0 && _this$DOM[section]) {
+      if (!this.DOM[section].querySelector('.rebilly-instruments-loader')) {
+        this.DOM[section].innerHTML = this.DOM.loading;
+      } else {
+        this.DOM[section].querySelector('.rebilly-instruments-loader').classList.add('is-active');
       }
     }
-  }, {
-    key: "stopLoading",
-    value: function stopLoading() {
-      var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          _ref3$section = _ref3.section,
-          section = _ref3$section === void 0 ? 'form' : _ref3$section,
-          _ref3$id = _ref3.id,
-          id = _ref3$id === void 0 ? '' : _ref3$id;
+  }
 
-      var idIndex = this[section].indexOf(id);
+  stopLoading({
+    section = 'form',
+    id = ''
+  } = {}) {
+    const idIndex = this[section].indexOf(id);
 
-      if (idIndex !== -1) {
-        this[section].splice(idIndex, 1);
-      }
+    if (idIndex !== -1) {
+      this[section].splice(idIndex, 1);
+    }
 
-      if (!this[section].length && this.DOM[section].querySelector('.rebilly-instruments-loader')) {
-        this.DOM[section].querySelector('.rebilly-instruments-loader').classList.remove('active');
-      }
+    if (!this[section].length && this.DOM[section].querySelector('.rebilly-instruments-loader')) {
+      this.DOM[section].querySelector('.rebilly-instruments-loader').classList.remove('is-active');
     }
-  }]);
+  }
+
+  clearAll() {
+    this.form.forEach(id => {
+      this.stopLoading({
+        id
+      });
+    });
+    this.summary.forEach(id => {
+      this.stopLoading({
+        section: 'summary',
+        id
+      });
+    });
+    this.modal.forEach(id => {
+      this.stopLoading({
+        section: 'modal',
+        id
+      });
+    });
+  }
 
-  return Loader;
-}();
+}
 
 exports.Loader = Loader;

package/dist/loader/loader.spec.js

@@ -2,11 +2,14 @@
 
 var _index = require("./index");
 
-describe('Loader Class', function () {
-  var loader;
-  beforeEach(function () {
+describe('Loader Class', () => {
+  let loader;
+  beforeEach(() => {
     loader = new _index.Loader();
-    document.body.innerHTML = "\n      <div class=\"form-selector\"></div>\n      <div class=\"summary-selector\"></div>\n    ";
+    document.body.innerHTML = `
+      <div class="form-selector"></div>
+      <div class="summary-selector"></div>
+    `;
     loader.addDOMElement({
       el: document.querySelector('.form-selector')
     });
@@ -15,7 +18,7 @@ describe('Loader Class', function () {
       el: document.querySelector('.summary-selector')
     });
   });
-  it('manage state of loading ids', function () {
+  it('manage state of loading ids', () => {
     loader.startLoading({
       id: 'loadForm'
     });
@@ -38,18 +41,18 @@ describe('Loader Class', function () {
     expect(loader.form.length).toEqual(1);
     expect(loader.summary.length).toEqual(2);
   });
-  it('adds the loader HTML on element and removes the active class when stoped', function () {
+  it('adds the loader HTML on element and removes the active class when stoped', () => {
     loader.startLoading({
       id: 'loadForm'
     });
     expect(loader.DOM.form.innerHTML).toMatch('rebilly-instruments-loader');
-    expect(loader.DOM.form.querySelector('.rebilly-instruments-loader').classList.contains('active')).toEqual(true);
+    expect(loader.DOM.form.querySelector('.rebilly-instruments-loader').classList.contains('is-active')).toEqual(true);
     loader.stopLoading({
       id: 'loadForm'
     });
-    expect(loader.DOM.form.querySelector('.rebilly-instruments-loader').classList.contains('active')).toEqual(false);
+    expect(loader.DOM.form.querySelector('.rebilly-instruments-loader').classList.contains('is-active')).toEqual(false);
   });
-  it('keeps loading when there are Ids on the element array', function () {
+  it('keeps loading when there are Ids on the element array', () => {
     loader.startLoading({
       id: 'loadForm'
     });
@@ -57,10 +60,10 @@ describe('Loader Class', function () {
       id: 'updateForm'
     });
     expect(loader.DOM.form.innerHTML).toMatch('rebilly-instruments-loader');
-    expect(loader.DOM.form.querySelector('.rebilly-instruments-loader').classList.contains('active')).toEqual(true);
+    expect(loader.DOM.form.querySelector('.rebilly-instruments-loader').classList.contains('is-active')).toEqual(true);
     loader.stopLoading({
       id: 'loadForm'
     });
-    expect(loader.DOM.form.querySelector('.rebilly-instruments-loader').classList.contains('active')).toEqual(true);
+    expect(loader.DOM.form.querySelector('.rebilly-instruments-loader').classList.contains('is-active')).toEqual(true);
   });
 });