TypeScript _helpers.testEnv函數代碼示例

test('pointerEvents down move up tap', (t) => {
  const {
    scope,
    interaction,
    event,
  } = helpers.testEnv({ plugins: [pointerEvents, interactableTargets ] })

  const interactable = scope.interactables.new(event.target)
  const fired: Event[] = []

  for (const type of pointerEvents.types) {
    interactable.on(type, (e) => fired.push(e))
  }

  interaction.pointerDown(event, event, event.target)
  interaction.pointerMove(event, event, event.target)

  t.deepEqual(
    fired.map((e) => e.type),
    ['down'],
    'duplicate move event is not fired')

  interaction.pointerUp(event, event, scope.document.body, event.target)

  t.deepEqual(
    fired.map((e) => e.type),
    ['down', 'up', 'tap'],
    'tap event is fired after down and up event')

  t.end()
})

test('modifiers/snap/edges', (t) => {
  const rect = { top: 0, left: 0, bottom: 100, right: 100 }
  const {
    interaction,
    interactable,
  } = helpers.testEnv({ rect })
  interaction.interactable = interactable
  interaction._interacting = true

  const target0 = Object.freeze({
    left: 50,
    right: 150,
    top: 0,
    bottom: 100,
  })
  const options = {
    targets: [
      { ...target0 },
    ],
    range: Infinity,
  }
  const pageCoords = Object.freeze({ x: 0, y: 0 })
  const arg = {
    interaction,
    interactable: interaction.interactable,
    state: null,
    pageCoords,
    coords: { ...pageCoords },
    offset: [{ x: 0, y: 0 }],
  }

  // resize from top left
  interaction.prepared.edges = { top: true, left: true }

  arg.state = { options }
  snapEdges.start(arg)
  snapEdges.set(arg)

  t.deepEqual(
    arg.coords,
    { x: target0.left, y: target0.top },
    'modified coords are correct')

  // resize from bottom right
  interaction.prepared.edges = { bottom: true, right: true }

  arg.state = { options }
  snapEdges.start(arg)
  snapEdges.set(arg)

  t.deepEqual(
    arg.coords,
    { x: target0.right, y: target0.bottom },
    'modified coord are correct')

  t.end()
})

test('holdRepeat count', (t) => {
  const pointerEvent = {
    type: 'hold',
    count: 0,
  }

  const { scope } = helpers.testEnv({ plugins: [pointerEvents, holdRepeat] })

  scope.pointerEvents.signals.fire('new', { pointerEvent })
  t.equal(pointerEvent.count, 1, 'first hold count is 1 with count previously undefined')

  const count = 20
  pointerEvent.count = count
  scope.pointerEvents.signals.fire('new', { pointerEvent })
  t.equal(pointerEvent.count, count + 1, 'existing hold count is incremented')

  t.end()
})

test('reflow', (t) => {
  const rect = Object.freeze({ top: 100, left: 200, bottom: 300, right: 400 })

  const {
    scope,
    interactable,
  } = helpers.testEnv({ plugins: [reflow], rect })

  Object.assign(scope.actions, { TEST: {}, names: ['TEST'] })

  t.ok(
    scope.Interactable.prototype.reflow instanceof Function,
    'reflow method is added to Interactable.prototype'
  )

  const fired = []

  interactable.fire = ((iEvent) => { fired.push(iEvent) }) as any
  (interactable.target as any) = {}
  interactable.options.TEST = { enabled: true }
  interactable.rectChecker(() => ({ ...rect }))

  // modify move coords
  scope.interactions.signals.on('before-action-move', ({ interaction }) => {
    interaction.coords.cur.page = {
      x: rect.left + 100,
      y: rect.top - 50,
    }
  })

  interactable.reflow({ name: 'TEST' })

  const phases = ['reflow', 'start', 'move', 'end']

  for (const index in phases) {
    const phase = phases[index]
    t.equal(fired[index].type, `TEST${phase}`, `event #${index} is ${phase}`)
  }

  const interaction = fired[0]._interaction

  t.deepEqual(
    interaction.coords.start.page,
    {
      x: rect.left,
      y: rect.top,
    },
    'uses element top left for event coords'
  )

  const reflowMove = fired[2]

  t.deepEqual(
    reflowMove.delta,
    { x: 100, y: -50 },
    'move delta is correct with modified interaction coords'
  )

  t.notOk(
    interaction.pointerIsDown,
    'reflow pointer was lifted'
  )

  t.equal(
    interaction.pointers.length,
    0,
    'reflow pointer was removed from interaction'
  )

  t.notOk(
    scope.interactions.list.includes(interaction),
    'interaction is removed from list'
  )

  t.end()
})

