ima-ui-atoms/dist/__tests__/UIComponentHelperSpec.js

IMA.js UI React atoms

"use strict";

var _toMock = require("to-mock");

var _classnames = _interopRequireDefault(require("classnames"));

var _ComponentPositions = _interopRequireDefault(require("../ComponentPositions"));

var _UIComponentHelper = _interopRequireDefault(require("../UIComponentHelper"));

var _Visibility = _interopRequireDefault(require("../Visibility"));

var _infiniteCircle = require("infinite-circle");

var _router2 = _interopRequireDefault(require("../mocks/router"));

var _window2 = _interopRequireDefault(require("../mocks/window"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

describe('UIComponentHelper', () => {
  let uiComponentHelper = null;
  let visibility = (0, _toMock.toMockedInstance)(_Visibility.default);
  let componentPositions = (0, _toMock.toMockedInstance)(_ComponentPositions.default);
  let infinite = (0, _toMock.toMockedInstance)(_infiniteCircle.Infinite);
  beforeEach(() => {
    uiComponentHelper = new _UIComponentHelper.default(_router2.default, _window2.default, componentPositions, visibility, infinite, _classnames.default);
  });
  describe('isAmp method', () => {
    it('should return true if url query contains amp flag of value true', () => {
      spyOn(_router2.default, 'getCurrentRouteInfo').and.returnValue({
        params: {
          amp: true
        }
      });
      expect(uiComponentHelper.isAmp()).toBeTruthy();
    });
    it('should return true if url query contains amp flag of value "1"', () => {
      spyOn(_router2.default, 'getCurrentRouteInfo').and.returnValue({
        params: {
          amp: '1'
        }
      });
      expect(uiComponentHelper.isAmp()).toBeTruthy();
    });
    it('should return false if url query does not contain amp flag', () => {
      spyOn(_router2.default, 'getCurrentRouteInfo').and.returnValue({
        params: {
          amp: '0'
        }
      });
      expect(uiComponentHelper.isAmp()).toBeFalsy();
    });
    it('should return false if url query not contains amp flag', () => {
      expect(uiComponentHelper.isAmp()).toBeFalsy();
    });
  });
  describe('getDataProps method', () => {
    let dataProps = {
      'data-e2e': 'something',
      'data-key': 'key'
    };
    let props = Object.assign({
      key: 'key'
    }, dataProps);
    it('should return only attributes with name data-*', () => {
      expect(uiComponentHelper.getDataProps(props)).toEqual(dataProps);
    });
  });
  describe('getAriaProps method', () => {
    let ariaProps = {
      'aria-label': 'something',
      'aria-hidden': true
    };
    let props = Object.assign({
      key: 'key'
    }, ariaProps);
    it('should return only attributes with name aria-*', () => {
      expect(uiComponentHelper.getAriaProps(props)).toEqual(ariaProps);
    });
  });
  describe('serializeObjectToNoScript method', () => {
    let ariaProps = {
      'aria-label': 'something',
      'aria-hidden': true
    };
    it('should return serialized object to string for noscript tag', () => {
      expect(uiComponentHelper.serializeObjectToNoScript(ariaProps)).toMatchSnapshot();
    });
  });
  describe('cssClasses method', () => {
    it('should compose CSS class names', () => {
      expect(uiComponentHelper.cssClasses('stuff another-foo', {
        foo: true,
        bar: false,
        another: false,
        'more-things': true
      }, 'things')).toBe('stuff another-foo foo more-things things');
    });
  });
  describe('getVisibilityReader method', () => {
    it('return base visibility reader function', () => {
      expect(typeof uiComponentHelper.getVisibilityReader({}, {}) === 'function').toBeTruthy();
    });
  });
  describe('wrapVisibilityWriter method', () => {
    function writer(...args) {
      return `writer value: ${args.join(',')}`;
    }

    function wrapWriterTest(payload) {
      const entry = {
        payload
      };
      const parse = uiComponentHelper.wrapVisibilityWriter(writer);
      return parse(entry);
    }

    const OBSERVER = {};
    const PAYLOAD = 42;
    const PAYLOAD_OBJECT = {
      observer: OBSERVER,
      intersectionObserverEntry: {
        intersectionRatio: 0.3,
        isIntersecting: true
      }
    };
    const NONINTERSECTED_PAYLOAD_OBJECT = {
      observer: OBSERVER,
      intersectionObserverEntry: {
        intersectionRatio: 0,
        isIntersecting: false
      }
    };
    const BUGGED_PAYLOAD_OBJECT = {
      observer: OBSERVER,
      intersectionObserverEntry: {
        intersectionRatio: 0,
        isIntersecting: true
      }
    };
    it('should return a return value of writer(PAYLOAD)', () => {
      const result = wrapWriterTest(PAYLOAD);
      expect(result).toBe(writer(PAYLOAD));
    });
    it('should return a return value of writer(30, OBSERVER)', () => {
      const result = wrapWriterTest(PAYLOAD_OBJECT);
      expect(result).toBe(writer(30, OBSERVER));
    });
    it('should return a return value of writer(0, OBSERVER)', () => {
      const result = wrapWriterTest(NONINTERSECTED_PAYLOAD_OBJECT);
      expect(result).toBe(writer(0, OBSERVER));
    });
    it('should return a return value of writer(100, OBSERVER)', () => {
      const result = wrapWriterTest(BUGGED_PAYLOAD_OBJECT);
      expect(result).toBe(writer(100, OBSERVER));
    });
  });
});