Merge pull request #136 from yesmeck/introduce-jest

Introduce jest and enzyme

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react", "stage-0"]
+}

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",

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,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', () => {
@@ -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', () => {
@@ -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');
   });
 });

tests/OptGroup.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';
@@ -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();
   });

tests/Select.spec.js

@@ -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;
@@ -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) => {
@@ -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', () => {
       </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', () => {
       </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', () => {
         <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();
   });
 
@@ -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();
   });
 
@@ -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');
@@ -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' },
       ]);
@@ -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();
     });
   });

tests/__snapshots__/Select.spec.js.snap

@@ -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>
+`;