react-conventions/test/ProgressBar.js

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

import React from 'react';
import { shallow } from 'enzyme';
import ProgressBar from '../src/components/ProgressBar/ProgressBar';
import ProgressBarLabel from '../src/components/ProgressBar/ProgressBarLabel';

describe('ProgressBar', () => {
  let wrapper;
  let processed_actions=10;
  let total_actions=100;

  it('should shallow render itself with proper tags, have default className and appropriate progress bar style', () => {
    const label = 'Commission export';
    wrapper = shallow(<ProgressBar value={processed_actions} denominator={total_actions} label={label} />);

    expect(wrapper.find('div')).to.have.length(3);
    expect(wrapper.first().hasClass('progress-bar')).to.equal(true);
    expect(wrapper.first().hasClass('danger')).to.equal(true);

    expect(wrapper.childAt(1).hasClass('outer')).to.equal(true);
    expect(wrapper.childAt(1).childAt(0).hasClass('inner')).to.equal(true);
    expect(wrapper.childAt(1).childAt(0).props().className).to.equal('inner');
    expect(wrapper.childAt(1).childAt(0).props().style.left).to.equal('-90%');

    expect(wrapper.find(ProgressBarLabel)).to.have.length(1);
    expect(wrapper.childAt(0).type()).to.equal(ProgressBarLabel);
    expect(wrapper.childAt(0).props().text).to.equal(label);
    expect(wrapper.childAt(0).props().showPercentage).to.equal(false);
    expect(wrapper.childAt(0).props().percentage).to.equal(10);

    processed_actions=100;
    total_actions=100;
    wrapper = shallow(<ProgressBar value={processed_actions} denominator={total_actions} label={label} />);

    expect(wrapper.find('div')).to.have.length(3);
    expect(wrapper.first().hasClass('progress-bar')).to.equal(true);
    expect(wrapper.first().hasClass('danger')).to.equal(true);

    expect(wrapper.childAt(1).hasClass('outer')).to.equal(true);
    expect(wrapper.childAt(1).childAt(0).hasClass('inner')).to.equal(true);
    expect(wrapper.childAt(1).childAt(0).props().className).to.equal('inner');
    expect(wrapper.childAt(1).childAt(0).props().style.left).to.equal('0%');

    expect(wrapper.find(ProgressBarLabel)).to.have.length(1);
    expect(wrapper.childAt(0).type()).to.equal(ProgressBarLabel);
    expect(wrapper.childAt(0).props().text).to.equal(label);
    expect(wrapper.childAt(0).props().showPercentage).to.equal(false);
    expect(wrapper.childAt(0).props().percentage).to.equal(100);
  });

  it('should not display ProgressBarLabel component', () => {
    wrapper = shallow(<ProgressBar value={processed_actions} denominator={total_actions} />);

    expect(wrapper.find(ProgressBarLabel)).to.have.length(0);
  });
});