2r-stepper/__tests__/2r-stepper.spec.js

2R library stepper component implemented in React

import Stepper from '../2r-stepper.js';
import React from 'react/addons';


describe('Testing `Stepper` component.', () => {

  let TestUtils = React.addons.TestUtils;
  let instance;

  describe('Method: constructor()', () => {

    it('Should correctly initialize state on the component when no props are passed', () => {
      instance = TestUtils.renderIntoDocument(<Stepper />);

      expect(instance.state).toBeDefined();
      expect(instance.state.val).toBe(0);
    });

    it('Should correctly initialize state on the component when props are passed', () => {
      let props = {
        initialValue: 1
      };

      instance = TestUtils.renderIntoDocument(<Stepper { ...props } />);

      expect(instance.state).toBeDefined();
      expect(instance.state.val).toBe(1);
    });

    it('Should correctly initialize config on the component when no props are passed', () => {
      instance = TestUtils.renderIntoDocument(<Stepper />);

      expect(instance.config).toBeDefined();
      expect(instance.config.stepValue).toBe(1);
      expect(instance.config.allowNegativeValues).toBe(false);
    });

    it('Should correctly initialize config on the component when props are passed', () => {
      let props = {
        stepValue: 2,
        allowNegativeValues: true
      };

      instance = TestUtils.renderIntoDocument(<Stepper { ...props } />);

      expect(instance.config).toBeDefined();
      expect(instance.config.stepValue).toBe(2);
      expect(instance.config.allowNegativeValues).toBe(true);
    });

  });

  describe('Method: constructBaseWrapperClasses()', () => {

    it('Should return only the base wrapper class if no classes are passed via props', () => {
      instance = TestUtils.renderIntoDocument(<Stepper />);

      let finalClasses = instance.constructBaseWrapperClasses();
      expect(finalClasses.trim()).toBe('2r-stepper');
    });

    it('Should return combined string when classes are passed via props', () => {
      let props = {
        classes: 'classOne classTwo'
      };

      instance = TestUtils.renderIntoDocument(<Stepper { ...props } />);

      let finalClasses = instance.constructBaseWrapperClasses();
      expect(finalClasses).toBe('2r-stepper classOne classTwo');
    });

  });

  describe('Metod: incrementValue()', () => {

    it('Should correctly increment the value on the state when calling the method', () => {
      instance = TestUtils.renderIntoDocument(<Stepper />);

      spyOn(instance, 'setState');
      instance.incrementValue();

      expect(instance.setState).toHaveBeenCalledWith({
        val: 1
      });
    });

  });

  describe('Metod: decrementValue()', () => {

    it('Should correctly increment the value on the state when calling the method', () => {
      let props = {
        initialValue: 2
      };

      instance = TestUtils.renderIntoDocument(<Stepper { ...props } />);

      spyOn(instance, 'setState');
      instance.decrementValue();

      expect(instance.setState).toHaveBeenCalledWith({
        val: 1
      });
    });

  });

  describe('Metod: disableDecrementButton()', () => {

    it('Should return true when value is zero and allowNegativeValues is false', () => {
      instance = TestUtils.renderIntoDocument(<Stepper />);

      expect(instance.disableDecrementButton()).toBe(true);
    });

    it('Should return false when value is above zero and allowNegativeValues is false', () => {
      let props = {
        initialValue: 1
      };

      instance = TestUtils.renderIntoDocument(<Stepper { ...props } />);

      expect(instance.disableDecrementButton()).toBe(false);
    });

  });

  describe('Method: render()', () => {

    it('Should correctly create the markup of the component', () => {
      instance = TestUtils.renderIntoDocument(<Stepper />);

      let wrapper = TestUtils.findRenderedDOMComponentWithClass(instance, '2r-stepper');
      expect(wrapper).toBeDefined();

      let buttons = TestUtils.scryRenderedDOMComponentsWithClass(instance, '2r-stepper__button');
      let buttonDecrement = buttons[0].getDOMNode();
      let buttonIncrement = buttons[1].getDOMNode();

      expect(buttonDecrement).toBeDefined();
      expect(buttonDecrement.textContent).toBe('-');

      expect(buttonIncrement).toBeDefined();
      expect(buttonIncrement.textContent).toBe('+');

      let value = TestUtils.findRenderedDOMComponentWithClass(instance, '2r-stepper__value');
      expect(value.getDOMNode().textContent).toBe('0');
    });

  });

});