test('modifiers/snap', (t) => {
  const {
    interaction,
    interactable,
  } = helpers.testEnv()
  const origin = { x: 120, y: 120 }

  interactable.options.TEST = { origin }
  interaction.interactable = interactable
  interaction.prepared = { name: 'TEST' }
  interaction._interacting = true

  let funcArgs = null
  const target0 = Object.freeze({ x:  50, y:  100 })
  // eslint-disable-next-line no-restricted-syntax, no-shadow
  const targetFunc = (x, y, _interaction, offset, index, ...unexpected) => {
    funcArgs = { x, y, offset, index, unexpected }
    return target0
  }
  const relativePoint = { x: 0, y: 0 }
  const options = {
    offset: null,
    offsetWithOrigin: true,
    targets: [
      target0,
      targetFunc,
    ],
    range: Infinity,
    relativePoints: [relativePoint],
  }

  const state = {
    options,
    realX: 0,
    realY: 0,
  }
  const pageCoords = Object.freeze({ x: 200, y: 300 })
  const arg = {
    interaction,
    interactable,
    state,
    pageCoords,
    coords: { ...pageCoords },
    rect: { top: 0, left: 0, bottom: 100, right: 100, width: 100, height: 100 },
    startOffset: { top: 0, left: 0, bottom: 0, right: 0 },
  } as any

  snap.start(arg)
  snap.set(arg)

  t.deepEqual(
    arg.coords,
    { x: target0.x + origin.x, y: target0.y + origin.y },
    'snaps to target and adds origin which will be subtracted by InteractEvent'
  )

  arg.coords = { ...pageCoords }
  state.options.targets = [targetFunc]
  snap.start(arg)
  snap.set(arg)

  t.deepEqual(
    funcArgs,
    {
      x: pageCoords.x - origin.x,
      y: pageCoords.y - origin.y,
      offset: {
        x: origin.x,
        y: origin.y,
        relativePoint,
        index: 0,
      },
      index: 0,
      unexpected: [],
    },
    'x, y, interaction, offset, index are passed to target function; origin subtracted from x, y'
  )

  arg.coords = { ...pageCoords }
  options.offset = { x: 300, y: 300 }
  options.offsetWithOrigin = false
  snap.start(arg)
  snap.set(arg)

  t.deepEqual(
    arg.coords,
    { x: target0.x + 300, y: target0.y + 300 },
    'origin not added to target when !options.offsetWithOrigin'
  )

  t.deepEqual(
    { x: funcArgs.x, y: funcArgs.y },
    { x: pageCoords.x - origin.x - 300, y: pageCoords.y - origin.y - 300 },
    'origin still subtracted from function target x, y args when !options.offsetWithOrigin'
  )

  t.end()
})

test('inertia', (t) => {
  const {
    scope,
    interaction,
    target,
    interactable,
    coords,
    event,
  } = helpers.testEnv({ plugins: [inertia, drag] })
  const element = target as HTMLElement
  const modifierChange = 5
  const testModifier = {
    options: { endOnly: true },
    methods: { set ({ coords: modifierCoords }) {
      modifierCoords.x += modifierChange
      modifierCoords.y += modifierChange
      modifierCallCount++
    } },
  }

  let modifierCallCount = 0

  coords.client = coords.page
  scope.now = () => coords.timeStamp
  interactable.draggable({ inertia: true })

  // test inertia without modifiers or throw
  downStartMoveUp({ x: 100, y: 0, dt: 1000 })
  t.notOk(interaction.inertia.active, '{ modifiers: [] } && !thrown: inertia is not activated')

  // test inertia without modifiers and with throw
  downStartMoveUp({ x: 100, y: 0, dt: 10 })
  t.ok(interaction.inertia.active, 'thrown: inertia is activated')

  interactable.draggable({ modifiers: [testModifier as any] })

  // test inertia with { endOnly: true } modifier and with throw
  downStartMoveUp({ x: 100, y: 0, dt: 10 })
  t.equal(modifierCallCount, 1, '{ endOnly: true } && thrown: modifier is not called from pointerUp')
  t.deepEqual(
    helpers.getProps(interaction.inertia, ['modifiedXe', 'modifiedYe']),
    {
      modifiedXe: interaction.inertia.xe + modifierChange,
      modifiedYe: interaction.inertia.ye + modifierChange,
    },
    '{ endOnly: true } && thrown: inertia target coords are correct')

  // test smoothEnd with { endOnly: false } modifier
  testModifier.options.endOnly = false
  downStartMoveUp({ x: 1, y: 0, dt: 1000 })
  t.notOk(interaction.inertia.active, '{ endOnly: false } && !thrown: inertia smoothEnd is not activated')
  t.equal(modifierCallCount, 2, '{ endOnly: false } && !thrown: modifier is called from pointerUp')

  // test smoothEnd with { endOnly: true } modifier
  testModifier.options.endOnly = true
  downStartMoveUp({ x: 1, y: 0, dt: 1000 })
  t.ok(interaction.inertia.active, '{ endOnly: true } && !thrown: inertia smoothEnd is activated')
  t.equal(modifierCallCount, 1, '{ endOnly: true } && !thrown: modifier is not called from pointerUp')

  interaction.stop()
  t.end()

  function downStartMoveUp ({ x, y, dt }) {
    modifierCallCount = 0
    coords.timeStamp = 0
    interaction.stop()

    Object.assign(coords.page, { x: 0, y: 0 })
    interaction.pointerDown(event, event, element)

    interaction.start({ name: 'drag' }, interactable, element)

    Object.assign(coords.page, { x, y })
    coords.timeStamp = dt
    interaction.pointerMove(event, event, element)
    interaction.pointerUp(event, event, element, element)
  }
})