import React from 'react' import assert from 'assert' import { shallow } from 'enzyme' import sinon from 'sinon' import ButtonGroup from '../button-group.component.js' const childButtonSpies = { onClick: sinon.spy(), } sinon.spy(ButtonGroup.prototype, 'handleButtonClick') sinon.spy(ButtonGroup.prototype, 'renderButtons') const mockButtons = [ , , , ] describe('ButtonGroup Component', function () { let wrapper beforeEach(() => { wrapper = shallow({mockButtons}) }) afterEach(() => { childButtonSpies.onClick.resetHistory() ButtonGroup.prototype.handleButtonClick.resetHistory() ButtonGroup.prototype.renderButtons.resetHistory() }) describe('handleButtonClick', () => { it('should set the activeButtonIndex', () => { assert.equal(wrapper.state('activeButtonIndex'), 1) wrapper.instance().handleButtonClick(2) assert.equal(wrapper.state('activeButtonIndex'), 2) }) }) describe('renderButtons', () => { it('should render a button for each child', () => { const childButtons = wrapper.find('.button-group__button') assert.equal(childButtons.length, 3) }) it('should render the correct button with an active state', () => { const childButtons = wrapper.find('.button-group__button') const activeChildButton = wrapper.find('.button-group__button--active') assert.deepEqual(childButtons.get(1), activeChildButton.get(0)) }) it('should call handleButtonClick and the respective button\'s onClick method when a button is clicked', () => { assert.equal(ButtonGroup.prototype.handleButtonClick.callCount, 0) assert.equal(childButtonSpies.onClick.callCount, 0) const childButtons = wrapper.find('.button-group__button') childButtons.at(0).props().onClick() childButtons.at(1).props().onClick() childButtons.at(2).props().onClick() assert.equal(ButtonGroup.prototype.handleButtonClick.callCount, 3) assert.equal(childButtonSpies.onClick.callCount, 3) }) it('should render all child buttons as disabled if props.disabled is true', () => { const childButtons = wrapper.find('.button-group__button') childButtons.forEach(button => { assert.equal(button.props().disabled, undefined) }) wrapper.setProps({ disabled: true }) const disabledChildButtons = wrapper.find('[disabled=true]') assert.equal(disabledChildButtons.length, 3) }) it('should render the children of the button', () => { const mockClass = wrapper.find('.mockClass') assert.equal(mockClass.length, 1) }) }) describe('render', () => { it('should render a div with the expected class and style', () => { assert.equal(wrapper.find('div').at(0).props().className, 'someClassName') assert.deepEqual(wrapper.find('div').at(0).props().style, { color: 'red' }) }) it('should call renderButtons when rendering', () => { assert.equal(ButtonGroup.prototype.renderButtons.callCount, 1) wrapper.instance().render() assert.equal(ButtonGroup.prototype.renderButtons.callCount, 2) }) }) })