Skip to content

Commit 71e1036

Browse files
author
Malte W
committed
added tests
1 parent 5aff3c2 commit 71e1036

File tree

7 files changed

+262
-14
lines changed

7 files changed

+262
-14
lines changed

‎karma.conf.js

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ module.exports = function karmaConfig(config) {
1616
webpack: {
1717
devtool: 'inline-source-map',
1818
resolve: {
19-
root: path.resolve(__dirname, './src')
19+
alias: {
20+
'react-custom-scrollbars': path.resolve(__dirname, './src')
21+
}
2022
},
2123
module: {
2224
loaders: [{
@@ -25,10 +27,6 @@ module.exports = function karmaConfig(config) {
2527
exclude: /(node_modules)/
2628
}]
2729
}
28-
},
29-
// webpackMiddleware: {
30-
// noInfo: true,
31-
// watchOptions: { poll: 3000 }
32-
// }
30+
}
3331
});
3432
};

‎test.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import expect from 'expect';
22
window.expect = expect;
3+
window.createSpy = expect.createSpy;
4+
window.spyOn = expect.spyOn;
5+
window.isSpy = expect.isSpy;
36

4-
const context = require.context('./test', true, /.*\.js$/);
7+
const context = require.context('./test', true, /\.spec\.js$/);
58
context.keys().forEach(context);

‎test/.eslintrc

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"globals": {
3+
"describe": true,
4+
"it": true,
5+
"expect": true,
6+
"before": true,
7+
"beforeEach": true,
8+
"after": true,
9+
"afterEach": true,
10+
"createSpy": true,
11+
"spyOn": true,
12+
"isSpy": true
13+
}
14+
}

‎test/browser.spec.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import getScrollbarWidth from '../src/utils/getScrollbarWidth';
2+
import createTests from './createTests';
3+
4+
describe('Browser', () => {
5+
createTests(getScrollbarWidth(), getScrollbarWidth());
6+
});

