fix(Accordion) fix wrong indexes when using Accordion.Title and Accordion.Content (#832)

* fix(Accordion) fix wrong indexes when using Accordion.Title and Accordion.Content

* test(Accordion): add activeIndex test, move onClick test

Author: Michael Besure

src/modules/Accordion/Accordion.js

@@ -101,24 +101,28 @@ export default class Accordion extends Component {
   renderChildren = () => {
     const { children } = this.props
     const { activeIndex } = this.state
+    let titleIndex = 0
+    let contentIndex = 0
 
-    return Children.map(children, (child, i) => {
+    return Children.map(children, (child) => {
       const isTitle = child.type === AccordionTitle
       const isContent = child.type === AccordionContent
 
       if (isTitle) {
-        const isActive = _.has(child, 'props.active') ? child.props.active : activeIndex === i
+        const currentIndex = titleIndex
+        const isActive = _.has(child, 'props.active') ? child.props.active : activeIndex === currentIndex
         const onClick = (e) => {
-          this.handleTitleClick(e, i)
-          if (child.props.onClick) child.props.onClick(e, i)
+          this.handleTitleClick(e, currentIndex)
+          if (child.props.onClick) child.props.onClick(e, currentIndex)
         }
+        titleIndex++
         return cloneElement(child, { ...child.props, active: isActive, onClick })
       }
 
       if (isContent) {
-        // content must be the a sibling too title
-        // it is active if the active title index that precedes it is active
-        const isActive = _.has(child, 'props.active') ? child.props.active : activeIndex === i - 1
+        const currentIndex = contentIndex
+        const isActive = _.has(child, 'props.active') ? child.props.active : activeIndex === currentIndex
+        contentIndex++
         return cloneElement(child, { ...child.props, active: isActive })
       }
 

test/specs/modules/Accordion/Accordion-test.js

@@ -77,6 +77,29 @@ describe('Accordion', () => {
       wrapper
         .should.have.state('activeIndex', -1)
     })
+    it('sets the correct pair of title/content active', () => {
+      const wrapper = shallow(
+        <Accordion>
+          <Accordion.Title />
+          <Accordion.Content />
+          <Accordion.Title />
+          <Accordion.Content />
+          <Accordion.Title />
+          <Accordion.Content />
+        </Accordion>
+      )
+      wrapper.setProps({ activeIndex: 0 })
+      wrapper.childAt(0).should.have.prop('active', true)
+      wrapper.childAt(1).should.have.prop('active', true)
+
+      wrapper.setProps({ activeIndex: 1 })
+      wrapper.childAt(2).should.have.prop('active', true)
+      wrapper.childAt(3).should.have.prop('active', true)
+
+      wrapper.setProps({ activeIndex: 2 })
+      wrapper.childAt(4).should.have.prop('active', true)
+      wrapper.childAt(5).should.have.prop('active', true)
+    })
   })
 
   describe('defaultActiveIndex', () => {
@@ -89,6 +112,7 @@ describe('Accordion', () => {
   describe('onTitleClick', () => {
     it('is called with (event, index)', () => {
       const spy = sandbox.spy()
+      const event = { foo: 'bar' }
       const titles = mount(
         <Accordion onTitleClick={spy}>
           <Accordion.Title />
@@ -97,11 +121,11 @@ describe('Accordion', () => {
       )
         .find('AccordionTitle')
 
-      titles.at(0).simulate('click')
-      spy.should.have.been.calledWithMatch({}, 0)
+      titles.at(0).simulate('click', event)
+      spy.should.have.been.calledWithMatch(event, 0)
 
-      titles.at(1).simulate('click')
-      spy.should.have.been.calledWithMatch({}, 1)
+      titles.at(1).simulate('click', event)
+      spy.should.have.been.calledWithMatch(event, 1)
     })
   })
 
@@ -184,6 +208,7 @@ describe('Accordion', () => {
 
       it('is called with (event, index) on AccordionTitle click', () => {
         const spy = sandbox.spy()
+        const event = { foo: 'bar' }
         const panels = [{
           onClick: spy,
           title: 'First panel',
@@ -192,15 +217,22 @@ describe('Accordion', () => {
           onClick: spy,
           title: 'Second panel',
           content: 'second panel content',
+        }, {
+          onClick: spy,
+          title: 'Third panel',
+          content: 'third panel content',
         }]
         const titles = mount(<Accordion panels={panels} />)
           .find('AccordionTitle')
 
-        titles.at(0).simulate('click')
-        spy.should.have.been.calledWithMatch({}, 0)
+        titles.at(0).simulate('click', event)
+        spy.should.have.been.calledWithMatch(event, 0)
+
+        titles.at(1).simulate('click', event)
+        spy.should.have.been.calledWithMatch(event, 1)
 
-        titles.at(1).simulate('click')
-        spy.should.have.been.calledWithMatch({}, 1)
+        titles.at(2).simulate('click', event)
+        spy.should.have.been.calledWithMatch(event, 2)
       })
     })
   })