Skip to content

Commit 6d360da

Browse files
xobotyixobotyi
committed
More tests;
1 parent 3098660 commit 6d360da

File tree

5 files changed

+194
-2
lines changed

5 files changed

+194
-2
lines changed

‎dist/Thumb.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,14 +109,19 @@ function (_React$Component) {
109109
});
110110

111111
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleDragEnd", function () {
112-
_this.isDragging = false;
113112
_this.dragStartOffsetX = false;
114113
_this.dragStartOffsetY = false;
115114

116115
_this.element.classList.remove("dragging");
117116

118117
document.removeEventListener("mousemove", _this.handleDragEvent);
119118
document.removeEventListener("mouseup", _this.handleDragEnd);
119+
120+
if (!_this.isDragging) {
121+
return;
122+
}
123+
124+
_this.isDragging = false;
120125
document.body.style.userSelect = _this.prevUserSelect;
121126
_this.prevUserSelect = null;
122127
document.onselectstart = _this.prevOnSelectStart;

‎src/Thumb.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,14 +80,18 @@ export default class Thumb extends React.Component {
8080
};
8181

8282
handleDragEnd = () => {
83-
this.isDragging = false;
8483
this.dragStartOffsetX = false;
8584
this.dragStartOffsetY = false;
8685
this.element.classList.remove("dragging");
8786

8887
document.removeEventListener("mousemove", this.handleDragEvent);
8988
document.removeEventListener("mouseup", this.handleDragEnd);
9089

90+
if (!this.isDragging) {
91+
return;
92+
}
93+
this.isDragging = false;
94+
9195
document.body.style.userSelect = this.prevUserSelect;
9296
this.prevUserSelect = null;
9397
document.onselectstart = this.prevOnSelectStart;

‎tests/Scrollbar.spec.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import getset from "./Scrollbar/getset";
22
import rendering from "./Scrollbar/rendering";
33
import staticMethods from "./Scrollbar/staticMethods";
44
import callbacks from "./Scrollbar/callbacks";
5+
import trackInteraction from "./Scrollbar/trackInteraction";
56

67
describe("Scrollbar (desktop)", () => {
78
staticMethods();
89
rendering();
910
getset();
1011
callbacks();
12+
trackInteraction();
1113
});

‎tests/Scrollbar/rendering.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import expect from "expect";
22
import React from "react";
33
import {render, unmountComponentAtNode} from "react-dom";
44
import Scrollbar from "react-scrollbars-custom";
5+
import getScrollbarWidth from "../../src/util/getScrollbarWidth";
56

67
export default function performTests() {
78
describe("rendering", () => {
@@ -272,6 +273,23 @@ export default function performTests() {
272273
}
273274
);
274275
});
276+
277+
it("vertical track should be to the left when direction is RTL", done => {
278+
render(
279+
<Scrollbar style={{width: 100, height: 100, direction: "rtl"}} removeTracksWhenNotUsed={false}>
280+
<div style={{width: 200, height: 200}} />
281+
</Scrollbar>,
282+
node,
283+
function() {
284+
setTimeout(() => {
285+
expect(this.trackYEl.style.left).toBe("0px");
286+
expect(this.contentEl.style.marginLeft).toBe(`-${getScrollbarWidth()}px`);
287+
288+
done();
289+
}, 40);
290+
}
291+
);
292+
});
275293
});
276294
});
277295
}

