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

wix-style-react

import React from 'react';
import ReactTestUtils from 'react-dom/test-utils';
import { mount } from 'enzyme';

import tabsDriverFactory from './Tabs.driver';
import Tabs from './Tabs';
import { tabsTestkitFactory } from '../../testkit';
import { createRendererWithDriver, cleanup } from '../../test/utils/unit';
import { tabsTestkitFactory as enzymeTabsTestkitFactory } from '../../testkit/enzyme';

describe('Tabs component', function () {
  var render = createRendererWithDriver(tabsDriverFactory);

  function createComponent(props) {
    return render(React.createElement(Tabs, 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 () {
    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(React.createElement(Tabs, { items: items, activeId: 2 })),
        driver = _render.driver,
        rerender = _render.rerender;

    rerender(React.createElement(Tabs, { 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 = React.createElement(
      'div',
      null,
      'Click ',
      React.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(ReactTestUtils.renderIntoDocument(React.createElement(
        'div',
        null,
        React.createElement(Tabs, { items: [], dataHook: dataHook })
      )));
      var breadcrumbsTestkit = tabsTestkitFactory({ wrapper: wrapper, dataHook: dataHook });
      expect(breadcrumbsTestkit.exists()).toBeTruthy();
    });
  });

  describe('enzyme testkit', function () {
    it('should exist', function () {
      var dataHook = 'myDataHook';
      var wrapper = mount(React.createElement(Tabs, { items: [], dataHook: dataHook }));
      var breadcrumbsTestkit = enzymeTabsTestkitFactory({
        wrapper: wrapper,
        dataHook: dataHook
      });
      expect(breadcrumbsTestkit.exists()).toBeTruthy();
    });
  });
});