feat: Switch component

2020-07-06 15:44:37 +08:00
parent ca0b7ff028
commit 1874b7af60
12 changed files with 657 additions and 9 deletions
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div role="switch" aria-checked="true" class="van-switch van-switch--on">
+      <div class="van-switch__node"></div>
+    </div>
+  </div>
+  <div>
+    <div role="switch" aria-checked="true" class="van-switch van-switch--on van-switch--disabled">
+      <div class="van-switch__node"></div>
+    </div>
+  </div>
+  <div>
+    <div role="switch" aria-checked="true" class="van-switch van-switch--on van-switch--loading">
+      <div class="van-switch__node">
+        <div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
+      <div class="van-switch__node"></div>
+    </div>
+  </div>
+  <div>
+    <div role="switch" aria-checked="true" class="van-switch van-switch--on" style="background-color: rgb(7, 193, 96);">
+      <div class="van-switch__node"></div>
+    </div>
+  </div>
+  <div>
+    <div role="switch" aria-checked="true" class="van-switch van-switch--on">
+      <div class="van-switch__node"></div>
+    </div>
+  </div>
+  <div>
+    <div class="van-cell van-cell--center">
+      <div class="van-cell__title"><span>标题</span></div>
+      <div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 24px;">
+        <div class="van-switch__node"></div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`inactive-color prop 1`] = `
+<div role="switch" aria-checked="false" class="van-switch" style="background-color: black;">
+  <div class="van-switch__node"></div>
+</div>
+`;
+
+exports[`size prop 1`] = `
+<div role="switch" aria-checked="false" class="van-switch" style="font-size: 20px;">
+  <div class="van-switch__node"></div>
+</div>
+`;
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);
@@ -0,0 +1,91 @@
+import Switch from '..';
+import { mount } from '../../../test';
+
+test('emit event', () => {
+  const input = jest.fn();
+  const change = jest.fn();
+  const wrapper = mount(Switch, {
+    listeners: {
+      input,
+      change,
+    },
+  });
+  wrapper.trigger('click');
+
+  expect(input).toHaveBeenCalledWith(true);
+  expect(change).toHaveBeenCalledWith(true);
+});
+
+test('disabled', () => {
+  const input = jest.fn();
+  const change = jest.fn();
+  const wrapper = mount(Switch, {
+    listeners: {
+      input,
+      change,
+    },
+    propsData: {
+      disabled: true,
+    },
+  });
+  wrapper.trigger('click');
+
+  expect(input).toHaveBeenCalledTimes(0);
+  expect(change).toHaveBeenCalledTimes(0);
+});
+
+test('active-value & inactive-value prop', () => {
+  const input = jest.fn();
+  const change = jest.fn();
+  const wrapper = mount(Switch, {
+    propsData: {
+      value: '1',
+      activeValue: '1',
+      inactiveValue: '2',
+    },
+    listeners: {
+      input,
+      change,
+    },
+  });
+
+  wrapper.trigger('click');
+
+  expect(input).toHaveBeenCalledWith('2');
+  expect(change).toHaveBeenCalledWith('2');
+});
+
+test('inactive-color prop', () => {
+  const wrapper = mount(Switch, {
+    propsData: {
+      value: '2',
+      inactiveValue: '2',
+      inactiveColor: 'black',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('size prop', () => {
+  const wrapper = mount(Switch, {
+    propsData: {
+      size: 20,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('click event', () => {
+  const click = jest.fn();
+  const wrapper = mount(Switch, {
+    listeners: {
+      click,
+    },
+  });
+
+  wrapper.trigger('click');
+
+  expect(click).toHaveBeenCalledTimes(1);
+});