Skip to content

Commit

Permalink
Introduce jest and enzyme
Browse files Browse the repository at this point in the history
  • Loading branch information
@yesmeck
yesmeck committed Nov 18, 2016
1 parent 3ada48a commit 7cab4d9
Show file tree
Hide file tree
Showing 10 changed files with 133 additions and 79 deletions.
3 changes: 3 additions & 0 deletions .babelrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"presets": ["es2015", "react", "stage-0"]
}
16 changes: 12 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,20 @@
"lint": "rc-tools run lint",
"karma": "rc-tools run karma",
"saucelabs": "rc-tools run saucelabs",
"test": "rc-tools run test",
"test": "jest",
"prepublish": "rc-tools run guard",
"chrome-test": "rc-tools run chrome-test",
"coverage": "rc-tools run coverage"
"coverage": "jest --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js"
},
"devDependencies": {
"expect.js": "~0.3.1",
"babel-jest": "^17.0.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"coveralls": "^2.11.15",
"enzyme": "^2.6.0",
"enzyme-to-json": "^1.3.0",
"jest": "^17.0.1",
"jquery": "~1.11.3",
"jsonp": "^0.2.0",
"pre-commit": "1.x",
Expand All @@ -48,7 +55,8 @@
"rc-tools": "5.x",
"react": "15.x",
"react-addons-test-utils": "15.x",
"react-dom": "15.x"
"react-dom": "15.x",
"react-test-renderer": "^15.3.2"
},
"dependencies": {
"babel-runtime": "6.x",
Expand Down
16 changes: 8 additions & 8 deletions tests/Combobox.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import expect from 'expect.js';
/* eslint-disable no-undef */
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils, { Simulate } from 'react-addons-test-utils';
Expand All @@ -25,15 +25,15 @@ describe('Combobox', () => {
<Option value="2">2</Option>
</Select>, div
);
expect(!!ReactDOM.findDOMNode(instance.refs.selection).getAttribute('tabindex')).to.be(false);
expect(!!ReactDOM.findDOMNode(instance.refs.selection).getAttribute('tabindex')).toBe(false);
});

it('should has no open className', () => {
const instance = ReactDOM.render(
<Select combobox notFoundContent={false}/>, div
);
Simulate.click(instance.getInputDOMNode());
expect(ReactDOM.findDOMNode(instance).className).not.to.contain('-open');
expect(ReactDOM.findDOMNode(instance).className).not.toContain('-open');
});

it('support defaultValue', () => {
Expand All @@ -45,13 +45,13 @@ describe('Combobox', () => {
);
const input = ReactDOM.findDOMNode(TestUtils.scryRenderedDOMComponentsWithClass(instance,
'rc-select-search__field')[0]);
expect(input.value).to.be('1');
expect(input.value).toBe('1');
Simulate.click(input);
const activeItem = $(instance.getPopupDOMNode())
.find('.rc-select-dropdown-menu-item-active')[0];
expect(activeItem.innerHTML).to.be('11111');
expect(activeItem.innerHTML).toBe('11111');
Simulate.click(activeItem);
expect(input.value).to.be('11111');
expect(input.value).toBe('11111');
});

it('do not keep active item', () => {
Expand All @@ -65,10 +65,10 @@ describe('Combobox', () => {
input.value = '2';
Simulate.change(input);
let activeItem = $(instance.getPopupDOMNode()).find('.rc-select-dropdown-menu-item-active')[0];
expect(activeItem.innerHTML).to.be('2');
expect(activeItem.innerHTML).toBe('2');
input.value = '';
Simulate.change(input);
activeItem = $(instance.getPopupDOMNode()).find('.rc-select-dropdown-menu-item-active')[0];
expect(activeItem.innerHTML).to.be('1');
expect(activeItem.innerHTML).toBe('1');
});
});
6 changes: 3 additions & 3 deletions tests/OptGroup.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import expect from 'expect.js';
/* eslint-disable no-undef */
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils, { Simulate } from 'react-addons-test-utils';
Expand Down Expand Up @@ -45,8 +45,8 @@ describe('OptGroup', () => {

Simulate.click(TestUtils.scryRenderedDOMComponentsWithClass(select, 'rc-select-selection')[0]);

expect($(select.getPopupDOMNode()).find('.rc-select-dropdown-menu-item-group').length).to.be(2);
expect($(select.getPopupDOMNode()).find('.rc-select-dropdown-menu-item').length).to.be(3);
expect($(select.getPopupDOMNode()).find('.rc-select-dropdown-menu-item-group').length).toBe(2);
expect($(select.getPopupDOMNode()).find('.rc-select-dropdown-menu-item').length).toBe(3);

done();
});
Expand Down
86 changes: 47 additions & 39 deletions tests/Select.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import expect from 'expect.js';
/* eslint-disable no-undef */
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import TestUtils, { Simulate } from 'react-addons-test-utils';
import Select, { Option } from 'rc-select';
import $ from 'jquery';
import { mount, render } from 'enzyme';
import { renderToJson } from 'enzyme-to-json';

describe('Select', () => {
let instance;
Expand Down Expand Up @@ -32,19 +34,21 @@ describe('Select', () => {
open: true,
}, () => {
expect(instance.getPopupDOMNode().parentNode
.parentNode.parentNode.nodeName.toLowerCase()).to.be('body');
expect(instance.getPopupDOMNode().className).not.to.contain('hidden');
.parentNode.parentNode.nodeName.toLowerCase()).toBe('body');
expect(instance.getPopupDOMNode().className).not.toContain('hidden');
done();
});
});

