fix: autoplay interval bug (#253)

* Pause playing when certain control HOCs are manually

* Tests

* Fix trailing comma lint error

Author: ZLevine

src/ButtonBack/ButtonBack.jsx

@@ -55,6 +55,7 @@ export default class ButtonBack extends React.Component {
     carouselStore.setStoreState(
       {
         currentSlide: newCurrentSlide,
+        isPlaying: false,
       },
       onClick !== null && onClick.call(this, ev),
     );

src/ButtonBack/__tests__/ButtonBack.test.jsx

@@ -191,4 +191,20 @@ describe('<ButtonBack />', () => {
     );
     expect(wrapper.find('button').prop('foo')).toEqual('bar');
   });
+  it('should pause autoplay when clicked', () => {
+    const wrapper = mount(
+      <CarouselProvider
+        naturalSlideWidth={100}
+        naturalSlideHeight={125}
+        totalSlides={3}
+        currentSlide={1}
+        step={3}
+        isPlaying
+      >
+        <ButtonBackWithStore>Hello</ButtonBackWithStore>
+      </CarouselProvider>,
+    );
+    wrapper.find('button').simulate('click');
+    expect(wrapper.instance().getStore().state.isPlaying).toBe(false);
+  });
 });

src/ButtonFirst/ButtonFirst.jsx

@@ -29,12 +29,19 @@ const ButtonFirst = class ButtonFirst extends React.Component {
     const { carouselStore, onClick } = this.props;
     carouselStore.setStoreState({
       currentSlide: 0,
+      isPlaying: false,
     }, onClick !== null && onClick.call(this, ev));
   }
 
   render() {
     const {
-      carouselStore, className, currentSlide, disabled, onClick, totalSlides, ...props
+      carouselStore,
+      className,
+      currentSlide,
+      disabled,
+      onClick,
+      totalSlides,
+      ...props
     } = this.props;
 
     const newClassName = cn([

src/ButtonFirst/__tests__/ButtonFirst.test.jsx

@@ -40,4 +40,9 @@ describe('<ButtonFirst />', () => {
     wrapper.find('button').simulate('click');
     expect(onClick.mock.calls.length).toBe(1);
   });
+  it('should pause autoplay when clicked', () => {
+    const wrapper = mount(<ButtonFirst {...props} />);
+    wrapper.find('button').simulate('click');
+    expect(props.carouselStore.getStoreState().isPlaying).toBe(false);
+  });
 });

src/ButtonLast/ButtonLast.jsx

@@ -33,6 +33,7 @@ const ButtonLast = class ButtonLast extends React.Component {
     carouselStore.setStoreState(
       {
         currentSlide: totalSlides - visibleSlides,
+        isPlaying: false,
       },
       onClick !== null && onClick.call(this, ev),
     );

src/ButtonLast/__tests__/ButtonLast.test.jsx

@@ -70,4 +70,14 @@ describe('<ButtonLast />', () => {
     const wrapper = shallow(<ButtonLast {...newProps} />);
     expect(wrapper.prop('disabled')).toBe(false);
   });
+  it('should pause autoplay when clicked', () => {
+    const newProps = Object.assign({}, props, {
+      carouselStore: new Store({
+        isPlaying: true,
+      }),
+    });
+    const wrapper = mount(<ButtonLast {...newProps} />);
+    wrapper.find('button').simulate('click');
+    expect(newProps.carouselStore.getStoreState().isPlaying).toBe(false);
+  });
 });

src/ButtonNext/ButtonNext.jsx

@@ -56,6 +56,7 @@ const ButtonNext = class ButtonNext extends React.PureComponent {
     carouselStore.setStoreState(
       {
         currentSlide: newCurrentSlide,
+        isPlaying: false,
       },
       onClick !== null && onClick.call(this, ev),
     );

src/ButtonNext/__tests__/ButtonNext.test.jsx

@@ -151,4 +151,20 @@ describe('<ButtonNext />', () => {
     expect(instance.carouselStore.state.currentSlide).toBe(newProps.totalSlides - newProps.visibleSlides);
     expect(wrapper.find('button').prop('disabled')).toBe(true);
   });
+  it('should pause autoplay when clicked', () => {
+    const wrapper = mount(
+      <CarouselProvider
+        naturalSlideWidth={100}
+        naturalSlideHeight={125}
+        totalSlides={3}
+        currentSlide={1}
+        step={3}
+        isPlaying
+      >
+        <ButtonNextWithStore>Hello</ButtonNextWithStore>
+      </CarouselProvider>,
+    );
+    wrapper.find('button').simulate('click');
+    expect(wrapper.instance().getStore().state.isPlaying).toBe(false);
+  });
 });

src/Dot/Dot.jsx

@@ -37,6 +37,7 @@ const Dot = class Dot extends React.Component {
 
     carouselStore.setStoreState({
       currentSlide: newSlide,
+      isPlaying: false,
     }, onClick !== null && onClick.call(this, ev));
   }
 

src/Dot/__tests__/Dot.test.jsx

@@ -59,4 +59,9 @@ describe('<Dot />', () => {
     const wrapper = mount(<Dot {...props} slide={0} disabled />);
     expect(wrapper.find('button').prop('disabled')).toBe(true);
   });
+  it('should pause autoplay when clicked', () => {
+    const wrapper = mount(<Dot {...props} slide={10} />);
+    wrapper.find('button').simulate('click');
+    expect(props.carouselStore.getStoreState().isPlaying).toBe(false);
+  });
 });