tests

components/Slider/Slider.jsx

@@ -1,5 +1,4 @@
 import React, { PureComponent } from 'react';
-import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Drag from '../Drag';
@@ -24,6 +23,7 @@ class Slider extends PureComponent {
       offset: 0,
       tooltip: false,
     };
+    this.allowDrag = false;
     this.offsetStart = 0;
     this.onDragStart = this.onDragStart.bind(this);
     this.onDragMove = this.onDragMove.bind(this);
@@ -47,10 +47,13 @@ class Slider extends PureComponent {
     const { disabled } = this.props;
     if (disabled) return;
 
+    this.allowDrag = true;
     this.setState({ tooltip: true });
   }
 
   onDragMove(event, { offsetX }) {
+    if (!this.allowDrag) return;
+
     event.preventDefault();
 
     let offset = this.offsetStart + offsetX;
@@ -65,6 +68,7 @@ class Slider extends PureComponent {
 
   onDragEnd(event, { offsetX }) {
     this.offsetStart += offsetX;
+    this.allowDrag = false;
     this.setState({ tooltip: false });
 
     const { onChange } = this.props;
@@ -96,7 +100,9 @@ class Slider extends PureComponent {
    * 获取最大偏移量
    */
   maxOffset() {
-    return this.line.offsetWidth;
+    return this.line
+      ? this.line.offsetWidth
+      : 0;
   }
 
   /**
@@ -133,8 +139,7 @@ class Slider extends PureComponent {
             aria-valuemin={min}
             aria-valuemax={max}
             aria-valuenow={value}
-            style={{ left: offset }}
-            ref={(ele) => { this.handle = ele; }}>
+            style={{ left: offset }}>
             <Tooltip visible={tooltip} message={value}><div className={`${prefixCls}-handle-shadow`} /></Tooltip>
           </div>
         </Drag>
@@ -147,6 +152,8 @@ Slider.propTypes = {
   prefixCls: PropTypes.string,
   className: PropTypes.string,
   disabled: PropTypes.bool,
+  value: PropTypes.number,
+  defaultValue: PropTypes.number, // eslint-disable-line
   step: PropTypes.number,
   min: PropTypes.number,
   max: PropTypes.number,
@@ -158,7 +165,7 @@ Slider.defaultProps = {
   disabled: false,
   step: 1,
   min: 0,
-  max: 100000,
+  max: 100,
 };
 
 export default Slider;

components/Slider/__tests__/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,190 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Slider defaultValue 1`] = `
+<div
+  class="za-slider"
+>
+  <div
+    class="za-slider-line"
+  >
+    <div
+      class="za-slider-line-bg"
+      style="width:0;"
+    />
+  </div>
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="10"
+    class="za-slider-handle"
+    role="slider"
+    style="left:0;"
+  >
+    <div
+      class="za-slider-handle-shadow"
+    />
+  </div>
+</div>
+`;
+
+exports[`Slider disabled 1`] = `
+<div
+  class="za-slider disabled"
+>
+  <div
+    class="za-slider-line"
+  >
+    <div
+      class="za-slider-line-bg"
+      style="width:0;"
+    />
+  </div>
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="0"
+    class="za-slider-handle"
+    role="slider"
+    style="left:0;"
+  >
+    <div
+      class="za-slider-handle-shadow"
+    />
+  </div>
+</div>
+`;
+
+exports[`Slider max 1`] = `
+<div
+  class="za-slider"
+>
+  <div
+    class="za-slider-line"
+  >
+    <div
+      class="za-slider-line-bg"
+      style="width:0;"
+    />
+  </div>
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="0"
+    class="za-slider-handle"
+    role="slider"
+    style="left:0;"
+  >
+    <div
+      class="za-slider-handle-shadow"
+    />
+  </div>
+</div>
+`;
+
+exports[`Slider min 1`] = `
+<div
+  class="za-slider"
+>
+  <div
+    class="za-slider-line"
+  >
+    <div
+      class="za-slider-line-bg"
+      style="width:0;"
+    />
+  </div>
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="0"
+    class="za-slider-handle"
+    role="slider"
+    style="left:0;"
+  >
+    <div
+      class="za-slider-handle-shadow"
+    />
+  </div>
+</div>
+`;
+
+exports[`Slider renders correctly 1`] = `
+<div
+  class="za-slider"
+>
+  <div
+    class="za-slider-line"
+  >
+    <div
+      class="za-slider-line-bg"
+      style="width:0;"
+    />
+  </div>
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="0"
+    class="za-slider-handle"
+    role="slider"
+    style="left:0;"
+  >
+    <div
+      class="za-slider-handle-shadow"
+    />
+  </div>
+</div>
+`;
+
+exports[`Slider step 1`] = `
+<div
+  class="za-slider"
+>
+  <div
+    class="za-slider-line"
+  >
+    <div
+      class="za-slider-line-bg"
+      style="width:0;"
+    />
+  </div>
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="0"
+    class="za-slider-handle"
+    role="slider"
+    style="left:0;"
+  >
+    <div
+      class="za-slider-handle-shadow"
+    />
+  </div>
+</div>
+`;
+
+exports[`Slider value 1`] = `
+<div
+  class="za-slider"
+>
+  <div
+    class="za-slider-line"
+  >
+    <div
+      class="za-slider-line-bg"
+      style="width:0;"
+    />
+  </div>
+  <div
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="10"
+    class="za-slider-handle"
+    role="slider"
+    style="left:0;"
+  >
+    <div
+      class="za-slider-handle-shadow"
+    />
+  </div>
+</div>
+`;

components/Slider/__tests__/index.test.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, mount } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import Slider from '../index';
+
+describe('Slider', () => {
+  it('renders correctly', () => {
+    const wrapper = render(<Slider />);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  it('min', () => {
+    const wrapper = render(<Slider min={0} />);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  it('max', () => {
+    const wrapper = render(<Slider max={100} />);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  it('step', () => {
+    const wrapper = render(<Slider step={5} />);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  it('disabled', () => {
+    const wrapper = render(<Slider disabled />);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  it('defaultValue', () => {
+    const wrapper = render(<Slider defaultValue={10} />);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  it('value', () => {
+    const wrapper = render(<Slider value={10} />);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  it('set new value', () => {
+    jest.useFakeTimers();
+    const wrapper = mount(<Slider />);
+    wrapper.setProps({ value: 50 });
+    jest.runAllTimers();
+    wrapper.unmount();
+  });
+});

components/Stepper/Stepper.jsx

@@ -114,6 +114,8 @@ Stepper.propTypes = {
   theme: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'error']),
   size: PropTypes.oneOf(['xl', 'lg', 'sm', 'xs']),
   shape: PropTypes.oneOf(['radius', 'circle']),
+  value: PropTypes.number,  // eslint-disable-line
+  defaultValue: PropTypes.number, // eslint-disable-line
   disabled: PropTypes.bool,
   step: PropTypes.number,
   min: PropTypes.number,

components/Tooltip/__tests__/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tooltip renders correctly 1`] = `
+<span>
+  foo
+</span>
+`;
+
+exports[`Tooltip visible 1`] = `
+<Tooltip
+  message="hello"
+  prefixCls="za-tooltip"
+  visible={true}
+>
+  <span>
+    foo
+  </span>
+</Tooltip>
+`;

components/Tooltip/__tests__/index.test.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, mount } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import Tooltip from '../index';
+
+describe('Tooltip', () => {
+  it('renders correctly', () => {
+    const wrapper = render(<Tooltip message="hello"><span>foo</span></Tooltip>);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  it('visible', () => {
+    jest.useFakeTimers();
+    const wrapper = mount(<Tooltip visible message="hello"><span>foo</span></Tooltip>);
+    expect(toJson(wrapper)).toMatchSnapshot();
+    jest.runAllTimers();
+    wrapper.unmount();
+  });
+});