react-ions/test/Tab.js

An open source set of React components that implement Ambassador's Design and UX patterns.

import React from 'react'
import { shallow, mount } from 'enzyme'
import Tab from '../src/components/TabWrapper/Tab'
import Badge from '../src/components/Badge'

describe('Tab', () => {
  let wrapper;

  it('should shallow render itself', () => {
    wrapper = shallow(<Tab title="Test Tab" />);

    expect(wrapper.hasClass('tab')).to.equal(true);
    expect(wrapper.hasClass('active')).to.equal(false);
    expect(wrapper.find('span')).to.have.length(0);
    expect(wrapper.text().trim()).to.equal('Test Tab');
  });

  it('should have active state when the active property is set to true', () => {
    wrapper = shallow(<Tab title="Test Tab" active={true} />);

    expect(wrapper.hasClass('tab')).to.equal(true);
    expect(wrapper.hasClass('active')).to.equal(true);
    expect(wrapper.find('span')).to.have.length(0);
    expect(wrapper.text().trim()).to.equal('Test Tab');
  });

  it('should render the count if the count property is provided', () => {
    wrapper = shallow(<Tab title="Test Tab" count={1234} />);

    expect(wrapper.hasClass('tab')).to.equal(true);
    expect(wrapper.hasClass('active')).to.equal(false);
    expect(wrapper.find('span')).to.have.length(1);
    expect(wrapper.text().trim()).to.equal('Test Tab (1,234)');
  });

  it('should trigger a callback when clicked if the callback is provided', () => {
    let callbackTriggered = false;
    function callback() {
      callbackTriggered = true;
    };

    wrapper = mount(<Tab title="Test Tab With Count" onClick={callback} />);
    wrapper.simulate('click');

    expect(callbackTriggered).to.be.true;
  });

  it('should not cause an error when clicked if the callback is not provided', () => {
    let callbackTriggered = false;

    wrapper = mount(<Tab title="Test Tab With Count" />);
    wrapper.simulate('click');

    expect(callbackTriggered).to.be.false;
  });

  it('should render a badge prefix node', () => {
    wrapper = shallow(<Tab titlePrefix={<Badge />} title="Test Tab With Prefix" />)

    expect(wrapper.find(Badge).length).to.equal(1)
  });

  it('should render a badge suffix node', () => {
    wrapper = shallow(<Tab titleSuffix={<Badge />} title="Test Tab With Suffix" />)

    expect(wrapper.find(Badge).length).to.equal(1)
  });

  it('should render a badge suffix and prefix node', () => {
    wrapper = shallow(<Tab titlePrefix={<Badge />} titleSuffix={<Badge />} title="Test Tab With Prefix and Suffix" />)

    expect(wrapper.find(Badge).length).to.equal(2)
  });
});