[Improvement] Contact: add test cases (#1195)

packages/contact-card/test/index.spec.js

@@ -0,0 +1,84 @@
+import ContactEdit from '../../contact-edit';
+import { mount } from '@vue/test-utils';
+
+const contactInfo = {
+  name: 'test',
+  tel: '123123213'
+};
+
+const createComponent = () => {
+  const wrapper = mount(ContactEdit, {
+    propsData: {
+      contactInfo
+    }
+  });
+
+  const button = wrapper.find('.van-button');
+  const field = wrapper.findAll('.van-field__control');
+  const { errorInfo, data } = wrapper.vm;
+  return {
+    wrapper,
+    data,
+    field,
+    button,
+    errorInfo
+  };
+};
+
+test('valid name', () => {
+  const { data, field, button, errorInfo } = createComponent();
+
+  // name empty
+  data.name = '';
+  button.trigger('click');
+  expect(errorInfo.name).toBeTruthy();
+  field.at(0).trigger('focus');
+  expect(errorInfo.name).toBeFalsy();
+
+  // name too long
+  data.name = '1'.repeat(30);
+  button.trigger('click');
+  expect(errorInfo.name).toBeTruthy();
+  field.at(0).trigger('focus');
+  expect(errorInfo.name).toBeFalsy();
+});
+
+it('valid tel', () => {
+  const { data, field, button, errorInfo, wrapper } = createComponent();
+  data.tel = '';
+  button.trigger('click');
+  expect(errorInfo.tel).toBeTruthy();
+  field.at(1).trigger('focus');
+  expect(errorInfo.tel).toBeFalsy();
+
+  data.tel = '13000000000';
+  button.trigger('click');
+  expect(errorInfo.tel).toBeFalsy();
+  expect(wrapper.emitted('save')[0][0]).toEqual({
+    name: 'test',
+    tel: '13000000000'
+  });
+});
+
+test('watch contact info', () => {
+  const wrapper = mount(ContactEdit);
+  wrapper.setProps({ contactInfo: { name: '123' }});
+  expect(wrapper.vm.data.name).toEqual('123');
+});
+
+test('delete contact', done => {
+  const wrapper = mount(ContactEdit, {
+    propsData: {
+      isEdit: true
+    }
+  });
+
+  const deleteButton = wrapper.findAll('.van-button').at(1);
+  deleteButton.trigger('click');
+  document.querySelector('.van-dialog__confirm').click();
+
+  setTimeout(() => {
+    expect(wrapper.emitted('delete')).toBeTruthy();
+    done();
+  });
+});

packages/contact-edit/index.vue

@@ -33,6 +33,12 @@ import Toast from '../toast';
 import validateMobile from '../utils/validate/mobile';
 import create from '../utils/create';
 
+const defaultContact = {
+  id: '',
+  tel: '',
+  name: ''
+};
+
 export default create({
   name: 'contact-edit',
 
@@ -47,11 +53,7 @@ export default create({
     isDeleting: Boolean,
     contactInfo: {
       type: Object,
-      default: () => ({
+      default: () => ({ ...defaultContact })
-        id: '',
-        tel: '',
-        name: ''
-      })
     },
     telValidator: {
       type: Function,
@@ -61,7 +63,10 @@ export default create({
 
   data() {
     return {
-      data: this.contactInfo,
+      data: {
+        ...this.defaultContact,
+        ...this.contactInfo
+      },
       errorInfo: {
         name: false,
         tel: false
@@ -106,13 +111,11 @@ export default create({
     },
 
     onDelete() {
-      if (!this.isDeleting) {
+      Dialog.confirm({
-        Dialog.confirm({
+        message: this.$t('confirmDelete')
-          message: this.$t('confirmDelete')
+      }).then(() => {
-        }).then(() => {
+        this.$emit('delete', this.data);
-          this.$emit('delete', this.data);
+      });
-        });
-      }
     }
   }
 });