wix-storybook-utils/src/TabbedView/index.spec.js

Utilities for automated component documentation within Storybook

/* global expect describe it */

import React from 'react';
import { mount } from 'enzyme';

import TabbedView from '.';

const getTabbedViewDriver = () => {
  let wrapper;
  return {
    mount: (activeTabId, tabs) => {
      wrapper = mount(
        <TabbedView showTabs activeTabId={activeTabId} tabs={tabs}>
          {tabs.map((tab, i) => (
            <div key={i} data-hook={`child-${tab}`} />
          ))}
        </TabbedView>,
      );
    },
    getChildById: tabId => wrapper.find(`[data-hook="child-${tabId}"]`),
    clickOnTab: tabId =>
      wrapper.find(`[data-hook="${tabId}"]`).simulate('click'),
    cleanup: () => wrapper.unmount(),
  };
};

describe('TabbedView', () => {
  let driver;
  afterEach(() => driver.cleanup());
  it('should show correct children based on activeTabId', () => {
    const firstTabId = 'tab1';
    const activeTabId = 'tab2';
    const tabs = [firstTabId, activeTabId];
    driver = getTabbedViewDriver();
    driver.mount(activeTabId, tabs);
    expect(driver.getChildById(firstTabId).exists()).toBe(false);
    expect(driver.getChildById(activeTabId).exists()).toBe(true);
  });

  it('should be case insensitive for activeTabId', () => {
    const firstTabId = 'tab1';
    const activeTabId = 'tab2';
    const tabs = [firstTabId, activeTabId];
    driver = getTabbedViewDriver();
    driver.mount(activeTabId.toUpperCase(), tabs);
    expect(driver.getChildById(firstTabId).exists()).toBe(false);
    expect(driver.getChildById(activeTabId).exists()).toBe(true);
  });
});