test: ✅ Alert and AutoComplete test coverage (#24004)

* 🔨 refactor demo code style * refactor alert code and fix test cov * add test case for AutoComplete * fix test
2024-11-24 11:10:01 +08:00 · 2020-05-09 19:32:02 +08:00 · 2020-05-09 19:32:02 +08:00 · 2beb28518c
commit 2beb28518c
parent 28f71921ea
17 changed files with 297 additions and 155 deletions
--- a/components/alert/tests/snapshots/demo.test.ts.snap
+++ b/components/alert/tests/snapshots/demo.test.ts.snap
@ -163,7 +163,7 @@ exports[`renders ./components/alert/demo/basic.md correctly 1`] = `
 `;

 exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
-<div>
+Array [
  <div
    class="ant-alert ant-alert-warning ant-alert-no-icon ant-alert-closable"
    data-show="true"
@ -202,7 +202,7 @@ exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
        </svg>
      </span>
    </button>
-  </div>
+  </div>,
  <div
    class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon ant-alert-closable"
    data-show="true"
@ -243,8 +243,8 @@ exports[`renders ./components/alert/demo/closable.md correctly 1`] = `
        </svg>
      </span>
    </button>
-  </div>
-</div>
+  </div>,
+]
 `;

 exports[`renders ./components/alert/demo/close-text.md correctly 1`] = `
@ -275,7 +275,7 @@ exports[`renders ./components/alert/demo/close-text.md correctly 1`] = `
 `;

 exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
-<div>
+Array [
  <div
    class="ant-alert ant-alert-success ant-alert-no-icon"
    data-show="true"
@ -288,7 +288,7 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
    <span
      class="ant-alert-description"
    />
-  </div>
+  </div>,
  <div
    class="ant-alert ant-alert-success"
    data-show="true"
@ -321,7 +321,7 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
    <span
      class="ant-alert-description"
    />
-  </div>
+  </div>,
  <div
    class="ant-alert ant-alert-info"
    data-show="true"
@ -354,7 +354,7 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
    <span
      class="ant-alert-description"
    />
-  </div>
+  </div>,
  <div
    class="ant-alert ant-alert-warning"
    data-show="true"
@ -387,7 +387,7 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
    <span
      class="ant-alert-description"
    />
-  </div>
+  </div>,
  <div
    class="ant-alert ant-alert-error"
    data-show="true"
@ -420,7 +420,7 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
    <span
      class="ant-alert-description"
    />
-  </div>
+  </div>,
  <div
    class="ant-alert ant-alert-success ant-alert-with-description"
    data-show="true"
@ -455,7 +455,7 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
    >
      Detailed description and advices about successful copywriting.
    </span>
-  </div>
+  </div>,
  <div
    class="ant-alert ant-alert-info ant-alert-with-description"
    data-show="true"
@ -490,7 +490,7 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
    >
      Additional description and informations about copywriting.
    </span>
-  </div>
+  </div>,
  <div
    class="ant-alert ant-alert-warning ant-alert-with-description"
    data-show="true"
@ -525,7 +525,7 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
    >
      This is a warning notice about copywriting.
    </span>
-  </div>
+  </div>,
  <div
    class="ant-alert ant-alert-error ant-alert-with-description"
    data-show="true"
@ -560,12 +560,12 @@ exports[`renders ./components/alert/demo/custom-icon.md correctly 1`] = `
    >
      This is an error message about copywriting.
    </span>
-  </div>
-</div>
+  </div>,
+]
 `;

 exports[`renders ./components/alert/demo/description.md correctly 1`] = `
-<div>
+Array [
  <div
    class="ant-alert ant-alert-success ant-alert-with-description ant-alert-no-icon"
    data-show="true"
@ -580,7 +580,7 @@ exports[`renders ./components/alert/demo/description.md correctly 1`] = `
    >
      Success Description Success Description Success Description
    </span>
-  </div>
+  </div>,
  <div
    class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
    data-show="true"
@ -595,7 +595,7 @@ exports[`renders ./components/alert/demo/description.md correctly 1`] = `
    >
      Info Description Info Description Info Description Info Description
    </span>
-  </div>
+  </div>,
  <div
    class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-no-icon"
    data-show="true"
@ -610,7 +610,7 @@ exports[`renders ./components/alert/demo/description.md correctly 1`] = `
    >
      Warning Description Warning Description Warning Description Warning Description
    </span>
-  </div>
+  </div>,
  <div
    class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
    data-show="true"
@ -625,8 +625,8 @@ exports[`renders ./components/alert/demo/description.md correctly 1`] = `
    >
      Error Description Error Description Error Description Error Description
    </span>
-  </div>
-</div>
+  </div>,
+]
 `;

 exports[`renders ./components/alert/demo/error-boundary.md correctly 1`] = `
@ -641,7 +641,7 @@ exports[`renders ./components/alert/demo/error-boundary.md correctly 1`] = `
 `;

 exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
-<div>
+Array [
  <div
    class="ant-alert ant-alert-success"
    data-show="true"
@ -674,7 +674,7 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    <span
      class="ant-alert-description"
    />
-  </div>
+  </div>,
  <div
    class="ant-alert ant-alert-info"
    data-show="true"
@ -707,7 +707,7 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    <span
      class="ant-alert-description"
    />
-  </div>
+  </div>,
  <div
    class="ant-alert ant-alert-warning ant-alert-closable"
    data-show="true"
@ -766,7 +766,7 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
        </svg>
      </span>
    </button>
-  </div>
+  </div>,
  <div
    class="ant-alert ant-alert-error"
    data-show="true"
@ -799,7 +799,7 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    <span
      class="ant-alert-description"
    />
-  </div>
+  </div>,
  <div
    class="ant-alert ant-alert-success ant-alert-with-description"
    data-show="true"
@ -837,7 +837,7 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    >
      Detailed description and advice about successful copywriting.
    </span>
-  </div>
+  </div>,
  <div
    class="ant-alert ant-alert-info ant-alert-with-description"
    data-show="true"
@ -875,7 +875,7 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    >
      Additional description and information about copywriting.
    </span>
-  </div>
+  </div>,
  <div
    class="ant-alert ant-alert-warning ant-alert-with-description ant-alert-closable"
    data-show="true"
@ -939,7 +939,7 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
        </svg>
      </span>
    </button>
-  </div>
+  </div>,
  <div
    class="ant-alert ant-alert-error ant-alert-with-description"
    data-show="true"
@ -977,8 +977,8 @@ exports[`renders ./components/alert/demo/icon.md correctly 1`] = `
    >
      This is an error message about copywriting.
    </span>
-  </div>
-</div>
+  </div>,
+]
 `;

 exports[`renders ./components/alert/demo/loop-banner.md correctly 1`] = `
@ -1080,7 +1080,7 @@ exports[`renders ./components/alert/demo/smooth-closed.md correctly 1`] = `
 `;

 exports[`renders ./components/alert/demo/style.md correctly 1`] = `
-<div>
+Array [
  <div
    class="ant-alert ant-alert-success ant-alert-no-icon"
    data-show="true"
@ -1093,7 +1093,7 @@ exports[`renders ./components/alert/demo/style.md correctly 1`] = `
    <span
      class="ant-alert-description"
    />
-  </div>
+  </div>,
  <div
    class="ant-alert ant-alert-info ant-alert-no-icon"
    data-show="true"
@ -1106,7 +1106,7 @@ exports[`renders ./components/alert/demo/style.md correctly 1`] = `
    <span
      class="ant-alert-description"
    />
-  </div>
+  </div>,
  <div
    class="ant-alert ant-alert-warning ant-alert-no-icon"
    data-show="true"
@ -1119,7 +1119,7 @@ exports[`renders ./components/alert/demo/style.md correctly 1`] = `
    <span
      class="ant-alert-description"
    />
-  </div>
+  </div>,
  <div
    class="ant-alert ant-alert-error ant-alert-no-icon"
    data-show="true"
@ -1132,6 +1132,6 @@ exports[`renders ./components/alert/demo/style.md correctly 1`] = `
    <span
      class="ant-alert-description"
    />
-  </div>
-</div>
+  </div>,
+]
 `;
--- a/components/alert/tests/snapshots/index.test.tsx.snap
+++ b/components/alert/tests/snapshots/index.test.tsx.snap
@ -22,6 +22,27 @@ exports[`Alert ErrorBoundary 1`] = `
 </div>
 `;

+exports[`Alert could accept none react element icon 1`] = `
+<div
+  class="ant-alert ant-alert-success"
+  data-show="true"
+>
+  <span
+    class="ant-alert-icon"
+  >
+    icon
+  </span>
+  <span
+    class="ant-alert-message"
+  >
+    Success Tips
+  </span>
+  <span
+    class="ant-alert-description"
+  />
+</div>
+`;
+
 exports[`Alert rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
  class="ant-alert ant-alert-info ant-alert-no-icon ant-alert-rtl"
--- a/components/alert/tests/index.test.tsx
+++ b/components/alert/tests/index.test.tsx
@ -105,4 +105,9 @@ describe('Alert', () => {
    expect(ref.current.getPopupDomNode()).toBeTruthy();
    jest.useFakeTimers();
  });
+
+  it('could accept none react element icon', () => {
+    const wrapper = mount(<Alert message="Success Tips" type="success" showIcon icon="icon" />);
+    expect(wrapper).toMatchRenderedSnapshot();
+  });
 });
