feat: Button component

src-next/button/test/index.spec.js

@@ -0,0 +1,95 @@
+import { mount } from '../../../test';
+import Button from '..';
+
+test('loading-size prop', () => {
+  const wrapper = mount(Button, {
+    propsData: {
+      loading: true,
+      loadingSize: '10px',
+    },
+  });
+  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();
+});