@targetprocess/tabs/__tests__/Tabs.tests.jsx

/* eslint-env jest */
import React from 'react'
import {mount} from 'enzyme'
import {Tabs} from '../Tabs'
import {TabPanel} from '../TabPanel'

describe('Tabs', () => {
  it('should render tabs and only render content of an active tab', () => {
    const wrapper = mount(
      <Tabs activeTabId="2">
        <Tabs.Tab header="fooTab" id="1">
          foo
        </Tabs.Tab>
        <Tabs.Tab header="barTab" id="2">
          bar
        </Tabs.Tab>
      </Tabs>
    )

    const tabItems = wrapper.find('.tabs__header__tab-item')
    expect(tabItems).toHaveLength(2)
    expect(tabItems.at(0).text()).toBe('fooTab')
    expect(tabItems.at(1).text()).toBe('barTab')
    expect(tabItems.at(1).hasClass('tabs__header__tab-item--active')).toBeTruthy()

    const tabsContent = wrapper.find('.tabs__body')
    expect(tabsContent.text()).toEqual('bar')
  })

  it('should trigger onActiveTabChanged on click but only for non-disabled tabs', () => {
    const onActiveTabChangedMock = jest.fn()

    const wrapper = mount(
      <Tabs activeTabId="1" onActiveTabChanged={onActiveTabChangedMock}>
        <Tabs.Tab header="fooTab" id="1">
          foo
        </Tabs.Tab>
        <Tabs.Tab header="barTab" id="2">
          bar
        </Tabs.Tab>
        <Tabs.Tab header="barTab" id="3" disabled>
          bar
        </Tabs.Tab>
      </Tabs>
    )

    const tabs = wrapper.find('.tabs__header__tab-item')
    tabs.at(1).simulate('click')
    expect(onActiveTabChangedMock).toHaveBeenCalledWith('2')

    onActiveTabChangedMock.mockClear()
    tabs.at(2).simulate('click')
    expect(onActiveTabChangedMock).not.toHaveBeenCalled()
  })

  it('should handle header as render prop', () => {
    const renderHeader = ({onResize}) => {
      expect(typeof onResize).toBe('function')
      return 'testTab'
    }

    const wrapper = mount(
      <Tabs activeTabId="1">
        <Tabs.Tab header={renderHeader} id="1">
          foo
        </Tabs.Tab>
      </Tabs>
    )

    const tabItems = wrapper.find('.tabs__header__tab-item')
    expect(tabItems.at(0).text()).toBe('testTab')
  })

  it('should use provided `activeTabId` in controlled model as `activeTabId`', () => {
    const onActiveTabChangedMock = jest.fn()

    const wrapper = mount(
      <Tabs activeTabId="2" onActiveTabChanged={onActiveTabChangedMock}>
        <Tabs.Tab header="fooTab" id="1">
          foo
        </Tabs.Tab>
        <Tabs.Tab header="barTab" id="2">
          bar
        </Tabs.Tab>
        <Tabs.Tab header="bazTab" id="3" disabled>
          baz
        </Tabs.Tab>
      </Tabs>
    )

    const tabPanel = wrapper.find(TabPanel)
    expect(tabPanel).toHaveLength(1)
    expect(tabPanel.text()).toEqual('bar')
  })

  it('should open first tab in controlled mode if `activeTabId` is not provided', () => {
    const onActiveTabChangedMock = jest.fn()

    const wrapper = mount(
      <Tabs activeTabId={null} onActiveTabChanged={onActiveTabChangedMock}>
        <Tabs.Tab header="fooTab" id="1">
          foo
        </Tabs.Tab>
        <Tabs.Tab header="barTab" id="2">
          bar
        </Tabs.Tab>
        <Tabs.Tab header="bazTab" id="3" disabled>
          baz
        </Tabs.Tab>
      </Tabs>
    )

    const tabPanel = wrapper.find(TabPanel)
    expect(tabPanel).toHaveLength(1)
    expect(tabPanel.text()).toEqual('foo')
  })

  it('should open first tab if provided `activeTabId` does not exists', () => {
    const onActiveTabChangedMock = jest.fn()

    const wrapper = mount(
      <Tabs activeTabId="4" onActiveTabChanged={onActiveTabChangedMock}>
        <Tabs.Tab header="fooTab" id="1">
          foo
        </Tabs.Tab>
        <Tabs.Tab header="barTab" id="2">
          bar
        </Tabs.Tab>
        <Tabs.Tab header="bazTab" id="3">
          baz
        </Tabs.Tab>
      </Tabs>
    )

    const tabPanel = wrapper.find(TabPanel)
    expect(tabPanel).toHaveLength(1)
    expect(tabPanel.text()).toEqual('foo')
  })

  it('should open first tab if `activeTabId` is not provided', () => {
    const onActiveTabChangedMock = jest.fn()

    const wrapper = mount(
      <Tabs onActiveTabChanged={onActiveTabChangedMock}>
        <Tabs.Tab header="fooTab" id="1">
          foo
        </Tabs.Tab>
        <Tabs.Tab header="barTab" id="2">
          bar
        </Tabs.Tab>
        <Tabs.Tab header="bazTab" id="3">
          baz
        </Tabs.Tab>
      </Tabs>
    )

    const tabPanel = wrapper.find(TabPanel)
    expect(tabPanel).toHaveLength(1)
    expect(tabPanel.text()).toEqual('foo')
  })
})