wix-style-react/dist/src/Tabs/Tabs.spec.js

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _testUtils = require('react-dom/test-utils');

var _testUtils2 = _interopRequireDefault(_testUtils);

var _enzyme = require('enzyme');

var _Tabs = require('./Tabs.driver');

var _Tabs2 = _interopRequireDefault(_Tabs);

var _Tabs3 = require('./Tabs');

var _Tabs4 = _interopRequireDefault(_Tabs3);

var _testkit = require('../../testkit');

var _unit = require('../../test/utils/unit');

var _enzyme2 = require('../../testkit/enzyme');

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

describe('Tabs component', function () {
  var render = (0, _unit.createRendererWithDriver)(_Tabs2.default);

  function createComponent(props) {
    return render(_react2.default.createElement(_Tabs4.default, props)).driver;
  }

  var items = void 0;

  beforeEach(function () {
    items = [{ id: 0, title: 'Tab 0' }, { id: 1, title: 'Tab 1', dataHook: 'tab-data-hook' }, { id: 2, title: 'Tab 2' }];
  });

  afterEach(function () {
    (0, _unit.cleanup)();
  });

  it('should render tabs with correct titles', function () {
    var driver = createComponent({ items: items });
    var expected = items.map(function (item) {
      return item.title;
    });

    expect(driver.getTitles()).toEqual(expected);
  });

  it('should call onClick when tab is clicked', function () {
    var onClick = jest.fn();
    var driver = createComponent({ items: items, onClick: onClick });

    driver.clickTabAt(1);
    expect(onClick).toHaveBeenCalledWith(items[1]);
  });

  it('should mark tab as active', function () {
    var driver = createComponent({ items: items, activeId: 2 });
    expect(driver.getActiveTabIndex()).toBe(2);
  });

  it('should have data-hook', function () {
    var driver = createComponent({ items: items, activeId: 2 });
    expect(driver.getDataHook(1)).toBe('tab-data-hook');
  });

  it('should change active tab', function () {
    var _render = render(_react2.default.createElement(_Tabs4.default, { items: items, activeId: 2 })),
        driver = _render.driver,
        rerender = _render.rerender;

    rerender(_react2.default.createElement(_Tabs4.default, { items: items, activeId: 1 }));
    expect(driver.getActiveTabIndex()).toBe(1);
  });

  it('should have default type when not specified', function () {
    var driver = createComponent({ items: items });
    expect(driver.isDefaultType()).toBeTruthy();
  });

  it('should get custom style', function () {
    var type = 'compact';
    var driver = createComponent({ items: items, type: type });
    expect(driver.getItemsContainerClassList().contains('compact')).toBeTruthy();
  });

  it('should set tab width, when selected type is Uniform Side', function () {
    var width = '100px';
    var driver = createComponent({ items: items, width: width, type: 'uniformSide' });
    expect(driver.getItemsWidth().size).toBe(1);
    expect(driver.getItemsWidth().has(width)).toBeTruthy();
  });

  it('should show side content if defined via props', function () {
    var sideContent = _react2.default.createElement(
      'div',
      null,
      'Click ',
      _react2.default.createElement(
        'a',
        { href: 'blah' },
        'here'
      ),
      '!'
    );
    var driver = createComponent({ items: items, sideContent: sideContent });
    expect(driver.getSideContent()).toBeTruthy();
  });

  it('does not show side content if it is not passed via props', function () {
    var driver = createComponent({ items: items });
    expect(driver.getSideContent()).toBeFalsy();
  });

  it('should have divider by default', function () {
    var driver = createComponent({ items: items });

    expect(driver.hasDivider()).toBeTruthy();
  });

  it('should not have divider if props.divider is falsy', function () {
    var driver = createComponent({ items: items, hasDivider: false });

    expect(driver.hasDivider()).toBeFalsy();
  });

  it('should have divider if props.divider is truthy', function () {
    var driver = createComponent({ items: items, hasDivider: true });

    expect(driver.hasDivider()).toBeTruthy();
  });

  describe('testkit', function () {
    it('should exist', function () {
      var div = document.createElement('div');
      var dataHook = 'myDataHook';
      var wrapper = div.appendChild(_testUtils2.default.renderIntoDocument(_react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(_Tabs4.default, { items: [], dataHook: dataHook })
      )));
      var breadcrumbsTestkit = (0, _testkit.tabsTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
      expect(breadcrumbsTestkit.exists()).toBeTruthy();
    });
  });

  describe('enzyme testkit', function () {
    it('should exist', function () {
      var dataHook = 'myDataHook';
      var wrapper = (0, _enzyme.mount)(_react2.default.createElement(_Tabs4.default, { items: [], dataHook: dataHook }));
      var breadcrumbsTestkit = (0, _enzyme2.tabsTestkitFactory)({
        wrapper: wrapper,
        dataHook: dataHook
      });
      expect(breadcrumbsTestkit.exists()).toBeTruthy();
    });
  });
});