diff --git a/spec/pivotal-ui-react/wizard/wizard_spec.js b/spec/pivotal-ui-react/wizard/wizard_spec.js index 9374195d5..6c212f560 100644 --- a/spec/pivotal-ui-react/wizard/wizard_spec.js +++ b/spec/pivotal-ui-react/wizard/wizard_spec.js @@ -119,6 +119,39 @@ describe('Wizard', () => { expect(subject.state.currentPage).toBe(0); }); }); + + describe('when "backComponent" is provided', () => { + let onClickBack; + + beforeEach(() => { + onClickBack = jasmine.createSpy('onClickBack'); + pages.push({ + render: jasmine.createSpy('pageThreeRender'), + onClickBack, + backComponent: + }); + subject::setProps({pages}); + subject.setState({currentPage: 2}); + }); + + it('renders the back component', () => { + expect('.wizard .wizard-footer .col:eq(0) .some-back-button').toExist(); + }); + + it('does not render the back button', () => { + expect('.wizard-back-btn').not.toExist(); + }); + + describe('when clicking the back component', () => { + beforeEach(() => { + $('.wizard .wizard-footer .col:eq(0) .some-back-button').simulate('click'); + }); + + it('does not call the back callback', () => { + expect(onClickBack).not.toHaveBeenCalled(); + }); + }); + }); }); describe('#onClickNext', () => { @@ -287,6 +320,30 @@ describe('Wizard', () => { expect('.wizard-finish-btn.btn-primary').toHaveText('Finish'); }); + describe('when "hideFinishButton" is true', () => { + beforeEach(() => { + const lastPage = pages[pages.length - 1]; + pages[pages.length - 1] = {...lastPage, hideFinishButton: true}; + subject.forceUpdate(); + }); + + it('does not render a "finish" Button', () => { + expect('.wizard-finish-btn').not.toExist(); + }); + }); + + describe('when "hideBackButton" is true', () => { + beforeEach(() => { + const lastPage = pages[pages.length - 1]; + pages[pages.length - 1] = {...lastPage, hideBackButton: true}; + subject.forceUpdate(); + }); + + it('does not render a "back" Button', () => { + expect('.wizard-back-btn').not.toExist(); + }); + }); + it('does not render a "next" PrimaryButton', () => { expect('.wizard-next-btn.btn-primary').not.toExist(); }); @@ -374,5 +431,30 @@ describe('Wizard', () => { expect('.wizard-back-btn').not.toHaveAttr('disabled'); }); }); + + describe('when "finishComponent" is provided', () => { + beforeEach(() => { + pages[pages.length - 1].finishComponent = ; + subject.forceUpdate(); + }); + + it('renders the finish component', () => { + expect('.wizard .wizard-footer .col:eq(1) .some-custom-button').toExist(); + }); + + it('does not render the finish button', () => { + expect('.wizard-finish-btn').not.toExist(); + }); + + describe('when clicking the finish component', () => { + beforeEach(() => { + $('.wizard .wizard-footer .col:eq(1) .some-custom-button').simulate('click'); + }); + + it('does not call the finish callback', () => { + expect(finish).not.toHaveBeenCalled(); + }); + }); + }); }); }); \ No newline at end of file diff --git a/src/react/wizard/wizard.js b/src/react/wizard/wizard.js index cffb3924f..2141681f0 100644 --- a/src/react/wizard/wizard.js +++ b/src/react/wizard/wizard.js @@ -5,7 +5,7 @@ import {PrimaryButton} from '../buttons'; import {Icon} from '../iconography'; import classnames from 'classnames'; -function doNothing() { +function noop() { } export class Wizard extends React.Component { @@ -22,7 +22,7 @@ export class Wizard extends React.Component { static defaultProps = { pages: [], cancelText: 'Cancel', - finish: doNothing, + finish: noop, finishText: 'Finish', saving: false, savingText: 'Saving' @@ -83,7 +83,9 @@ export class Wizard extends React.Component { const {currentPage} = this.state; const page = pages[currentPage]; - const {hideNextButton, nextText = () => 'Next'} = page; + const { + hideBackButton, hideNextButton, hideFinishButton, nextText = () => 'Next', backComponent, finishComponent + } = page; const lastPage = currentPage >= pages.length - 1; const firstPage = currentPage === 0; @@ -98,19 +100,19 @@ export class Wizard extends React.Component { onClick={this.onClickCancel}>{cancelText} ); - const backButton = ( - Back - ); + const backButton = backComponent || ( + Back + ); const icon = saving && ; - const finishButton = ( - {saving ? savingText : finishText} - ); + const finishButton = finishComponent || ( + {saving ? savingText : finishText} + ); const nextButton = ( {cancel && cancelButton} - {!firstPage && backButton} + {!firstPage && !hideBackButton && backButton} {!lastPage && !hideNextButton && nextButton} - {lastPage && finishButton} + {lastPage && !hideFinishButton && finishButton}