test: update comment test

antdv-demo

@@ -1 +1 @@
-Subproject commit 4326327888f185e994eb7071d0b0b5edb1be2768
+Subproject commit 51cd1e3aea790432b220a7233ba189899438f031

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

@@ -3,8 +3,10 @@
 exports[`Comment Comment can be used as editor, user can customize the editor component. 1`] = `
 <div>
   <div class="ant-list ant-list-split">
+    <!---->
     <div class="ant-list-header">1 reply</div>
     <div class="ant-spin-nested-loading">
+      <!---->
       <div class="ant-spin-container">
         <ul class="ant-list-items">
           <li class="ant-list-item">
@@ -14,39 +16,55 @@ exports[`Comment Comment can be used as editor, user can customize the editor co
                 <div class="ant-comment-content">
                   <div class="ant-comment-content-author"><span class="ant-comment-content-author-name">Han Solo</span><span class="ant-comment-content-author-time">a few seconds ago</span></div>
                   <div class="ant-comment-content-detail">222</div>
+                  <!---->
                 </div>
               </div>
+              <!---->
             </div>
+            <!---->
+            <!---->
           </li>
         </ul>
       </div>
     </div>
+    <!---->
+    <!---->
   </div>
   <div class="ant-comment">
     <div class="ant-comment-inner">
-      <div class="ant-comment-avatar"></div>
+      <div class="ant-comment-avatar">
+        <!---->
+      </div>
       <div class="ant-comment-content">
-        <div class="ant-comment-content-author"></div>
+        <div class="ant-comment-content-author">
+          <!---->
+          <!---->
+        </div>
         <div class="ant-comment-content-detail">
           <div>
             <div class="ant-row ant-form-item">
               <div class="ant-col ant-form-item-control-wrapper">
-                <div class="ant-form-item-control"><span class="ant-form-item-children"><textarea class="ant-input" rows="4"></textarea></span>
+                <div class="ant-form-item-control"><span class="ant-form-item-children"><textarea rows="4" class="ant-input"></textarea><!----></span>
+                  <!---->
                   <!---->
                 </div>
               </div>
             </div>
             <div class="ant-row ant-form-item">
               <div class="ant-col ant-form-item-control-wrapper">
-                <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary" ant-click-animating-without-extra-node="true"><span>Add Comment</span></button></span>
+                <div class="ant-form-item-control"><span class="ant-form-item-children"><button class="ant-btn ant-btn-primary" type="submit" ant-click-animating-without-extra-node="true"><!----><span>Add Comment</span></button>
+                  <!----></span>
+                  <!---->
                   <!---->
                 </div>
               </div>
             </div>
           </div>
         </div>
+        <!---->
       </div>
     </div>
+    <!---->
   </div>
 </div>
 `;

components/comment/__tests__/index.test.js

@@ -51,7 +51,7 @@ const CommentTest = {
             dataSource={this.comments}
             header={`${this.comments.length} ${this.comments.length > 1 ? 'replies' : 'reply'}`}
             itemLayout="horizontal"
-            renderItem={item => {
+            renderItem={({ item }) => {
               return (
                 <List.Item>
                   <Comment
@@ -65,23 +65,27 @@ const CommentTest = {
             }}
           />
         ) : null}
-        <Comment>
+        <Comment
-          <div slot="content">
+          vSlots={{
-            <Form.Item>
+            content: () => (
-              <Input.TextArea rows={4} onChange={this.handleChange} value={this.value} />
+              <div>
-            </Form.Item>
+                <Form.Item>
-            <Form.Item>
+                  <Input.TextArea rows={4} onChange={this.handleChange} value={this.value} />
-              <Button
+                </Form.Item>
-                htmlType="submit"
+                <Form.Item>
-                loading={this.submitting}
+                  <Button
-                onClick={this.handleSubmit}
+                    htmlType="submit"
-                type="primary"
+                    loading={this.submitting}
-              >
+                    onClick={this.handleSubmit}
-                Add Comment
+                    type="primary"
-              </Button>
+                  >
-            </Form.Item>
+                    Add Comment
-          </div>
+                  </Button>
-        </Comment>
+                </Form.Item>
+              </div>
+            ),
+          }}
+        ></Comment>
       </div>
     );
   },
@@ -98,11 +102,11 @@ describe('Comment', () => {
       wrapper.find('textarea').trigger('input');
     });
     await asyncExpect(() => {
-      wrapper.find('Button').trigger('click');
+      wrapper.find('.ant-btn').trigger('click');
     });
 
     await asyncExpect(() => {
-      expect(wrapper.findAll('.ant-list-header').wrappers[0].element.innerHTML).toBe('1 reply');
+      expect(wrapper.findAll('.ant-list-header')[0].element.innerHTML).toBe('1 reply');
       expect(wrapper.html()).toMatchSnapshot();
     }, 2000);
   });

components/comment/index.jsx

@@ -1,6 +1,6 @@
 import { inject } from 'vue';
 import PropsTypes from '../_util/vue-types';
-import { getComponent } from '../_util/props-util';
+import { getComponent, getSlot } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 export const CommentProps = {
   actions: PropsTypes.array,
@@ -81,7 +81,7 @@ const Comment = {
         {contentDom}
       </div>
     );
-    const children = this.$slots.default && this.$slots.default();
+    const children = getSlot(this);
     return (
       <div class={prefixCls}>
         {comment}

components/tooltip/Tooltip.jsx

@@ -1,5 +1,6 @@
 import { inject } from 'vue';
 import VcTooltip from '../vc-tooltip';
+import classNames from 'classnames';
 import getPlacements from './placements';
 import PropTypes from '../_util/vue-types';
 import {
@@ -186,10 +187,10 @@ export default {
     const child = this.getDisabledCompatibleChildren(
       isValidElement(children) ? children : <span>{children}</span>,
     );
-    const childCls = {
+    const childCls = classNames({
       [openClassName || `${prefixCls}-open`]: sVisible,
       [child.props && child.props.class]: child.props && child.props.class,
-    };
+    });
     const tooltipProps = {
       ...$attrs,
       ...$props,

examples/App.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/collapse/demo/index';
+import demo from '../antdv-demo/docs/comment/demo/index';
 
 export default {
   components: {