From f6db213aa422121155ab32b962616fe44dbc3be8 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sun, 8 Nov 2020 20:12:52 +0800
Subject: [PATCH] test(Button): update test cases

---
 .../test/__snapshots__/index.legacy.js.snap   |  29 -----
 .../test/__snapshots__/index.spec.js.snap     |  30 ++++-
 src/button/test/index.legacy.js               | 118 ------------------
 src/button/test/index.spec.js                 |  80 +++++++++++-
 4 files changed, 103 insertions(+), 154 deletions(-)
 delete mode 100644 src/button/test/__snapshots__/index.legacy.js.snap
 delete mode 100644 src/button/test/index.legacy.js

diff --git a/src/button/test/__snapshots__/index.legacy.js.snap b/src/button/test/__snapshots__/index.legacy.js.snap
deleted file mode 100644
index 09bd1be32..000000000
--- a/src/button/test/__snapshots__/index.legacy.js.snap
+++ /dev/null
@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`icon-position prop 1`] = `
-<button class="van-button van-button--default van-button--normal">
-  <div class="van-button__content"><i class="van-icon van-icon-plus van-button__icon">
-      <!----></i></div>
-</button>
-`;
-
-exports[`icon-prefix prop 1`] = `
-<button class="van-button van-button--default van-button--normal">
-  <div class="van-button__content"><i class="my-icon my-icon-success van-button__icon">
-      <!----></i></div>
-</button>
-`;
-
-exports[`loading slot 1`] = `
-<button class="van-button van-button--default van-button--normal van-button--loading">
-  <div class="van-button__content">Custom Loading</div>
-</button>
-`;
-
-exports[`loading-size prop 1`] = `
-<button class="van-button van-button--default van-button--normal van-button--loading">
-  <div class="van-button__content">
-    <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 10px; height: 10px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
-  </div>
-</button>
-`;
diff --git a/src/button/test/__snapshots__/index.spec.js.snap b/src/button/test/__snapshots__/index.spec.js.snap
index dabe4aff8..69f026d5e 100644
--- a/src/button/test/__snapshots__/index.spec.js.snap
+++ b/src/button/test/__snapshots__/index.spec.js.snap
@@ -1,11 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`loading-size prop 1`] = `
-<button type="button" class="van-button van-button--default van-button--normal van-button--loading">
-  <div class="van-button__content">
-    <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 10px; height: 10px;"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span>
+exports[`should change icon class prefix when using icon-prefix prop 1`] = `
+<button type="button" class="van-button van-button--default van-button--normal">
+  <div class="van-button__content"><i class="van-badge__wrapper my-icon my-icon-success van-button__icon">
       <!---->
-    </div>
+      <!---->
+      <!----></i>
+    <!---->
+    <!---->
+  </div>
+</button>
+`;
+
+exports[`should render icon in the right side when setting icon-position to right 1`] = `
+<button type="button" class="van-button van-button--default van-button--normal">
+  <div class="van-button__content">
+    <!---->
+    <!----><i class="van-badge__wrapper van-icon van-icon-plus van-button__icon">
+      <!---->
+      <!---->
+      <!----></i></div>
+</button>
+`;
+
+exports[`should render loading slot and match snapshot 1`] = `
+<button type="button" class="van-button van-button--default van-button--normal van-button--loading">
+  <div class="van-button__content">Custom Loading
     <!---->
     <!---->
   </div>
