From 8f60a3c48392dc04390559f68fa535eb419c713e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Wed, 22 Jun 2016 14:32:42 +0800 Subject: [PATCH] use ava and enzyme, replace jest (#2135) --- package.json | 42 +++++------ tests/button.test.js | 47 +++++------- tests/helpers/setup-browser-env.js | 3 + tests/icon.test.js | 38 ++++------ tests/index.test.js | 117 +++++++++++++++-------------- tests/layout.test.js | 35 +++------ tests/popover.test.js | 38 ++++------ 7 files changed, 138 insertions(+), 182 deletions(-) create mode 100644 tests/helpers/setup-browser-env.js diff --git a/package.json b/package.json index 2aa765d0d9..db1cef1a48 100644 --- a/package.json +++ b/package.json @@ -74,8 +74,8 @@ }, "devDependencies": { "antd-tools": "^0.8.0", + "ava": "^0.15.2", "babel-eslint": "^6.0.2", - "babel-jest": "^12.0.2", "babel-plugin-antd": "^0.4.0", "bisheng": "^0.7.1", "bisheng-plugin-antd": "0.1.0", @@ -84,7 +84,7 @@ "bisheng-plugin-toc": "0.2.0", "dora-plugin-upload": "^0.3.1", "enquire.js": "^2.1.1", - "es6-shim": "^0.35.0", + "enzyme": "^2.3.0", "eslint": "^2.2.0", "eslint-config-airbnb": "^9.0.1", "eslint-plugin-babel": "^3.0.0", @@ -96,7 +96,6 @@ "history": "^2.0.1", "intl": "^1.2.2", "intl-locales-supported": "^1.0.0", - "jest-cli": "^12.0.2", "jsonml-to-react-component": "~0.2.0", "jsonml.js": "^0.1.0", "jsonp": "^0.2.0", @@ -116,11 +115,9 @@ "react-github-button": "^0.1.1", "react-intl": "^2.0.1", "react-router": "^2.0.0", - "react-stateless-wrapper": "^1.0.2", "react-sublime-video": "^0.2.0", "reqwest": "^2.0.5", - "values.js": "^1.0.3", - "webpack-babel-jest": "^1.0.4" + "values.js": "^1.0.3" }, "scripts": { "dist": "antd-tools run dist", @@ -136,30 +133,25 @@ "demolint": "RUN_ENV=DEMO eslint components/*/demo/*.md --ext '.md'", "lesshint": "lesshint components -r scripts/lesshint-report.js", "eslint-fix": "eslint --fix components test site scripts ./*.js --ext '.js,.jsx' && eslint-tinker ./components/*/demo/*.md", - "test": "npm run lint && npm run dist && npm run jest", - "jest": "jest", + "test": "npm run lint && npm run dist && npm run ava", + "ava": "ava tests/*.test.js", "pre-publish": "node ./scripts/prepub", "prepublish": "antd-tools run guard", "pub": "antd-tools run update-self && antd-tools run pub", "authors": "git log --format='%aN <%aE>' | sort -u | grep -v 'users.noreply.github.com' | grep -v 'gitter.im' | grep -v '.local>' | grep -v 'alibaba-inc.com' | grep -v 'alipay.com' | grep -v 'taobao.com' > AUTHORS.txt" }, - "jest": { - "moduleFileExtensions": [ - "js", - "jsx", - "json" - ], - "unmockedModulePathPatterns": [ - "/node_modules/*" - ], - "modulePathIgnorePatterns": [ - "/_site/" - ], - "testPathIgnorePatterns": [ - "/node_modules/" - ], - "scriptPreprocessor": "/node_modules/webpack-babel-jest", - "testDirectoryName": "tests" + "ava": { + "babel": { + "presets": [ + "es2015", + "stage-0", + "react" + ] + }, + "require": [ + "./tests/helpers/setup-browser-env.js", + "babel-register" + ] }, "pre-commit": [ "lint" diff --git a/tests/button.test.js b/tests/button.test.js index 7a68dc437c..aebd9ec604 100644 --- a/tests/button.test.js +++ b/tests/button.test.js @@ -1,34 +1,23 @@ -jest.unmock('../components/button/button'); -jest.unmock('../components/icon/index'); - +import test from 'ava'; import React from 'react'; -import TestUtils from 'react-addons-test-utils'; +import { shallow } from 'enzyme'; import Button from '../components/button/button'; -describe('Button', function() { - let button; - let buttonNode; +let buttonNode; - beforeEach(() => { - button = TestUtils.renderIntoDocument( - - ); - buttonNode = TestUtils.findRenderedDOMComponentWithTag(button, 'button'); - }); - - it('should set the type to button by default', () => { - expect(buttonNode.type).toBe('button'); - }); - - it('should set the default className to button', () => { - expect(buttonNode.className).toBe('ant-btn'); - }); - - it('should has a whitespace in two Chinese charactor', () => { - button = TestUtils.renderIntoDocument( - - ); - buttonNode = TestUtils.findRenderedDOMComponentWithTag(button, 'button'); - expect(buttonNode.textContent).toBe('按 钮'); - }); +test.beforeEach(() => { + buttonNode = shallow(); +}); + +test('should set the type to button by default', (t) => { + t.is(buttonNode.type(), 'button'); +}); + +test('should set the default className to button', (t) => { + t.true(buttonNode.hasClass('ant-btn')); +}); + +test('should has a whitespace in two Chinese charactor', (t) => { + buttonNode = shallow(); + t.is(buttonNode.text(), '按 钮'); }); diff --git a/tests/helpers/setup-browser-env.js b/tests/helpers/setup-browser-env.js new file mode 100644 index 0000000000..429b816f37 --- /dev/null +++ b/tests/helpers/setup-browser-env.js @@ -0,0 +1,3 @@ +global.document = require('jsdom').jsdom(''); +global.window = document.defaultView; +global.navigator = window.navigator; diff --git a/tests/icon.test.js b/tests/icon.test.js index b3c8c6a08d..4f22f6e13d 100644 --- a/tests/icon.test.js +++ b/tests/icon.test.js @@ -1,27 +1,19 @@ -jest.unmock('../components/icon/index'); - +import test from 'ava'; import React from 'react'; -import TestUtils from 'react-addons-test-utils'; -import { wrap } from 'react-stateless-wrapper'; +import { shallow } from 'enzyme'; +import Icon from '../components/icon/index'; -import AntIcon from '../components/icon/index'; -const Icon = wrap(AntIcon); +let iconNode; -describe('Icon', function() { - let icon; - let iconNode; - - beforeEach(() => { - icon = TestUtils.renderIntoDocument( - - ); - iconNode = TestUtils.findRenderedDOMComponentWithTag(icon, 'I'); - }); - - it('should render to a ', () => { - expect(iconNode.tagName).toBe('I'); - expect(iconNode.className).toContain('my-icon-classname'); - expect(iconNode.className).toContain('anticon'); - expect(iconNode.className).toContain('anticon-appstore'); - }); +test.beforeEach(() => { + iconNode = shallow( + + ); +}); + +test('should render to a ', (t) => { + t.is(iconNode.type(), 'i'); + t.true(iconNode.hasClass('my-icon-classname')); + t.true(iconNode.hasClass('anticon')); + t.true(iconNode.hasClass('anticon-appstore')); }); diff --git a/tests/index.test.js b/tests/index.test.js index d6235906af..c59295d4e1 100644 --- a/tests/index.test.js +++ b/tests/index.test.js @@ -2,13 +2,13 @@ import React from 'react'; import fs from 'fs'; import path from 'path'; +import test from 'ava'; -describe('antd dist files', function() { - const distFilesExisted = fs.existsSync(path.join(process.cwd(), 'dist', 'antd.js')); +(function() { + const distFilesExisted = fs.existsSync(path.join(process.cwd(), '..', 'dist', 'antd.js')); if (!distFilesExisted) { + test(t => t.pass()); return; - } else { - jest.unmock('../dist/antd'); } // fixed jsdom miss @@ -29,63 +29,64 @@ describe('antd dist files', function() { // https://github.com/ant-design/ant-design/issues/1638 // https://github.com/ant-design/ant-design/issues/1968 - it('should has modules in antd', () => { - expect('Affix' in antd).toBeTruthy(); - expect('Alert' in antd).toBeTruthy(); - expect('Badge' in antd).toBeTruthy(); - expect('Breadcrumb' in antd).toBeTruthy(); - expect('Button' in antd).toBeTruthy(); - expect('Calendar' in antd).toBeTruthy(); - expect('Card' in antd).toBeTruthy(); - expect('Carousel' in antd).toBeTruthy(); - expect('Cascader' in antd).toBeTruthy(); - expect('Checkbox' in antd).toBeTruthy(); - expect('Col' in antd).toBeTruthy(); - expect('Collapse' in antd).toBeTruthy(); - expect('DatePicker' in antd).toBeTruthy(); - expect('Dropdown' in antd).toBeTruthy(); - expect('Form' in antd).toBeTruthy(); - expect('Icon' in antd).toBeTruthy(); - expect('Input' in antd).toBeTruthy(); - expect('InputNumber' in antd).toBeTruthy(); - expect('LocaleProvider' in antd).toBeTruthy(); - expect('Menu' in antd).toBeTruthy(); - expect('message' in antd).toBeTruthy(); - expect('Modal' in antd).toBeTruthy(); - expect('notification' in antd).toBeTruthy(); - expect('Pagination' in antd).toBeTruthy(); - expect('Popconfirm' in antd).toBeTruthy(); - expect('Popover' in antd).toBeTruthy(); - expect('Progress' in antd).toBeTruthy(); - expect('QueueAnim' in antd).toBeTruthy(); - expect('Radio' in antd).toBeTruthy(); - expect('Rate' in antd).toBeTruthy(); - expect('Row' in antd).toBeTruthy(); - expect('Select' in antd).toBeTruthy(); - expect('Slider' in antd).toBeTruthy(); - expect('Spin' in antd).toBeTruthy(); - expect('Steps' in antd).toBeTruthy(); - expect('Switch' in antd).toBeTruthy(); - expect('Table' in antd).toBeTruthy(); - expect('Tabs' in antd).toBeTruthy(); - expect('Tag' in antd).toBeTruthy(); - expect('TimePicker' in antd).toBeTruthy(); - expect('Timeline' in antd).toBeTruthy(); - expect('Tooltip' in antd).toBeTruthy(); - expect('Transfer' in antd).toBeTruthy(); - expect('Tree' in antd).toBeTruthy(); - expect('TreeSelect' in antd).toBeTruthy(); - expect('Upload' in antd).toBeTruthy(); - expect('Validation' in antd).toBeTruthy(); + test('should has modules in antd', (t) => { + t.true('Affix' in antd); + t.true('Alert' in antd); + t.true('Badge' in antd); + t.true('Breadcrumb' in antd); + t.true('Button' in antd); + t.true('Calendar' in antd); + t.true('Card' in antd); + t.true('Carousel' in antd); + t.true('Cascader' in antd); + t.true('Checkbox' in antd); + t.true('Col' in antd); + t.true('Collapse' in antd); + t.true('DatePicker' in antd); + t.true('Dropdown' in antd); + t.true('Form' in antd); + t.true('Icon' in antd); + t.true('Input' in antd); + t.true('InputNumber' in antd); + t.true('LocaleProvider' in antd); + t.true('Menu' in antd); + t.true('message' in antd); + t.true('Modal' in antd); + t.true('notification' in antd); + t.true('Pagination' in antd); + t.true('Popconfirm' in antd); + t.true('Popover' in antd); + t.true('Progress' in antd); + t.true('QueueAnim' in antd); + t.true('Radio' in antd); + t.true('Rate' in antd); + t.true('Row' in antd); + t.true('Select' in antd); + t.true('Slider' in antd); + t.true('Spin' in antd); + t.true('Steps' in antd); + t.true('Switch' in antd); + t.true('Table' in antd); + t.true('Tabs' in antd); + t.true('Tag' in antd); + t.true('TimePicker' in antd); + t.true('Timeline' in antd); + t.true('Tooltip' in antd); + t.true('Transfer' in antd); + t.true('Tree' in antd); + t.true('TreeSelect' in antd); + t.true('Upload' in antd); + t.true('Validation' in antd); }); // https://github.com/ant-design/ant-design/issues/1970 // https://github.com/ant-design/ant-design/issues/1804 - it('should be compatible in IE8', () => { - const antdJsContent = fs.readFileSync(path.join(process.cwd(), 'dist', 'antd.js')); - expect( + test('should be compatible in IE8', (t) => { + const antdJsContent = fs.readFileSync(path.join(process.cwd(), '..', 'dist', 'antd.js')); + t.is( antdJsContent.toString() - .indexOf('function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }') - ).toBe(-1); + .indexOf('function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }'), + -1 + ); }) -}); +})(); diff --git a/tests/layout.test.js b/tests/layout.test.js index 22b1c5c93d..f0d02f2bf4 100644 --- a/tests/layout.test.js +++ b/tests/layout.test.js @@ -1,27 +1,14 @@ -jest.unmock('../components/layout/index'); -jest.unmock('../components/layout/col'); -jest.unmock('../components/layout/row'); - +import test from 'ava'; import React from 'react'; -import TestUtils from 'react-addons-test-utils'; -import { wrap } from 'react-stateless-wrapper'; +import { shallow } from 'enzyme'; +import { Col, Row } from '../components/layout/index'; -let { Col, Row } = require('../components/layout/index'); -Col = wrap(Col); - -describe('Layout', function() { - it('should render Col', () => { - const col = TestUtils.renderIntoDocument( - - ); - const colNode = TestUtils.findRenderedDOMComponentWithTag(col, 'DIV'); - expect(colNode.className).toBe('ant-col-2'); - }); - it('should render Row', () => { - const row = TestUtils.renderIntoDocument( - - ); - const rowNode = TestUtils.findRenderedDOMComponentWithTag(row, 'DIV'); - expect(rowNode.className).toBe('ant-row'); - }); +test('should render Col', (t) => { + const col = shallow(); + t.true(col.hasClass('ant-col-2')); +}); + +test('should render Row', (t) => { + const row = shallow(); + t.true(row.hasClass('ant-row')); }); diff --git a/tests/popover.test.js b/tests/popover.test.js index 81864e07d1..cbedd36c4e 100644 --- a/tests/popover.test.js +++ b/tests/popover.test.js @@ -1,29 +1,21 @@ -jest.unmock('../components/popover/placements'); -jest.unmock('../components/popover/index'); -jest.unmock('../components/tooltip/index'); - +import test from 'ava'; import React from 'react'; -import TestUtils from 'react-addons-test-utils'; -import Popover from '../components/popover/index'; +import Popover from '../components/popover' +import { mount } from 'enzyme'; -describe('Popover', function() { - it('should show overlay when trigger is clicked', () => { - const popover = TestUtils.renderIntoDocument( - - show me your code - - ); +test('should show overlay when trigger is clicked', (t) => { + const popover = mount( + + show me your code + + ); - expect(popover.getPopupDomNode()).toBe(undefined); + t.is(popover.instance().getPopupDomNode(), undefined); - TestUtils.Simulate.click( - TestUtils.findRenderedDOMComponentWithTag(popover, 'a') - ); + popover.find('a').simulate('click'); - const popup = popover.getPopupDomNode(); - expect(popup).not.toBe(undefined); - expect(popup.className).toContain('ant-popover-placement-top'); - expect(popup.innerHTML).toMatch(/
code<\/div>/); - expect(popup.innerHTML).toMatch(/
console\.log\('hello world'\)<\/div>/); - }); + const popup = popover.instance().getPopupDomNode(); + t.truthy(popup); + t.true(popup.className.indexOf('ant-popover-placement-top') > 0); + t.is(popup.innerHTML, '
code
'); });