TypeScript _helpers.mockScope函數代碼示例

test('autoStart', (t) => {
  const scope: Interact.Scope = helpers.mockScope()

  scope.usePlugin(autoStart)
  scope.usePlugin(drag)

  const interaction = scope.interactions.new({})
  const element = scope.document.body
  const interactable = scope.interactables.new(element).draggable(true)
  const event = utils.pointer.coordsToEvent(utils.pointer.newCoords())
  const rect = { top: 100, left: 200, bottom: 300, right: 400 }
  interactable.rectChecker(() => ({ ...rect }))

  interaction.pointerDown(event, event, element)

  t.deepEqual(
    interaction.prepared,
    { name: 'drag', axis: 'xy', edges: undefined },
    'prepares action'
  )

  t.deepEqual(
    interaction.rect,
    rect as any,
    'set interaction.rect'
  )

  t.end()
})

test('actions/drop options', (t) => {
  const scope = helpers.mockScope()
  scope.interact = {}
  scope.usePlugin(drop)

  const interactable = scope.interactables.new({ pointerType: 'test' })

  const funcs = Object.freeze({
    drop () {},
    activate () {},
    deactivate () {},
    dropmove () {},
    dragenter () {},
    dragleave () {},
  })

  interactable.dropzone({
    listeners: [funcs],
  })

  t.equal(interactable.events.types.drop[0], funcs.drop)
  t.equal(interactable.events.types.dropactivate[0], funcs.activate)
  t.equal(interactable.events.types.dropdeactivate[0], funcs.deactivate)
  t.equal(interactable.events.types.dropmove[0], funcs.dropmove)
  t.equal(interactable.events.types.dragenter[0], funcs.dragenter)
  t.equal(interactable.events.types.dragleave[0], funcs.dragleave)

  t.end()
})

test('pointerEvents Interaction remove-pointer signal', (t) => {
  const scope: Interact.Scope = helpers.mockScope()

  scope.usePlugin(pointerEvents)

  const interaction = scope.interactions.new({})

  const ids = [0, 1, 2, 3]
  const removals = [
    { id: 0, remain: [1, 2, 3], message: 'first of 4'  },
    { id: 2, remain: [1,    3], message: 'middle of 3' },
    { id: 3, remain: [1      ], message: 'last of 2'   },
    { id: 1, remain: [       ], message: 'final'       },
  ]

  for (const id of ids) {
    const index = interaction.updatePointer({ pointerId: id } as Interact.PointerType, {} as Interact.PointerEventType, null, true)
    // use the ids as the pointerInfo.hold value for this test
    interaction.pointers[index].hold = id as any
  }

  for (const removal of removals) {
    interaction.removePointer({ pointerId: removal.id } as any, null)

    t.deepEqual(interaction.pointers.map((p) => p.hold as unknown as number), removal.remain,
      `${removal.message} - remaining interaction.holdTimers is correct`)
  }

  t.end()
})

function mockScope () {
  return helpers.mockScope({
    pointerEvents: {
      defaults: {},
      signals: new Signals(),
      types: [],
      fire: () => {},
    },
  })
}

test('resize', (t) => {
  const scope = helpers.mockScope()

  scope.usePlugin(resize)

  t.ok(scope.actions.names.includes('resize'), '"resize" in actions.names')
  t.equal(scope.actions.methodDict.resize, 'resizable')
  t.equal(typeof scope.Interactable.prototype.resizable, 'function', 'Interactable.resizable method is added')

  const page = { x: 0, y: 0 }
  const event = pointerUtils.coordsToEvent({ page, client: page })
  const interactable = scope.interactables.new('test', {})
    .resizable({
      edges: { left: true, top: true, right: true, bottom: true },
      // use margin greater than width and height
      margin: Infinity,
    })
  const interaction = scope.interactions.new({})
  const rect = { left: 0, top: 0, right: 10, bottom: 10 }

  interaction.updatePointer(event, event, {}, true)

  t.deepEqual(
    scope.actions.resize.checker(event, event, interactable, {}, interaction, rect),
    {
      name: 'resize',
      edges: { left: true, top: true, right: false, bottom: false },
    },
  )

  page.x = 10
  interaction.updatePointer(event, event, {}, true)

  t.deepEqual(
    scope.actions.resize.checker(event, event, interactable, {}, interaction, rect),
    {
      name: 'resize',
      edges: { left: false, top: true, right: true, bottom: false },
    },
  )

  page.y = 10
  interaction.updatePointer(event, event, {}, true)

  t.deepEqual(
    scope.actions.resize.checker(event, event, interactable, {}, interaction, rect),
    {
      name: 'resize',
      edges: { left: false, top: false, right: true, bottom: true },
    },
  )

  t.end()
})

