Skip to content

Commit db5e794

Browse files
xobotyixobotyi
committed
almost 100% of coverage;
1 parent db32910 commit db5e794

File tree

6 files changed

+401
-17
lines changed

6 files changed

+401
-17
lines changed

‎tests/Scrollbars/dragging.js‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
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 createTests(scrollbarWidth) {
8+
describe("dragging", () => {
9+
let node;
10+
11+
beforeEach(() => {
12+
node = document.createElement("div");
13+
document.body.appendChild(node);
14+
});
15+
afterEach(() => {
16+
unmountComponentAtNode(node);
17+
document.body.removeChild(node);
18+
});
19+
20+
describe("when dragging vertical thumb", function () {
21+
it("should scroll to respective position", (done) => {
22+
render(<Scrollbar style={ {width: 100, height: 100} } gridless>
23+
<div style={ {width: 200, height: 200} }></div>
24+
</Scrollbar>,
25+
node,
26+
function () {
27+
setTimeout(() => {
28+
const {content, thumbVertical: thumb} = this;
29+
const {top: thumbOffset} = thumb.getBoundingClientRect();
30+
31+
simulant.fire(thumb, 'mousedown', {target: thumb, clientY: thumbOffset, which: 1});
32+
simulant.fire(document, 'mousemove', {clientY: thumbOffset + 100});
33+
simulant.fire(document, 'mouseup');
34+
35+
setTimeout(() => {
36+
expect(content.scrollTop).toBe(100);
37+
done();
38+
}, 50);
39+
}, 100);
40+
});
41+
});
42+
it("should add dragging class to thumb", (done) => {
43+
render(<Scrollbar style={ {width: 100, height: 100} } gridless>
44+
<div style={ {width: 200, height: 200} }></div>
45+
</Scrollbar>,
46+
node,
47+
function () {
48+
setTimeout(() => {
49+
const {thumbVertical: thumb} = this;
50+
const {top: thumbOffset} = thumb.getBoundingClientRect();
51+
52+
simulant.fire(thumb, 'mousedown', {target: thumb, clientY: thumbOffset, which: 1});
53+
simulant.fire(document, 'mousemove', {clientY: thumbOffset + 100});
54+
55+
expect(thumb.classList.contains('dragging')).toBeTruthy();
56+
57+
simulant.fire(document, 'mouseup');
58+
59+
expect(thumb.classList.contains('dragging')).toBeFalsy();
60+
done();
61+
}, 100);
62+
});
63+
});
64+
it("should disable selection on the body element", (done) => {
65+
render(<Scrollbar style={ {width: 100, height: 100} } gridless>
66+
<div style={ {width: 200, height: 200} }></div>
67+
</Scrollbar>,
68+
node,
69+
function () {
70+
setTimeout(() => {
71+
const {thumbVertical: thumb} = this;
72+
const {top: thumbOffset} = thumb.getBoundingClientRect();
73+
74+
simulant.fire(thumb, 'mousedown', {target: thumb, clientY: thumbOffset, which: 1});
75+
simulant.fire(document, 'mousemove', {clientY: thumbOffset + 100});
76+
77+
expect(document.body.style.userSelect).toBe("none");
78+
79+
simulant.fire(document, 'mouseup');
80+
81+
expect(document.body.style.userSelect).toBe("");
82+
done();
83+
}, 100);
84+
});
85+
});
86+
});
87+
88+
describe("when dragging horizontal thumb", function () {
89+
it("should scroll to respective position", (done) => {
90+
render(<Scrollbar style={ {width: 100, height: 100} } gridless>
91+
<div style={ {width: 200, height: 200} }></div>
92+
</Scrollbar>,
93+
node,
94+
function () {
95+
setTimeout(() => {
96+
const {content, thumbHorizontal: thumb} = this;
97+
const {left: thumbOffset} = thumb.getBoundingClientRect();
98+
99+
simulant.fire(thumb, 'mousedown', {target: thumb, clientX: thumbOffset, which: 1});
100+
simulant.fire(document, 'mousemove', {clientX: thumbOffset + 100});
101+
simulant.fire(document, 'mouseup');
102+
103+
setTimeout(() => {
104+
expect(content.scrollLeft).toBe(100);
105+
done();
106+
}, 50);
107+
}, 100);
108+
});
109+
});
110+
it("should add dragging class to thumb", (done) => {
111+
render(<Scrollbar style={ {width: 100, height: 100} } gridless>
112+
<div style={ {width: 200, height: 200} }></div>
113+
</Scrollbar>,
114+
node,
115+
function () {
116+
setTimeout(() => {
117+
const {thumbHorizontal: thumb} = this;
118+
const {left: thumbOffset} = thumb.getBoundingClientRect();
119+
120+
simulant.fire(thumb, 'mousedown', {target: thumb, clientX: thumbOffset, which: 1});
121+
simulant.fire(document, 'mousemove', {clientX: thumbOffset + 100});
122+
123+
expect(thumb.classList.contains('dragging')).toBeTruthy();
124+
125+
simulant.fire(document, 'mouseup');
126+
127+
expect(thumb.classList.contains('dragging')).toBeFalsy();
128+
done();
129+
}, 100);
130+
});
131+
});
132+
it("should disable selection on the body element", (done) => {
133+
render(<Scrollbar style={ {width: 100, height: 100} } gridless>
134+
<div style={ {width: 200, height: 200} }></div>
135+
</Scrollbar>,
136+
node,
137+
function () {
138+
setTimeout(() => {
139+
const {thumbHorizontal: thumb} = this;
140+
const {left: thumbOffset} = thumb.getBoundingClientRect();
141+
142+
simulant.fire(thumb, 'mousedown', {target: thumb, clientX: thumbOffset, which: 1});
143+
simulant.fire(document, 'mousemove', {clientX: thumbOffset + 100});
144+
145+
expect(document.body.style.userSelect).toBe("none");
146+
147+
simulant.fire(document, 'mouseup');
148+
149+
expect(document.body.style.userSelect).toBe("");
150+
done();
151+
}, 100);
152+
});
153+
});
154+
});
155+
});
156+
}

