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 |
|
7 | import { documentEvent, renderComponent, createFakeRaf,
|
8 | nativeTouch, ExampleComponent } from './helpers';
|
9 | import Draggable from '../Draggable.react';
|
10 | import TouchHandler from '../TouchHandler';
|
11 |
|
12 |
|
13 |
|
14 | const renderDraggable = renderComponent(Draggable);
|
15 | const fakeRaf = createFakeRaf();
|
16 |
|
17 | describe("Draggable", () => {
|
18 | beforeEach(() => TouchHandler.__Rewire__('raf', fakeRaf));
|
19 | afterEach(() => TouchHandler.__ResetDependency__('raf'));
|
20 |
|
21 | it("should pass the 'translate' position updates to the callback child", () => {
|
22 | let update;
|
23 | const draggable = TestUtils.renderIntoDocument(
|
24 | <Draggable position={{translateX: 150, translateY: 150}}>
|
25 | {({ translateX, translateY }) => {
|
26 | update = { translateX, translateY };
|
27 | return <div></div>;
|
28 | }}
|
29 | </Draggable>
|
30 | );
|
31 | TestUtils.Simulate.touchStart(
|
32 | ReactDOM.findDOMNode(draggable),
|
33 | {nativeEvent: nativeTouch(200, 300)}
|
34 | );
|
35 | documentEvent('touchmove', nativeTouch(220, 280));
|
36 | fakeRaf.step();
|
37 | expect(update).to.eql({translateX: 170, translateY: 130});
|
38 | });
|
39 |
|
40 | it("should pass the absolute position updates to the callback child", () => {
|
41 | let update;
|
42 | const draggable = TestUtils.renderIntoDocument(
|
43 | <Draggable position={{left: 150, top: 150, bottom: 10, right: 20}}>
|
44 | {({ top, left, right, bottom }) => {
|
45 | update = { top, left, right, bottom };
|
46 | return <div></div>;
|
47 | }}
|
48 | </Draggable>
|
49 | );
|
50 | TestUtils.Simulate.touchStart(
|
51 | ReactDOM.findDOMNode(draggable),
|
52 | {nativeEvent: nativeTouch(200, 300)}
|
53 | );
|
54 | documentEvent('touchmove', nativeTouch(220, 280));
|
55 | fakeRaf.step();
|
56 | expect(update).to.eql({left: 170, top: 130, bottom: 30, right: 0});
|
57 | });
|
58 |
|
59 | it("should call the 'onDrag' callback on touchmove events", () => {
|
60 | const initial = {translateX: 100, translateY: 100};
|
61 | const spy = sinon.spy();
|
62 | const draggable = renderDraggable({position: initial, onDrag: spy});
|
63 | TestUtils.Simulate.touchStart(
|
64 | ReactDOM.findDOMNode(draggable),
|
65 | {nativeEvent: nativeTouch(200, 300)}
|
66 | );
|
67 | documentEvent('touchmove', nativeTouch(220, 280));
|
68 | fakeRaf.step();
|
69 | expect(spy.calledOnce).to.be.true;
|
70 | });
|
71 |
|
72 | it("should pass the updated positions to the 'onDrag' callback", () => {
|
73 | const initial = {translateX: 100, translateY: 100};
|
74 | const spy = sinon.spy();
|
75 | const draggable = renderDraggable({position: initial, onDrag: spy});
|
76 | TestUtils.Simulate.touchStart(
|
77 | ReactDOM.findDOMNode(draggable),
|
78 | {nativeEvent: nativeTouch(200, 300)}
|
79 | );
|
80 | documentEvent('touchmove', nativeTouch(220, 280));
|
81 | fakeRaf.step();
|
82 | expect(spy.calledWith({translateX: 120, translateY: 80})).to.be.true;
|
83 | });
|
84 |
|
85 | it("should pass the delta updates to the callback child", () => {
|
86 | let update;
|
87 | const draggable = TestUtils.renderIntoDocument(
|
88 | <Draggable position={{left: 150, top: 150}}>
|
89 | {({ dx, dy }) => {
|
90 | update = { dx, dy };
|
91 | return <div></div>;
|
92 | }}
|
93 | </Draggable>
|
94 | );
|
95 | TestUtils.Simulate.touchStart(
|
96 | ReactDOM.findDOMNode(draggable),
|
97 | {nativeEvent: nativeTouch(200, 300)}
|
98 | );
|
99 | documentEvent('touchmove', nativeTouch(220, 280));
|
100 | fakeRaf.step();
|
101 | expect(update).to.eql({dx: 20, dy: -20});
|
102 | });
|
103 |
|
104 | it("should call 'onDragEnd' on touchend", () => {
|
105 | const initial = {translateX: 100, translateY: 100};
|
106 | const spy = sinon.spy();
|
107 | const draggable = renderDraggable({position: initial, onDragEnd: spy});
|
108 | TestUtils.Simulate.touchStart(
|
109 | ReactDOM.findDOMNode(draggable),
|
110 | {nativeEvent: nativeTouch(200, 300)}
|
111 | );
|
112 | documentEvent('touchend');
|
113 | expect(spy.calledOnce).to.be.true;
|
114 | });
|
115 |
|
116 | it("should render its child as its only output", () => {
|
117 | const renderer = TestUtils.createRenderer();
|
118 | renderer.render(
|
119 | <Draggable position={{translateX: 100, translateY: 100}}>
|
120 | <div></div>
|
121 | </Draggable>
|
122 | );
|
123 | const output = renderer.getRenderOutput();
|
124 | expect(output.type).to.be.equal('div');
|
125 | });
|
126 |
|
127 | it("should pass the correct props to nested react-touch components", () => {
|
128 | const renderer = TestUtils.createRenderer();
|
129 | renderer.render(
|
130 | <Draggable position={{translateX: 100, translateY: 100}}>
|
131 | <Draggable position={{translateX: 100, translateY: 100}}>
|
132 | <ExampleComponent />
|
133 | </Draggable>
|
134 | </Draggable>
|
135 | );
|
136 | const output = renderer.getRenderOutput();
|
137 | expect(output.props).to.have.keys([
|
138 | '__passThrough',
|
139 | 'children',
|
140 | 'position',
|
141 | 'onMouseDown',
|
142 | 'onTouchStart',
|
143 | ]);
|
144 | });
|
145 |
|
146 |
|
147 | it("should not pass custom props to its children", () => {
|
148 | const renderer = TestUtils.createRenderer();
|
149 | renderer.render(
|
150 | <Draggable position={{translateX: 100, translateY: 100}}>
|
151 | <ExampleComponent />
|
152 | </Draggable>
|
153 | );
|
154 | const output = renderer.getRenderOutput();
|
155 | expect(output.props).to.have.keys(['onMouseDown', 'onTouchStart']);
|
156 | });
|
157 |
|
158 | it("should not pass custom props down to DOM nodes", () => {
|
159 | const renderer = TestUtils.createRenderer();
|
160 | renderer.render(
|
161 | <Draggable position={{translateX: 100, translateY: 100}}>
|
162 | <div></div>
|
163 | </Draggable>
|
164 | );
|
165 | const output = renderer.getRenderOutput();
|
166 | expect(output.props).to.have.keys(['onMouseDown', 'onTouchStart']);
|
167 | });
|
168 | });
|