@ftrack/react-toolbox/components/tabs/__tests__/index.spec.js

A set of React components implementing Google's Material Design specification with the power of CSS Modules.

import expect from 'expect';
import utils from '../../utils/testing';
import ReactTestUtils from 'react-dom/test-utils';

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import Tabs, { Tabs as RawTabs } from '../Tabs';
import Tab from '../Tab';
import TabContent from '../TabContent';
import theme from '../theme.scss';

const getRenderedClassName = (tree, TargetComponent) => {
  const rendered = ReactTestUtils.findRenderedComponentWithType(tree, TargetComponent);
  return ReactDOM.findDOMNode(rendered).getAttribute('class');
};

describe('Tabs', function () {
  let tabContents, composition;

  class Composition extends Component {
    constructor () {
      super();
      this.state = { index: 0 };
    }

    render () {
      return (
        <Tabs index={this.state.index} {...this.props}>
          <Tab label="tab1">tab1</Tab>
          <Tab label="tab2">tab2</Tab>
        </Tabs>
      );
    }
  }

  it('defaults to only rendering the current tab', function () {
    // initial render
    composition = utils.renderComponent(Composition);

    tabContents = ReactTestUtils
      .scryRenderedComponentsWithType(composition, TabContent);

    expect(tabContents.length).toEqual(1);
    expect(tabContents[0].props.tabIndex).toEqual(0);

    // after tab change
    composition.setState({ index: 1 });
    composition.forceUpdate();

    tabContents = ReactTestUtils
      .scryRenderedComponentsWithType(composition, TabContent);

    expect(tabContents.length).toEqual(1);
    expect(tabContents[0].props.tabIndex).toEqual(1);
  });

  it('renders inactive tabs when hideMode is set to display', function () {
    // initial render
    composition = utils.renderComponent(Composition, { hideMode: 'display' });

    tabContents = ReactTestUtils
      .scryRenderedComponentsWithType(composition, TabContent);

    expect(tabContents.length).toEqual(2);

    let tabOne = tabContents.find((tab) => (tab.props.children === 'tab1'));
    let tabTwo = tabContents.find((tab) => (tab.props.children === 'tab2'));

    expect(tabOne.props.hidden).toEqual(false);
    expect(tabTwo.props.hidden).toEqual(true);

    // after tab change
    composition.setState({ index: 1 });
    composition.forceUpdate();

    tabContents = ReactTestUtils
      .scryRenderedComponentsWithType(composition, TabContent);

    expect(tabContents.length).toEqual(2);

    tabOne = tabContents.find((tab) => (tab.props.children === 'tab1'));
    tabTwo = tabContents.find((tab) => (tab.props.children === 'tab2'));

    expect(tabOne.props.hidden).toEqual(true);
    expect(tabTwo.props.hidden).toEqual(false);
  });

  describe('#render', function () {
    it('does not use fixed by default', function () {
      const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} />);
      const className = getRenderedClassName(tree, RawTabs);
      expect(className).toNotContain(theme.fixed);
    });

    it('uses fixed when set', function () {
      const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} fixed />);
      const className = getRenderedClassName(tree, RawTabs);
      expect(className).toContain(theme.fixed);
    });

    it('does not use inverse by default', function () {
      const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} />);
      const className = getRenderedClassName(tree, RawTabs);
      expect(className).toNotContain(theme.inverse);
    });

    it('uses inverse when set', function () {
      const tree = ReactTestUtils.renderIntoDocument(<Tabs theme={theme} inverse />);
      const className = getRenderedClassName(tree, RawTabs);
      expect(className).toContain(theme.inverse);
    });
  });
});