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 times from 'lodash/times';
|
7 |
|
8 | import { documentEvent, renderComponent, createFakeRaf,
|
9 | nativeTouch, ExampleComponent } from './helpers';
|
10 | import moves from '../gestureMoves';
|
11 | import CustomGesture from '../CustomGesture.react';
|
12 | import TouchHandler from '../TouchHandler';
|
13 |
|
14 |
|
15 |
|
16 | const renderCustomGesture = renderComponent(CustomGesture);
|
17 | const fakeRaf = createFakeRaf();
|
18 |
|
19 | describe("CustomGesture", () => {
|
20 | beforeEach(() => TouchHandler.__Rewire__('raf', fakeRaf));
|
21 | afterEach(() => TouchHandler.__ResetDependency__('raf'));
|
22 |
|
23 | it("should fire 'onGesture' with a qualifying gesture", () => {
|
24 | const alpha = [
|
25 | moves.DOWNRIGHT,
|
26 | moves.RIGHT,
|
27 | moves.UPRIGHT,
|
28 | moves.UP,
|
29 | moves.UPLEFT,
|
30 | moves.LEFT,
|
31 | moves.DOWNLEFT,
|
32 | ];
|
33 | const spy = sinon.spy();
|
34 | const component = renderCustomGesture({
|
35 | onGesture: spy,
|
36 | config: alpha,
|
37 | });
|
38 | TestUtils.Simulate.touchStart(
|
39 | ReactDOM.findDOMNode(component),
|
40 | {nativeEvent: nativeTouch(200, 300)}
|
41 | );
|
42 | documentEvent('touchmove', nativeTouch(210, 310));
|
43 | fakeRaf.step();
|
44 | documentEvent('touchmove', nativeTouch(220, 320));
|
45 | fakeRaf.step();
|
46 | documentEvent('touchmove', nativeTouch(230, 320));
|
47 | fakeRaf.step();
|
48 | documentEvent('touchmove', nativeTouch(240, 310));
|
49 | fakeRaf.step();
|
50 | documentEvent('touchmove', nativeTouch(240, 300));
|
51 | fakeRaf.step();
|
52 | documentEvent('touchmove', nativeTouch(230, 290));
|
53 | fakeRaf.step();
|
54 | documentEvent('touchmove', nativeTouch(220, 290));
|
55 | fakeRaf.step();
|
56 | documentEvent('touchmove', nativeTouch(210, 300));
|
57 | fakeRaf.step();
|
58 | documentEvent('touchmove', nativeTouch(200, 310));
|
59 | fakeRaf.step();
|
60 | documentEvent('touchend');
|
61 | expect(spy.calledOnce).to.be.true;
|
62 | });
|
63 |
|
64 | it("should reset the state when touch is ended", () => {
|
65 | const component = renderCustomGesture();
|
66 | TestUtils.Simulate.touchStart(
|
67 | ReactDOM.findDOMNode(component),
|
68 | {nativeEvent: nativeTouch(200, 300)}
|
69 | );
|
70 | times(10, i => {
|
71 | documentEvent('touchmove', nativeTouch(200 + i * 20, 300));
|
72 | fakeRaf.step();
|
73 | });
|
74 | documentEvent('touchend');
|
75 | expect(component._state).to.eql({ current: null, moves: [] });
|
76 | });
|
77 |
|
78 | it("should reset the state when touch is ended even when there are no moves", () => {
|
79 | const component = renderCustomGesture();
|
80 | TestUtils.Simulate.touchStart(
|
81 | ReactDOM.findDOMNode(component),
|
82 | {nativeEvent: nativeTouch(200, 300)}
|
83 | );
|
84 | documentEvent('touchend');
|
85 | expect(component._state).to.eql({ current: null, moves: [] });
|
86 | });
|
87 |
|
88 | it("should render its child as its only output", () => {
|
89 | const renderer = TestUtils.createRenderer();
|
90 | renderer.render(
|
91 | <CustomGesture>
|
92 | <div></div>
|
93 | </CustomGesture>
|
94 | );
|
95 | const output = renderer.getRenderOutput();
|
96 | expect(output.type).to.be.equal('div');
|
97 | });
|
98 |
|
99 | it("should pass the correct props to nested react-touch components", () => {
|
100 | const renderer = TestUtils.createRenderer();
|
101 | renderer.render(
|
102 | <CustomGesture>
|
103 | <CustomGesture>
|
104 | <ExampleComponent />
|
105 | </CustomGesture>
|
106 | </CustomGesture>
|
107 | );
|
108 | const output = renderer.getRenderOutput();
|
109 | expect(output.props).to.have.keys([
|
110 | '__passThrough',
|
111 | 'children',
|
112 | 'config',
|
113 | 'onGesture',
|
114 | 'onMouseDown',
|
115 | 'onTouchStart',
|
116 | ]);
|
117 | });
|
118 |
|
119 | it("should not pass custom props to its children", () => {
|
120 | const renderer = TestUtils.createRenderer();
|
121 | renderer.render(
|
122 | <CustomGesture>
|
123 | <ExampleComponent />
|
124 | </CustomGesture>
|
125 | );
|
126 | const output = renderer.getRenderOutput();
|
127 | expect(output.props).to.have.keys(['onMouseDown', 'onTouchStart']);
|
128 | });
|
129 |
|
130 | it("should not pass custom props down to DOM nodes", () => {
|
131 | const renderer = TestUtils.createRenderer();
|
132 | renderer.render(
|
133 | <CustomGesture>
|
134 | <div></div>
|
135 | </CustomGesture>
|
136 | );
|
137 | const output = renderer.getRenderOutput();
|
138 | expect(output.props).to.have.keys(['onMouseDown', 'onTouchStart']);
|
139 | });
|
140 |
|
141 | it("should remove listeners when the component unmounts", () => {
|
142 | const container = document.createElement('div');
|
143 | const spy = sinon.spy();
|
144 | const component = ReactDOM.render(
|
145 | <CustomGesture onGesture={spy} config={[moves.RIGHT]}>
|
146 | <div></div>
|
147 | </CustomGesture>,
|
148 | container
|
149 | );
|
150 | TestUtils.Simulate.touchStart(
|
151 | ReactDOM.findDOMNode(component),
|
152 | {nativeEvent: nativeTouch(200, 300)}
|
153 | );
|
154 | times(9, i => {
|
155 | documentEvent('touchmove', nativeTouch(200 + i * 20, 300));
|
156 | fakeRaf.step();
|
157 | });
|
158 | ReactDOM.unmountComponentAtNode(container);
|
159 | documentEvent('touchend');
|
160 | fakeRaf.step();
|
161 | expect(spy.notCalled).to.be.true;
|
162 | });
|
163 | });
|