wix-style-react/dist/src/SideMenu/DrillView/DrillView.spec.js

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _index = require('../index');

var _index2 = _interopRequireDefault(_index);

var _index3 = require('./index');

var _index4 = _interopRequireDefault(_index3);

var _driverFactory = require('wix-ui-test-utils/driver-factory');

var _DrillView = require('./DrillView.driver');

var _DrillView2 = _interopRequireDefault(_DrillView);

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

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } /* eslint-disable no-console */


describe('DrillView', function () {
  var linksPerLevel = 3;
  var subMenusPerLevel = 2;
  var createDriver = (0, _driverFactory.createDriverFactory)(_DrillView2.default);
  var getHeader = function getHeader(level) {
    return 'Level ' + level + ' - Start';
  };
  var getFooter = function getFooter(level) {
    return 'Level ' + level + ' - End';
  };
  var onClickSpy = void 0,
      onSubMenuClickSpy = void 0,
      onSubMenuBackSpy = void 0;

  beforeEach(function () {
    onClickSpy = jest.fn();
    onSubMenuClickSpy = jest.fn();
    onSubMenuBackSpy = jest.fn();
  });

  function createLinksForLevel(level, activeLink) {
    var isLinkDisabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
    var activeLevel = activeLink.activeLevel,
        activeIndex = activeLink.activeIndex;

    var isLevelActive = activeLevel === level;

    return [].concat(_toConsumableArray(new Array(linksPerLevel))).map(function (_, i) {
      return _react2.default.createElement(
        _index4.default.Link,
        {
          key: level + '_' + i,
          isActive: isLevelActive && activeIndex === i
        },
        _react2.default.createElement(
          'a',
          { href: '//wix.com', onClick: onClickSpy, disabled: isLinkDisabled },
          'Link ',
          i
        )
      );
    });
  }

  function createSubMenu(key, level, maxLevel, activeLink, isDisabled) {
    var isLinkDisabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;

    var menuKey = key + '_' + level;
    return _react2.default.createElement(
      _index4.default.SubMenu,
      {
        key: menuKey,
        menuKey: menuKey,
        title: menuKey,
        onSelectHandler: onSubMenuClickSpy,
        onBackHandler: onSubMenuBackSpy,
        disabled: isDisabled
      },
      _react2.default.createElement(
        _index2.default.Header,
        null,
        getHeader(level)
      ),
      _react2.default.createElement(
        _index4.default.Navigation,
        null,
        createLinksForLevel(level, activeLink, isLinkDisabled),
        createSubMenus(key + '_' + level, level + 1, maxLevel, activeLink, false, isLinkDisabled)
      ),
      _react2.default.createElement(
        _index2.default.Footer,
        null,
        getFooter(level)
      )
    );
  }

  function createSubMenus(key, level, maxLevel, activeLink, isDisabled) {
    var isLinkDisabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;

    if (level > maxLevel) {
      return _react2.default.createElement('div', null);
    }

    return [].concat(_toConsumableArray(new Array(subMenusPerLevel))).map(function (_, i) {
      return createSubMenu(key + i, level, maxLevel, activeLink, isDisabled, isLinkDisabled);
    });
  }

  function createSideMenu(maxLevel) {
    var activeLink = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    var isSubMenuDisabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
    var isLinkDisabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;

    return createDriver(_react2.default.createElement(
      _index4.default,
      null,
      _react2.default.createElement(
        _index2.default.Header,
        null,
        getHeader(0)
      ),
      createLinksForLevel(0, activeLink, isLinkDisabled),
      createSubMenus('SubMenu', 1, maxLevel, activeLink, isSubMenuDisabled, isLinkDisabled),
      _react2.default.createElement(
        _index2.default.Footer,
        null,
        getFooter(0)
      )
    ));
  }

  it('should have a sticky footer through props', function () {
    var driver = createDriver(_react2.default.createElement(
      _index4.default,
      {
        stickyFooter: _react2.default.createElement(
          _index2.default.Footer,
          null,
          getFooter(1)
        )
      },
      createLinksForLevel(0, {})
    ));

    expect(!!driver.getStickyFooter()).toBe(true);
  });

  it('should render a one level drill view', function () {
    var driver = createSideMenu(0);

    expect(driver.getMenuDriver().headerContent()).toBe(getHeader(0));
    expect(driver.getMenuDriver().footerContent()).toBe(getFooter(0));
    expect(driver.getMenuDriver().navigationInnerLinks()).toHaveLength(linksPerLevel);
  });

  it('should render a one level drill view with an active item', function () {
    var activeLevel = 0;
    var activeIndex = 1;
    var driver = createSideMenu(0, { activeLevel: activeLevel, activeIndex: activeIndex });

    expect(driver.getMenuDriver().headerContent()).toBe(getHeader(0));
    expect(driver.getMenuDriver().footerContent()).toBe(getFooter(0));
    expect(driver.getMenuDriver().isLinkActiveByIndex(0)).toBe(false);
    expect(driver.getMenuDriver().isLinkActiveByIndex(activeIndex)).toBe(true);
  });

  it('should initially render the sub menu of the active link', function () {
    var activeLevel = 1;
    var activeIndex = 1;
    var driver = createSideMenu(1, { activeLevel: activeLevel, activeIndex: activeIndex });

    expect(driver.getMenuDriver().headerContent()).toBe(getHeader(1));
    expect(driver.getMenuDriver().footerContent()).toBe(getFooter(1));
    expect(driver.getMenuDriver().hasBackLink()).toBe(true);
    expect(driver.getMenuDriver().isLinkActiveByIndex(activeIndex)).toBe(true);
    expect(driver.getMenuDriver().navigationCategoryContent(0)).toBe('SubMenu1_1');
  });

  it("should NOT trigger first child link's click when clicking a disabled sub menu", function () {
    var driver = createSideMenu(3, {}, false, true);

    expect(driver.getMenuDriver().headerContent()).toBe(getHeader(0));
    expect(driver.getMenuDriver().footerContent()).toBe(getFooter(0));
    expect(driver.getMenuDriver().hasBackLink()).toBe(false);

    // click the first link
    expect(onClickSpy.mock.calls).toHaveLength(0);
    driver.getMenuDriver().clickInnerLinkByIndex(3);

    expect(onClickSpy.mock.calls).toHaveLength(0);
    expect(onSubMenuClickSpy.mock.calls).toHaveLength(1);
  });

  it("should trigger first child link's click when clicking a sub menu", function () {
    var driver = createSideMenu(3);

    expect(driver.getMenuDriver().headerContent()).toBe(getHeader(0));
    expect(driver.getMenuDriver().footerContent()).toBe(getFooter(0));
    expect(driver.getMenuDriver().hasBackLink()).toBe(false);

    // click the first sub menu
    expect(onClickSpy.mock.calls).toHaveLength(0);
    driver.getMenuDriver().clickInnerLinkByIndex(3);

    expect(onClickSpy).toHaveBeenCalled();
    expect(onSubMenuClickSpy).toHaveBeenCalled();
    expect(onClickSpy.mock.calls).toHaveLength(1);
    expect(onSubMenuClickSpy.mock.calls).toHaveLength(1);
  });

  it('should have a disabled css when disabled prop is passed', function () {
    var driver = createSideMenu(3, {}, true);

    expect(driver.getMenuDriver().headerContent()).toBe(getHeader(0));
    expect(driver.getMenuDriver().footerContent()).toBe(getFooter(0));
    expect(driver.getMenuDriver().hasBackLink()).toBe(false);

    // click the first sub menu
    expect(onClickSpy.mock.calls).toHaveLength(0);
    driver.getMenuDriver().clickInnerLinkByIndex(3);

    expect(driver.getMenuDriver().isLinkDisabledByIndex(3)).toBe(true);
  });

  it('should NOT have a disabled css when disabled prop is passed', function () {
    var driver = createSideMenu(3);

    expect(driver.getMenuDriver().headerContent()).toBe(getHeader(0));
    expect(driver.getMenuDriver().footerContent()).toBe(getFooter(0));
    expect(driver.getMenuDriver().hasBackLink()).toBe(false);

    // click the first sub menu
    expect(onClickSpy.mock.calls).toHaveLength(0);
    driver.getMenuDriver().clickInnerLinkByIndex(3);

    expect(driver.getMenuDriver().isLinkDisabledByIndex(3)).toBe(false);
  });

  it('should navigate to a parent menu and sub menu link should be active', function (done) {
    var activeLevel = 1;
    var activeIndex = 1;
    var driver = createSideMenu(1, { activeLevel: activeLevel, activeIndex: activeIndex });

    expect(driver.getMenuDriver().headerContent()).toBe(getHeader(1));
    expect(driver.getMenuDriver().footerContent()).toBe(getFooter(1));
    expect(driver.getMenuDriver().isLinkActiveByIndex(activeIndex)).toBe(true);
    expect(driver.getMenuDriver().hasBackLink()).toBe(true);

    driver.getMenuDriver().clickBackLink();

    setTimeout(function () {
      expect(driver.getMenuDriver().headerContent()).toBe(getHeader(0));
      expect(driver.getMenuDriver().footerContent()).toBe(getFooter(0));
      expect(driver.getMenuDriver().isLinkActiveByIndex(3)).toBe(true);
      expect(onSubMenuBackSpy).toHaveBeenCalled();
      expect(onSubMenuBackSpy.mock.calls).toHaveLength(1);
      done();
    }, 600);
  });
});