From 0e570681008dd50f03fcd6cec9d1cadf12c00341 Mon Sep 17 00:00:00 2001 From: Zach Levine Date: Tue, 17 Mar 2020 09:09:11 -0700 Subject: [PATCH] fix: autoplay interval bug (#253) * Pause playing when certain control HOCs are manually * Tests * Fix trailing comma lint error --- src/ButtonBack/ButtonBack.jsx | 1 + src/ButtonBack/__tests__/ButtonBack.test.jsx | 16 ++++++++++++++++ src/ButtonFirst/ButtonFirst.jsx | 9 ++++++++- src/ButtonFirst/__tests__/ButtonFirst.test.jsx | 5 +++++ src/ButtonLast/ButtonLast.jsx | 1 + src/ButtonLast/__tests__/ButtonLast.test.jsx | 10 ++++++++++ src/ButtonNext/ButtonNext.jsx | 1 + src/ButtonNext/__tests__/ButtonNext.test.jsx | 16 ++++++++++++++++ src/Dot/Dot.jsx | 1 + src/Dot/__tests__/Dot.test.jsx | 5 +++++ 10 files changed, 64 insertions(+), 1 deletion(-) diff --git a/src/ButtonBack/ButtonBack.jsx b/src/ButtonBack/ButtonBack.jsx index 48e43307..953410db 100644 --- a/src/ButtonBack/ButtonBack.jsx +++ b/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), ); diff --git a/src/ButtonBack/__tests__/ButtonBack.test.jsx b/src/ButtonBack/__tests__/ButtonBack.test.jsx index 8aa6a922..2f349e70 100644 --- a/src/ButtonBack/__tests__/ButtonBack.test.jsx +++ b/src/ButtonBack/__tests__/ButtonBack.test.jsx @@ -191,4 +191,20 @@ describe('', () => { ); expect(wrapper.find('button').prop('foo')).toEqual('bar'); }); + it('should pause autoplay when clicked', () => { + const wrapper = mount( + + Hello + , + ); + wrapper.find('button').simulate('click'); + expect(wrapper.instance().getStore().state.isPlaying).toBe(false); + }); }); diff --git a/src/ButtonFirst/ButtonFirst.jsx b/src/ButtonFirst/ButtonFirst.jsx index 6f5107d9..7b16be3f 100644 --- a/src/ButtonFirst/ButtonFirst.jsx +++ b/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([ diff --git a/src/ButtonFirst/__tests__/ButtonFirst.test.jsx b/src/ButtonFirst/__tests__/ButtonFirst.test.jsx index 71e4fe2b..eb8860d0 100644 --- a/src/ButtonFirst/__tests__/ButtonFirst.test.jsx +++ b/src/ButtonFirst/__tests__/ButtonFirst.test.jsx @@ -40,4 +40,9 @@ describe('', () => { wrapper.find('button').simulate('click'); expect(onClick.mock.calls.length).toBe(1); }); + it('should pause autoplay when clicked', () => { + const wrapper = mount(); + wrapper.find('button').simulate('click'); + expect(props.carouselStore.getStoreState().isPlaying).toBe(false); + }); }); diff --git a/src/ButtonLast/ButtonLast.jsx b/src/ButtonLast/ButtonLast.jsx index 3c5c318c..81861f26 100644 --- a/src/ButtonLast/ButtonLast.jsx +++ b/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), ); diff --git a/src/ButtonLast/__tests__/ButtonLast.test.jsx b/src/ButtonLast/__tests__/ButtonLast.test.jsx index f90629b9..9992e0e5 100644 --- a/src/ButtonLast/__tests__/ButtonLast.test.jsx +++ b/src/ButtonLast/__tests__/ButtonLast.test.jsx @@ -70,4 +70,14 @@ describe('', () => { const wrapper = shallow(); 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(); + wrapper.find('button').simulate('click'); + expect(newProps.carouselStore.getStoreState().isPlaying).toBe(false); + }); }); diff --git a/src/ButtonNext/ButtonNext.jsx b/src/ButtonNext/ButtonNext.jsx index 3ad501a9..cf78225c 100644 --- a/src/ButtonNext/ButtonNext.jsx +++ b/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), ); diff --git a/src/ButtonNext/__tests__/ButtonNext.test.jsx b/src/ButtonNext/__tests__/ButtonNext.test.jsx index 550c921e..ae8e94ec 100644 --- a/src/ButtonNext/__tests__/ButtonNext.test.jsx +++ b/src/ButtonNext/__tests__/ButtonNext.test.jsx @@ -151,4 +151,20 @@ describe('', () => { 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( + + Hello + , + ); + wrapper.find('button').simulate('click'); + expect(wrapper.instance().getStore().state.isPlaying).toBe(false); + }); }); diff --git a/src/Dot/Dot.jsx b/src/Dot/Dot.jsx index 5217f397..963f407c 100644 --- a/src/Dot/Dot.jsx +++ b/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)); } diff --git a/src/Dot/__tests__/Dot.test.jsx b/src/Dot/__tests__/Dot.test.jsx index bc7c9e76..c5f412a5 100644 --- a/src/Dot/__tests__/Dot.test.jsx +++ b/src/Dot/__tests__/Dot.test.jsx @@ -59,4 +59,9 @@ describe('', () => { const wrapper = mount(); expect(wrapper.find('button').prop('disabled')).toBe(true); }); + it('should pause autoplay when clicked', () => { + const wrapper = mount(); + wrapper.find('button').simulate('click'); + expect(props.carouselStore.getStoreState().isPlaying).toBe(false); + }); });