test(ContactList): update test cases

src/contact-card/test/__snapshots__/index.legacy.js.snap

@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render ContactList correctly 1`] = `
-<div class="van-contact-list">
-  <div role="radiogroup" class="van-radio-group van-contact-list__group">
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-contact-list__item"><i class="van-icon van-icon-edit van-contact-list__edit">
-        <!----></i>
-      <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">test，123123213</div>
-      <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
-        <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
-            <!----></i></div>
-      </div>
-    </div>
-  </div>
-  <div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add">
-      <div class="van-button__content"><span class="van-button__text">新建联系人</span></div>
-    </button></div>
-</div>
-`;

src/contact-list/index.js

@@ -33,7 +33,7 @@ export default createComponent({
         <Radio name={item.id} iconSize={16} checkedColor={RED} />
       );
 
-      const renderLeftIcon = () => (
+      const renderEditIcon = () => (
         <Icon
           name="edit"
           class={bem('edit')}
@@ -61,7 +61,7 @@ export default createComponent({
       return (
         <Cell
           v-slots={{
-            icon: renderLeftIcon,
+            icon: renderEditIcon,
             default: renderContent,
             'right-icon': renderRightIcon,
           }}

src/contact-list/test/__snapshots__/index.legacy.js.snap

@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render ContactList correctly 1`] = `
-<div class="van-contact-list">
-  <div role="radiogroup" class="van-radio-group van-contact-list__group">
-    <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--center van-contact-list__item"><i class="van-icon van-icon-edit van-contact-list__edit">
-        <!----></i>
-      <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">test，123123213</div>
-      <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
-        <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
-            <!----></i></div>
-      </div>
-    </div>
-  </div>
-  <div class="van-contact-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add">
-      <div class="van-button__content"><span class="van-button__text">新建联系人</span></div>
-    </button></div>
-</div>
-`;

src/contact-list/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render ContactList correctly 1`] = `
+<div class="van-contact-list">
+  <div class="van-radio-group van-contact-list__group"
+       role="radiogroup"
+  >
+    <div class="van-cell van-cell--center van-cell--clickable van-contact-list__item"
+         role="button"
+         tabindex="0"
+    >
+      <i class="van-badge__wrapper van-icon van-icon-edit van-contact-list__edit">
+      </i>
+      <div class="van-cell__value van-cell__value--alone van-contact-list__item-value">
+        jack，12345678
+      </div>
+      <div role="radio"
+           class="van-radio"
+           tabindex="0"
+           aria-checked="true"
+      >
+        <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked"
+             style="font-size: 16px;"
+        >
+          <i class="van-badge__wrapper van-icon van-icon-success"
+             style="border-color: #ee0a24; background-color: rgb(238, 10, 36);"
+          >
+          </i>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="van-contact-list__bottom">
+    <button type="button"
+            class="van-button van-button--danger van-button--normal van-button--block van-button--round van-contact-list__add"
+    >
+      <div class="van-button__content">
+        <span class="van-button__text">
+          新建联系人
+        </span>
+      </div>
+    </button>
+  </div>
+</div>
+`;

src/contact-list/test/index.legacy.js

@@ -1,34 +0,0 @@
-import ContactList from '..';
-import { mount } from '@vue/test-utils';
-
-const contactInfo = {
-  name: 'test',
-  tel: '123123213',
-};
-
-test('should render ContactList correctly', () => {
-  const wrapper = mount(ContactList, {
-    props: {
-      list: [contactInfo],
-    },
-  });
-  expect(wrapper).toMatchSnapshot();
-});
-
-test('should emit select event after clicking the radio', () => {
-  const onSelect = jest.fn();
-  const wrapper = mount(ContactList, {
-    props: {
-      list: [contactInfo],
-    },
-    context: {
-      on: {
-        select: onSelect,
-      },
-    },
-  });
-
-  wrapper.find('.van-radio__icon').trigger('click');
-
-  expect(onSelect).toHaveBeenCalled();
-});

src/contact-list/test/index.spec.js

@@ -0,0 +1,48 @@
+import ContactList from '..';
+import { mount } from '@vue/test-utils';
+
+const contactInfo = {
+  name: 'jack',
+  tel: '12345678',
+};
+
+test('should render ContactList correctly', () => {
+  const wrapper = mount(ContactList, {
+    props: {
+      list: [contactInfo],
+    },
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should emit add event when add button is clicked', () => {
+  const wrapper = mount(ContactList);
+  wrapper.find('.van-contact-list__add').trigger('click');
+  expect(wrapper.emitted('add').length).toEqual(1);
+});
+
+test('should emit select event when radio is clicked', () => {
+  const wrapper = mount(ContactList, {
+    props: {
+      list: [contactInfo],
+    },
+  });
+
+  wrapper.find('.van-radio__icon').trigger('click');
+
+  expect(wrapper.emitted('select').length).toEqual(1);
+  expect(wrapper.emitted('select')[0]).toEqual([contactInfo, 0]);
+});
+
+test('should emit edit event when edit icon is clicked', () => {
+  const wrapper = mount(ContactList, {
+    props: {
+      list: [contactInfo],
+    },
+  });
+
+  wrapper.find('.van-contact-list__edit').trigger('click');
+
+  expect(wrapper.emitted('edit').length).toEqual(1);
+  expect(wrapper.emitted('edit')[0]).toEqual([contactInfo, 0]);
+});