‎tests/Scrollbars/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
1+
import dragging from "./dragging";
12
import getset from "./getset";
23
import rendering from "./rendering";
4+
import resizing from "./resizing";
35
import scrolling from "./scrolling";
46
import scrollTriggers from "./scrollTriggers";
7+
import sizeTracking from "./sizeTracking";
58

69
export default function createTests(scrollbarWidth) {
710
rendering(scrollbarWidth);
811
getset(scrollbarWidth);
912
scrolling(scrollbarWidth);
1013
scrollTriggers(scrollbarWidth);
14+
resizing(scrollbarWidth);
15+
dragging(scrollbarWidth);
16+
sizeTracking(scrollbarWidth);
1117
}

‎tests/Scrollbars/rendering.js‎

Lines changed: 74 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export default function createTests(scrollbarWidth) {
6969
expect(this.thumbHorizontal.style.width).toBe("43px");
7070

7171
done();
72-
}, 50);
72+
}, 100);
7373
});
7474
});
7575
it("thumbs size should not be less than `thumbSizeMin`", (done) => {
@@ -83,7 +83,7 @@ export default function createTests(scrollbarWidth) {
8383
expect(this.thumbHorizontal.style.width).toBe("50px");
8484

8585
done();
86-
}, 50);
86+
}, 100);
8787
});
8888
});
8989
});
@@ -204,7 +204,7 @@ export default function createTests(scrollbarWidth) {
204204
expect(this.trackHorizontal.style.display).toBe("none");
205205

206206
done();
207-
}, 50);
207+
}, 100);
208208
});
209209
});
210210

@@ -219,7 +219,7 @@ export default function createTests(scrollbarWidth) {
219219
expect(this.trackHorizontal.style.display).not.toBe("none");
220220

221221
done();
222-
}, 50);
222+
}, 100);
223223
});
224224
});
225225

@@ -233,7 +233,7 @@ export default function createTests(scrollbarWidth) {
233233
expect(this.trackVertical.style.display).not.toBe("none");
234234

235235
done();
236-
}, 50);
236+
}, 100);
237237
});
238238
});
239239

@@ -247,7 +247,7 @@ export default function createTests(scrollbarWidth) {
247247
expect(this.trackHorizontal.style.display).not.toBe("none");
248248

249249
done();
250-
}, 50);
250+
}, 100);
251251
});
252252
});
253253
});
@@ -268,13 +268,32 @@ export default function createTests(scrollbarWidth) {
268268
expect(this.content.style.marginBottom).not.toBe("");
269269

270270
done();
271-
}, 50);
271+
}, 100);
272+
});
273+
});
274+
});
275+
276+
describe("vertical track should be displayed without thumb", () => {
277+
it("if `scrollY={false}` and `permanentScrollbarVertical={true}` are passed", (done) => {
278+
render(<Scrollbar style={ {width: 100, height: 100} } scrollY={ false } permanentScrollbarVertical>
279+
<div style={ {width: 200, height: 200} }></div>
280+
</Scrollbar>,
281+
node,
282+
function () {
283+
setTimeout(() => {
284+
expect(this.trackVertical.style.display).toBe("");
285+
expect(this.thumbVertical.style.display).toBe("none");
286+
expect(this.content.style.overflowY).toBe("hidden");
287+
expect(this.content.style.marginRight).toBe("");
288+
289+
done();
290+
}, 100);
272291
});
273292
});
274293
});
275294

