text: 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('should emit "update:modelValue" event after dragging button', () => {
    const wrapper = mount(Slider, {
      props: {
        modelValue: 50,
      },
    });
  
    const button = wrapper.find('.van-slider__button');
    triggerDrag(button, 50, 0);
    expect(wrapper.emitted('update:modelValue').pop()).toEqual([100]);
  });
  
  test('should emit "update:modelValue" event after clicking slider', () => {
    const wrapper = mount(Slider, {
      props: {
        modelValue: 50,
      },
    });
  
    trigger(wrapper, 'click', 100, 0);
    expect(wrapper.emitted('update:modelValue').pop()).toEqual([100]);
  });
  
  test('should emit drag-start event when start dragging', () => {
    const wrapper = mount(Slider, {
      props: {
        modelValue: 50,
      },
    });
  
    const button = wrapper.find('.van-slider__button');
    trigger(button, 'touchstart');
    trigger(button, 'touchmove');
    expect(wrapper.emitted('drag-start')).toBeTruthy();
  });
  
  test('should emit drag-end event when end dragging', () => {
    const wrapper = mount(Slider, {
      props: {
        modelValue: 50,
      },
    });
  
    const button = wrapper.find('.van-slider__button');
    trigger(button, 'touchstart');
    trigger(button, 'touchmove');
    expect(wrapper.emitted('drag-end')).toBeFalsy();
    trigger(button, 'touchend');
    expect(wrapper.emitted('drag-end')).toBeTruthy();
  });
  
  test('should not allow to drag slider when disabled', async () => {
    const wrapper = mount(Slider, {
      props: {
        modelValue: 50,
        disabled: true,
      },
    });
  
    const button = wrapper.find('.van-slider__button');
    triggerDrag(button, 50, 0);
    expect(wrapper.emitted('update:modelValue')).toBeFalsy();
  });
  
  test('should not allow to click slider when disabled', async () => {
    const wrapper = mount(Slider, {
      props: {
        modelValue: 50,
        disabled: true,
      },
    });
  
    trigger(wrapper, 'click', 100, 0);
    expect(wrapper.emitted('update:modelValue')).toBeFalsy();
  });
  
  test('should not allow to drag slider when readonly', async () => {
    const wrapper = mount(Slider, {
      props: {
        modelValue: 50,
        readonly: true,
      },
    });
  
    const button = wrapper.find('.van-slider__button');
    triggerDrag(button, 50, 0);
    expect(wrapper.emitted('update:modelValue')).toBeFalsy();
  });
  
  test('should not allow to click slider when readonly', async () => {
    const wrapper = mount(Slider, {
      props: {
        modelValue: 50,
        readonly: true,
      },
    });
  
    trigger(wrapper, 'click', 100, 0);
    expect(wrapper.emitted('update:modelValue')).toBeFalsy();
  });
  
  test('should allow to drag vertical slider', () => {
    const restoreMock = mockRect(true);
  
    const wrapper = mount(Slider, {
      props: {
        vertical: true,
        modelValue: 50,
      },
    });
  
    const button = wrapper.find('.van-slider__button');
    triggerDrag(button, 0, 50);
    expect(wrapper.emitted('update:modelValue').pop()).toEqual([100]);
  
    restoreMock();
  });
  
  test('should change slider bar height when using bar-height prop', () => {
    const wrapper = mount(Slider, {
      props: {
        barHeight: 10,
        modelValue: 50,
      },
    });
  
    expect(wrapper.element.style.height).toEqual('10px');
  });
  
  test('shoud change button size when using button-size prop', () => {
    const wrapper = mount(Slider, {
      props: {
        modelValue: 50,
        buttonSize: 10,
      },
    });
  
    const button = wrapper.find('.van-slider__button').element;
    expect(button.style.width).toEqual('10px');
    expect(button.style.height).toEqual('10px');
  });
  
  test('should emit "update:modelValue" event after clicking vertical slider', () => {
    const wrapper = mount(Slider, {
      props: {
        vertical: true,
        modelValue: 50,
      },
    });
  
    trigger(wrapper, 'click', 0, 100);
    expect(wrapper.emitted('update:modelValue').pop()).toEqual([100]);
  });
  
  test('should format initial value', (done) => {
    mount(Slider, {
      props: {
        modelValue: null,
        'onUpdate:modelValue': (value) => {
          expect(value).toEqual(0);
          done();
        },
      },
    });
  });
  
  test('should not emit change event when value not changed', async () => {
    const wrapper = mount(Slider, {
      props: {
        modelValue: 50,
      },
    });
  
    const button = wrapper.find('.van-slider__button');
    trigger(button, 'touchstart');
    trigger(wrapper, 'click', 100, 0);
    expect(wrapper.emitted('change').length).toEqual(1);
  
    await wrapper.setProps({ modelValue: 100 });
    trigger(button, 'touchstart');
    trigger(wrapper, 'click', 100, 0);
  
    expect(wrapper.emitted('change').length).toEqual(1);
  });
  