Skip to content
Permalink
Browse files

fix: enzyme not properly firing event handlers during testing

This is caused due to the previous implementation using manual
event handlers, rather than the React event handlers.

Also, added an additional unit test for touch events for Carousel
  • Loading branch information
bpas247 committed Jul 10, 2019
1 parent 32c1f3e commit 085f8624eea770da2b3dcd03cdcfeda3da0aa869
Showing with 14 additions and 20 deletions.
  1. +2 −18 src/Carousel.js
  2. +12 −2 test/CarouselSpec.js
@@ -138,13 +138,6 @@ class Carousel extends React.Component {

componentDidMount() {
this.cycle();
if (this.carousel && this.carousel.current && this.props.touch) {
this.carousel.current.addEventListener(
'touchstart',
this.handleTouchStart,
);
this.carousel.current.addEventListener('touchend', this.handleTouchEnd);
}
}

static getDerivedStateFromProps(
@@ -233,16 +226,6 @@ class Carousel extends React.Component {
componentWillUnmount() {
clearTimeout(this.timeout);
this.isUnmounted = true;
if (this.carousel && this.carousel.current && this.props.touch) {
this.carousel.current.removeEventListener(
'touchstart',
this.handleTouchStart,
);
this.carousel.current.removeEventListener(
'touchend',
this.handleTouchEnd,
);
}
}

handleTouchStart = e => {
@@ -477,7 +460,6 @@ class Carousel extends React.Component {
indicators,
controls,
wrap,
// eslint-disable-next-line no-unused-vars
touch,
prevIcon,
prevLabel,
@@ -504,6 +486,8 @@ class Carousel extends React.Component {
return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
<Component
onTouchStart={touch ? this.handleTouchStart : undefined}
onTouchEnd={touch ? this.handleTouchEnd : undefined}
{...props}
className={classNames(
className,
@@ -298,11 +298,21 @@ describe('<Carousel>', () => {
</Carousel>,
);

wrapper.simulate('touchStart', { changedTouches: [{ screenX: 50 }] });
wrapper.simulate('touchEnd', { changedTouches: [{ screenX: 0 }] });

clock.tick(50);
expect(onSelectSpy).to.have.been.calledOnce;
expect(onSelectSpy.getCall(0).args[0]).to.equal(1);

clock.tick(150);

wrapper.simulate('touchStart', { changedTouches: [{ screenX: 0 }] });
wrapper.simulate('touchEnd', { changedTouches: [{ screenX: 50 }] });

clock.tick(100);
expect(onSelectSpy).to.have.been.calledOnce;
clock.tick(50);
expect(onSelectSpy).to.have.been.calledTwice;
expect(onSelectSpy.getCall(1).args[0]).to.equal(0);
} finally {
clock.restore();
}

0 comments on commit 085f862

Please sign in to comment.
You can’t perform that action at this time.