fix(Tab): use correct onTabChange activeIndex (#1890)

Semantic-Org · Jul 21, 2017 · d58b584 · d58b584
1 parent 18a8c3e
commit d58b584
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/docs/app/Examples/modules/Tab/Usage/TabExampleActiveIndex.js b/docs/app/Examples/modules/Tab/Usage/TabExampleActiveIndex.js
@@ -10,16 +10,17 @@ const panes = [
 class TabExampleActiveIndex extends Component {
   state = { activeIndex: 1 }
 
-  handleChange = e => this.setState({ activeIndex: e.target.value })
+  handleRangeChange = e => this.setState({ activeIndex: e.target.value })
+  handleTabChange = (e, { activeIndex }) => this.setState({ activeIndex })
 
   render() {
     const { activeIndex } = this.state
 
     return (
       <div>
         <div>activeIndex: {activeIndex}</div>
-        <input type='range' max='2' value={activeIndex} onChange={this.handleChange} />
-        <Tab panes={panes} activeIndex={activeIndex} />
+        <input type='range' max='2' value={activeIndex} onChange={this.handleRangeChange} />
+        <Tab panes={panes} activeIndex={activeIndex} onTabChange={this.handleTabChange} />
       </div>
     )
   }

diff --git a/src/modules/Tab/Tab.js b/src/modules/Tab/Tab.js
@@ -79,7 +79,7 @@ class Tab extends Component {
   }
 
   handleItemClick = (e, { index }) => {
-    _.invoke(this.props, 'onTabChange', e, { activeIndex: index, ...this.props })
+    _.invoke(this.props, 'onTabChange', e, { ...this.props, activeIndex: index })
     this.trySetState({ activeIndex: index })
   }
 

diff --git a/test/specs/modules/Tab/Tab-test.js b/test/specs/modules/Tab/Tab-test.js
@@ -107,7 +107,7 @@ describe('Tab', () => {
   })
 
   describe('onTabChange', () => {
-    it('is called with (e, { activeIndex, ...props }) a menu item is clicked', () => {
+    it('is called with (e, { ...props, activeIndex }) a menu item is clicked', () => {
       const activeIndex = 1
       const spy = sandbox.spy()
       const event = { fake: 'event' }
@@ -121,7 +121,30 @@ 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.should.have.been.calledWithMatch(event, { activeIndex, ...props })
+      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)
+    })
+    it('is called with the new proposed activeIndex, not the current', () => {
+      const spy = sandbox.spy()
+
+      const items = mount(<Tab activeIndex={-1} onTabChange={spy} panes={panes} />)
+        .find('MenuItem')
+
+      spy.should.have.callCount(0)
+
+      items.at(0).simulate('click')
+      spy.should.have.callCount(1)
+      spy.lastCall.args[1].should.have.property('activeIndex', 0)
+
+      items.at(1).simulate('click')
+      spy.should.have.callCount(2)
+      spy.lastCall.args[1].should.have.property('activeIndex', 1)
+
+      items.at(2).simulate('click')
+      spy.should.have.callCount(3)
+      spy.lastCall.args[1].should.have.property('activeIndex', 2)
     })
   })
 })