Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
added tests
  • Loading branch information
Malte W committed Jan 20, 2016
1 parent 5aff3c2 commit 71e1036
Show file tree
Hide file tree
Showing 7 changed files with 262 additions and 14 deletions.
10 changes: 4 additions & 6 deletions karma.conf.js
Expand Up @@ -16,7 +16,9 @@ module.exports = function karmaConfig(config) {
webpack: {
devtool: 'inline-source-map',
resolve: {
root: path.resolve(__dirname, './src')
alias: {
'react-custom-scrollbars': path.resolve(__dirname, './src')
}
},
module: {
loaders: [{
Expand All @@ -25,10 +27,6 @@ module.exports = function karmaConfig(config) {
exclude: /(node_modules)/
}]
}
},
// webpackMiddleware: {
// noInfo: true,
// watchOptions: { poll: 3000 }
// }
}
});
};
5 changes: 4 additions & 1 deletion test.js
@@ -1,5 +1,8 @@
import expect from 'expect';
window.expect = expect;
window.createSpy = expect.createSpy;
window.spyOn = expect.spyOn;
window.isSpy = expect.isSpy;

const context = require.context('./test', true, /.*\.js$/);
const context = require.context('./test', true, /\.spec\.js$/);
context.keys().forEach(context);
14 changes: 14 additions & 0 deletions test/.eslintrc
@@ -0,0 +1,14 @@
{
"globals": {
"describe": true,
"it": true,
"expect": true,
"before": true,
"beforeEach": true,
"after": true,
"afterEach": true,
"createSpy": true,
"spyOn": true,
"isSpy": true
}
}
6 changes: 6 additions & 0 deletions test/browser.spec.js
@@ -0,0 +1,6 @@
import getScrollbarWidth from '../src/utils/getScrollbarWidth';
import createTests from './createTests';

describe('Browser', () => {
createTests(getScrollbarWidth(), getScrollbarWidth());
});
215 changes: 215 additions & 0 deletions test/createTests.js
@@ -0,0 +1,215 @@
import { Scrollbars } from 'react-custom-scrollbars';
import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';