it('should add css class of root dom node', () => {
instance = ReactDOM.render(
it('renders correctly', () => {
const wrapper = render(
<Select className="forTest" openClassName="my-open" value="2">
<Option value="1">1</Option>
<Option value="2" disabled>2</Option>
</Select>, div);
expect(ReactDOM.findDOMNode(instance).className.indexOf('forTest') !== -1).to.be(true);
</Select>
);

expect(renderToJson(wrapper)).toMatchSnapshot();
});

it('should default select the right option', (done) => {
Expand All @@ -56,8 +60,8 @@ describe('Select', () => {
instance.setState({
open: true,
}, () => {
expect(instance.getPopupMenuComponent().instanceArray[0].isSelected()).to.be(false);
expect(instance.getPopupMenuComponent().instanceArray[1].isSelected()).to.be(true);
expect(instance.getPopupMenuComponent().instanceArray[0].isSelected()).toBe(false);
expect(instance.getPopupMenuComponent().instanceArray[1].isSelected()).toBe(true);
done();
});
});
Expand All @@ -72,9 +76,9 @@ describe('Select', () => {
instance.setState({
open: true,
}, () => {
expect(instance.getPopupMenuComponent().instanceArray[0].isSelected()).to.be(true);
expect(instance.getPopupMenuComponent().instanceArray[1].isSelected()).to.be(true);
expect(instance.getPopupMenuComponent().instanceArray[2].isSelected()).to.be(false);
expect(instance.getPopupMenuComponent().instanceArray[0].isSelected()).toBe(true);
expect(instance.getPopupMenuComponent().instanceArray[1].isSelected()).toBe(true);
expect(instance.getPopupMenuComponent().instanceArray[2].isSelected()).toBe(false);
done();
});
});
Expand All @@ -87,7 +91,7 @@ describe('Select', () => {
</Select>,
div);
expect(TestUtils.scryRenderedDOMComponentsWithClass(instance,
'rc-select-selection__clear')[0].style.display).to.be('block');
'rc-select-selection__clear')[0].style.display).toBe('block');
});

it('should hide clear button', () => {
Expand All @@ -98,7 +102,7 @@ describe('Select', () => {
</Select>,
div);
expect(TestUtils.scryRenderedDOMComponentsWithClass(instance,
'rc-select-selection__clear')[0].style.display).to.be('none');
'rc-select-selection__clear')[0].style.display).toBe('none');
});

it('should not response click event when select is disabled', (done) => {
Expand All @@ -108,7 +112,7 @@ describe('Select', () => {
<Option value="2">2</Option>
</Select>, div);
Simulate.click(ReactDOM.findDOMNode(instance.refs.selection));
expect(instance.state.open).not.to.be.ok();
expect(instance.state.open).not.toBeTruthy();
done();
});

Expand All @@ -119,7 +123,7 @@ describe('Select', () => {
<Option value="2">2</Option>
</Select>, div);
expect($(ReactDOM.findDOMNode(instance))
.find('.rc-select-selection-selected-value').length).to.be(1);
.find('.rc-select-selection-selected-value').length).toBe(1);
done();
});

