lucid-ui/lib/components/VerticalTabs/VerticalTabs.spec.js

A UI component library from AppNexus.

import sinon from 'sinon';
import React from 'react';
import assert from 'assert';
import { shallow } from 'enzyme';
import { common } from '../../util/generic-tests';
import { VerticalTabsDumb as VerticalTabs } from './VerticalTabs';
import { VerticalListMenuDumb as VerticalListMenu } from '../VerticalListMenu/VerticalListMenu';
describe('VerticalTabs', function () {
  common(VerticalTabs, {
    exemptChildComponents: ['Tab', 'Title']
  });
  describe('render', function () {
    it('should render', function () {
      var wrapper = shallow( /*#__PURE__*/React.createElement(VerticalTabs, null, /*#__PURE__*/React.createElement(VerticalTabs.Tab, null, /*#__PURE__*/React.createElement(VerticalTabs.Title, null, "One"), "One content")));
      expect(wrapper).toMatchSnapshot();
    });
  });
  describe('props', function () {
    it('Tab as children', function () {
      var wrapper = shallow( /*#__PURE__*/React.createElement(VerticalTabs, null, /*#__PURE__*/React.createElement(VerticalTabs.Tab, null, "Foo Content"), /*#__PURE__*/React.createElement(VerticalTabs.Tab, null, "Two")));
      assert.equal(wrapper.find('.lucid-VerticalTabs-content').text(), 'Foo Content');
    });
    it('Tab as props', function () {
      var wrapper = shallow( /*#__PURE__*/React.createElement(VerticalTabs, {
        Tab: [{
          children: 'Bert'
        }, {
          children: 'Ernie'
        }]
      }));
      assert.equal(wrapper.find('.lucid-VerticalTabs-Tab').length, 2);
      assert.equal(wrapper.find('.lucid-VerticalTabs-content').text(), 'Bert');
    });
    it('Tab as props with Title', function () {
      var wrapper = shallow( /*#__PURE__*/React.createElement(VerticalTabs, {
        Tab: [{
          Title: 'Coolest',
          children: 'Bert'
        }, {
          Title: 'Not so cool',
          children: 'Ernie'
        }]
      }));
      assert.equal(wrapper.find('.lucid-VerticalTabs-Tab').length, 2);
      assert.equal(wrapper.find('.lucid-VerticalTabs-Tab-is-active').children().text(), 'Coolest');
      assert.equal(wrapper.find('.lucid-VerticalTabs-content').text(), 'Bert');
    });
    it('Title as props', function () {
      var wrapper = shallow( /*#__PURE__*/React.createElement(VerticalTabs, null, /*#__PURE__*/React.createElement(VerticalTabs.Tab, {
        Title: "Froyo"
      }, "Yolo fo sho"), /*#__PURE__*/React.createElement(VerticalTabs.Tab, null, "Broyoyo")));
      assert.equal(wrapper.find('.lucid-VerticalTabs-Tab').first().children().text(), 'Froyo');
    });
    it('Title as children', function () {
      var wrapper = shallow( /*#__PURE__*/React.createElement(VerticalTabs, null, /*#__PURE__*/React.createElement(VerticalTabs.Tab, null, /*#__PURE__*/React.createElement(VerticalTabs.Title, null, "Froyo"), "Yolo fo sho"), /*#__PURE__*/React.createElement(VerticalTabs.Tab, null, "Broyoyo")));
      assert.equal(wrapper.find('.lucid-VerticalTabs-Tab').first().children().text(), 'Froyo');
    });
    it('selectedIndex', function () {
      var wrapper = shallow( /*#__PURE__*/React.createElement(VerticalTabs, {
        selectedIndex: 1
      }, /*#__PURE__*/React.createElement(VerticalTabs.Tab, {
        Title: "Lollipop"
      }, "Yuck"), /*#__PURE__*/React.createElement(VerticalTabs.Tab, {
        Title: "Slurpee"
      }, "Yum")));
      assert.equal(wrapper.find('.lucid-VerticalTabs-Tab-is-active').children().text(), 'Slurpee');
      assert.equal(wrapper.find('.lucid-VerticalTabs-content').text(), 'Yum');
    });
    it('Tab.isSelected', function () {
      var wrapper = shallow( /*#__PURE__*/React.createElement(VerticalTabs, null, /*#__PURE__*/React.createElement(VerticalTabs.Tab, {
        Title: "Lollipop"
      }, "Yuck"), /*#__PURE__*/React.createElement(VerticalTabs.Tab, {
        isSelected: true,
        Title: "Slurpee"
      }, "Yum")));
      assert.equal(wrapper.find('.lucid-VerticalTabs-Tab-is-active').children().text(), 'Slurpee');
      assert.equal(wrapper.find('.lucid-VerticalTabs-content').text(), 'Yum');
    });
    it('last Tab.isSelected beats selectedIndex', function () {
      var wrapper = shallow( /*#__PURE__*/React.createElement(VerticalTabs, {
        selectedIndex: 0
      }, /*#__PURE__*/React.createElement(VerticalTabs.Tab, {
        Title: "One"
      }, "One content"), /*#__PURE__*/React.createElement(VerticalTabs.Tab, {
        isSelected: true,
        Title: "Two"
      }, "Two content"), /*#__PURE__*/React.createElement(VerticalTabs.Tab, {
        isSelected: true,
        Title: "Three"
      }, "Three content")));
      assert.equal(wrapper.find('.lucid-VerticalTabs-Tab-is-active').children().text(), 'Three');
      assert.equal(wrapper.find('.lucid-VerticalTabs-content').text(), 'Three content');
    });
    describe('onSelect', function () {
      var onSelect = sinon.spy();
      var wrapper;
      beforeEach(function () {
        onSelect.reset();
        wrapper = shallow( /*#__PURE__*/React.createElement(VerticalTabs, {
          onSelect: onSelect
        }, /*#__PURE__*/React.createElement(VerticalTabs.Tab, null, "One"), /*#__PURE__*/React.createElement(VerticalTabs.Tab, null, "Two")));
      });
      it('should pass props onto `VerticalListMenu`', function () {
        wrapper.find(VerticalListMenu).props().onSelect('stuff');
        assert(onSelect.called);
        assert.equal(onSelect.args[0], 'stuff');
      });
    });
  });
});