vant/src/swipe/test/index.spec.js

import {
  mount,
  later,
  trigger,
  triggerDrag,
  mockGetBoundingClientRect,
} from '../../../test';
import Swipe from '..';
import SwipeItem from '../../swipe-item';

let restore;

beforeEach(() => {
  restore = mockGetBoundingClientRect({
    width: 100,
    height: 100,
  });
});

afterEach(() => {
  restore();
});

function mockPageHidden() {
  let hidden = true;

  Object.defineProperty(document, 'hidden', {
    get: () => hidden,
  });

  trigger(window, 'visibilitychange');
  hidden = false;
}

const Component = {
  props: {
    vertical: Boolean,
    loop: {
      type: Boolean,
      default: true,
    },
    touchable: {
      type: Boolean,
      default: true,
    },
    autoplay: {
      type: Number,
      default: 0,
    },
    initialSwipe: {
      type: Number,
      default: 0,
    },
  },
  render() {
    const style = {
      width: '100px',
      height: '100px',
    };
    return (
      <Swipe ref="swipe" {...this.$props}>
        <SwipeItem style={style}>1</SwipeItem>
        <SwipeItem style={style}>2</SwipeItem>
        <SwipeItem style={style}>3</SwipeItem>
      </Swipe>
    );
  },
};

test('should swipe to specific swipe after calling the swipeTo method', async () => {
  const onChange = jest.fn();
  const wrapper = mount(Component, {
    props: {
      onChange,
    },
  });

  const { swipe } = wrapper.vm.$refs;
  swipe.swipeTo(2);

  await later(50);
  expect(onChange).toHaveBeenCalledWith(2);
});

test('should allow to call swipeTo method with immediate option', async () => {
  const onChange = jest.fn();
  const wrapper = mount(Component, {
    props: {
      onChange,
    },
  });

  const { swipe } = wrapper.vm.$refs;
  swipe.swipeTo(2, {
    immediate: true,
  });

  await later(50);
  expect(onChange).toHaveBeenCalledWith(2);
});

test('should swipe to next swipe after calling next method', async () => {
  const onChange = jest.fn();
  const wrapper = mount(Component, {
    props: {
      onChange,
    },
  });

  const { swipe } = wrapper.vm.$refs;
  swipe.next();
  await later(50);
  expect(onChange).toHaveBeenCalledWith(1);
});

test('should swipe to prev swipe after calling prev method', async () => {
  const onChange = jest.fn();
  const wrapper = mount(Component, {
    props: {
      onChange,
    },
  });

  const { swipe } = wrapper.vm.$refs;
  swipe.prev();
  await later(50);
  expect(onChange).toHaveBeenCalledWith(2);
});

test('should render initial swipe correctly', async () => {
  const wrapper = mount(Component);
  await later();
  expect(wrapper.html()).toMatchSnapshot();

  await wrapper.setProps({ initialSwipe: 2 });
  expect(wrapper.html()).toMatchSnapshot();
});

test('should render vertical swipe when using vertical prop', async () => {
  const wrapper = mount(Component, {
    props: {
      vertical: true,
    },
  });

  const track = wrapper.find('.van-swipe__track');
  await triggerDrag(track, 0, -100);
  expect(wrapper.html()).toMatchSnapshot();
});

test('should not allow to drag swipe when touchable is false', async () => {
  const onChange = jest.fn();
  const wrapper = mount(Component, {
    props: {
      onChange,
      touchable: false,
    },
  });

  const track = wrapper.find('.van-swipe__track');

  await triggerDrag(track, 100, 0);
  expect(wrapper.html()).toMatchSnapshot();
  expect(onChange).toHaveBeenCalledTimes(0);
});

test('should render swipe looply when using loop prop', async () => {
  const onChange = jest.fn();
  const wrapper = mount(Component, {
    props: {
      onChange,
    },
  });
  const track = wrapper.find('.van-swipe__track');

  await triggerDrag(track, -100, 0);
  expect(onChange).toHaveBeenLastCalledWith(1);
  await triggerDrag(track, -100, 0);
  expect(onChange).toHaveBeenLastCalledWith(2);
  await triggerDrag(track, -100, 0);
  expect(onChange).toHaveBeenLastCalledWith(0);
  await triggerDrag(track, -100, 0);
  expect(onChange).toHaveBeenLastCalledWith(1);
  await triggerDrag(track, 100, 0);
  expect(onChange).toHaveBeenLastCalledWith(0);
  await triggerDrag(track, 100, 0);
  expect(onChange).toHaveBeenLastCalledWith(2);
  await triggerDrag(track, 100, 0);
  expect(onChange).toHaveBeenLastCalledWith(1);
});

test('should pause auto play when page is hidden', async () => {
  const onChange = jest.fn();
  mount(Component, {
    props: {
      loop: true,
      autoplay: 1,
      onChange,
    },
  });

  mockPageHidden();
  await later(50);
  expect(onChange).toHaveBeenCalledTimes(0);
});

test('should render swipe item correctly when using lazy-render prop', async () => {
  const wrapper = mount({
    data() {
      return {
        active: 0,
      };
    },
    render() {
      return (
        <Swipe initialSwipe={this.active} lazyRender>
          <SwipeItem>
            <span>1</span>
          </SwipeItem>
          <SwipeItem>
            <span>2</span>
          </SwipeItem>
          <SwipeItem>
            <span>3</span>
          </SwipeItem>
          <SwipeItem>
            <span>4</span>
          </SwipeItem>
          <SwipeItem>
            <span>5</span>
          </SwipeItem>
        </Swipe>
      );
    },
  });

  await later();
  const items = wrapper.findAll('.van-swipe-item');

  const expectRender = (results) => {
    results.forEach((result, index) => {
      expect(items[index].find('span').exists()).toEqual(result);
    });
  };

  expectRender([true, true, false, false, true]);

  await wrapper.setData({ active: 1 });
  expectRender([true, true, true, false, true]);

  await wrapper.setData({ active: 2 });
  expectRender([true, true, true, true, true]);
});

test('should render swipe item correctly when using lazy-render prop and loop is false', async () => {
  const wrapper = mount({
    data() {
      return {
        active: 0,
      };
    },
    render() {
      return (
        <Swipe initialSwipe={this.active} loop={false} lazyRender>
          <SwipeItem>
            <span>1</span>
          </SwipeItem>
          <SwipeItem>
            <span>2</span>
          </SwipeItem>
          <SwipeItem>
            <span>3</span>
          </SwipeItem>
          <SwipeItem>
            <span>4</span>
          </SwipeItem>
        </Swipe>
      );
    },
  });

  await later();
  const items = wrapper.findAll('.van-swipe-item');

  const expectRender = (results) => {
    results.forEach((result, index) => {
      expect(items[index].find('span').exists()).toEqual(result);
    });
  };

  expectRender([true, true, false, false]);

  await wrapper.setData({ active: 1 });
  expectRender([true, true, true, false]);

  await wrapper.setData({ active: 2 });
  expectRender([true, true, true, true]);
});