[new feature] Slider: add vertical prop (#3078)

packages/slider/test/__snapshots__/demo.spec.js.snap

@@ -58,5 +58,16 @@ exports[`renders demo correctly 1`] = `
       </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%;width:2px;">
+          <div class="van-slider__button-wrapper">
+            <div class="van-slider__button"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;

packages/slider/test/__snapshots__/index.spec.js.snap

@@ -20,6 +20,16 @@ exports[`click bar 2`] = `
 </div>
 `;
 
+exports[`click vertical 1`] = `
+<div class="van-slider van-slider--vertical">
+  <div class="van-slider__bar" style="height: 100%; width: 2px;">
+    <div 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%; height: 2px;">
@@ -39,3 +49,13 @@ exports[`drag button 2`] = `
   </div>
 </div>
 `;
+
+exports[`drag button vertical 1`] = `
+<div class="van-slider van-slider--vertical">
+  <div class="van-slider__bar" style="height: 100%; width: 2px;">
+    <div class="van-slider__button-wrapper">
+      <div class="van-slider__button"></div>
+    </div>
+  </div>
+</div>
+`;

packages/slider/test/index.spec.js

@@ -1,11 +1,19 @@
 import Slider from '..';
 import { mount, triggerDrag, trigger } from '../../../test/utils';
 
-Element.prototype.getBoundingClientRect = jest.fn(() => ({ width: 100, left: 0 }));
+function mockGetBoundingClientRect(vertical) {
+  Element.prototype.getBoundingClientRect = jest.fn(() => ({
+    width: vertical ? 0 : 100,
+    height: vertical ? 100 : 0,
+    top: vertical ? 0 : 100,
+    left: vertical ? 100 : 0
+  }));
+}
 
 test('drag button', () => {
+  mockGetBoundingClientRect();
+
   const wrapper = mount(Slider, {
-    attachToDocument: true,
     propsData: {
       value: 50,
       disabled: true
@@ -26,6 +34,8 @@ test('drag button', () => {
 });
 
 it('click bar', () => {
+  mockGetBoundingClientRect();
+
   const wrapper = mount(Slider, {
     propsData: {
       value: 50,
@@ -44,3 +54,40 @@ it('click bar', () => {
   trigger(wrapper, 'click', 100, 0);
   expect(wrapper).toMatchSnapshot();
 });
+
+test('drag button vertical', () => {
+  mockGetBoundingClientRect(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();
+});
+
+it('click vertical', () => {
+  mockGetBoundingClientRect(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();
+});