‎test/createTests.js

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
import { Scrollbars } from 'react-custom-scrollbars';
2+
import React from 'react';
3+
import { render, unmountComponentAtNode } from 'react-dom';
4+
5+
export default function createTests(scrollbarWidth, envScrollbarWidth) {
6+
describe('Scrollbars', () => {
7+
let node;
8+
beforeEach(() => {
9+
node = document.createElement('div');
10+
document.body.appendChild(node);
11+
});
12+
afterEach(() => {
13+
unmountComponentAtNode(node);
14+
document.body.removeChild(node);
15+
});
16+
17+
describe('when rendering Scrollbars', () => {
18+
it('hides native scrollbars', done => {
19+
render((
20+
<Scrollbars style={{ width: 100, height: 100 }}>
21+
<div style={{ width: 200, height: 200 }}/>
22+
</Scrollbars>
23+
), node, function callback() {
24+
if (scrollbarWidth) {
25+
const width = `-${scrollbarWidth}px`;
26+
expect(this.refs.view.style.right).toEqual(width);
27+
expect(this.refs.view.style.bottom).toEqual(width);
28+
} else {
29+
expect(this.refs.view.style.right).toEqual('');
30+
expect(this.refs.view.style.bottom).toEqual('');
31+
}
32+
done();
33+
});
34+
});
35+
36+
it('renders view', done => {
37+
render((
38+
<Scrollbars style={{ width: 100, height: 100 }}>
39+
<div style={{ width: 200, height: 200 }}/>
40+
</Scrollbars>
41+
), node, function callback() {
42+
expect(this.refs.view).toBeA(Node);
43+
done();
44+
});
45+
});
46+
47+
it('renders bars', done => {
48+
render((
49+
<Scrollbars style={{ width: 100, height: 100 }}>
50+
<div style={{ width: 200, height: 200 }}/>
51+
</Scrollbars>
52+
), node, function callback() {
53+
expect(this.refs.barHorizontal).toBeA(Node);
54+
expect(this.refs.barVertical).toBeA(Node);
55+
done();
56+
});
57+
});
58+
59+
it('renders thumbs', done => {
60+
render((
61+
<Scrollbars style={{ width: 100, height: 100 }}>
62+
<div style={{ width: 200, height: 200 }}/>
63+
</Scrollbars>
64+
), node, function callback() {
65+
expect(this.refs.thumbHorizontal).toBeA(Node);
66+
expect(this.refs.thumbVertical).toBeA(Node);
67+
done();
68+
});
69+
});
70+
71+
it('renders thumbs with correct size', done => {
72+
render((
73+
<Scrollbars style={{ width: 100, height: 100 }}>
74+
<div style={{ width: 200, height: 200 }}/>
75+
</Scrollbars>
76+
), node, function callback() {
77+
setTimeout(() => {
78+
if (scrollbarWidth) {
79+
expect(this.refs.thumbVertical.style.height).toEqual('50%');
80+
expect(this.refs.thumbHorizontal.style.width).toEqual('50%');
81+
} else {
82+
expect(this.refs.thumbVertical.style.height).toEqual('');
83+
expect(this.refs.thumbHorizontal.style.width).toEqual('');
84+
}
85+
done();
86+
}, 100);
87+
});
88+
});
89+
});
90+
91+
describe('when scrolling', () => {
92+
it('should update thumbs position', done => {
93+
render((
94+
<Scrollbars style={{ width: 100, height: 100 }}>
95+
<div style={{ width: 200, height: 200 }}/>
96+
</Scrollbars>
97+
), node, function callback() {
98+
this.scrollTop(50);
99+
this.scrollLeft(50);
100+
setTimeout(() => {
101+
if (scrollbarWidth) {
102+
expect(this.refs.thumbVertical.style.transform).toEqual('translateY(50%)');
103+
expect(this.refs.thumbHorizontal.style.transform).toEqual('translateX(50%)');
104+
} else {
105+
expect(this.refs.thumbVertical.style.transform).toEqual('');
106+
expect(this.refs.thumbHorizontal.style.transform).toEqual('');
107+
}
108+
done();
109+
}, 100);
110+
});
111+
});
112+
113+
describe('when scrolling y-axis', () => {
114+
it('should call `onScroll`', done => {
115+
const spy = createSpy();
116+
render((
117+
<Scrollbars style={{ width: 100, height: 100 }} onScroll={spy}>
118+
<div style={{ width: 200, height: 200 }}/>
119+
</Scrollbars>
120+
), node, function callback() {
121+
this.scrollTop(50);
122+
setTimeout(() => {
123+
expect(spy.calls.length).toEqual(1);
124+
const args = spy.calls[0].arguments;
125+
const event = args[0];
126+
const values = args[1];
127+
expect(event).toBeA(Event);
128+
expect(values).toBeA(Object);
129+
130+
if (scrollbarWidth) {
131+
expect(values.left).toEqual(0);
132+
expect(values.top).toEqual(0.5);
133+
expect(values.scrollLeft).toEqual(0);
134+
expect(values.scrollTop).toEqual(50);
135+
expect(values.scrollWidth).toEqual(200);
136+
expect(values.scrollHeight).toEqual(200);
137+
expect(values.clientWidth).toEqual(100);
138+
expect(values.clientHeight).toEqual(100);
139+
} else {
140+
expect(values.left).toEqual(0);
141+
expect(values.top).toEqual(values.scrollTop / (values.scrollHeight - (values.clientHeight)));
142+
expect(values.scrollLeft).toEqual(0);
143+
expect(values.scrollTop).toEqual(50);
144+
expect(values.scrollWidth).toEqual(200);
145+
expect(values.scrollHeight).toEqual(200);
146+
expect(values.clientWidth).toEqual(100 - envScrollbarWidth);
147+
expect(values.clientHeight).toEqual(100 - envScrollbarWidth);
148+
}
149+
done();
150+
}, 100);
151+
});
152+
});
153+
});
154+
155+
describe('when scrolling x-axis', () => {
156+
it('should call `onScroll`', done => {
157+
const spy = createSpy();
158+
render((
159+
<Scrollbars style={{ width: 100, height: 100 }} onScroll={spy}>
160+
<div style={{ width: 200, height: 200 }}/>
161+
</Scrollbars>
162+
), node, function callback() {
163+
this.scrollLeft(50);
164+
setTimeout(() => {
165+
expect(spy.calls.length).toEqual(1);
166+
const args = spy.calls[0].arguments;
167+
const event = args[0];
168+
const values = args[1];
169+
expect(event).toBeA(Event);
170+
expect(values).toBeA(Object);
171+
172+
if (scrollbarWidth) {
173+
expect(values.left).toEqual(0.5);
174+
expect(values.top).toEqual(0);
175+
expect(values.scrollLeft).toEqual(50);
176+
expect(values.scrollTop).toEqual(0);
177+
expect(values.scrollWidth).toEqual(200);
178+
expect(values.scrollHeight).toEqual(200);
179+
expect(values.clientWidth).toEqual(100);
180+
expect(values.clientHeight).toEqual(100);
181+
} else {
182+
expect(values.left).toEqual(values.scrollLeft / (values.scrollWidth - (values.clientWidth)));
183+
expect(values.top).toEqual(0);
184+
expect(values.scrollLeft).toEqual(50);
185+
expect(values.scrollTop).toEqual(0);
186+
expect(values.scrollWidth).toEqual(200);
187+
expect(values.scrollHeight).toEqual(200);
188+
expect(values.clientWidth).toEqual(100 - envScrollbarWidth);
189+
expect(values.clientHeight).toEqual(100 - envScrollbarWidth);
190+
}
191+
done();
192+
}, 100);
193+
});
194+
});
195+
});
196+
});
197+
198+
describe('when resizing window', () => {
199+
it('should update scrollbars', done => {
200+
render((
201+
<Scrollbars style={{ width: 100, height: 100 }}>
202+
<div style={{ width: 200, height: 200 }}/>
203+
</Scrollbars>
204+
), node, function callback() {
205+
setTimeout(() => {
206+
const spy = spyOn(this, 'update');
207+
window.dispatchEvent(new Event('resize'));
208+
expect(spy.calls.length).toEqual(1);
209+
done();
210+
}, 100);
211+
});
212+
});
213+
});
214+
});
215+
}

‎test/index.spec.js

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎test/mobile.spec.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import createTests from './createTests';
2+
const getScrollbarWidthModule = require('../src/utils/getScrollbarWidth');
3+
const envScrollbarWidth = getScrollbarWidthModule.default();
4+
5+
describe('Mobile', () => {
6+
const mobileScrollbarsWidth = 0;
7+
let getScrollbarWidthSpy;
8+
9+
before(() => {
10+
getScrollbarWidthSpy = spyOn(getScrollbarWidthModule, 'default');
11+
getScrollbarWidthSpy.andReturn(mobileScrollbarsWidth);
12+
});
13+
14+
after(() => {
15+
getScrollbarWidthSpy.restore();
16+
});
17+
18+
createTests(mobileScrollbarsWidth, envScrollbarWidth);
19+
});

0 commit comments

Comments
 (0)