export default function createTests(scrollbarWidth, envScrollbarWidth) {
describe('Scrollbars', () => {
let node;
beforeEach(() => {
node = document.createElement('div');
document.body.appendChild(node);
});
afterEach(() => {
unmountComponentAtNode(node);
document.body.removeChild(node);
});

describe('when rendering Scrollbars', () => {
it('hides native scrollbars', done => {
render((
<Scrollbars style={{ width: 100, height: 100 }}>
<div style={{ width: 200, height: 200 }}/>
</Scrollbars>
), node, function callback() {
if (scrollbarWidth) {
const width = `-${scrollbarWidth}px`;
expect(this.refs.view.style.right).toEqual(width);
expect(this.refs.view.style.bottom).toEqual(width);
} else {
expect(this.refs.view.style.right).toEqual('');
expect(this.refs.view.style.bottom).toEqual('');
}
done();
});
});

it('renders view', done => {
render((
<Scrollbars style={{ width: 100, height: 100 }}>
<div style={{ width: 200, height: 200 }}/>
</Scrollbars>
), node, function callback() {
expect(this.refs.view).toBeA(Node);
done();
});
});

it('renders bars', done => {
render((
<Scrollbars style={{ width: 100, height: 100 }}>
<div style={{ width: 200, height: 200 }}/>
</Scrollbars>
), node, function callback() {
expect(this.refs.barHorizontal).toBeA(Node);
expect(this.refs.barVertical).toBeA(Node);
done();
});
});

it('renders thumbs', done => {
render((
<Scrollbars style={{ width: 100, height: 100 }}>
<div style={{ width: 200, height: 200 }}/>
</Scrollbars>
), node, function callback() {
expect(this.refs.thumbHorizontal).toBeA(Node);
expect(this.refs.thumbVertical).toBeA(Node);
done();
});
});

it('renders thumbs with correct size', done => {
render((
<Scrollbars style={{ width: 100, height: 100 }}>
<div style={{ width: 200, height: 200 }}/>
</Scrollbars>
), node, function callback() {
setTimeout(() => {
if (scrollbarWidth) {
expect(this.refs.thumbVertical.style.height).toEqual('50%');
expect(this.refs.thumbHorizontal.style.width).toEqual('50%');
} else {
expect(this.refs.thumbVertical.style.height).toEqual('');
expect(this.refs.thumbHorizontal.style.width).toEqual('');
}
done();
}, 100);
});
});
});

describe('when scrolling', () => {
it('should update thumbs position', done => {
render((
<Scrollbars style={{ width: 100, height: 100 }}>
<div style={{ width: 200, height: 200 }}/>
</Scrollbars>
), node, function callback() {
this.scrollTop(50);
this.scrollLeft(50);
setTimeout(() => {
if (scrollbarWidth) {
expect(this.refs.thumbVertical.style.transform).toEqual('translateY(50%)');
expect(this.refs.thumbHorizontal.style.transform).toEqual('translateX(50%)');
} else {
expect(this.refs.thumbVertical.style.transform).toEqual('');
expect(this.refs.thumbHorizontal.style.transform).toEqual('');
}
done();
}, 100);
});
});

describe('when scrolling y-axis', () => {
it('should call `onScroll`', done => {
const spy = createSpy();
render((
<Scrollbars style={{ width: 100, height: 100 }} onScroll={spy}>
<div style={{ width: 200, height: 200 }}/>
</Scrollbars>
), node, function callback() {
this.scrollTop(50);
setTimeout(() => {
expect(spy.calls.length).toEqual(1);
const args = spy.calls[0].arguments;
const event = args[0];
const values = args[1];
expect(event).toBeA(Event);
expect(values).toBeA(Object);

if (scrollbarWidth) {
expect(values.left).toEqual(0);
expect(values.top).toEqual(0.5);
expect(values.scrollLeft).toEqual(0);
expect(values.scrollTop).toEqual(50);
expect(values.scrollWidth).toEqual(200);
expect(values.scrollHeight).toEqual(200);
expect(values.clientWidth).toEqual(100);
expect(values.clientHeight).toEqual(100);
} else {
expect(values.left).toEqual(0);
expect(values.top).toEqual(values.scrollTop / (values.scrollHeight - (values.clientHeight)));
expect(values.scrollLeft).toEqual(0);
expect(values.scrollTop).toEqual(50);
expect(values.scrollWidth).toEqual(200);
expect(values.scrollHeight).toEqual(200);
expect(values.clientWidth).toEqual(100 - envScrollbarWidth);
expect(values.clientHeight).toEqual(100 - envScrollbarWidth);
}
done();
}, 100);
});
});
});

describe('when scrolling x-axis', () => {
it('should call `onScroll`', done => {
const spy = createSpy();
render((
<Scrollbars style={{ width: 100, height: 100 }} onScroll={spy}>
<div style={{ width: 200, height: 200 }}/>
</Scrollbars>
), node, function callback() {
this.scrollLeft(50);
setTimeout(() => {
expect(spy.calls.length).toEqual(1);
const args = spy.calls[0].arguments;
const event = args[0];
const values = args[1];
expect(event).toBeA(Event);
expect(values).toBeA(Object);

if (scrollbarWidth) {
expect(values.left).toEqual(0.5);
expect(values.top).toEqual(0);
expect(values.scrollLeft).toEqual(50);
expect(values.scrollTop).toEqual(0);
expect(values.scrollWidth).toEqual(200);
expect(values.scrollHeight).toEqual(200);
expect(values.clientWidth).toEqual(100);
expect(values.clientHeight).toEqual(100);
} else {
expect(values.left).toEqual(values.scrollLeft / (values.scrollWidth - (values.clientWidth)));
expect(values.top).toEqual(0);
expect(values.scrollLeft).toEqual(50);
expect(values.scrollTop).toEqual(0);
expect(values.scrollWidth).toEqual(200);
expect(values.scrollHeight).toEqual(200);
expect(values.clientWidth).toEqual(100 - envScrollbarWidth);
expect(values.clientHeight).toEqual(100 - envScrollbarWidth);
}
done();
}, 100);
});
});
});
});

describe('when resizing window', () => {
it('should update scrollbars', done => {
render((
<Scrollbars style={{ width: 100, height: 100 }}>
<div style={{ width: 200, height: 200 }}/>
</Scrollbars>
), node, function callback() {
setTimeout(() => {
const spy = spyOn(this, 'update');
window.dispatchEvent(new Event('resize'));
expect(spy.calls.length).toEqual(1);
done();
}, 100);
});
});
});
});
}
7 changes: 0 additions & 7 deletions test/index.spec.js

This file was deleted.

19 changes: 19 additions & 0 deletions test/mobile.spec.js
@@ -0,0 +1,19 @@
import createTests from './createTests';
const getScrollbarWidthModule = require('../src/utils/getScrollbarWidth');
const envScrollbarWidth = getScrollbarWidthModule.default();

describe('Mobile', () => {
const mobileScrollbarsWidth = 0;
let getScrollbarWidthSpy;

before(() => {
getScrollbarWidthSpy = spyOn(getScrollbarWidthModule, 'default');
getScrollbarWidthSpy.andReturn(mobileScrollbarsWidth);
});

after(() => {
getScrollbarWidthSpy.restore();
});

createTests(mobileScrollbarsWidth, envScrollbarWidth);
});

0 comments on commit 71e1036

Please sign in to comment.