fix: 优化 storybook

cuke-ui · Oct 28, 2018 · d85bbd9 · d85bbd9
1 parent 25a6517
commit d85bbd9
Show file tree

Hide file tree

Showing 18 changed files with 342 additions and 1,653 deletions.
diff --git a/components/cityPicker/CityPicker.js b/components/cityPicker/CityPicker.js
@@ -8,7 +8,8 @@ import { DownIcon } from "../icon";
 export default class CityPicker extends PureComponent {
   state = {
     visible: null,
-    selectedCityGroup: this.props.defaultActiveGroup || this.props.activeGroup || 0,
+    selectedCityGroup:
+      this.props.defaultActiveGroup || this.props.activeGroup || 0,
     selectedCityName: ""
   };
   static defaultProps = {
@@ -17,7 +18,7 @@ export default class CityPicker extends PureComponent {
     disabled: false,
     placeholder: "请选择",
     disabledGroups: [],
-    onPanelVisibleChange: () => { }
+    onPanelVisibleChange: () => {}
   };
   static propTypes = {
     cityList: PropTypes.arrayOf(
@@ -39,8 +40,8 @@ export default class CityPicker extends PureComponent {
     onPanelVisibleChange: PropTypes.func
   };
   constructor(props) {
-    super(props)
-    this.toggleContainer = createRef()
+    super(props);
+    this.toggleContainer = createRef();
   }
 
   onCityGroupChange = (selectedCityGroup, index) => {
@@ -57,17 +58,20 @@ export default class CityPicker extends PureComponent {
   };
 
   onOpenCityPicker = () => {
-    const visible = !this.state.visible
+    const visible = !this.state.visible;
     this.setState({ visible });
     this.props.onPanelVisibleChange(visible);
   };
-  onClickOutsideHandler = (e) => {
-    e.stopPropagation()
-    if (this.state.visible && !this.toggleContainer.current.contains(e.target)) {
+  onClickOutsideHandler = e => {
+    e.stopPropagation();
+    if (
+      this.state.visible &&
+      !this.toggleContainer.current.contains(e.target)
+    ) {
       this.setState({ visible: false });
       this.props.onPanelVisibleChange(false);
     }
-  }
+  };
   render() {
     const {
       cityList,
@@ -84,7 +88,11 @@ export default class CityPicker extends PureComponent {
     } = this.props;
     const { visible, selectedCityName, selectedCityGroup } = this.state;
     return (
-      <div className={cls(`${prefixCls}`, className)} {...attr} ref={this.toggleContainer}>
+      <div
+        className={cls(`${prefixCls}`, className)}
+        {...attr}
+        ref={this.toggleContainer}
+      >
         <div
           className={cls(`${prefixCls}-inner`, {
             [`${prefixCls}-active`]: visible
@@ -104,7 +112,7 @@ export default class CityPicker extends PureComponent {
           className={cls(`${prefixCls}-content`, {
             [`${prefixCls}-open`]: visible,
             [`${prefixCls}-close`]: !visible,
-            ['cuke-ui-no-animate']: visible === null
+            ["cuke-ui-no-animate"]: visible === null
           })}
         >
           <CityPickerCore
@@ -119,9 +127,9 @@ export default class CityPicker extends PureComponent {
     );
   }
   componentWillUnmount() {
-    window.removeEventListener('click', this.onClickOutsideHandler, false);
+    window.removeEventListener("click", this.onClickOutsideHandler, false);
   }
   componentDidMount() {
-    window.addEventListener('click', this.onClickOutsideHandler, false);
+    window.addEventListener("click", this.onClickOutsideHandler, false);
   }
 }
diff --git a/components/cityPicker/__tests__/index.test.js b/components/cityPicker/__tests__/index.test.js
@@ -131,7 +131,7 @@ describe("<CityPicker/>", () => {
     assert(wrapper.state().selectedCityGroup === "热门");
   });
 
-  it.skip("should render custom disabled city group and can not trigger click event ", () => {
+  it("should render custom disabled city group and can not trigger click event ", () => {
     const onClick = jest.fn();
     const wrapper = shallow(
       <CityPicker
@@ -140,7 +140,7 @@ describe("<CityPicker/>", () => {
         disabledGroups={[0, 1, 2, 3, 4, 5, 6]}
       />
     );
-    wrapper.find("div").simulate("click");
+    wrapper.find(".cuke-city-picker").simulate("click");
     expect(onClick).not.toHaveBeenCalled();
   });
 });
diff --git a/components/collapse/__tests__/index.test.js b/components/collapse/__tests__/index.test.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { render, shallow, mount } from "enzyme";
+import { render, shallow } from "enzyme";
 import assert from "power-assert";
 import toJson from "enzyme-to-json";
 import Collapse from "../index";
@@ -35,8 +35,8 @@ describe("<Collapse/>", () => {
     assert(wrapper.find(Collapse.Item).length === 2);
   });
 
-  it.skip("should render default active key", () => {
-    const wrapper = mount(
+  it("should render default active key", () => {
+    const wrapper = render(
       <Collapse defaultActiveKey={["1", "2"]}>
         <Collapse.Item title="标题1">内容1</Collapse.Item>
         <Collapse.Item title="标题2">内容2</Collapse.Item>
@@ -45,8 +45,8 @@ describe("<Collapse/>", () => {
     assert(wrapper.find(".cuke-collapse-item-arrow-active").length === 2);
   });
 
-  it.skip("should render active key", () => {
-    const wrapper = mount(
+  it("should render active key", () => {
+    const wrapper = render(
       <Collapse defaultActiveKey={["1"]}>
         <Collapse.Item title="标题1">内容1</Collapse.Item>
         <Collapse.Item title="标题2">内容2</Collapse.Item>
@@ -55,8 +55,8 @@ describe("<Collapse/>", () => {
     assert(wrapper.find(".cuke-collapse-item-arrow-active").length === 1);
   });
 
-  it.skip("should render hide arrow for collapseItem", () => {
-    const wrapper = mount(
+  it("should render hide arrow for collapseItem", () => {
+    const wrapper = render(
       <Collapse>
         <Collapse.Item title="标题1" hideArrow>
           内容1
@@ -67,8 +67,8 @@ describe("<Collapse/>", () => {
     assert(wrapper.find(".cuke-collapse-item-arrow").length === 1);
   });
 
-  it.skip("should render hide arrow for collapse", () => {
-    const wrapper = mount(
+  it("should render hide arrow for collapse", () => {
+    const wrapper = render(
       <Collapse hideArrow>
         <Collapse.Item title="标题1">内容1</Collapse.Item>
         <Collapse.Item title="标题2">内容2</Collapse.Item>

diff --git a/components/datePicker/__tests__/__snapshots__/index.test.js.snap b/components/datePicker/__tests__/__snapshots__/index.test.js.snap
@@ -12,7 +12,7 @@ exports[`<DatePicker/> should render a <DatePicker/> components 1`] = `
       placeholder=""
       readonly=""
       type="text"
-      value="2018-10-27"
+      value="2018-10-28"
     />
     <svg
       class="cuke-date-picker-arrow"
@@ -256,12 +256,12 @@ exports[`<DatePicker/> should render a <DatePicker/> components 1`] = `
         26
       </span>
       <span
-        class="cuke-date-picker-item cuke-date-picker-current-month cuke-date-picker-selected-date"
+        class="cuke-date-picker-item cuke-date-picker-current-month"
       >
         27
       </span>
       <span
-        class="cuke-date-picker-item cuke-date-picker-current-month"
+        class="cuke-date-picker-item cuke-date-picker-current-month cuke-date-picker-selected-date"
       >
         28
       </span>

diff --git a/components/datePicker/__tests__/index.test.js b/components/datePicker/__tests__/index.test.js
@@ -1,6 +1,6 @@
 import React from "react";
 import assert from "power-assert";
-import { render, shallow, mount } from "enzyme";
+import { render, shallow } from "enzyme";
 import toJson from "enzyme-to-json";
 import DatePicker from "../index";
 import Button from "../../button";
@@ -14,9 +14,9 @@ describe("<DatePicker/>", () => {
     const wrapper = shallow(<DatePicker />);
     assert(wrapper.find(".cuke-date-picker").length === 1);
   });
-  it.skip("should render find .cuke-date-picker-loading classnames", () => {
-    const wrapper = mount(<DatePicker loading/>);
-    assert(wrapper.find(".cuke-date-picker-loading ").length === 1);
+  it("should render find .cuke-date-picker-loading classnames", () => {
+    const wrapper = shallow(<DatePicker loading />);
+    assert(wrapper.find(".cuke-date-picker-loading").length === 1);
   });
   it("should cannot trigger click event when disabled", () => {
     const onChange = jest.fn();

diff --git a/components/datePicker/index.js b/components/datePicker/index.js
@@ -18,7 +18,7 @@ export default class DataPicker extends PureComponent {
     format: "YYYY-MM-DD",
     onPanelVisibleChange: () => {},
     onChange: () => {},
-    loading: false,
+    loading: false
   };
   static propTypes = {
     prefixCls: PropTypes.string.isRequired,
@@ -34,15 +34,15 @@ export default class DataPicker extends PureComponent {
   };
   constructor(props) {
     super(props);
-    this.toggleContainer = createRef()
+    this.toggleContainer = createRef();
   }
 
   componentWillReceiveProps({ value }) {
     this.setState({ momentSelected: value });
   }
 
   onTogglePanel = () => {
-    const visible = !this.state.visible
+    const visible = !this.state.visible;
     this.setState({ visible }, () => {
       this.content.scrollIntoView({
         behavior: "smooth",
@@ -97,7 +97,9 @@ export default class DataPicker extends PureComponent {
     const lastMonthDaysInMonth = momentLastMonth.daysInMonth();
 
     if (this.props.loading) {
-      return <LoadingIcon className={cls(`${this.props.prefixCls}-loading-icon`)} />;
+      return (
+        <LoadingIcon className={cls(`${this.props.prefixCls}-loading-icon`)} />
+      );
     } else {
       return (
         <>
@@ -145,13 +147,16 @@ export default class DataPicker extends PureComponent {
       );
     }
   };
-  onClickOutsideHandler = (e) => {
-    e.stopPropagation()
-    if (this.state.visible && !this.toggleContainer.current.contains(e.target)) {
+  onClickOutsideHandler = e => {
+    e.stopPropagation();
+    if (
+      this.state.visible &&
+      !this.toggleContainer.current.contains(e.target)
+    ) {
       this.setState({ visible: false });
-      this.props.onPanelVisibleChange(false)
+      this.props.onPanelVisibleChange(false);
     }
-  }
+  };
   render() {
     const { visible } = this.state;
     const {
@@ -170,7 +175,11 @@ export default class DataPicker extends PureComponent {
     const { momentSelected } = this.state;
 
     return (
-      <div className={cls(prefixCls, className)} {...attr} ref={this.toggleContainer}>
+      <div
+        className={cls(prefixCls, className)}
+        {...attr}
+        ref={this.toggleContainer}
+      >
         <div
           className={cls(`${prefixCls}-inner`, {
             [`${prefixCls}-active`]: visible
@@ -190,7 +199,7 @@ export default class DataPicker extends PureComponent {
           className={cls(`${prefixCls}-content`, {
             [`${prefixCls}-open`]: visible,
             [`${prefixCls}-close`]: !visible,
-            ['cuke-ui-no-animate']: visible === null
+            ["cuke-ui-no-animate"]: visible === null
           })}
           ref={node => (this.content = node)}
         >
@@ -214,9 +223,11 @@ export default class DataPicker extends PureComponent {
               </span>
             </span>
           </div>
-          <div className={cls(`${prefixCls}-items`,{
-            [`${prefixCls}-loading`]: loading,
-          })}>
+          <div
+            className={cls(`${prefixCls}-items`, {
+              [`${prefixCls}-loading`]: loading
+            })}
+          >
             {this.renderCalendarContent()}
           </div>
           <div className={cls(`${prefixCls}-footer`)}>{extraFooter}</div>
@@ -225,9 +236,9 @@ export default class DataPicker extends PureComponent {
     );
   }
   componentWillUnmount() {
-    window.removeEventListener('click', this.onClickOutsideHandler, false);
+    window.removeEventListener("click", this.onClickOutsideHandler, false);
   }
   componentDidMount() {
-    window.addEventListener('click', this.onClickOutsideHandler, false);
+    window.addEventListener("click", this.onClickOutsideHandler, false);
   }
 }