wix-style-react/dist/es/src/TPA/FloatingTabs/FloatingTabs.spec.js

wix-style-react

import React from 'react';
import ReactTestUtils from 'react-dom/test-utils';
import FloatingTabs from './FloatingTabs';
import FloatingTabItem from '../FloatingTabItem/FloatingTabItem';
import { tpaFloatingTabsTestkitFactory as floatingTabsTestkitFactory } from '../../../testkit';

describe('FloatingTabs', 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(
        FloatingTabs,
        { dataHook: dataHook },
        React.createElement(
          FloatingTabItem,
          { id: 'first' },
          '1'
        ),
        React.createElement(
          FloatingTabItem,
          { id: 'second' },
          '2'
        )
      )
    )));
    var floatingTabsTestkit = floatingTabsTestkitFactory({
      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(ReactTestUtils.renderIntoDocument(React.createElement(
      'div',
      null,
      React.createElement(
        FloatingTabs,
        { dataHook: dataHook },
        React.createElement(
          FloatingTabItem,
          { id: 'first', title: 'Tab One' },
          '1'
        ),
        React.createElement(
          FloatingTabItem,
          { id: 'second', title: 'Tab Two' },
          '2'
        )
      )
    )));
    var floatingTabsTestkit = floatingTabsTestkitFactory({
      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(ReactTestUtils.renderIntoDocument(React.createElement(
      'div',
      null,
      React.createElement(
        FloatingTabs,
        { activeId: 'first', dataHook: dataHook },
        React.createElement(
          FloatingTabItem,
          { id: 'first', title: 'Tab One' },
          '1'
        ),
        React.createElement(
          FloatingTabItem,
          { id: 'second', title: 'Tab Two' },
          '2'
        )
      )
    )));
    var floatingTabsTestkit = floatingTabsTestkitFactory({
      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(ReactTestUtils.renderIntoDocument(React.createElement(
      'div',
      null,
      React.createElement(
        FloatingTabs,
        { dataHook: dataHook, activeTabClassName: 'activeClass' },
        React.createElement(
          FloatingTabItem,
          { id: 'first', title: 'Tab One' },
          '1'
        ),
        React.createElement(
          FloatingTabItem,
          { id: 'second', title: 'Tab Two' },
          '2'
        )
      )
    )));
    var floatingTabsTestkit = floatingTabsTestkitFactory({
      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(ReactTestUtils.renderIntoDocument(React.createElement(
      'div',
      null,
      React.createElement(
        FloatingTabs,
        { dataHook: dataHook, onChange: onChangeMock },
        React.createElement(
          FloatingTabItem,
          { id: 'first', title: 'Tab One' },
          '1'
        ),
        React.createElement(
          FloatingTabItem,
          { id: 'second', title: 'Tab Two' },
          '2'
        )
      )
    )));
    var floatingTabsTestkit = floatingTabsTestkitFactory({
      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(ReactTestUtils.renderIntoDocument(React.createElement(
      'div',
      null,
      React.createElement(
        FloatingTabs,
        {
          dataHook: dataHook,
          activeTabClassName: 'activeClass',
          activeId: 'second'
        },
        React.createElement(
          FloatingTabItem,
          { id: 'first', title: 'Tab One' },
          '1'
        ),
        React.createElement(
          FloatingTabItem,
          { id: 'second', title: 'Tab Two' },
          '2'
        )
      )
    )));
    var floatingTabsTestkit = floatingTabsTestkitFactory({
      wrapper: wrapper,
      dataHook: dataHook
    });

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