--- a/components/alert/demo/closable.md
+++ b/components/alert/demo/closable.md
@ -21,7 +21,7 @@ const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
 };

 ReactDOM.render(
-  <div>
+  <>
    <Alert
      message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
      type="warning"
@ -35,7 +35,7 @@ ReactDOM.render(
      closable
      onClose={onClose}
    />
-  </div>,
+  </>,
  mountNode,
 );
 ```
--- a/components/alert/demo/custom-icon.md
+++ b/components/alert/demo/custom-icon.md
@ -21,7 +21,7 @@ import { SmileOutlined } from '@ant-design/icons';
 const icon = <SmileOutlined />;

 ReactDOM.render(
-  <div>
+  <>
    <Alert icon={icon} message="showIcon = false" type="success" />
    <Alert icon={icon} message="Success Tips" type="success" showIcon />
    <Alert icon={icon} message="Informational Notes" type="info" showIcon />
@ -55,7 +55,7 @@ ReactDOM.render(
      type="error"
      showIcon
    />
-  </div>,
+  </>,
  mountNode,
 );
 ```
--- a/components/alert/demo/description.md
+++ b/components/alert/demo/description.md
@ -17,7 +17,7 @@ Additional description for alert message.
 import { Alert } from 'antd';

 ReactDOM.render(
-  <div>
+  <>
    <Alert
      message="Success Text"
      description="Success Description Success Description Success Description"
@ -38,7 +38,7 @@ ReactDOM.render(
      description="Error Description Error Description Error Description Error Description"
      type="error"
    />
-  </div>,
+  </>,
  mountNode,
 );
 ```
--- a/components/alert/demo/icon.md
+++ b/components/alert/demo/icon.md
@ -17,7 +17,7 @@ A relevant icon will make information clearer and more friendly.
 import { Alert } from 'antd';

 ReactDOM.render(
-  <div>
+  <>
    <Alert message="Success Tips" type="success" showIcon />
    <Alert message="Informational Notes" type="info" showIcon />
    <Alert message="Warning" type="warning" showIcon closable />
@ -47,7 +47,7 @@ ReactDOM.render(
      type="error"
      showIcon
    />
-  </div>,
+  </>,
  mountNode,
 );
 ```
--- a/components/alert/demo/style.md
+++ b/components/alert/demo/style.md
@ -17,12 +17,12 @@ There are 4 types of Alert: `success`, `info`, `warning`, `error`.
 import { Alert } from 'antd';

 ReactDOM.render(
-  <div>
+  <>
    <Alert message="Success Text" type="success" />
    <Alert message="Info Text" type="info" />
    <Alert message="Warning Text" type="warning" />
    <Alert message="Error Text" type="error" />
-  </div>,
+  </>,
  mountNode,
 );
 ```
--- a/components/alert/index.tsx
+++ b/components/alert/index.tsx
@ -16,8 +16,6 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import getDataOrAriaProps from '../_util/getDataOrAriaProps';
 import ErrorBoundary from './ErrorBoundary';

-function noop() {}
-
 export interface AlertProps {
  /**
   * Type of Alert styles, options:`success`, `info`, `warning`, `error`
@ -87,7 +85,7 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
    this.setState({
      closing: true,
    });
-    (this.props.onClose || noop)(e);
+    this.props.onClose?.(e);
  };

  animationEnd = () => {
@ -95,56 +93,56 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
      closing: false,
      closed: true,
    });
-    (this.props.afterClose || noop)();
+    this.props.afterClose?.();
  };

-  renderAlert = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
-    const {
-      description,
-      prefixCls: customizePrefixCls,
-      message,
-      closeText,
-      banner,
-      className = '',
-      style,
-      icon,
-      onMouseEnter,
-      onMouseLeave,
-      onClick,
-    } = this.props;
-    let { closable, type, showIcon } = this.props;
-    const { closing, closed } = this.state;
+  getShowIcon() {
+    const { banner, showIcon } = this.props;
+    // banner 模式默认有 Icon
+    return banner && showIcon === undefined ? true : showIcon;
+  }

-    const prefixCls = getPrefixCls('alert', customizePrefixCls);
-
-    // banner模式默认有 Icon
-    showIcon = banner && showIcon === undefined ? true : showIcon;
-    // banner模式默认为警告
-    type = banner && type === undefined ? 'warning' : type || 'info';
-
-    // use outline icon in alert with description
-    const iconType = (description ? iconMapOutlined : iconMapFilled)[type] || null;
-
-    // closeable when closeText is assigned
-    if (closeText) {
-      closable = true;
+  getType() {
+    const { banner, type } = this.props;
+    if (type !== undefined) {
+      return type;
    }
+    // banner 模式默认为警告
+    return banner ? 'warning' : 'info';
+  }

-    const alertCls = classNames(
-      prefixCls,
-      `${prefixCls}-${type}`,
-      {
-        [`${prefixCls}-closing`]: closing,
-        [`${prefixCls}-with-description`]: !!description,
-        [`${prefixCls}-no-icon`]: !showIcon,
-        [`${prefixCls}-banner`]: !!banner,
-        [`${prefixCls}-closable`]: closable,
-        [`${prefixCls}-rtl`]: direction === 'rtl',
-      },
-      className,
-    );
+  getClosable() {
+    const { closable, closeText } = this.props;
+    // closeable when closeText is assigned
+    return closeText ? true : closable;
+  }

-    const closeIcon = closable ? (
+  getIconType() {
+    const { description } = this.props;
+    // use outline icon in alert with description
+    return (description ? iconMapOutlined : iconMapFilled)[this.getType()] || null;
+  }
+
+  renderIconNode({ prefixCls }: { prefixCls: string }) {
+    const { icon } = this.props;
+    const iconType = this.getIconType();
+    if (icon) {
+      return React.isValidElement<{ className?: string }>(icon) ? (
+        React.cloneElement(icon, {
+          className: classNames(`${prefixCls}-icon`, {
+            [icon.props.className as string]: icon.props.className,
+          }),
+        })
+      ) : (
+        <span className={`${prefixCls}-icon`}>{icon}</span>
+      );
+    }
+    return React.createElement(iconType, { className: `${prefixCls}-icon` });
+  }
+
+  renderCloseIcon({ prefixCls }: { prefixCls: string }) {
+    const { closeText } = this.props;
+    return this.getClosable() ? (
      <button
        type="button"
        onClick={this.handleClose}
@ -158,21 +156,47 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
        )}
      </button>
    ) : null;
+  }
+
+  renderAlert = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
+    const {
+      description,
+      prefixCls: customizePrefixCls,
+      message,
+      banner,
+      className = '',
+      style,
+      onMouseEnter,
+      onMouseLeave,
+      onClick,
+    } = this.props;
+    const { closing, closed } = this.state;
+
+    const prefixCls = getPrefixCls('alert', customizePrefixCls);
+
+    const isShowIcon = this.getShowIcon();
+    const type = this.getType();
+    const closable = this.getClosable();
+
+    const alertCls = classNames(
+      prefixCls,
+      `${prefixCls}-${type}`,
+      {
+        [`${prefixCls}-closing`]: closing,
+        [`${prefixCls}-with-description`]: !!description,
+        [`${prefixCls}-no-icon`]: !isShowIcon,
+        [`${prefixCls}-banner`]: !!banner,
+        [`${prefixCls}-closable`]: closable,
+        [`${prefixCls}-rtl`]: direction === 'rtl',
+      },
+      className,
+    );
+
+    const closeIcon = this.renderCloseIcon({ prefixCls });

    const dataOrAriaProps = getDataOrAriaProps(this.props);

-    const iconNode =
-      (icon &&
-        (React.isValidElement<{ className?: string }>(icon) ? (
-          React.cloneElement(icon, {
-            className: classNames(`${prefixCls}-icon`, {
-              [icon.props.className as string]: icon.props.className,
-            }),
-          })
-        ) : (
-          <span className={`${prefixCls}-icon`}>{icon}</span>
-        ))) ||
-      React.createElement(iconType, { className: `${prefixCls}-icon` });
+    const iconNode = this.renderIconNode({ prefixCls });

    return closed ? null : (
      <Animate
@ -190,7 +214,7 @@ export default class Alert extends React.Component<AlertProps, AlertState> {
          onClick={onClick}
          {...dataOrAriaProps}
        >
-          {showIcon ? iconNode : null}
+          {isShowIcon ? iconNode : null}
          <span className={`${prefixCls}-message`}>{message}</span>
          <span className={`${prefixCls}-description`}>{description}</span>
          {closeIcon}
--- a/components/auto-complete/tests/snapshots/demo.test.js.snap
+++ b/components/auto-complete/tests/snapshots/demo.test.js.snap
@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = `
-<div>
+Array [
  <div
    class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
    style="width:200px"
@ -30,9 +30,9 @@ exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = `
        input here
      </span>
    </div>
-  </div>
-  <br />
-  <br />
+  </div>,
+  <br />,
+  <br />,
  <div
    class="ant-select ant-select-auto-complete ant-select-single ant-select-show-search"
    style="width:200px"
@ -61,8 +61,8 @@ exports[`renders ./components/auto-complete/demo/basic.md correctly 1`] = `
        control mode
      </span>
    </div>
-  </div>
-</div>
+  </div>,
+]
 `;

 exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1`] = `
--- a/components/auto-complete/tests/snapshots/index.test.js.snap
+++ b/components/auto-complete/tests/snapshots/index.test.js.snap
@ -1,6 +1,86 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`AutoComplete with Custom Input Element Render rtl render component should be rendered correctly in RTL direction 1`] = `
+exports[`AutoComplete legacy dataSource should accept react element option 1`] = `
+<div
+  class="ant-select ant-select-auto-complete ant-select-single ant-select-open ant-select-show-search"
+>
+  <div
+    class="ant-select-selector"
+  >
+    <span
+      class="ant-select-selection-search"
+    >
+      <input
+        aria-activedescendant="undefined_list_0"
+        aria-autocomplete="list"
+        aria-controls="undefined_list"
+        aria-expanded="true"
+        aria-haspopup="listbox"
+        aria-owns="undefined_list"
+        autocomplete="off"
+        class="ant-select-selection-search-input"
+        role="combobox"
+        value=""
+      />
+    </span>
+    <span
+      class="ant-select-selection-placeholder"
+    />
+  </div>
+  <div>
+    <div
+      class="ant-select-dropdown"
+      style="opacity:0"
+    >
+      <div>
+        <div
+          id="undefined_list"
+          role="listbox"
+          style="height:0;width:0;overflow:hidden"
+        >
+          <div
+            aria-selected="false"
+            id="undefined_list_0"
+            role="option"
+          >
+            key
+          </div>
+        </div>
+        <div
+          class=""
+          style="height:256px"
+        >
+          <div>
+            <div
+              class=""
+              style="display:flex;flex-direction:column"
+            >
+              <div
+                aria-selected="false"
+                class="ant-select-item ant-select-item-option ant-select-item-option-active"
+              >
+                <div
+                  class="ant-select-item-option-content"
+                >
+                  ReactNode
+                </div>
+                <span
+                  aria-hidden="true"
+                  class="ant-select-item-option-state"
+                  style="user-select:none;-webkit-user-select:none"
+                  unselectable="on"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AutoComplete rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
  class="ant-select ant-select-auto-complete ant-select-rtl ant-select-single ant-select-show-search"
 >
--- a/components/auto-complete/tests/index.test.js
+++ b/components/auto-complete/tests/index.test.js
@ -4,7 +4,7 @@ import AutoComplete from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';

-describe('AutoComplete with Custom Input Element Render', () => {
+describe('AutoComplete', () => {
  mountTest(AutoComplete);
  rtlTest(AutoComplete);

@ -52,4 +52,21 @@ describe('AutoComplete with Custom Input Element Render', () => {
    // eslint-disable-next-line no-console
    console.error.mockRestore();
  });
+
+  it('legacy dataSource should accept react element option', () => {
+    const wrapper = mount(<AutoComplete open dataSource={[<span key="key">ReactNode</span>]} />);
+    expect(wrapper).toMatchRenderedSnapshot();
+  });
+
+  it('legacy AutoComplete.Option should be compatiable', () => {
+    const wrapper = mount(
+      <AutoComplete>
+        <AutoComplete.Option value="111">111</AutoComplete.Option>
+        <AutoComplete.Option value="222">222</AutoComplete.Option>
+      </AutoComplete>,
+    );
+    expect(wrapper.find('input').length).toBe(1);
+    wrapper.find('input').simulate('change', { target: { value: '1' } });
+    expect(wrapper.find('.ant-select-item-option').length).toBe(2);
+  });
 });
--- a/components/auto-complete/demo/basic.md
+++ b/components/auto-complete/demo/basic.md
@ -37,7 +37,7 @@ const Complete: React.FC = () => {
    setValue(data);
  };
  return (
-    <div>
+    <>
      <AutoComplete
        options={options}
        style={{ width: 200 }}
@ -56,7 +56,7 @@ const Complete: React.FC = () => {
        onChange={onChange}
        placeholder="control mode"
      />
-    </div>
+    </>
  );
 };

--- a/components/auto-complete/demo/certain-category.md
+++ b/components/auto-complete/demo/certain-category.md
@ -67,18 +67,16 @@ const options = [
  },
 ];

-const Complete: React.FC = () => {
-  return (
-    <AutoComplete
-      dropdownClassName="certain-category-search-dropdown"
-      dropdownMatchSelectWidth={500}
-      style={{ width: 250 }}
-      options={options}
-    >
-      <Input.Search size="large" placeholder="input here" />
-    </AutoComplete>
-  );
-};
+const Complete: React.FC = () => (
+  <AutoComplete
+    dropdownClassName="certain-category-search-dropdown"
+    dropdownMatchSelectWidth={500}
+    style={{ width: 250 }}
+    options={options}
+  >
+    <Input.Search size="large" placeholder="input here" />
+  </AutoComplete>
+);

 ReactDOM.render(<Complete />, mountNode);
 ```
--- a/components/auto-complete/demo/form-debug.md
+++ b/components/auto-complete/demo/form-debug.md
@ -22,25 +22,25 @@ const formItemLayout = {
 };

 ReactDOM.render(
-  <Form style={{ margin: '0 auto' }}>
-    <Form.Item label="单独 AutoComplete" {...formItemLayout}>
+  <Form style={{ margin: '0 auto' }} {...formItemLayout}>
+    <Form.Item label="单独 AutoComplete">
      <AutoComplete />
    </Form.Item>
-    <Form.Item label="单独 TreeSelect" {...formItemLayout}>
+    <Form.Item label="单独 TreeSelect">
      <TreeSelect />
    </Form.Item>
-    <Form.Item label="添加 Input.Group 正常" {...formItemLayout}>
+    <Form.Item label="添加 Input.Group 正常">
      <Input.Group compact>
        <TreeSelect style={{ width: '30%' }} />
        <AutoComplete />
      </Input.Group>
    </Form.Item>
-    <Form.Item label="包含 search 图标正常" {...formItemLayout}>
+    <Form.Item label="包含 search 图标正常">
      <AutoComplete>
        <Input suffix={<SearchOutlined />} />
      </AutoComplete>
    </Form.Item>
-    <Form.Item label="同时有 Input.Group 和图标发生移位" {...formItemLayout}>
+    <Form.Item label="同时有 Input.Group 和图标发生移位">
      <Input.Group compact>
        <TreeSelect style={{ width: '30%' }} />
        <AutoComplete>
@ -48,7 +48,7 @@ ReactDOM.render(
        </AutoComplete>
      </Input.Group>
    </Form.Item>
-    <Form.Item label="同时有 Input.Group 和 Search 组件发生移位" {...formItemLayout}>
+    <Form.Item label="同时有 Input.Group 和 Search 组件发生移位">
      <Input.Group compact>
        <TreeSelect style={{ width: '30%' }} />
        <AutoComplete>
@ -56,7 +56,7 @@ ReactDOM.render(
        </AutoComplete>
      </Input.Group>
    </Form.Item>
-    <Form.Item label="Input Group 和 Button 结合" {...formItemLayout}>
+    <Form.Item label="Input Group 和 Button 结合">
      <Input.Group compact>
        <TreeSelect style={{ width: '20%' }} />
        <AutoComplete>
--- a/components/auto-complete/demo/non-case-sensitive.md
+++ b/components/auto-complete/demo/non-case-sensitive.md
@ -22,18 +22,16 @@ const options = [
  { value: 'Wall Street' },
 ];

-const Complete: React.FC = () => {
-  return (
-    <AutoComplete
-      style={{ width: 200 }}
-      options={options}
-      placeholder="try to type `b`"
-      filterOption={(inputValue, option) =>
-        option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
-      }
-    />
-  );
-}
+const Complete: React.FC = () => (
+  <AutoComplete
+    style={{ width: 200 }}
+    options={options}
+    placeholder="try to type `b`"
+    filterOption={(inputValue, option) =>
+      option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
+    }
+  />
+);

 ReactDOM.render(<Complete />, mountNode);
 ```
--- a/components/auto-complete/demo/options.md
+++ b/components/auto-complete/demo/options.md
@ -30,14 +30,13 @@ const Complete: React.FC = () => {
    }
    setResult(res);
  };
-  const children = result.map((email: string) => (
-    <Option key={email} value={email}>
-      {email}
-    </Option>
-  ));
  return (
    <AutoComplete style={{ width: 200 }} onSearch={handleSearch} placeholder="input here">
-      {children}
+      {result.map((email: string) => (
+        <Option key={email} value={email}>
+          {email}
+        </Option>
+      ))}
    </AutoComplete>
  );
 };