splide/src/js/components/Drag/test/general.test.ts

import { EVENT_DRAG, EVENT_DRAGGING } from '../../../constants/events';
import { fire, init } from '../../../test';


describe('Drag', () => {
  test('can move the slider by drag.', () => {
    const splide = init();
    const track = splide.Components.Elements.track;

    fireWithCoord(track, 'mousedown', { x: 0, timeStamp: 1 });
    fireWithCoord(window, 'mousemove', { x: 1, timeStamp: 1 });
    fireWithCoord(window, 'mousemove', { x: -100, timeStamp: 2 });

    expect(splide.Components.Move.getPosition()).toBe(-100);

    fireWithCoord(window, 'mousemove', { x: -200, timeStamp: 3 });

    expect(splide.Components.Move.getPosition()).toBe(-200);
  });

  test('should not move the slider after dragging.', () => {
    const splide = init();
    const track = splide.Components.Elements.track;

    fireWithCoord(track, 'mousedown', { x: 0 });
    fireWithCoord(window, 'mousemove', { x: 1 });
    fireWithCoord(window, 'mouseup');

    expect(splide.Components.Move.getPosition()).toBe(0);

    fireWithCoord(window, 'mousemove', { x: -200 });
    fireWithCoord(window, 'mousemove', { x: -400 });

    expect(splide.Components.Move.getPosition()).toBe(0);
  });

  test('can change the slide index if the drag velocity is enough.', () => {
    const splide = init({ speed: 0, width: 600 });
    const track = splide.Components.Elements.track;

    fireWithCoord(track, 'mousedown', { x: 0, timeStamp: 1 });
    fireWithCoord(window, 'mousemove', { x: 1, timeStamp: 1 });
    fireWithCoord(window, 'mousemove', { x: -20, timeStamp: 21 }); // v = -1
    fireWithCoord(window, 'mouseup', { x: -20, timeStamp: 21 });

    // The destination will be flickPower * v + (-20) = -620
    expect(splide.index).toBe(1);
  });

  test('should not change the slide index if the drag velocity is not enough.', () => {
    const splide = init({ speed: 0, width: 600 });
    const track = splide.Components.Elements.track;

    fireWithCoord(track, 'mousedown', { x: 0, timeStamp: 1 });
    fireWithCoord(window, 'mousemove', { x: 1, timeStamp: 1 });
    fireWithCoord(window, 'mousemove', { x: -20, timeStamp: 100 });
    fireWithCoord(window, 'mouseup', { x: -20, timeStamp: 100 });

    expect(splide.index).toBe(0);
  });

  test('should start moving the slider immediately if the pointing device is a mouse.', () => {
    const splide = init();
    const onDrag = jest.fn();
    const track = splide.Components.Elements.track;

    splide.on(EVENT_DRAG, onDrag);

    fire(track, 'mousedown');
    fireWithCoord(window, 'mousemove');

    expect(onDrag).toHaveBeenCalledTimes(1);
  });

  test('should start moving the slider only when the drag distance becomes greater than the threshold.', () => {
    const splide = init({ dragMinThreshold: 20 });
    const onDragging = jest.fn();
    const track = splide.Components.Elements.track;

    splide.on(EVENT_DRAGGING, onDragging);

    fireWithCoord(track, 'touchstart', { x: 0 });
    fireWithCoord(track, 'touchmove', { x: -10 });

    expect(onDragging).not.toHaveBeenCalled();

    fireWithCoord(track, 'touchmove', { x: -30 }); // isDragging becomes true
    fireWithCoord(track, 'touchmove', { x: -31 });

    expect(onDragging).toHaveBeenCalled();
  });
});

function fireCancelable(elm: Element | Window, event: string, data: any = {}): void {
  fire(elm, event, data, { cancelable: true });
}

function fireWithCoord(elm: Element | Window, event: string, data: any = {}): void {
  const { x: pageX = 0, y: pageY = 0 } = data;

  fireCancelable(elm, event, Object.assign(data, {
    pageX,
    pageY,
    touches: [
      { pageX, pageY },
    ],
  }));
}