diff --git a/src/button/test/index.legacy.js b/src/button/test/index.legacy.js
deleted file mode 100644
index bcb42939a..000000000
--- a/src/button/test/index.legacy.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import { mount } from '../../../test';
-import Button from '..';
-
-test('loading-size prop', () => {
-  const wrapper = mount(Button, {
-    propsData: {
-      loading: true,
-      loadingSize: '10px',
-    },
-  });
-  expect(wrapper).toMatchSnapshot();
-});
-
-test('icon-position prop', () => {
-  const wrapper = mount(Button, {
-    propsData: {
-      icon: 'plus',
-      iconPosition: 'right',
-    },
-  });
-  expect(wrapper).toMatchSnapshot();
-});
-
-test('click event', () => {
-  const onClick = jest.fn();
-  const wrapper = mount(Button, {
-    context: {
-      on: {
-        click: onClick,
-      },
-    },
-  });
-
-  wrapper.trigger('click');
-  expect(onClick).toHaveBeenCalled();
-});
-
-test('not trigger click event when disabled', () => {
-  const onClick = jest.fn();
-  const wrapper = mount(Button, {
-    propsData: {
-      disabled: true,
-    },
-    context: {
-      on: {
-        click: onClick,
-      },
-    },
-  });
-
-  wrapper.trigger('click');
-  expect(onClick).toHaveBeenCalledTimes(0);
-});
-
-test('not trigger click event when loading', () => {
-  const onClick = jest.fn();
-  const wrapper = mount(Button, {
-    propsData: {
-      loading: true,
-    },
-    context: {
-      on: {
-        click: onClick,
-      },
-    },
-  });
-
-  wrapper.trigger('click');
-  expect(onClick).toHaveBeenCalledTimes(0);
-});
-
-test('touchstart event', () => {
-  const onTouchstart = jest.fn();
-  const wrapper = mount(Button, {
-    context: {
-      on: {
-        touchstart: onTouchstart,
-      },
-    },
-  });
-
-  wrapper.trigger('touchstart');
-  expect(onTouchstart).toHaveBeenCalled();
-});
-
-test('hide border when color is gradient', () => {
-  const wrapper = mount(Button, {
-    propsData: {
-      color: 'linear-gradient(#000, #fff)',
-    },
-  });
-
-  expect(wrapper.element.style.border).toEqual('0px');
-});
-
-test('icon-prefix prop', () => {
-  const wrapper = mount(Button, {
-    propsData: {
-      icon: 'success',
-      iconPrefix: 'my-icon',
-    },
-  });
-
-  expect(wrapper).toMatchSnapshot();
-});
-
-test('loading slot', () => {
-  const wrapper = mount(Button, {
-    propsData: {
-      loading: true,
-    },
-    scopedSlots: {
-      loading: () => 'Custom Loading',
-    },
-  });
-
-  expect(wrapper).toMatchSnapshot();
-});
diff --git a/src/button/test/index.spec.js b/src/button/test/index.spec.js
index 11b455ec8..e8061023e 100644
--- a/src/button/test/index.spec.js
+++ b/src/button/test/index.spec.js
@@ -1,12 +1,88 @@
-import { mount } from '../../../test';
+import { mount } from '@vue/test-utils';
 import Button from '..';
 
-test('loading-size prop', () => {
+test('should emit click event', () => {
+  const wrapper = mount(Button);
+
+  wrapper.trigger('click');
+  expect(wrapper.emitted('click').length).toEqual(1);
+});
+
+test('should not emit click event when disabled', () => {
+  const wrapper = mount(Button, {
+    propsData: {
+      disabled: true,
+    },
+  });
+
+  wrapper.trigger('click');
+  expect(wrapper.emitted('click')).toBeFalsy();
+});
+
+test('should not emit click event when loading', () => {
+  const wrapper = mount(Button, {
+    propsData: {
+      loading: true,
+    },
+  });
+
+  wrapper.trigger('click');
+  expect(wrapper.emitted('click')).toBeFalsy();
+});
+
+test('should hide border when color is gradient', () => {
+  const wrapper = mount(Button, {
+    propsData: {
+      color: 'linear-gradient(#000, #fff)',
+    },
+  });
+
+  expect(wrapper.element.style.border).toEqual('0px');
+});
+
+test('should change icon class prefix when using icon-prefix prop', () => {
+  const wrapper = mount(Button, {
+    propsData: {
+      icon: 'success',
+      iconPrefix: 'my-icon',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render loading slot and match snapshot', () => {
+  const wrapper = mount(Button, {
+    propsData: {
+      loading: true,
+    },
+    slots: {
+      loading: () => 'Custom Loading',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render loading of a specific size when using loading-size prop', () => {
   const wrapper = mount(Button, {
     propsData: {
       loading: true,
       loadingSize: '10px',
     },
   });
+
+  const loading = wrapper.find('.van-loading__spinner').element;
+  expect(loading.style.width).toEqual('10px');
+  expect(loading.style.height).toEqual('10px');
+});
+
+test('should render icon in the right side when setting icon-position to right', () => {
+  const wrapper = mount(Button, {
+    propsData: {
+      icon: 'plus',
+      iconPosition: 'right',
+    },
+  });
   expect(wrapper.html()).toMatchSnapshot();
 });