1 | import { expect } from 'chai';
|
2 | import sinon from 'sinon';
|
3 | import React from 'react';
|
4 | import ReactDOM from 'react-dom';
|
5 | import TestUtils from 'react-addons-test-utils';
|
6 | import omitBy from 'lodash/omitBy';
|
7 | import isNull from 'lodash/isNull';
|
8 |
|
9 | import { documentEvent, renderComponent, createFakeRaf,
|
10 | nativeTouch, ExampleComponent } from './helpers';
|
11 | import Swipeable from '../Swipeable.react';
|
12 | import defineSwipe from '../defineSwipe';
|
13 | import TouchHandler from '../TouchHandler';
|
14 |
|
15 |
|
16 |
|
17 | const renderSwipeable = renderComponent(Swipeable);
|
18 | const fakeRaf = createFakeRaf();
|
19 |
|
20 | const testSwipeDirection = (callback, failPos, successPos, config=null) => {
|
21 | const spy = sinon.spy();
|
22 | const props = omitBy({ [callback]: spy, config }, isNull);
|
23 | const swipeable = renderSwipeable(props);
|
24 | TestUtils.Simulate.touchStart(
|
25 | ReactDOM.findDOMNode(swipeable),
|
26 | {nativeEvent: nativeTouch(200, 300)}
|
27 | );
|
28 | documentEvent('touchmove', { touches: [failPos] });
|
29 | fakeRaf.step();
|
30 | expect(spy.calledOnce).to.be.false;
|
31 | documentEvent('touchmove', { touches: [successPos] });
|
32 | fakeRaf.step();
|
33 | expect(spy.calledOnce).to.be.true;
|
34 | };
|
35 |
|
36 | describe("Swipeable", () => {
|
37 | beforeEach(() => TouchHandler.__Rewire__('raf', fakeRaf));
|
38 | afterEach(() => TouchHandler.__ResetDependency__('raf'));
|
39 |
|
40 | it("should fire 'onSwipeLeft' when swiped left", () => {
|
41 | testSwipeDirection('onSwipeLeft', { clientX: 101 }, { clientX: 100 });
|
42 | });
|
43 |
|
44 | it("should fire 'onSwipeRight' when swiped right", () => {
|
45 | testSwipeDirection('onSwipeRight', { clientX: 299 }, { clientX: 300 });
|
46 | });
|
47 |
|
48 | it("should fire 'onSwipeUp' when swiped up", () => {
|
49 | testSwipeDirection('onSwipeUp', { clientY: 201 }, { clientY: 200 });
|
50 | });
|
51 |
|
52 | it("should fire 'onSwipeDown' when swiped down", () => {
|
53 | testSwipeDirection('onSwipeDown', { clientY: 399 }, { clientY: 400 });
|
54 | });
|
55 |
|
56 | it("should reset the state when touch is ended", () => {
|
57 | const swipeable = renderSwipeable();
|
58 | TestUtils.Simulate.touchStart(
|
59 | ReactDOM.findDOMNode(swipeable),
|
60 | {nativeEvent: nativeTouch(200, 300)}
|
61 | );
|
62 | documentEvent('touchend');
|
63 | expect(swipeable.state).to.eql(
|
64 | {initial: null, current: null, deltas: { dx: 0, dy: 0 }}
|
65 | );
|
66 | });
|
67 |
|
68 | it("should alter its distance threshold when 'swipeDistance is used", () => {
|
69 | const config = defineSwipe({swipeDistance: 75});
|
70 | testSwipeDirection('onSwipeLeft', { clientX: 126 }, { clientX: 125 }, config);
|
71 | });
|
72 |
|
73 | it("should render its child as its only output", () => {
|
74 | const renderer = TestUtils.createRenderer();
|
75 | renderer.render(<Swipeable><div></div></Swipeable>);
|
76 | const output = renderer.getRenderOutput();
|
77 | expect(output.type).to.be.equal('div');
|
78 | });
|
79 |
|
80 | it("should pass the correct props to nested react-touch components", () => {
|
81 | const renderer = TestUtils.createRenderer();
|
82 | renderer.render(<Swipeable>
|
83 | <Swipeable><div></div></Swipeable>
|
84 | </Swipeable>);
|
85 | const output = renderer.getRenderOutput();
|
86 | expect(output.props).to.have.keys([
|
87 | '__passThrough',
|
88 | 'children',
|
89 | 'config',
|
90 | 'onMouseDown',
|
91 | 'onTouchStart',
|
92 | ]);
|
93 | });
|
94 |
|
95 | it("should not pass custom props to its children", () => {
|
96 | const renderer = TestUtils.createRenderer();
|
97 | renderer.render(<Swipeable><ExampleComponent /></Swipeable>);
|
98 | const output = renderer.getRenderOutput();
|
99 | expect(output.props).to.have.keys(['onMouseDown', 'onTouchStart']);
|
100 | });
|
101 |
|
102 | it("should not pass custom props down to DOM nodes", () => {
|
103 | const renderer = TestUtils.createRenderer();
|
104 | renderer.render(<Swipeable><div></div></Swipeable>);
|
105 | const output = renderer.getRenderOutput();
|
106 | expect(output.props).to.have.keys(['onMouseDown', 'onTouchStart']);
|
107 | });
|
108 |
|
109 | it("should remove listeners when the component unmounts", () => {
|
110 | const container = document.createElement('div');
|
111 | const spy = sinon.spy();
|
112 | const swipeable = ReactDOM.render(
|
113 | <Swipeable onSwipeLeft={spy}>
|
114 | <div></div>
|
115 | </Swipeable>,
|
116 | container
|
117 | );
|
118 | TestUtils.Simulate.touchStart(
|
119 | ReactDOM.findDOMNode(swipeable),
|
120 | {nativeEvent: nativeTouch(200, 300)}
|
121 | );
|
122 | ReactDOM.unmountComponentAtNode(container);
|
123 | documentEvent('touchmove', nativeTouch(100, 300));
|
124 | fakeRaf.step();
|
125 | expect(spy.notCalled).to.be.true;
|
126 | });
|
127 | });
|