From 0f9a5a87649e52d5180514f15b1e1fc6444d6c1d Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Fri, 13 Nov 2020 23:43:16 +0800
Subject: [PATCH] test(Cell): update test cases

---
 .../test/__snapshots__/index.legacy.js.snap   | 29 -------
 .../test/__snapshots__/index.spec.js.snap     | 71 ++++++++++++++++
 src/cell/test/index.legacy.js                 | 80 -----------------
 src/cell/test/index.spec.js                   | 85 +++++++++++++++++++
 4 files changed, 156 insertions(+), 109 deletions(-)
 delete mode 100644 src/cell/test/__snapshots__/index.legacy.js.snap
 create mode 100644 src/cell/test/__snapshots__/index.spec.js.snap
 delete mode 100644 src/cell/test/index.legacy.js
 create mode 100644 src/cell/test/index.spec.js

diff --git a/src/cell/test/__snapshots__/index.legacy.js.snap b/src/cell/test/__snapshots__/index.legacy.js.snap
deleted file mode 100644
index cd68daa26..000000000
--- a/src/cell/test/__snapshots__/index.legacy.js.snap
+++ /dev/null
@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CellGroup title slot 1`] = `
-<div>
-  <div class="van-cell-group__title">CustomTitle</div>
-  <div class="van-cell-group van-hairline--top-bottom"></div>
-</div>
-`;
-
-exports[`arrow direction 1`] = `
-<div role="button" tabindex="0" class="van-cell van-cell--clickable"><i class="van-icon van-icon-arrow-down van-cell__right-icon">
-    <!----></i></div>
-`;
-
-exports[`icon-prefix prop 1`] = `
-<div class="van-cell"><i class="my-icon my-icon-success van-cell__left-icon">
-    <!----></i></div>
-`;
-
-exports[`render slot 1`] = `
-<div class="van-cell">Custom Icon<div class="van-cell__title">Custom Title<div class="van-cell__label">Custom Label</div>
-  </div>Custom Extra</div>
-`;
-
-exports[`title-style prop 1`] = `
-<div class="van-cell">
-  <div class="van-cell__title" style="color: red;"><span>title</span></div>
-</div>
-`;
diff --git a/src/cell/test/__snapshots__/index.spec.js.snap b/src/cell/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..f2898af44
--- /dev/null
+++ b/src/cell/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should change arrow direction when using arrow-direction prop 1`] = `
+<i class="van-badge__wrapper van-icon van-icon-arrow-down van-cell__right-icon">
+  <!---->
+  <!---->
+  <!----></i>
+`;
+
+exports[`should change icon class prefix when using icon-prefix prop 1`] = `
+<div class="van-cell"><i class="van-badge__wrapper my-icon my-icon-success van-cell__left-icon">
+    <!---->
+    <!---->
+    <!----></i>
+  <!---->
+  <!---->
+  <!---->
+  <!---->
+</div>
+`;
+
+exports[`should render default slot and match snapshot 1`] = `
+<div class="van-cell">
+  <!---->
+  <!---->
+  <div class="van-cell__value van-cell__value--alone">Custom Default</div>
+  <!---->
+  <!---->
+</div>
+`;
+
+exports[`should render extra slot and match snapshot 1`] = `
+<div class="van-cell">
+  <!---->
+  <!---->
+  <!---->
+  <!---->Custom Extra</div>
+`;
+
+exports[`should render icon slot and match snapshot 1`] = `
+<div class="van-cell">Custom Icon
+  <!---->
+  <!---->
+  <!---->
+  <!---->
+</div>
+`;
+
+exports[`should render label slot and match snapshot 1`] = `
+<div class="van-cell">
+  <!---->
+  <div class="van-cell__title"><span>Title</span>
+    <div class="van-cell__label">Custom Label</div>
+  </div>
+  <!---->
+  <!---->
+  <!---->
+</div>
+`;
+
+exports[`should render title slot and match snapshot 1`] = `
+<div class="van-cell">
+  <!---->
+  <div class="van-cell__title">Custom Title
+    <!---->
+  </div>
+  <!---->
+  <!---->
+  <!---->
+</div>
+`;
diff --git a/src/cell/test/index.legacy.js b/src/cell/test/index.legacy.js
deleted file mode 100644
index 20ff9875b..000000000
--- a/src/cell/test/index.legacy.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import Cell from '..';
-import CellGroup from '../../cell-group';
-import { mount } from '@vue/test-utils';
-
-test('click event', () => {
-  const click = jest.fn();
-  const wrapper = mount(Cell, {
-    context: {
-      on: {
-        click,
-      },
-    },
-  });
-
-  wrapper.trigger('click');
-  expect(click).toHaveBeenCalled();
-});
-
-test('arrow direction', () => {
-  const wrapper = mount(Cell, {
-    props: {
-      isLink: true,
-      arrowDirection: 'down',
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('render slot', () => {
-  const wrapper = mount({
-    template: `
-      <cell>
-        <template v-slot:icon>Custom Icon</template>
-        <template v-slot:title>Custom Title</template>
-        <template v-slot:label>Custom Label</template>
-        <template v-slot:extra>Custom Extra</template>
-      </cell>
-    `,
-    components: {
-      Cell,
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('title-style prop', () => {
-  const wrapper = mount(Cell, {
-    props: {
-      title: 'title',
-      titleStyle: {
-        color: 'red',
-      },
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('CellGroup title slot', () => {
-  const wrapper = mount(CellGroup, {
-    scopedSlots: {
-      title: () => 'CustomTitle',
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('icon-prefix prop', () => {
-  const wrapper = mount(Cell, {
-    props: {
-      iconPrefix: 'my-icon',
-      icon: 'success',
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
diff --git a/src/cell/test/index.spec.js b/src/cell/test/index.spec.js
new file mode 100644
index 000000000..620787b76
--- /dev/null
+++ b/src/cell/test/index.spec.js
@@ -0,0 +1,85 @@
+import Cell from '..';
+import { mount } from '@vue/test-utils';
+
+test('should render default slot and match snapshot', () => {
+  const wrapper = mount(Cell, {
+    slots: {
+      default: () => 'Custom Default',
+    },
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render title slot and match snapshot', () => {
+  const wrapper = mount(Cell, {
+    slots: {
+      title: () => 'Custom Title',
+    },
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render label slot and match snapshot', () => {
+  const wrapper = mount(Cell, {
+    props: {
+      title: 'Title',
+    },
+    slots: {
+      label: () => 'Custom Label',
+    },
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render icon slot and match snapshot', () => {
+  const wrapper = mount(Cell, {
+    slots: {
+      icon: () => 'Custom Icon',
+    },
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render extra slot and match snapshot', () => {
+  const wrapper = mount(Cell, {
+    slots: {
+      extra: () => 'Custom Extra',
+    },
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should change arrow direction when using arrow-direction prop', () => {
+  const wrapper = mount(Cell, {
+    props: {
+      isLink: true,
+      arrowDirection: 'down',
+    },
+  });
+
+  expect(wrapper.find('.van-cell__right-icon').html()).toMatchSnapshot();
+});
+
+test('should change title style when using title-style prop', () => {
+  const wrapper = mount(Cell, {
+    props: {
+      title: 'title',
+      titleStyle: {
+        color: 'red',
+      },
+    },
+  });
+
+  expect(wrapper.find('.van-cell__title').element.style.color).toEqual('red');
+});
+
+test('should change icon class prefix when using icon-prefix prop', () => {
+  const wrapper = mount(Cell, {
+    props: {
+      icon: 'success',
+      iconPrefix: 'my-icon',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});