diff --git a/src/modules/Tab/Tab.d.ts b/src/modules/Tab/Tab.d.ts index 7d71cb55fa..5f4438f94e 100644 --- a/src/modules/Tab/Tab.d.ts +++ b/src/modules/Tab/Tab.d.ts @@ -30,11 +30,15 @@ export interface StrictTabProps { * Called on tab change. * * @param {SyntheticEvent} event - React's original SyntheticEvent. - * @param {object} data - The proposed new Tab.Pane. - * @param {object} data.activeIndex - The new proposed activeIndex. - * @param {object} data.panes - Props of the new proposed active pane. + * @param {object} props - The proposed new Tab.Pane. + * @param {object} props.panes - Props of the new proposed active pane. + * @param {number} activeIndex - The current activeIndex. */ - onTabChange?: (event: React.MouseEvent, data: TabProps) => void + onTabChange?: ( + event: React.MouseEvent, + props: TabProps, + activeIndex: number, + ) => void /** * Array of objects describing each Menu.Item and Tab.Pane: diff --git a/src/modules/Tab/Tab.js b/src/modules/Tab/Tab.js index cbbac2bf46..9740256480 100644 --- a/src/modules/Tab/Tab.js +++ b/src/modules/Tab/Tab.js @@ -34,7 +34,7 @@ const Tab = React.forwardRef(function (props, ref) { }) const handleItemClick = (e, { index }) => { - _.invoke(props, 'onTabChange', e, { ...props, activeIndex: index }) + _.invoke(props, 'onTabChange', e, props, index) setActiveIndex(index) } diff --git a/test/specs/modules/Tab/Tab-test.js b/test/specs/modules/Tab/Tab-test.js index b662824ff5..0ba68797d2 100644 --- a/test/specs/modules/Tab/Tab-test.js +++ b/test/specs/modules/Tab/Tab-test.js @@ -154,11 +154,11 @@ describe('Tab', () => { }) describe('onTabChange', () => { - it('is called with (e, { ...props, activeIndex }) a menu item is clicked', () => { + it('is called when a menu item is clicked', () => { const activeIndex = 1 - const spy = sandbox.spy() + const onTabChange = sandbox.spy() const event = { fake: 'event' } - const props = { onTabChange: spy, panes } + const props = { onTabChange, panes } mount() .find('MenuItem') @@ -167,30 +167,29 @@ describe('Tab', () => { // Since React will have generated a key the returned tab won't match // exactly so match on the props instead. - spy.should.have.been.calledOnce() - spy.firstCall.args[0].should.have.property('fake', 'event') - spy.firstCall.args[1].should.have.property('activeIndex', 1) - spy.firstCall.args[1].should.have.property('onTabChange', spy) - spy.firstCall.args[1].should.have.property('panes', panes) + onTabChange.should.have.been.calledOnce() + onTabChange.should.have.been.calledWithMatch(event, props, 1) }) it('is called with the new proposed activeIndex, not the current', () => { - const spy = sandbox.spy() + const onTabChange = sandbox.spy() - const items = mount().find('MenuItem') + const items = mount().find( + 'MenuItem', + ) - spy.should.have.callCount(0) + onTabChange.should.have.callCount(0) items.at(0).simulate('click') - spy.should.have.callCount(1) - spy.lastCall.args[1].should.have.property('activeIndex', 0) + onTabChange.should.have.callCount(1) + onTabChange.lastCall.args[2].should.equal(0) items.at(1).simulate('click') - spy.should.have.callCount(2) - spy.lastCall.args[1].should.have.property('activeIndex', 1) + onTabChange.should.have.callCount(2) + onTabChange.lastCall.args[2].should.equal(1) items.at(2).simulate('click') - spy.should.have.callCount(3) - spy.lastCall.args[1].should.have.property('activeIndex', 2) + onTabChange.should.have.callCount(3) + onTabChange.lastCall.args[2].should.equal(2) }) })