wix-style-react/dist/src/TPA/FloatingTabs/FloatingTabs.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 _FloatingTabs = require('./FloatingTabs');

var _FloatingTabs2 = _interopRequireDefault(_FloatingTabs);

var _FloatingTabItem = require('../FloatingTabItem/FloatingTabItem');

var _FloatingTabItem2 = _interopRequireDefault(_FloatingTabItem);

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

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

describe('FloatingTabs', 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(
        _FloatingTabs2.default,
        { dataHook: dataHook },
        _react2.default.createElement(
          _FloatingTabItem2.default,
          { id: 'first' },
          '1'
        ),
        _react2.default.createElement(
          _FloatingTabItem2.default,
          { id: 'second' },
          '2'
        )
      )
    )));
    var floatingTabsTestkit = (0, _testkit.tpaFloatingTabsTestkitFactory)({
      wrapper: wrapper,
      dataHook: dataHook
    });
    expect(floatingTabsTestkit.exists()).toBeTruthy();
    expect(floatingTabsTestkit.activeContent()).toEqual('1');
  });

  it('should first button have proper title', function () {
    var div = document.createElement('div');
    var dataHook = 'myDataHook';
    var wrapper = div.appendChild(_testUtils2.default.renderIntoDocument(_react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(
        _FloatingTabs2.default,
        { dataHook: dataHook },
        _react2.default.createElement(
          _FloatingTabItem2.default,
          { id: 'first', title: 'Tab One' },
          '1'
        ),
        _react2.default.createElement(
          _FloatingTabItem2.default,
          { id: 'second', title: 'Tab Two' },
          '2'
        )
      )
    )));
    var floatingTabsTestkit = (0, _testkit.tpaFloatingTabsTestkitFactory)({
      wrapper: wrapper,
      dataHook: dataHook
    });
    expect(floatingTabsTestkit.isButtonByIdExists('first')).toBe(true);
    expect(floatingTabsTestkit.isButtonByIdExists('second')).toBe(true);
    expect(floatingTabsTestkit.getButtonTextById('first')).toBe('Tab One');
  });

  it('should have active and inactive buttons', function () {
    var div = document.createElement('div');
    var dataHook = 'myDataHook';
    var wrapper = div.appendChild(_testUtils2.default.renderIntoDocument(_react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(
        _FloatingTabs2.default,
        { activeId: 'first', dataHook: dataHook },
        _react2.default.createElement(
          _FloatingTabItem2.default,
          { id: 'first', title: 'Tab One' },
          '1'
        ),
        _react2.default.createElement(
          _FloatingTabItem2.default,
          { id: 'second', title: 'Tab Two' },
          '2'
        )
      )
    )));
    var floatingTabsTestkit = (0, _testkit.tpaFloatingTabsTestkitFactory)({
      wrapper: wrapper,
      dataHook: dataHook
    });
    expect(floatingTabsTestkit.isButtonActive('first')).toBe(true);
    expect(floatingTabsTestkit.isButtonActive('second')).toBe(false);
  });

  it('should have default selected tab', function () {
    var div = document.createElement('div');
    var dataHook = 'myDataHook';
    var wrapper = div.appendChild(_testUtils2.default.renderIntoDocument(_react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(
        _FloatingTabs2.default,
        { dataHook: dataHook, activeTabClassName: 'activeClass' },
        _react2.default.createElement(
          _FloatingTabItem2.default,
          { id: 'first', title: 'Tab One' },
          '1'
        ),
        _react2.default.createElement(
          _FloatingTabItem2.default,
          { id: 'second', title: 'Tab Two' },
          '2'
        )
      )
    )));
    var floatingTabsTestkit = (0, _testkit.tpaFloatingTabsTestkitFactory)({
      wrapper: wrapper,
      dataHook: dataHook
    });
    expect(floatingTabsTestkit.isButtonActive('first')).toBe(true);
    expect(floatingTabsTestkit.isButtonActive('second')).toBe(false);

    expect(floatingTabsTestkit.activeContent()).toEqual('1');
  });

  it('should be able to click and select tab', function () {
    var onChangeMock = jest.fn();
    var div = document.createElement('div');
    var dataHook = 'myDataHook';
    var wrapper = div.appendChild(_testUtils2.default.renderIntoDocument(_react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(
        _FloatingTabs2.default,
        { dataHook: dataHook, onChange: onChangeMock },
        _react2.default.createElement(
          _FloatingTabItem2.default,
          { id: 'first', title: 'Tab One' },
          '1'
        ),
        _react2.default.createElement(
          _FloatingTabItem2.default,
          { id: 'second', title: 'Tab Two' },
          '2'
        )
      )
    )));
    var floatingTabsTestkit = (0, _testkit.tpaFloatingTabsTestkitFactory)({
      wrapper: wrapper,
      dataHook: dataHook
    });
    floatingTabsTestkit.clickButtonById('second');
    expect(onChangeMock).toHaveBeenCalledWith('second');
  });

  it('should put custom class to active tab', function () {
    var div = document.createElement('div');
    var dataHook = 'myDataHook';
    var wrapper = div.appendChild(_testUtils2.default.renderIntoDocument(_react2.default.createElement(
      'div',
      null,
      _react2.default.createElement(
        _FloatingTabs2.default,
        {
          dataHook: dataHook,
          activeTabClassName: 'activeClass',
          activeId: 'second'
        },
        _react2.default.createElement(
          _FloatingTabItem2.default,
          { id: 'first', title: 'Tab One' },
          '1'
        ),
        _react2.default.createElement(
          _FloatingTabItem2.default,
          { id: 'second', title: 'Tab Two' },
          '2'
        )
      )
    )));
    var floatingTabsTestkit = (0, _testkit.tpaFloatingTabsTestkitFactory)({
      wrapper: wrapper,
      dataHook: dataHook
    });

    expect(floatingTabsTestkit.isButtonHasClass('second', 'activeClass')).toBe(true);
    expect(floatingTabsTestkit.isButtonHasClass('first', 'activeClass')).toBe(false);
  });
});