276295
describe("only horizontal scroll should be blocked", () => {
277-
it("if scrollX={false} is passed", (done) => {
296+
it("if `scrollX={false}` is passed", (done) => {
278297
render(<Scrollbar style={ {width: 100, height: 100} } scrollX={ false }>
279298
<div style={ {width: 200, height: 200} }></div>
280299
</Scrollbar>,
@@ -289,13 +308,33 @@ export default function createTests(scrollbarWidth) {
289308
expect(this.content.style.marginBottom).toBe("");
290309

291310
done();
292-
}, 50);
311+
}, 100);
312+
});
313+
});
314+
315+
});
316+
317+
describe("horizontal track should be displayed without thumb", () => {
318+
it("if `scrollX={false}` and `permanentScrollbarHorizontal={true}` are passed", (done) => {
319+
render(<Scrollbar style={ {width: 100, height: 100} } scrollX={ false } permanentScrollbarHorizontal>
320+
<div style={ {width: 200, height: 200} }></div>
321+
</Scrollbar>,
322+
node,
323+
function () {
324+
setTimeout(() => {
325+
expect(this.trackHorizontal.style.display).toBe("");
326+
expect(this.thumbHorizontal.style.display).toBe("none");
327+
expect(this.content.style.overflowX).toBe("hidden");
328+
expect(this.content.style.marginBottom).toBe("");
329+
330+
done();
331+
}, 100);
293332
});
294333
});
295334
});
296335

297336
describe("both scrolls should be blocked", () => {
298-
it("or no noScroll is passed", (done) => {
337+
it("or no `noScroll` is passed", (done) => {
299338
render(<Scrollbar style={ {width: 100, height: 100} } noScroll>
300339
<div style={ {width: 200, height: 200} }></div>
301340
</Scrollbar>,
@@ -311,7 +350,31 @@ export default function createTests(scrollbarWidth) {
311350
expect(this.content.style.marginRight).toBe("");
312351

313352
done();
314-
}, 50);
353+
}, 100);
354+
});
355+
});
356+
357+
});
358+
describe("both tracks should be displayed withut thumb", () => {
359+
it("if `noScroll` and `permanentScrollbars={true}`", (done) => {
360+
render(<Scrollbar style={ {width: 100, height: 100} } noScroll permanentScrollbars>
361+
<div style={ {width: 200, height: 200} }></div>
362+
</Scrollbar>,
363+
node,
364+
function () {
365+
setTimeout(() => {
366+
expect(this.trackHorizontal.style.display).toBe("");
367+
expect(this.trackVertical.style.display).toBe("");
368+
expect(this.thumbHorizontal.style.display).toBe("none");
369+
expect(this.thumbVertical.style.display).toBe("none");
370+
expect(this.content.style.overflowX).toBe("hidden");
371+
expect(this.content.style.overflowY).toBe("hidden");
372+
expect(this.content.style.overflow).toBe("hidden");
373+
expect(this.content.style.marginBottom).toBe("");
374+
expect(this.content.style.marginRight).toBe("");
375+
376+
done();
377+
}, 100);
315378
});
316379
});
317380
});

‎tests/Scrollbars/resizing.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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+
import sinon from "sinon";
7+
8+
export default function createTests(scrollbarWidth) {
9+
describe("resizing", () => {
10+
let node;
11+
12+
beforeEach(() => {
13+
node = document.createElement("div");
14+
document.body.appendChild(node);
15+
});
16+
afterEach(() => {
17+
unmountComponentAtNode(node);
18+
document.body.removeChild(node);
19+
});
20+
21+
describe("when window resized", function () {
22+
it("scrollbars should update", (done) => {
23+
render(<Scrollbar style={ {width: 100, height: 100} } gridless>
24+
<div style={ {width: 200, height: 200} }></div>
25+
</Scrollbar>,
26+
node,
27+
function () {
28+
const updateSpy = sinon.spy(Scrollbar.prototype, 'update');
29+
30+
simulant.fire(window, 'resize');
31+
32+
expect(updateSpy.callCount).toBe(1);
33+
34+
updateSpy.restore();
35+
done();
36+
});
37+
});
38+
});
39+
});
40+
}

0 commit comments

Comments
 (0)