‎tests/Scrollbar/trackInteraction.js‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
import expect from "expect";
2+
import React from "react";
3+
import {render, unmountComponentAtNode} from "react-dom";
4+
import Scrollbar from "react-scrollbars-custom";
5+
import simulant from "simulant";
6+
7+
export default function performTests() {
8+
describe("track interaction", () => {
9+
let node;
10+
beforeEach(() => {
11+
node = document.createElement("div");
12+
document.body.appendChild(node);
13+
});
14+
afterEach(() => {
15+
unmountComponentAtNode(node);
16+
document.body.removeChild(node);
17+
});
18+
19+
it('track click should cause `jump` to the respective position if `trackClickBehavior="jump"`', done => {
20+
render(
21+
<Scrollbar
22+
trackClickBehavior="jump"
23+
style={{width: 100, height: 100, position: "relative", padding: 0, margin: 0}}
24+
wrapperProps={{style: {padding: 0, margin: 0}}}>
25+
<div style={{width: 1000, height: 1000, padding: 0, margin: 0}} />
26+
</Scrollbar>,
27+
node,
28+
function() {
29+
setTimeout(() => {
30+
const {
31+
top: topX,
32+
height: heightX,
33+
left: leftX,
34+
width: widthX,
35+
} = this.trackXEl.getBoundingClientRect();
36+
const {
37+
top: topY,
38+
height: heightY,
39+
left: leftY,
40+
width: widthY,
41+
} = this.trackYEl.getBoundingClientRect();
42+
43+
simulant.fire(this.trackXEl, "click", {
44+
which: 1,
45+
clientY: topX + heightX / 2,
46+
clientX: leftX + widthX / 2,
47+
});
48+
simulant.fire(this.trackYEl, "click", {
49+
which: 1,
50+
clientY: topY + heightY / 2,
51+
clientX: leftY + widthY / 2,
52+
});
53+
54+
setTimeout(() => {
55+
expect(this.contentEl.scrollTop).toBe(
56+
(this.contentEl.scrollHeight - this.contentEl.clientHeight) / 2
57+
);
58+
expect(this.contentEl.scrollLeft).toBe(
59+
(this.contentEl.scrollWidth - this.contentEl.clientWidth) / 2
60+
);
61+
62+
done();
63+
}, 20);
64+
}, 20);
65+
}
66+
);
67+
});
68+
69+
it('track click should cause `step` towards clicked position if `trackClickBehavior="step"`', done => {
70+
render(
71+
<Scrollbar
72+
trackClickBehavior="step"
73+
style={{width: 100, height: 100, position: "relative", padding: 0, margin: 0}}
74+
wrapperProps={{style: {padding: 0, margin: 0}}}>
75+
<div style={{width: 1000, height: 1000, padding: 0, margin: 0}} />
76+
</Scrollbar>,
77+
node,
78+
function() {
79+
setTimeout(() => {
80+
const {
81+
top: topX,
82+
height: heightX,
83+
left: leftX,
84+
width: widthX,
85+
} = this.trackXEl.getBoundingClientRect();
86+
const {
87+
top: topY,
88+
height: heightY,
89+
left: leftY,
90+
width: widthY,
91+
} = this.trackYEl.getBoundingClientRect();
92+
93+
simulant.fire(this.trackXEl, "click", {
94+
which: 1,
95+
clientY: topX + heightX / 2,
96+
clientX: leftX + widthX / 2,
97+
});
98+
simulant.fire(this.trackYEl, "click", {
99+
which: 1,
100+
clientY: topY + heightY / 2,
101+
clientX: leftY + widthY / 2,
102+
});
103+
104+
setTimeout(() => {
105+
expect(this.contentEl.scrollTop).toBe(this.contentEl.clientHeight);
106+
expect(this.contentEl.scrollLeft).toBe(this.contentEl.clientWidth);
107+
108+
simulant.fire(this.trackXEl, "click", {
109+
which: 1,
110+
clientY: topX + heightX / 2,
111+
clientX: leftX + widthX / 2,
112+
});
113+
simulant.fire(this.trackYEl, "click", {
114+
which: 1,
115+
clientY: topY + heightY / 2,
116+
clientX: leftY + widthY / 2,
117+
});
118+
119+
setTimeout(() => {
120+
expect(this.contentEl.scrollTop).toBe(2 * this.contentEl.clientHeight);
121+
expect(this.contentEl.scrollLeft).toBe(2 * this.contentEl.clientWidth);
122+
123+
simulant.fire(this.trackXEl, "click", {
124+
which: 1,
125+
clientY: topX,
126+
clientX: leftX,
127+
});
128+
simulant.fire(this.trackYEl, "click", {
129+
which: 1,
130+
clientY: topY,
131+
clientX: leftY,
132+
});
133+
134+
setTimeout(() => {
135+
expect(this.contentEl.scrollTop).toBe(this.contentEl.clientHeight);
136+
expect(this.contentEl.scrollLeft).toBe(this.contentEl.clientWidth);
137+
138+
simulant.fire(this.trackXEl, "click", {
139+
which: 1,
140+
clientY: topX,
141+
clientX: leftX,
142+
});
143+
simulant.fire(this.trackYEl, "click", {
144+
which: 1,
145+
clientY: topY,
146+
clientX: leftY,
147+
});
148+
149+
setTimeout(() => {
150+
expect(this.contentEl.scrollTop).toBe(0);
151+
expect(this.contentEl.scrollLeft).toBe(0);
152+
153+
done();
154+
}, 20);
155+
}, 20);
156+
}, 20);
157+
}, 20);
158+
}, 20);
159+
}
160+
);
161+
});
162+
});
163+
}

0 commit comments

Comments
 (0)