test: add comment test and update snapshots (#429)

Author: wangxueliang

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

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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">
+        <div class="ant-list-item">
+          <div class="ant-list-item-content ant-list-item-content-single">
+            <div class="ant-comment">
+              <div class="ant-comment-inner">
+                <div class="ant-comment-avatar"><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></div>
+                <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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="ant-comment">
+    <div class="ant-comment-inner">
+      <div class="ant-comment-avatar"></div>
+      <div class="ant-comment-content">
+        <div class="ant-comment-content-author"></div>
+        <div class="ant-comment-content-detail">
+          <div>
+            <div class="ant-row ant-form-item">
+              <div class="ant-form-item-control-wrapper">
+                <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-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>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

components/comment/__tests__/index.test.js

@@ -0,0 +1,107 @@
+import { mount } from '@vue/test-utils';
+import moment from 'moment';
+import { asyncExpect } from '@/tests/utils';
+import Comment from '..';
+import List from '../../list';
+import Form from '../../form';
+import Button from '../../button';
+import Input from '../../input';
+
+const CommentTest = {
+  data() {
+    return {
+      comments: [],
+      submitting: false,
+      value: '',
+      moment,
+    };
+  },
+  methods: {
+    handleSubmit() {
+      if (!this.value) {
+        return;
+      }
+
+      this.submitting = true;
+
+      setTimeout(() => {
+        this.submitting = false;
+        this.comments = [
+          {
+            author: 'Han Solo',
+            avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+            content: this.value,
+            datetime: moment().fromNow(),
+          },
+          ...this.comments,
+        ];
+        this.value = '';
+      }, 1000);
+    },
+    handleChange(e) {
+      this.value = e.target.value;
+    },
+  },
+  render() {
+    return (
+      <div>
+        {this.comments.length ? (
+          <List
+            dataSource={this.comments}
+            header={`${this.comments.length} ${this.comments.length > 1 ? 'replies' : 'reply'}`}
+            itemLayout="horizontal"
+            renderItem={item => {
+              return (
+                <List.Item>
+                  <Comment
+                    author={item.author}
+                    avatar={item.avatar}
+                    content={item.content}
+                    datetime={item.datetime}
+                  />
+                </List.Item>
+              );
+            }}
+          />
+        ) : null}
+        <Comment>
+          <div slot="content">
+            <Form.Item>
+              <Input.TextArea rows={4} onChange={this.handleChange} value={this.value} />
+            </Form.Item>
+            <Form.Item>
+              <Button
+                htmlType="submit"
+                loading={this.submitting}
+                onClick={this.handleSubmit}
+                type="primary"
+              >
+                Add Comment
+              </Button>
+            </Form.Item>
+          </div>
+        </Comment>
+      </div>
+    );
+  },
+};
+
+describe('Comment', () => {
+  it('Comment can be used as editor, user can customize the editor component.', async () => {
+    const wrapper = mount(CommentTest, {
+      sync: false,
+    });
+    await asyncExpect(() => {
+      wrapper.find('textarea').element.value = '222';
+      wrapper.find('textarea').trigger('input');
+    });
+    await asyncExpect(() => {
+      wrapper.find('Button').trigger('click');
+    });
+
+    await asyncExpect(() => {
+      expect(wrapper.findAll('.ant-list-header').wrappers[0].element.innerHTML).toBe('1 reply');
+      expect(wrapper.html()).toMatchSnapshot();
+    }, 2000);
+  });
+});