From 6d572aa2d6da7b58815472d4b3fa9779f4312be0 Mon Sep 17 00:00:00 2001 From: Meck Date: Mon, 14 Nov 2016 17:31:23 +0800 Subject: [PATCH] Introduce jest and enzyme --- .babelrc | 3 + package.json | 16 +++-- tests/Combobox.spec.js | 16 ++--- tests/OptGroup.spec.js | 6 +- tests/Select.spec.js | 86 ++++++++++++++----------- tests/__snapshots__/Select.spec.js.snap | 41 ++++++++++++ tests/index.js | 6 -- tests/optionFilterProp.spec.js | 14 ++-- tests/tags.spec.js | 8 +-- tests/util.spec.js | 16 ++--- 10 files changed, 133 insertions(+), 79 deletions(-) create mode 100644 .babelrc create mode 100644 tests/__snapshots__/Select.spec.js.snap delete mode 100644 tests/index.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 000000000..4687bc4f4 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["es2015", "react", "stage-0"] +} diff --git a/package.json b/package.json index e1be2fcb1..32153cc96 100644 --- a/package.json +++ b/package.json @@ -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 | coveralls" }, "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", @@ -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", diff --git a/tests/Combobox.spec.js b/tests/Combobox.spec.js index 2b1c7991f..c33f341fb 100644 --- a/tests/Combobox.spec.js +++ b/tests/Combobox.spec.js @@ -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'; @@ -25,7 +25,7 @@ describe('Combobox', () => { , 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', () => { @@ -33,7 +33,7 @@ describe('Combobox', () => { - , div); - expect(ReactDOM.findDOMNode(instance).className.indexOf('forTest') !== -1).to.be(true); + + ); + + expect(renderToJson(wrapper)).toMatchSnapshot(); }); it('should default select the right option', (done) => { @@ -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(); }); }); @@ -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(); }); }); @@ -87,7 +91,7 @@ describe('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', () => { @@ -98,7 +102,7 @@ describe('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) => { @@ -108,7 +112,7 @@ describe('Select', () => { , div); Simulate.click(ReactDOM.findDOMNode(instance.refs.selection)); - expect(instance.state.open).not.to.be.ok(); + expect(instance.state.open).not.toBeTruthy(); done(); }); @@ -119,7 +123,7 @@ describe('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(); }); @@ -130,12 +134,12 @@ describe('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'); @@ -164,33 +168,33 @@ 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( , 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' }, @@ -198,20 +202,24 @@ describe('Select', () => { }); it('tokenize multiple select', () => { - instance = ReactDOM.render( + const wrapper = mount( , - 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' }, ]); @@ -242,10 +250,10 @@ describe('Select', () => { } } - instance = ReactDOM.render(, div); - instance.setState({ value: { label: 'One', key: '1' } }, () => { - const input = TestUtils.findRenderedDOMComponentWithTag(instance, 'input'); - expect(input.value).to.be('One'); + const wrapper = mount(); + + wrapper.setState({ value: { label: 'One', key: '1' } }, () => { + expect(wrapper.find('input').props().value).toBe('One'); done(); }); }); diff --git a/tests/__snapshots__/Select.spec.js.snap b/tests/__snapshots__/Select.spec.js.snap new file mode 100644 index 000000000..14dea7489 --- /dev/null +++ b/tests/__snapshots__/Select.spec.js.snap @@ -0,0 +1,41 @@ +exports[`Select renders correctly 1`] = ` +
+ +
+`; diff --git a/tests/index.js b/tests/index.js deleted file mode 100644 index a8812a072..000000000 --- a/tests/index.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * only require other specs here - */ -require('../assets/index.less'); -const req = require.context('.', false, /\.spec\.js$/); -req.keys().forEach(req); diff --git a/tests/optionFilterProp.spec.js b/tests/optionFilterProp.spec.js index ae501eb41..f9e3fddcf 100644 --- a/tests/optionFilterProp.spec.js +++ b/tests/optionFilterProp.spec.js @@ -1,4 +1,4 @@ -import expect from 'expect.js'; +/* eslint-disable no-undef */ import React from 'react'; import ReactDOM from 'react-dom'; import { Simulate } from 'react-addons-test-utils'; @@ -28,10 +28,10 @@ describe('optionFilterProp', () => { Simulate.click(ReactDOM.findDOMNode(select.refs.selection)); select.getInputDOMNode().value = 1; Simulate.change(select.getInputDOMNode()); - expect($(select.getPopupDOMNode()).find('.rc-select-dropdown-menu-item').length).to.be(2); + expect($(select.getPopupDOMNode()).find('.rc-select-dropdown-menu-item').length).toBe(2); select.getInputDOMNode().value = 2; Simulate.change(select.getInputDOMNode()); - expect($(select.getPopupDOMNode()).find('.rc-select-dropdown-menu-item').length).to.be(1); + expect($(select.getPopupDOMNode()).find('.rc-select-dropdown-menu-item').length).toBe(1); }); it('can set optionFilterProp', () => { @@ -49,15 +49,15 @@ describe('optionFilterProp', () => { Simulate.click(ReactDOM.findDOMNode(select.refs.selection)); select.getInputDOMNode().value = 1; Simulate.change(select.getInputDOMNode()); - expect($(select.getPopupDOMNode()).find('.rc-select-dropdown-menu-item').length).to.be(0); + expect($(select.getPopupDOMNode()).find('.rc-select-dropdown-menu-item').length).toBe(0); select.getInputDOMNode().value = 2; Simulate.change(select.getInputDOMNode()); - expect($(select.getPopupDOMNode()).find('.rc-select-dropdown-menu-item').length).to.be(0); + expect($(select.getPopupDOMNode()).find('.rc-select-dropdown-menu-item').length).toBe(0); select.getInputDOMNode().value = '一'; Simulate.change(select.getInputDOMNode()); - expect($(select.getPopupDOMNode()).find('.rc-select-dropdown-menu-item').length).to.be(2); + expect($(select.getPopupDOMNode()).find('.rc-select-dropdown-menu-item').length).toBe(2); select.getInputDOMNode().value = '二'; Simulate.change(select.getInputDOMNode()); - expect($(select.getPopupDOMNode()).find('.rc-select-dropdown-menu-item').length).to.be(1); + expect($(select.getPopupDOMNode()).find('.rc-select-dropdown-menu-item').length).toBe(1); }); }); diff --git a/tests/tags.spec.js b/tests/tags.spec.js index 16ef8dd31..84a029613 100644 --- a/tests/tags.spec.js +++ b/tests/tags.spec.js @@ -1,11 +1,11 @@ -import expect from 'expect.js'; +/* eslint-disable no-undef */ import React from 'react'; import ReactDOM from 'react-dom'; import { Simulate } from 'react-addons-test-utils'; import Select, { Option } from 'rc-select'; import KeyCode from 'rc-util/lib/KeyCode'; -describe('tags', function test() { +describe('tags', () => { let div; let instance; @@ -19,7 +19,7 @@ describe('tags', function test() { document.body.removeChild(div); }); - this.timeout(400000); + // this.timeout(400000); beforeEach(() => { div.tabIndex = 0; @@ -50,7 +50,7 @@ describe('tags', function test() { keyCode: KeyCode.ENTER, }); setTimeout(() => { - expect(instance.state.value.map(v => v.key)).to.contain('A'); + expect(instance.state.value.map(v => v.key)).toContain('A'); done(); }, 100); }, 100); diff --git a/tests/util.spec.js b/tests/util.spec.js index 73aa47721..1c432a36c 100644 --- a/tests/util.spec.js +++ b/tests/util.spec.js @@ -1,18 +1,18 @@ -import expect from 'expect.js'; +/* eslint-disable no-undef */ import { includesSeparators, splitBySeparators } from '../src/util'; describe('includesSeparators', () => { const separators = [' ', ',']; it('return true when given includes separators', () => { - expect(includesSeparators(',foo,bar', separators)).to.be(true); + expect(includesSeparators(',foo,bar', separators)).toBe(true); }); it('return false when given do not include separators', () => { - expect(includesSeparators('foobar', separators)).to.be(false); + expect(includesSeparators('foobar', separators)).toBe(false); }); it('return false when string only has a leading separator', () => { - expect(includesSeparators(',foobar', separators)).to.be(false); + expect(includesSeparators(',foobar', separators)).toBe(false); }); }); @@ -20,21 +20,21 @@ describe('splitBySeparators', () => { const separators = [' ', ',']; it('split given string by separators', () => { const string = 'foo bar,baz'; - expect(splitBySeparators(string, separators)).to.eql(['foo', 'bar', 'baz']); + expect(splitBySeparators(string, separators)).toEqual(['foo', 'bar', 'baz']); }); it('split string with leading separator ', () => { const string = ',foo'; - expect(splitBySeparators(string, separators)).to.eql(['foo']); + expect(splitBySeparators(string, separators)).toEqual(['foo']); }); it('split string with trailling separator', () => { const string = 'foo,'; - expect(splitBySeparators(string, separators)).to.eql(['foo']); + expect(splitBySeparators(string, separators)).toEqual(['foo']); }); it('split a separator', () => { const string = ','; - expect(splitBySeparators(string, separators)).to.eql([]); + expect(splitBySeparators(string, separators)).toEqual([]); }); });