Merge pull request #68 from zediah/fix-incorrect-index-to-before-change

Fix incorrect index index passed to beforeChange with infinite scrolling

Author: chrishinrichs

src/index.js

@@ -330,7 +330,7 @@ export default class Carousel extends Component {
 
     this._animating = true;
 
-    beforeChange && beforeChange(index, currentSlide, direction);
+    beforeChange && beforeChange(newIndex, currentSlide, direction);
     this.setState({
       transitionDuration
     }, () => {

test/unit/carousel.tests.js

@@ -109,13 +109,15 @@ describe('Carousel', () => {
 
   it('should wrap around from the last to first slide if infinite is true and next is clicked', done => {
     const onSlideTransitionedStub = sinon.stub();
+    const beforeChangeStub = sinon.stub();
 
     renderToJsdom(
       <Carousel initialSlide={ 2 }
         slideWidth='300px'
         viewportWidth='300px'
         infinite={ true }
-        onSlideTransitioned={ onSlideTransitionedStub }>
+        onSlideTransitioned={ onSlideTransitionedStub }
+        beforeChange={ beforeChangeStub }>
         <div id='slide1'/>
         <div id='slide2'/>
         <div id='slide3'/>
@@ -136,13 +138,16 @@ describe('Carousel', () => {
         index: 0,
         direction: 'right'
       });
+      expect(beforeChangeStub).to.have.been.calledWith(0, 2, 'right');
       done();
     });
   });
 
   it('should wrap around from the first to last slide if infinite is true and prev is clicked', done => {
+    const beforeChangeStub = sinon.stub();
+
     renderToJsdom(
-      <Carousel initialSlide={ 2 } slideWidth='300px' viewportWidth='300px' infinite={ true }>
+      <Carousel initialSlide={ 0 } slideWidth='300px' viewportWidth='300px' infinite={ true } beforeChange={ beforeChangeStub }>
         <div id='slide1'/>
         <div id='slide2'/>
         <div id='slide3'/>
@@ -152,12 +157,13 @@ describe('Carousel', () => {
     setImmediate(() => {
       let dots = tree.find('.carousel-dot');
       expect(dots.length).to.equal(3);
-      expect(dots.at(2).prop('className')).to.contain('selected');
-      const nextButton = tree.find('.carousel-right-arrow');
-      nextButton.simulate('click');
-      dots = tree.find('.carousel-dot');
-      expect(dots.at(2).prop('className')).to.not.contain('selected');
       expect(dots.at(0).prop('className')).to.contain('selected');
+      const prevButton = tree.find('.carousel-left-arrow');
+      prevButton.simulate('click');
+      dots = tree.find('.carousel-dot');
+      expect(dots.at(0).prop('className')).to.not.contain('selected');
+      expect(dots.at(2).prop('className')).to.contain('selected');
+      expect(beforeChangeStub).to.have.been.calledWith(2, 0, 'left');
       done();
     });
   });