docs(Contact): split demo and document (#7484)

2020-11-03 17:58:17 +08:00
parent 7e1ad5dbd5
commit 821a2f81d6
19 changed files with 814 additions and 582 deletions
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <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">张三，13000000000<span class="van-tag van-tag--round van-tag--danger van-contact-list__item-tag">默认</span></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 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">李四，1310000000</div>
+          <div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
+            <div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
+                <!----></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>
+  </div>
+</div>
+`;
@@ -0,0 +1,19 @@
+// 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>
+`;
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);
@@ -0,0 +1,34 @@
+import ContactList from '../../contact-list';
+import { mount } from '../../../test';
+
+const contactInfo = {
+  name: 'test',
+  tel: '123123213',
+};
+
+test('should render ContactList correctly', () => {
+  const wrapper = mount(ContactList, {
+    propsData: {
+      list: [contactInfo],
+    },
+  });
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('should emit select event after clicking the radio', () => {
+  const onSelect = jest.fn();
+  const wrapper = mount(ContactList, {
+    propsData: {
+      list: [contactInfo],
+    },
+    context: {
+      on: {
+        select: onSelect,
+      },
+    },
+  });
+
+  wrapper.find('.van-radio__icon').trigger('click');
+
+  expect(onSelect).toHaveBeenCalled();
+});