feat: migrate Slider component

2020-07-12 15:16:56 +08:00
parent e111fd4208
commit 75d76d2cec
10 changed files with 962 additions and 8 deletions
@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-slider">
+      <div class="van-slider__bar" style="width: 50%;">
+        <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
+          <div class="van-slider__button"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-slider">
+      <div class="van-slider__bar" style="width: 50%;">
+        <div role="slider" tabindex="0" aria-valuemin="-50" aria-valuenow="0" aria-valuemax="50" aria-orientation="horizontal" class="van-slider__button-wrapper">
+          <div class="van-slider__button"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-slider van-slider--disabled">
+      <div class="van-slider__bar" style="width: 50%;">
+        <div role="slider" tabindex="-1" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
+          <div class="van-slider__button"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-slider">
+      <div class="van-slider__bar" style="width: 50%;">
+        <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
+          <div class="van-slider__button"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-slider" style="height: 4px;">
+      <div class="van-slider__bar" style="width: 50%; background: rgb(238, 10, 36);">
+        <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
+          <div class="van-slider__button"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div class="van-slider">
+      <div class="van-slider__bar" style="width: 50%; background: rgb(238, 10, 36);">
+        <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
+          <div class="custom-button">50</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div>
+    <div style="height: 120px; padding-left: 30px;">
+      <div class="van-slider van-slider--vertical">
+        <div class="van-slider__bar" style="height: 50%;">
+          <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="vertical" class="van-slider__button-wrapper">
+            <div class="van-slider__button"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`bar-height prop 1`] = `
+<div class="van-slider" style="height: 10px;">
+  <div class="van-slider__bar" style="width: 50%;">
+    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
+      <div class="van-slider__button"></div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`button-size prop 1`] = `
+<div class="van-slider">
+  <div class="van-slider__bar" style="width: 50%;">
+    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
+      <div class="van-slider__button" style="width: 10px; height: 10px;"></div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`click bar 1`] = `
+<div class="van-slider van-slider--disabled">
+  <div class="van-slider__bar" style="width: 50%;">
+    <div role="slider" tabindex="-1" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
+      <div class="van-slider__button"></div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`click bar 2`] = `
+<div class="van-slider">
+  <div class="van-slider__bar" style="width: 100%;">
+    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="100" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
+      <div class="van-slider__button"></div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`click vertical 1`] = `
+<div class="van-slider van-slider--vertical">
+  <div class="van-slider__bar" style="height: 100%;">
+    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="100" aria-valuemax="100" aria-orientation="vertical" class="van-slider__button-wrapper">
+      <div class="van-slider__button"></div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`drag button 1`] = `
+<div class="van-slider van-slider--disabled">
+  <div class="van-slider__bar" style="width: 50%;">
+    <div role="slider" tabindex="-1" aria-valuemin="0" aria-valuenow="50" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
+      <div class="van-slider__button"></div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`drag button 2`] = `
+<div class="van-slider">
+  <div class="van-slider__bar" style="width: 100%;">
+    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="100" aria-valuemax="100" aria-orientation="horizontal" class="van-slider__button-wrapper">
+      <div class="van-slider__button"></div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`drag button vertical 1`] = `
+<div class="van-slider van-slider--vertical">
+  <div class="van-slider__bar" style="height: 100%;">
+    <div role="slider" tabindex="0" aria-valuemin="0" aria-valuenow="100" aria-valuemax="100" aria-orientation="vertical" class="van-slider__button-wrapper">
+      <div class="van-slider__button"></div>
+    </div>
+  </div>
+</div>
+`;
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);
@@ -0,0 +1,166 @@
+import Slider from '..';
+import {
+  mount,
+  trigger,
+  triggerDrag,
+  mockGetBoundingClientRect,
+} from '../../../test';
+
+function mockRect(vertical) {
+  return mockGetBoundingClientRect({
+    width: vertical ? 0 : 100,
+    height: vertical ? 100 : 0,
+    top: vertical ? 0 : 100,
+    left: vertical ? 100 : 0,
+  });
+}
+
+test('drag button', () => {
+  const restoreMock = mockRect();
+
+  const wrapper = mount(Slider, {
+    propsData: {
+      value: 50,
+      disabled: true,
+    },
+  });
+
+  wrapper.vm.$on('input', (value) => {
+    wrapper.setProps({ value });
+  });
+
+  const button = wrapper.find('.van-slider__button');
+  triggerDrag(button, 50, 0);
+  expect(wrapper).toMatchSnapshot();
+  expect(wrapper.emitted('drag-start')).toBeFalsy();
+  expect(wrapper.emitted('drag-end')).toBeFalsy();
+
+  wrapper.setData({ disabled: false });
+  trigger(button, 'touchstart', 0, 0);
+  trigger(button, 'touchend', 0, 0);
+  triggerDrag(button, 50, 0);
+  expect(wrapper).toMatchSnapshot();
+  expect(wrapper.emitted('drag-start')).toBeTruthy();
+  expect(wrapper.emitted('drag-end')).toBeTruthy();
+
+  restoreMock();
+});
+
+test('click bar', () => {
+  const restoreMock = mockRect();
+
+  const wrapper = mount(Slider, {
+    propsData: {
+      value: 50,
+      disabled: true,
+    },
+  });
+
+  wrapper.vm.$on('input', (value) => {
+    wrapper.setProps({ value });
+  });
+
+  trigger(wrapper, 'click', 100, 0);
+  expect(wrapper).toMatchSnapshot();
+
+  wrapper.setData({ disabled: false });
+  trigger(wrapper, 'click', 100, 0);
+  expect(wrapper).toMatchSnapshot();
+
+  restoreMock();
+});
+
+test('drag button vertical', () => {
+  const restoreMock = mockRect(true);
+
+  const wrapper = mount(Slider, {
+    propsData: {
+      value: 50,
+      vertical: true,
+    },
+  });
+
+  wrapper.vm.$on('input', (value) => {
+    wrapper.setProps({ value });
+  });
+
+  const button = wrapper.find('.van-slider__button');
+  triggerDrag(button, 0, 50);
+  expect(wrapper).toMatchSnapshot();
+
+  restoreMock();
+});
+
+test('click vertical', () => {
+  const restoreMock = mockRect(true);
+
+  const wrapper = mount(Slider, {
+    propsData: {
+      value: 50,
+      vertical: true,
+    },
+  });
+
+  wrapper.vm.$on('input', (value) => {
+    wrapper.setProps({ value });
+  });
+
+  trigger(wrapper, 'click', 0, 100);
+  expect(wrapper).toMatchSnapshot();
+
+  restoreMock();
+});
+
+test('bar-height prop', () => {
+  const wrapper = mount(Slider, {
+    propsData: {
+      value: 50,
+      barHeight: 10,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('button-size prop', () => {
+  const wrapper = mount(Slider, {
+    propsData: {
+      value: 50,
+      buttonSize: 10,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('should not emit change event when value not changed', () => {
+  const wrapper = mount(Slider, {
+    propsData: {
+      value: 50,
+    },
+    listeners: {
+      input(value) {
+        wrapper.setProps({ value });
+      },
+    },
+  });
+
+  trigger(wrapper, 'click', 100, 0);
+  trigger(wrapper, 'click', 100, 0);
+
+  expect(wrapper.emitted('change').length).toEqual(1);
+});
+
+test('should format initial value', (done) => {
+  mount(Slider, {
+    propsData: {
+      value: null,
+    },
+    listeners: {
+      input(value) {
+        expect(value).toEqual(0);
+        done();
+      },
+    },
+  });
+});