test: ✅ increase coverage of Progress/Comment/Avatar/Dropdown (#24439)

* test: increase test case of Progress and Comment

* test: add test case for Avatar

* test: add test case for Dropdown

* fix snapshot

* fix snapshot

* remove console.log

* fix lint

* add avatar

components/avatar/__tests__/Avatar.test.js

@@ -146,4 +146,9 @@ describe('Avatar Render', () => {
     );
     warnSpy.mockRestore();
   });
+
+  it('support size is number', () => {
+    const wrapper = mount(<Avatar size={100}>TestString</Avatar>);
+    expect(wrapper).toMatchRenderedSnapshot();
+  });
 });

components/avatar/__tests__/__snapshots__/Avatar.test.js.snap

@@ -10,3 +10,17 @@ exports[`Avatar Render rtl render component should be rendered correctly in RTL
   />
 </span>
 `;
+
+exports[`Avatar Render support size is number 1`] = `
+<span
+  class="ant-avatar ant-avatar-circle"
+  style="width:100px;height:100px;line-height:100px;font-size:18px"
+>
+  <span
+    class="ant-avatar-string"
+    style="opacity:0"
+  >
+    TestString
+  </span>
+</span>
+`;

components/avatar/__tests__/__snapshots__/demo.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `
-<div>
+Array [
   <span
     class="avatar-item"
   >
@@ -194,7 +194,7 @@ exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `
         </span>
       </sup>
     </span>
-  </span>
+  </span>,
   <span>
     <span
       class="ant-badge"
@@ -228,12 +228,12 @@ exports[`renders ./components/avatar/demo/badge.md correctly 1`] = `
         data-show="true"
       />
     </span>
-  </span>
-</div>
+  </span>,
+]
 `;
 
 exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
-<div>
+Array [
   <div>
     <span
       class="ant-avatar ant-avatar-circle ant-avatar-icon"
@@ -332,7 +332,7 @@ exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
+  </div>,
   <div>
     <span
       class="ant-avatar ant-avatar-square ant-avatar-icon"
@@ -431,12 +431,12 @@ exports[`renders ./components/avatar/demo/basic.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/avatar/demo/dynamic.md correctly 1`] = `
-<div>
+Array [
   <span
     class="ant-avatar ant-avatar-lg ant-avatar-circle"
     style="background-color:#f56a00;vertical-align:middle"
@@ -447,7 +447,7 @@ exports[`renders ./components/avatar/demo/dynamic.md correctly 1`] = `
     >
       U
     </span>
-  </span>
+  </span>,
   <button
     class="ant-btn ant-btn-sm"
     style="margin:0 16px;vertical-align:middle"
@@ -456,12 +456,12 @@ exports[`renders ./components/avatar/demo/dynamic.md correctly 1`] = `
     <span>
       Change
     </span>
-  </button>
-</div>
+  </button>,
+]
 `;
 
 exports[`renders ./components/avatar/demo/toggle-debug.md correctly 1`] = `
-<div>
+Array [
   <button
     class="ant-btn"
     type="button"
@@ -469,7 +469,7 @@ exports[`renders ./components/avatar/demo/toggle-debug.md correctly 1`] = `
     <span>
       Toggle Avatar visibility
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn"
     type="button"
@@ -477,7 +477,7 @@ exports[`renders ./components/avatar/demo/toggle-debug.md correctly 1`] = `
     <span>
       Toggle Avatar size
     </span>
-  </button>
+  </button>,
   <button
     class="ant-btn"
     type="button"
@@ -485,9 +485,9 @@ exports[`renders ./components/avatar/demo/toggle-debug.md correctly 1`] = `
     <span>
       Change Avatar scale
     </span>
-  </button>
-  <br />
-  <br />
+  </button>,
+  <br />,
+  <br />,
   <div
     style="text-align:center;transform:scale(1);margin-top:24px"
   >
@@ -533,12 +533,12 @@ exports[`renders ./components/avatar/demo/toggle-debug.md correctly 1`] = `
         />
       </span>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
-<div>
+Array [
   <span
     class="ant-avatar ant-avatar-circle ant-avatar-icon"
   >
@@ -562,7 +562,7 @@ exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
         />
       </svg>
     </span>
-  </span>
+  </span>,
   <span
     class="ant-avatar ant-avatar-circle"
   >
@@ -572,9 +572,10 @@ exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
     >
       U
     </span>
-  </span>
+  </span>,
   <span
     class="ant-avatar ant-avatar-circle"
+    style="width:40px;height:40px;line-height:40px;font-size:18px"
   >
     <span
       class="ant-avatar-string"
@@ -582,14 +583,14 @@ exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
     >
       USER
     </span>
-  </span>
+  </span>,
   <span
     class="ant-avatar ant-avatar-circle ant-avatar-image"
   >
     <img
       src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
     />
-  </span>
+  </span>,
   <span
     class="ant-avatar ant-avatar-circle"
     style="color:#f56a00;background-color:#fde3cf"
@@ -600,7 +601,7 @@ exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
     >
       U
     </span>
-  </span>
+  </span>,
   <span
     class="ant-avatar ant-avatar-circle ant-avatar-icon"
     style="background-color:#87d068"
@@ -625,6 +626,6 @@ exports[`renders ./components/avatar/demo/type.md correctly 1`] = `
         />
       </svg>
     </span>
-  </span>
-</div>
+  </span>,
+]
 `;

components/avatar/demo/badge.md

@@ -18,7 +18,7 @@ import { Avatar, Badge } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
-  <div>
+  <>
     <span className="avatar-item">
       <Badge count={1}>
         <Avatar shape="square" icon={<UserOutlined />} />
@@ -29,7 +29,7 @@ ReactDOM.render(
         <Avatar shape="square" icon={<UserOutlined />} />
       </Badge>
     </span>
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/avatar/demo/basic.md

@@ -18,7 +18,7 @@ import { Avatar } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
-  <div>
+  <>
     <div>
       <Avatar size={64} icon={<UserOutlined />} />
       <Avatar size="large" icon={<UserOutlined />} />
@@ -31,7 +31,7 @@ ReactDOM.render(
       <Avatar shape="square" icon={<UserOutlined />} />
       <Avatar shape="square" size="small" icon={<UserOutlined />} />
     </div>
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/avatar/demo/dynamic.md

@@ -29,7 +29,7 @@ const Autoset: React.FC = () => {
     setColor(index < ColorList.length - 1 ? ColorList[index + 1] : ColorList[0]);
   };
   return (
-    <div>
+    <>
       <Avatar style={{ backgroundColor: color, verticalAlign: 'middle' }} size="large">
         {user}
       </Avatar>
@@ -40,7 +40,7 @@ const Autoset: React.FC = () => {
       >
         Change
       </Button>
-    </div>
+    </>
   );
 };
 

components/avatar/demo/toggle-debug.md

@@ -41,7 +41,7 @@ const App: React.FC = () => {
   };
 
   return (
-    <div>
+    <>
       <Button onClick={toggle}>Toggle Avatar visibility</Button>
       <Button onClick={toggleSize}>Toggle Avatar size</Button>
       <Button onClick={changeScale}>Change Avatar scale</Button>
@@ -67,7 +67,7 @@ const App: React.FC = () => {
           </Avatar>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 

components/avatar/demo/type.md

@@ -18,14 +18,14 @@ import { Avatar } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
-  <div>
+  <>
     <Avatar icon={<UserOutlined />} />
     <Avatar>U</Avatar>
-    <Avatar>USER</Avatar>
+    <Avatar size={40}>USER</Avatar>
     <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
     <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
     <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/comment/__tests__/__snapshots__/demo.test.js.snap

@@ -122,77 +122,70 @@ exports[`renders ./components/comment/demo/basic.md correctly 1`] = `
 `;
 
 exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
-<div>
+<div
+  class="ant-comment"
+>
   <div
-    class="ant-comment"
+    class="ant-comment-inner"
   >
     <div
-      class="ant-comment-inner"
+      class="ant-comment-avatar"
     >
-      <div
-        class="ant-comment-avatar"
+      <span
+        class="ant-avatar ant-avatar-circle ant-avatar-image"
       >
-        <span
-          class="ant-avatar ant-avatar-circle ant-avatar-image"
-        >
-          <img
-            alt="Han Solo"
-            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
-          />
-        </span>
-      </div>
+        <img
+          alt="Han Solo"
+          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+        />
+      </span>
+    </div>
+    <div
+      class="ant-comment-content"
+    >
       <div
-        class="ant-comment-content"
+        class="ant-comment-content-detail"
       >
         <div
-          class="ant-comment-content-author"
-        />
-        <div
-          class="ant-comment-content-detail"
+          class="ant-row ant-form-item"
         >
-          <div>
+          <div
+            class="ant-col ant-form-item-control"
+          >
             <div
-              class="ant-row ant-form-item"
+              class="ant-form-item-control-input"
             >
               <div
-                class="ant-col ant-form-item-control"
+                class="ant-form-item-control-input-content"
               >
-                <div
-                  class="ant-form-item-control-input"
-                >
-                  <div
-                    class="ant-form-item-control-input-content"
-                  >
-                    <textarea
-                      class="ant-input"
-                      rows="4"
-                    />
-                  </div>
-                </div>
+                <textarea
+                  class="ant-input"
+                  rows="4"
+                />
               </div>
             </div>
+          </div>
+        </div>
+        <div
+          class="ant-row ant-form-item"
+        >
+          <div
+            class="ant-col ant-form-item-control"
+          >
             <div
-              class="ant-row ant-form-item"
+              class="ant-form-item-control-input"
             >
               <div
-                class="ant-col ant-form-item-control"
+                class="ant-form-item-control-input-content"
               >
-                <div
-                  class="ant-form-item-control-input"
+                <button
+                  class="ant-btn ant-btn-primary"
+                  type="submit"
                 >
-                  <div
-                    class="ant-form-item-control-input-content"
-                  >
-                    <button
-                      class="ant-btn ant-btn-primary"
-                      type="submit"
-                    >
-                      <span>
-                        Add Comment
-                      </span>
-                    </button>
-                  </div>
-                </div>
+                  <span>
+                    Add Comment
+                  </span>
+                </button>
               </div>
             </div>
           </div>

components/comment/__tests__/__snapshots__/index.test.js.snap

@@ -11,11 +11,46 @@ exports[`Comment rtl render component should be rendered correctly in RTL direct
       class="ant-comment-content"
     >
       <div
-        class="ant-comment-content-author"
+        class="ant-comment-content-detail"
       />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Comment should support empty actions 1`] = `
+<div
+  class="ant-comment"
+>
+  <div
+    class="ant-comment-inner"
+  >
+    <div
+      class="ant-comment-content"
+    >
+      <div
+        class="ant-comment-content-author"
+      >
+        <span
+          class="ant-comment-content-author-name"
+        >
+          <a>
+            Han Solo
+          </a>
+        </span>
+        <span
+          class="ant-comment-content-author-time"
+        >
+          YYYY-MM-DD HH:mm:ss
+        </span>
+      </div>
       <div
         class="ant-comment-content-detail"
-      />
+      >
+        <p>
+          We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.
+        </p>
+      </div>
     </div>
   </div>
 </div>

components/comment/__tests__/index.test.js

@@ -1,3 +1,5 @@
+import React from 'react';
+import { mount } from 'enzyme';
 import Comment from '../index';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -5,4 +7,22 @@ import rtlTest from '../../../tests/shared/rtlTest';
 describe('Comment', () => {
   mountTest(Comment);
   rtlTest(Comment);
+
+  it('should support empty actions', () => {
+    const wrapper = mount(
+      <Comment
+        actions={[]}
+        author={<a>Han Solo</a>}
+        content={
+          <p>
+            We supply a series of design principles, practical patterns and high quality design
+            resources (Sketch and Axure), to help people create their product prototypes beautifully
+            and efficiently.
+          </p>
+        }
+        datetime="YYYY-MM-DD HH:mm:ss"
+      />,
+    );
+    expect(wrapper).toMatchRenderedSnapshot();
+  });
 });

components/comment/demo/basic.md

@@ -45,7 +45,7 @@ const Demo = () => {
       </Tooltip>
       <span className="comment-action">{likes}</span>
     </span>,
-    <span key=' key="comment-basic-dislike"'>
+    <span key="comment-basic-dislike">
       <Tooltip title="Dislike">
         {React.createElement(action === 'disliked' ? DislikeFilled : DislikeOutlined, {
           onClick: dislike,
@@ -80,7 +80,7 @@ const Demo = () => {
       }
     />
   );
-}
+};
 
 ReactDOM.render(<Demo />, mountNode);
 ```

components/comment/demo/editor.md

@@ -29,7 +29,7 @@ const CommentList = ({ comments }) => (
 );
 
 const Editor = ({ onChange, onSubmit, submitting, value }) => (
-  <div>
+  <>
     <Form.Item>
       <TextArea rows={4} onChange={onChange} value={value} />
     </Form.Item>
@@ -38,7 +38,7 @@ const Editor = ({ onChange, onSubmit, submitting, value }) => (
         Add Comment
       </Button>
     </Form.Item>
-  </div>
+  </>
 );
 
 class App extends React.Component {
@@ -84,7 +84,7 @@ class App extends React.Component {
     const { comments, submitting, value } = this.state;
 
     return (
-      <div>
+      <>
         {comments.length > 0 && <CommentList comments={comments} />}
         <Comment
           avatar={
@@ -102,7 +102,7 @@ class App extends React.Component {
             />
           }
         />
-      </div>
+      </>
     );
   }
 }

components/comment/index.tsx

@@ -2,15 +2,6 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider';
 
-function getAction(actions: React.ReactNode[]) {
-  if (!actions || !actions.length) {
-    return null;
-  }
-  // eslint-disable-next-line react/no-array-index-key
-  const actionList = actions.map((action, index) => <li key={`action-${index}`}>{action}</li>);
-  return actionList;
-}
-
 export interface CommentProps {
   /** List of action items rendered below the comment content */
   actions?: Array<React.ReactNode>;
@@ -40,7 +31,6 @@ const Comment: React.FC<CommentProps> = ({
   className,
   content,
   prefixCls: customizePrefixCls,
-  style,
   datetime,
   ...otherProps
 }) => {
@@ -60,10 +50,14 @@ const Comment: React.FC<CommentProps> = ({
 
   const actionDom =
     actions && actions.length ? (
-      <ul className={`${prefixCls}-actions`}>{getAction(actions)}</ul>
+      <ul className={`${prefixCls}-actions`}>
+        {actions.map((action, index) => (
+          <li key={`action-${index}`}>{action}</li> // eslint-disable-line react/no-array-index-key
+        ))}
+      </ul>
     ) : null;
 
-  const authorContent = (
+  const authorContent = (author || datetime) && (
     <div className={`${prefixCls}-content-author`}>
       {author && <span className={`${prefixCls}-content-author-name`}>{author}</span>}
       {datetime && <span className={`${prefixCls}-content-author-time`}>{datetime}</span>}
@@ -78,19 +72,16 @@ const Comment: React.FC<CommentProps> = ({
     </div>
   );
 
-  const comment = (
-    <div className={`${prefixCls}-inner`}>
-      {avatarDom}
-      {contentDom}
-    </div>
-  );
-
   const cls = classNames(prefixCls, className, {
     [`${prefixCls}-rtl`]: direction === 'rtl',
   });
+
   return (
-    <div {...otherProps} className={cls} style={style}>
-      {comment}
+    <div {...otherProps} className={cls}>
+      <div className={`${prefixCls}-inner`}>
+        {avatarDom}
+        {contentDom}
+      </div>
       {children ? renderNested(prefixCls, children) : null}
     </div>
   );

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -9435,9 +9435,6 @@ exports[`ConfigProvider components Comment configProvider 1`] = `
     <div
       class="config-comment-content"
     >
-      <div
-        class="config-comment-content-author"
-      />
       <div
         class="config-comment-content-detail"
       >
@@ -9457,9 +9454,6 @@ exports[`ConfigProvider components Comment configProvider 1`] = `
         <div
           class="config-comment-content"
         >
-          <div
-            class="config-comment-content-author"
-          />
           <div
             class="config-comment-content-detail"
           >
@@ -9482,9 +9476,6 @@ exports[`ConfigProvider components Comment configProvider componentSize large 1`
     <div
       class="config-comment-content"
     >
-      <div
-        class="config-comment-content-author"
-      />
       <div
         class="config-comment-content-detail"
       >
@@ -9504,9 +9495,6 @@ exports[`ConfigProvider components Comment configProvider componentSize large 1`
         <div
           class="config-comment-content"
         >
-          <div
-            class="config-comment-content-author"
-          />
           <div
             class="config-comment-content-detail"
           >
@@ -9529,9 +9517,6 @@ exports[`ConfigProvider components Comment configProvider componentSize middle 1
     <div
       class="config-comment-content"
     >
-      <div
-        class="config-comment-content-author"
-      />
       <div
         class="config-comment-content-detail"
       >
@@ -9551,9 +9536,6 @@ exports[`ConfigProvider components Comment configProvider componentSize middle 1
         <div
           class="config-comment-content"
         >
-          <div
-            class="config-comment-content-author"
-          />
           <div
             class="config-comment-content-detail"
           >
@@ -9576,9 +9558,6 @@ exports[`ConfigProvider components Comment normal 1`] = `
     <div
       class="ant-comment-content"
     >
-      <div
-        class="ant-comment-content-author"
-      />
       <div
         class="ant-comment-content-detail"
       >
@@ -9598,9 +9577,6 @@ exports[`ConfigProvider components Comment normal 1`] = `
         <div
           class="ant-comment-content"
         >
-          <div
-            class="ant-comment-content-author"
-          />
           <div
             class="ant-comment-content-detail"
           >
@@ -9623,9 +9599,6 @@ exports[`ConfigProvider components Comment prefixCls 1`] = `
     <div
       class="prefix-Comment-content"
     >
-      <div
-        class="prefix-Comment-content-author"
-      />
       <div
         class="prefix-Comment-content-detail"
       >
@@ -9645,9 +9618,6 @@ exports[`ConfigProvider components Comment prefixCls 1`] = `
         <div
           class="prefix-Comment-content"
         >
-          <div
-            class="prefix-Comment-content-author"
-          />
           <div
             class="prefix-Comment-content-detail"
           >

components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap

@@ -1,12 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DropdownButton rtl render component should be rendered correctly in RTL direction 1`] = `
-<span
-  class="ant-dropdown-trigger ant-dropdown-rtl"
-/>
-`;
-
-exports[`DropdownButton rtl render component should be rendered correctly in RTL direction 2`] = `
 <div
   class="ant-btn-group ant-btn-group-rtl ant-dropdown-button"
 >

components/dropdown/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dropdown overlay is function and has custom transitionName 1`] = `
+Array [
+  <button
+    class="ant-dropdown-trigger"
+    type="button"
+  >
+    button
+  </button>,
+  <div>
+    <div
+      class="ant-dropdown"
+      style="opacity:0"
+    >
+      <div>
+        menu
+      </div>
+    </div>
+  </div>,
+]
+`;
+
+exports[`Dropdown overlay is string 1`] = `
+Array [
+  <button
+    class="ant-dropdown-trigger"
+    type="button"
+  >
+    button
+  </button>,
+  <div>
+    <div
+      class="ant-dropdown"
+      style="opacity:0"
+    >
+      <span>
+        overlayNode
+      </span>
+    </div>
+  </div>,
+]
+`;
+
+exports[`Dropdown rtl render component should be rendered correctly in RTL direction 1`] = `
+<span
+  class="ant-dropdown-trigger ant-dropdown-rtl"
+/>
+`;

components/dropdown/__tests__/dropdown-button.test.js

@@ -6,18 +6,7 @@ import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 
 describe('DropdownButton', () => {
-  mountTest(() => (
-    <Dropdown menu={<Menu />}>
-      <span />
-    </Dropdown>
-  ));
   mountTest(Dropdown.Button);
-
-  rtlTest(() => (
-    <Dropdown menu={<Menu />}>
-      <span />
-    </Dropdown>
-  ));
   rtlTest(Dropdown.Button);
 
   it('pass appropriate props to Dropdown', () => {

components/dropdown/__tests__/index.test.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Dropdown from '..';
+import Menu from '../../menu';
+import mountTest from '../../../tests/shared/mountTest';
+import rtlTest from '../../../tests/shared/rtlTest';
+
+describe('Dropdown', () => {
+  mountTest(() => (
+    <Dropdown menu={<Menu />}>
+      <span />
+    </Dropdown>
+  ));
+
+  rtlTest(() => (
+    <Dropdown menu={<Menu />}>
+      <span />
+    </Dropdown>
+  ));
+
+  it('overlay is function and has custom transitionName', () => {
+    const wrapper = mount(
+      <Dropdown overlay={() => <div>menu</div>} transitionName="move-up" visible>
+        <button type="button">button</button>
+      </Dropdown>,
+    );
+    expect(wrapper).toMatchRenderedSnapshot();
+  });
+
+  it('overlay is string', () => {
+    const wrapper = mount(
+      <Dropdown overlay="string" visible>
+        <button type="button">button</button>
+      </Dropdown>,
+    );
+    expect(wrapper).toMatchRenderedSnapshot();
+  });
+});

components/dropdown/dropdown.tsx

@@ -85,7 +85,9 @@ const Dropdown: DropdownInterface = props => {
     } else {
       overlayNode = overlay;
     }
-    overlayNode = React.Children.only(overlayNode) as React.ReactElement<any>;
+    overlayNode = React.Children.only(
+      typeof overlayNode === 'string' ? <span>overlayNode</span> : overlayNode,
+    );
 
     const overlayProps = overlayNode.props;
 
@@ -108,7 +110,7 @@ const Dropdown: DropdownInterface = props => {
 
     const fixedModeOverlay =
       typeof overlayNode.type === 'string'
-        ? overlay
+        ? overlayNode
         : cloneElement(overlayNode, {
             mode: 'vertical',
             selectable,

components/progress/Steps.tsx

@@ -7,15 +7,7 @@ interface StepsProps extends ProgressProps {
 }
 
 const Steps: React.FC<StepsProps> = props => {
-  const {
-    size = 'default',
-    steps,
-    percent = 0,
-    strokeWidth = 8,
-    strokeColor,
-    prefixCls,
-    children,
-  } = props;
+  const { size, steps, percent = 0, strokeWidth = 8, strokeColor, prefixCls, children } = props;
   const getStyledSteps = () => {
     const current = Math.floor(steps * (percent / 100));
     const stepWidth = size === 'small' ? 2 : 14;

components/progress/__tests__/__snapshots__/demo.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
@@ -43,7 +43,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
         75%
       </span>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default"
   >
@@ -103,7 +103,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
   >
@@ -163,12 +163,12 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
@@ -210,7 +210,7 @@ exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = `
         0%
       </span>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-btn-group"
   >
@@ -268,12 +268,12 @@ exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = `
         </svg>
       </span>
     </button>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
@@ -315,7 +315,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
         30%
       </span>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default"
   >
@@ -375,7 +375,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
   >
@@ -435,12 +435,12 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
@@ -482,7 +482,7 @@ exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
         75%
       </span>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
@@ -524,12 +524,12 @@ exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
         75%
       </span>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/progress/demo/dynamic.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
@@ -551,7 +551,7 @@ exports[`renders ./components/progress/demo/dynamic.md correctly 1`] = `
     >
       0%
     </span>
-  </div>
+  </div>,
   <div
     class="ant-btn-group"
   >
@@ -609,12 +609,12 @@ exports[`renders ./components/progress/demo/dynamic.md correctly 1`] = `
         </svg>
       </span>
     </button>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/progress/demo/format.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
@@ -656,7 +656,7 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
         75 Days
       </span>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
   >
@@ -698,12 +698,12 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
         Done
       </span>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
@@ -725,7 +725,7 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
     >
       99.9%
     </span>
-  </div>
+  </div>,
   <div
     class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default"
   >
@@ -747,7 +747,7 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
     >
       99.9%
     </span>
-  </div>
+  </div>,
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
@@ -807,7 +807,7 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
         90%
       </span>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default"
   >
@@ -885,12 +885,12 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/progress/demo/line.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
@@ -912,7 +912,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
     >
       30%
     </span>
-  </div>
+  </div>,
   <div
     class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default"
   >
@@ -934,7 +934,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
     >
       50%
     </span>
-  </div>
+  </div>,
   <div
     class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-default"
   >
@@ -974,7 +974,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
+  </div>,
   <div
     class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default"
   >
@@ -1014,7 +1014,7 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
         </svg>
       </span>
     </span>
-  </div>
+  </div>,
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default"
   >
@@ -1030,8 +1030,8 @@ exports[`renders ./components/progress/demo/line.md correctly 1`] = `
         />
       </div>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
@@ -1166,7 +1166,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
 `;
 
 exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
@@ -1188,7 +1188,7 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
     >
       75%
     </span>
-  </div>
+  </div>,
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
@@ -1230,7 +1230,7 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
         75%
       </span>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
@@ -1272,12 +1272,12 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
         75%
       </span>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
@@ -1303,7 +1303,7 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
     >
       60%
     </span>
-  </div>
+  </div>,
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
@@ -1357,7 +1357,7 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
         60%
       </span>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
@@ -1411,12 +1411,12 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
         60%
       </span>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/progress/demo/steps.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
@@ -1442,8 +1442,8 @@ exports[`renders ./components/progress/demo/steps.md correctly 1`] = `
         50%
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
   >
@@ -1477,8 +1477,8 @@ exports[`renders ./components/progress/demo/steps.md correctly 1`] = `
         30%
       </span>
     </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
   <div
     class="ant-progress ant-progress-steps ant-progress-status-success ant-progress-show-info ant-progress-small"
   >
@@ -1530,6 +1530,6 @@ exports[`renders ./components/progress/demo/steps.md correctly 1`] = `
         </span>
       </span>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;

components/progress/__tests__/__snapshots__/index.test.js.snap

@@ -550,3 +550,32 @@ exports[`Progress rtl render component should be rendered correctly in RTL direc
   </span>
 </div>
 `;
+
+exports[`Progress should support steps 1`] = `
+<div
+  class="ant-progress ant-progress-steps ant-progress-status-normal ant-progress-show-info ant-progress-default"
+>
+  <div
+    class="ant-progress-steps-outer"
+  >
+    <div
+      class="ant-progress-steps-item"
+      style="background-color:undefined;width:14px;height:8px"
+    />
+    <div
+      class="ant-progress-steps-item"
+      style="background-color:undefined;width:14px;height:8px"
+    />
+    <div
+      class="ant-progress-steps-item"
+      style="background-color:undefined;width:14px;height:8px"
+    />
+    <span
+      class="ant-progress-text"
+      title="0%"
+    >
+      0%
+    </span>
+  </div>
+</div>
+`;

components/progress/__tests__/index.test.js

@@ -133,4 +133,9 @@ describe('Progress', () => {
     expect(wrapper.find('.ant-progress-status-success')).toHaveLength(1);
     errorSpy.mockRestore();
   });
+
+  it('should support steps', () => {
+    const wrapper = mount(<Progress steps={3} />);
+    expect(wrapper).toMatchRenderedSnapshot();
+  });
 });

components/progress/demo/circle-dynamic.md

@@ -17,8 +17,6 @@ A dynamic progress bar is better.
 import { Progress, Button } from 'antd';
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
 
-const ButtonGroup = Button.Group;
-
 class App extends React.Component {
   state = {
     percent: 0,
@@ -42,13 +40,13 @@ class App extends React.Component {
 
   render() {
     return (
-      <div>
+      <>
         <Progress type="circle" percent={this.state.percent} />
-        <ButtonGroup>
+        <Button.Group>
           <Button onClick={this.decline} icon={<MinusOutlined />} />
           <Button onClick={this.increase} icon={<PlusOutlined />} />
-        </ButtonGroup>
-      </div>
+        </Button.Group>
+      </>
     );
   }
 }

components/progress/demo/circle-mini.md

@@ -17,11 +17,11 @@ A smaller circular progress bar.
 import { Progress } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <Progress type="circle" percent={30} width={80} />
     <Progress type="circle" percent={70} width={80} status="exception" />
     <Progress type="circle" percent={100} width={80} />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/progress/demo/circle.md

@@ -17,11 +17,11 @@ A circular progress bar.
 import { Progress } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <Progress type="circle" percent={75} />
     <Progress type="circle" percent={70} status="exception" />
     <Progress type="circle" percent={100} />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/progress/demo/dashboard.md

@@ -17,9 +17,10 @@ By setting `type=dashboard`, you can get a dashboard style of progress easily. M
 import { Progress } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <Progress type="dashboard" percent={75} />
     <Progress type="dashboard" percent={75} gapDegree={30} />
-  </div>
-, mountNode);
+  </>,
+  mountNode,
+);
 ```

components/progress/demo/dynamic.md

@@ -17,8 +17,6 @@ A dynamic progress bar is better.
 import { Progress, Button } from 'antd';
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
 
-const ButtonGroup = Button.Group;
-
 class App extends React.Component {
   state = {
     percent: 0,
@@ -42,13 +40,13 @@ class App extends React.Component {
 
   render() {
     return (
-      <div>
+      <>
         <Progress percent={this.state.percent} />
-        <ButtonGroup>
+        <Button.Group>
           <Button onClick={this.decline} icon={<MinusOutlined />} />
           <Button onClick={this.increase} icon={<PlusOutlined />} />
-        </ButtonGroup>
-      </div>
+        </Button.Group>
+      </>
     );
   }
 }

components/progress/demo/format.md

@@ -17,10 +17,10 @@ You can set a custom text by setting the `format` prop.
 import { Progress } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <Progress type="circle" percent={75} format={percent => `${percent} Days`} />
     <Progress type="circle" percent={100} format={() => 'Done'} />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/progress/demo/gradient-line.md

@@ -17,7 +17,7 @@ A package of `linear-gradient`. It is recommended to only pass two colors.
 import { Progress } from 'antd';
 
 const Demo = () => (
-  <div>
+  <>
     <Progress
       strokeColor={{
         '0%': '#108ee9',
@@ -49,7 +49,7 @@ const Demo = () => (
       }}
       percent={100}
     />
-  </div>
+  </>
 );
 
 ReactDOM.render(<Demo />, mountNode);

components/progress/demo/line.md

@@ -17,13 +17,13 @@ A standard progress bar.
 import { Progress } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <Progress percent={30} />
     <Progress percent={50} status="active" />
     <Progress percent={70} status="exception" />
     <Progress percent={100} />
     <Progress percent={50} showInfo={false} />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/progress/demo/linecap.md

@@ -17,11 +17,11 @@ By setting `strokeLinecap="square"`, you can change the linecaps from round to s
 import { Progress } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <Progress strokeLinecap="square" percent={75} />
     <Progress strokeLinecap="square" type="circle" percent={75} />
     <Progress strokeLinecap="square" type="dashboard" percent={75} />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/progress/demo/segment.md

@@ -17,7 +17,7 @@ A standard progress bar. Doesn't support trail color when `type="circle|dashboar
 import { Tooltip, Progress } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <Tooltip title="3 done / 3 in progress / 4 to do">
       <Progress percent={60} successPercent={30} />
     </Tooltip>
@@ -29,7 +29,7 @@ ReactDOM.render(
     <Tooltip title="3 done / 3 in progress / 4 to do">
       <Progress percent={60} successPercent={30} type="dashboard" />
     </Tooltip>
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/progress/demo/steps.md

@@ -17,13 +17,13 @@ A progress bar with steps.
 import { Progress } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <Progress percent={50} steps={3} strokeColor="#1890ff" />
     <br />
     <Progress percent={30} steps={5} strokeColor="#1890ff" />
     <br />
     <Progress percent={100} steps={5} size="small" strokeColor="#1890ff" />
-  </div>,
+  </>,
   mountNode,
 );
 ```