test(Button): update test cases

src/button/test/__snapshots__/index.legacy.js.snap

@@ -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>
-`;

src/button/test/__snapshots__/index.spec.js.snap

@@ -1,11 +1,31 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`loading-size prop 1`] = `
+exports[`should change icon class prefix when using icon-prefix prop 1`] = `
-<button type="button" class="van-button van-button--default van-button--normal van-button--loading">
+<button type="button" class="van-button van-button--default van-button--normal">
-  <div class="van-button__content">
+  <div class="van-button__content"><i class="van-badge__wrapper my-icon my-icon-success van-button__icon">
-    <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>
       <!---->
-    </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>

src/button/test/index.legacy.js

@@ -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();
-});

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();
 });