Expand All @@ -130,12 +134,12 @@ describe('Select', () => {
<Option value="2">2</Option>
</Select>, div);
expect($(ReactDOM.findDOMNode(instance))
.find('.rc-select-selection__placeholder').length).to.be(1);
.find('.rc-select-selection__placeholder').length).toBe(1);
done();
});

describe('when open', function test() {
this.timeout(400000);
describe('when open', () => {
// this.timeout(400000);

beforeEach((done) => {
div = document.createElement('div');
Expand Down Expand Up @@ -164,54 +168,58 @@ describe('Select', () => {
Simulate.change(instance.getInputDOMNode());
setTimeout(() => {
expect($(instance.getPopupDOMNode())
.find('.rc-select-dropdown-menu-item').length).to.be(1);
.find('.rc-select-dropdown-menu-item').length).toBe(1);
expect($(instance.getPopupDOMNode())
.find('.rc-select-dropdown-menu-item')[0].innerHTML).to.be('Not Found');
.find('.rc-select-dropdown-menu-item')[0].innerHTML).toBe('Not Found');
done();
}, 100);
});

it('should show search input in single selection trigger', (done) => {
expect($(instance.getInputDOMNode()).parents('.rc-select-open').length).to.be(1);
expect($(instance.getInputDOMNode()).parents('.rc-select-open').length).toBe(1);
done();
});
});

describe('automatic tokenization ', () => {
it('tokenize tag select', () => {
instance = ReactDOM.render(
const wrapper = mount(
<Select tags tokenSeparators={[',']}>
<Option value="1">1</Option>
<Option value="2">2</Option>
</Select>,
div);
const input = TestUtils.findRenderedDOMComponentWithTag(instance, 'input');

input.value = '2,3,4';
Simulate.change(input);
wrapper.find('input').simulate('change', { target: {
value: '2,3,4',
} });

expect(instance.state.value).to.eql([
expect(wrapper.state().value).toEqual([
{ key: '2', label: '2' },
{ key: '3', label: '3' },
{ key: '4', label: '4' },
]);
});

it('tokenize multiple select', () => {
instance = ReactDOM.render(
const wrapper = mount(
<Select multiple optionLabelProp="children" tokenSeparators={[',']}>
<Option value="1">One</Option>
<Option value="2">Two</Option>
</Select>,
div);
const input = TestUtils.findRenderedDOMComponentWithTag(instance, 'input');
);

const input = wrapper.find('input');

input.value = 'One,';
Simulate.change(input);
input.value = 'One,Two,Three';
Simulate.change(input);
input.simulate('change', { target: {
value: 'One',
} });

expect(instance.state.value).to.eql([
input.simulate('change', { target: {
value: 'One,Two,Three',
} });

expect(wrapper.state().value).toEqual([
{ key: '1', label: 'One' },
{ key: '2', label: 'Two' },
]);
Expand Down Expand Up @@ -242,10 +250,10 @@ describe('Select', () => {
}
}

instance = ReactDOM.render(<App />, div);
instance.setState({ value: { label: 'One', key: '1' } }, () => {
const input = TestUtils.findRenderedDOMComponentWithTag(instance, 'input');
expect(input.value).to.be('One');
const wrapper = mount(<App />);

wrapper.setState({ value: { label: 'One', key: '1' } }, () => {
expect(wrapper.find('input').props().value).toBe('One');
done();
});
});
Expand Down
41 changes: 41 additions & 0 deletions tests/__snapshots__/Select.spec.js.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
exports[`Select renders correctly 1`] = `
<div
class="forTest rc-select rc-select-enabled">
<div
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
class="rc-select-selection
rc-select-selection--single"
role="combobox"
tabindex="0">
<div
class="rc-select-selection__rendered">
<div
class="rc-select-selection-selected-value"
style="display:block;opacity:1;"
title="2">
2
</div>
<div
class="rc-select-search rc-select-search--inline"
style="display:none;">
<div
class="rc-select-search__field__wrap">
<input
class="rc-select-search__field"
value="" />
<span
class="rc-select-search__field__mirror" />
</div>
</div>
</div>
<span
class="rc-select-arrow"
style="user-select:none;-webkit-user-select:none;"
unselectable="unselectable">
<b />
</span>
</div>
</div>
`;
6 changes: 0 additions & 6 deletions tests/index.js
View file

This file was deleted.

Loading

0 comments on commit 7cab4d9

Please sign in to comment.