test('drag action init', (t) => {
  const scope = helpers.mockScope()

  scope.usePlugin(drag)

  t.ok(scope.actions.names.includes(ActionName.Drag), '"drag" in actions.names')
  t.equal(scope.actions.methodDict.drag, 'draggable')
  t.equal(typeof scope.Interactable.prototype.draggable, 'function')

  t.end()
})

test('gesture action init', (t) => {
  const scope: Interact.Scope = helpers.mockScope()

  scope.usePlugin(gesture)

  t.ok(scope.actions.names.includes(ActionName.Gesture), '"gesture" in actions.names')
  t.equal(scope.actions.methodDict.gesture, 'gesturable')
  t.equal(typeof scope.Interactable.prototype.gesturable, 'function')

  t.end()
})

test('async reflow', async (t) => {
  const scope = helpers.mockScope()

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

  let reflowEvent
  let promise

  const interactable = scope.interactables.new(scope.window)
  const rect = Object.freeze({ top: 100, left: 200, bottom: 300, right: 400 })
  interactable.rectChecker(() => ({ ...rect }))
  interactable.fire = ((iEvent) => { reflowEvent = iEvent }) as any
  interactable.options.TEST = { enabled: true }

  scope.usePlugin(reflow)

  // test with Promise implementation
  scope.window.Promise = PromisePolyfill

  promise = interactable.reflow({ name: 'TEST' })
  t.ok(promise instanceof scope.window.Promise, 'method returns a Promise if available')
  t.notOk(reflowEvent.interaction.interacting(), 'reflow may end synchronously')

  t.equal(await promise, interactable, 'returned Promise resolves to interactable')

  let stoppedFromTimeout
  // block the end of the reflow interaction and stop it after a timeout
  scope.interactions.signals.on('before-action-end', ({ interaction }) => {
    setTimeout(() => { interaction.stop(); stoppedFromTimeout = true }, 0)
    return false
  })

  stoppedFromTimeout = false
  promise = interactable.reflow({ name: 'TEST' })

  t.ok(reflowEvent.interaction.interacting() && !stoppedFromTimeout, 'interaction continues if end is blocked')
  await promise
  t.notOk(reflowEvent.interaction.interacting() && stoppedFromTimeout, 'interaction is stopped after promise is resolved')

  // test without Promise implementation
  stoppedFromTimeout = false
  scope.window.Promise = undefined

  promise = interactable.reflow({ name: 'TEST' })
  t.equal(promise, null, 'method returns null if no Proise is avilable')
  t.ok(reflowEvent.interaction.interacting() && !stoppedFromTimeout, 'interaction continues if end is blocked without Promise')

  setTimeout(() => {
    t.notOk(reflowEvent.interaction.interacting() || !stoppedFromTimeout, 'interaction is stopped after timeout without Promised')
  }, 0)

  t.end()
})

test('autoStart/hold', (t) => {
  const scope = helpers.mockScope({
    autoStart: {
      defaults: {
        perAction: {},
      },
      signals: new Signals(),
    },
  })
  const autoStartHold = hold
  scope.usePlugin(autoStart)
  scope.usePlugin(autoStartHold)

  t.equal(scope.defaults.perAction.hold, 0, 'sets scope.defaults.perAction.hold')
  t.equal(scope.defaults.perAction.delay, 0, 'backwards compatible "delay" alias.')

  const holdDuration = 1000
  const actionName = 'TEST_ACTION'
  const interaction: any = {
    interactable: { options: { [actionName]: { hold: holdDuration } } },
    prepared: { name: actionName },
  }

  t.equal(
    autoStartHold.getHoldDuration(interaction),
    holdDuration,
    'gets holdDuration')

  const delayDuration = 500

  interaction.interactable.options[actionName].delay = delayDuration
  delete interaction.interactable.options[actionName].hold

  t.equal(
    autoStartHold.getHoldDuration(interaction),
    delayDuration,
    'gets holdDuration from "delay" value')

  t.end()
})