Tests for multi-clicks.

multiclick.test.ts

import { DOUBLE_CLICK } from '~constants'
import { TLTestApp } from './TLTestApp'

jest.useFakeTimers()

describe('When detecting double/triple/quadruple clicks...', () => {
  it('Detects a click', () => {
    const app = new TLTestApp()
    app.onClick = jest.fn()
    app.onDoubleClick = jest.fn()
    app.onTripleClick = jest.fn()
    app.onQuadrupleClick = jest.fn()
    app.click([0, 0])
    expect(app.onClick).toHaveBeenCalledTimes(1)
    expect(app.onDoubleClick).toHaveBeenCalledTimes(0)
    expect(app.onTripleClick).toHaveBeenCalledTimes(0)
    expect(app.onQuadrupleClick).toHaveBeenCalledTimes(0)
  })

  it('Counts multiple clicks as multiple single-clicks', () => {
    const app = new TLTestApp()
    app.onClick = jest.fn()
    app.click([0, 0])
    app.click([0, 0])
    app.click([0, 0])
    app.click([0, 0])
    expect(app.onClick).toHaveBeenCalledTimes(4)
  })

  it('Counts multiple clicks as only one multi-clicks', () => {
    const app = new TLTestApp()
    app.onDoubleClick = jest.fn()
    app.click([0, 0])
    app.click([0, 0])
    app.click([0, 0])
    app.click([0, 0])
    expect(app.onDoubleClick).toHaveBeenCalledTimes(1)
  })

  it('Detects a double click', () => {
    const app = new TLTestApp()
    app.onClick = jest.fn()
    app.onDoubleClick = jest.fn()
    app.onTripleClick = jest.fn()
    app.onQuadrupleClick = jest.fn()
    app.click([0, 0])
    app.click([0, 0])
    expect(app.onClick).toHaveBeenCalledTimes(2)
    expect(app.onDoubleClick).toHaveBeenCalledTimes(1)
    expect(app.onTripleClick).toHaveBeenCalledTimes(0)
    expect(app.onQuadrupleClick).toHaveBeenCalledTimes(0)
  })

  it('Detects a triple click', () => {
    const app = new TLTestApp()
    app.onClick = jest.fn()
    app.onDoubleClick = jest.fn()
    app.onTripleClick = jest.fn()
    app.onQuadrupleClick = jest.fn()
    app.click([0, 0])
    app.click([0, 0])
    app.click([0, 0])
    expect(app.onClick).toHaveBeenCalledTimes(3)
    expect(app.onDoubleClick).toHaveBeenCalledTimes(1)
    expect(app.onTripleClick).toHaveBeenCalledTimes(1)
    expect(app.onQuadrupleClick).toHaveBeenCalledTimes(0)
  })

  it('Detects a quadruple click', () => {
    const app = new TLTestApp()
    app.onClick = jest.fn()
    app.onDoubleClick = jest.fn()
    app.onTripleClick = jest.fn()
    app.onQuadrupleClick = jest.fn()
    app.click([0, 0])
    app.click([0, 0])
    app.click([0, 0])
    app.click([0, 0])
    expect(app.onClick).toHaveBeenCalledTimes(4)
    expect(app.onDoubleClick).toHaveBeenCalledTimes(1)
    expect(app.onTripleClick).toHaveBeenCalledTimes(1)
    expect(app.onQuadrupleClick).toHaveBeenCalledTimes(1)
  })

  it('Ignores overflow clicks', () => {
    const app = new TLTestApp()
    app.onClick = jest.fn()
    app.onDoubleClick = jest.fn()
    app.onTripleClick = jest.fn()
    app.onQuadrupleClick = jest.fn()
    app.click([0, 0])
    app.click([0, 0])
    app.click([0, 0])
    app.click([0, 0])
    app.click([0, 0])
    expect(app.onClick).toHaveBeenCalledTimes(5)
    expect(app.onDoubleClick).toHaveBeenCalledTimes(1)
    expect(app.onTripleClick).toHaveBeenCalledTimes(1)
    expect(app.onQuadrupleClick).toHaveBeenCalledTimes(1)
  })

  it('Enters pending state on click and returns to idle after delay', () => {
    const app = new TLTestApp()
    expect(app._clickState).toBe('idle')
    app.click([0, 0])
    expect(app._clickState).toBe('pendingDouble')
    jest.advanceTimersByTime(DOUBLE_CLICK / 2)
    expect(app._clickState).toBe('pendingDouble')
    jest.advanceTimersByTime(DOUBLE_CLICK)
    expect(app._clickState).toBe('idle')
  })

  it('Detects double clicks when in pending state', () => {
    const app = new TLTestApp()
    app.onDoubleClick = jest.fn()
    app.click([0, 0])
    expect(app.onDoubleClick).not.toHaveBeenCalled()
    jest.advanceTimersByTime(DOUBLE_CLICK / 2)
    app.click([0, 0])
    expect(app.onDoubleClick).toHaveBeenCalled()
    jest.advanceTimersByTime(DOUBLE_CLICK)
    app.click([0, 0])
    expect(app.onDoubleClick).toHaveBeenCalledTimes(1)
  })

  it('Does not count a double click after switching back to idle state', () => {
    const app = new TLTestApp()
    app.onDoubleClick = jest.fn()
    app.click([0, 0])
    jest.advanceTimersByTime(DOUBLE_CLICK)
    app.click([0, 0])
    expect(app.onDoubleClick).not.toHaveBeenCalled()
  })

  it('Counts a double click after moving under a threshold', () => {
    const app = new TLTestApp()
    app.onDoubleClick = jest.fn()
    app.click([0, 0])
    app.pointerMove([0, 5])
    app.click([0, 5])
    expect(app.onDoubleClick).toHaveBeenCalled()
  })

  it('Does not count a double click after moving above a threshold', () => {
    const app = new TLTestApp()
    app.onDoubleClick = jest.fn()
    app.click([0, 0])
    app.pointerMove([0, 6])
    app.click([0, 6])
    expect(app.onDoubleClick).not.toHaveBeenCalled()
  })

  it('Does not detect multiple double clicks until delay is up', () => {
    const app = new TLTestApp()
    app.onDoubleClick = jest.fn()
    app.click([0, 0])
    app.click([0, 0])
    app.click([0, 0])
    app.click([0, 0])
    app.click([0, 0])
    expect(app.onDoubleClick).toHaveBeenCalledTimes(1)
  })

  it('Resets delay on each click', () => {
    const app = new TLTestApp()
    app.onDoubleClick = jest.fn()
    app.click([0, 0])
    app.click([0, 0])
    jest.advanceTimersByTime(DOUBLE_CLICK / 2)
    app.click([0, 0])
    jest.advanceTimersByTime(DOUBLE_CLICK / 2)
    app.click([0, 0])
    expect(app.onDoubleClick).toHaveBeenCalledTimes(1)
    jest.advanceTimersByTime(DOUBLE_CLICK)
    app.click([0, 0])
    app.click([0, 0])
    expect(app.onDoubleClick).toHaveBeenCalledTimes(2)
  })

  it('Detects a triple click', () => {
    const app = new TLTestApp()
    app.onDoubleClick = jest.fn()
    app.onTripleClick = jest.fn()
    app.click([0, 0])
    app.click([0, 0])
    jest.advanceTimersByTime(DOUBLE_CLICK / 2)
    app.click([0, 0])
    expect(app.onDoubleClick).toHaveBeenCalledTimes(1)
    expect(app.onTripleClick).toHaveBeenCalledTimes(1)
  })

  it('Detects two double clicks', () => {
    const app = new TLTestApp()
    app.onDoubleClick = jest.fn()
    app.onTripleClick = jest.fn()
    app.click([0, 0])
    app.click([0, 0])
    jest.advanceTimersByTime(DOUBLE_CLICK)
    app.click([0, 0])
    app.click([0, 0])
    expect(app.onDoubleClick).toHaveBeenCalledTimes(2)
    expect(app.onTripleClick).toHaveBeenCalledTimes(0)
  })

  it('Detects a quadruple click', () => {
    const app = new TLTestApp()
    app.onDoubleClick = jest.fn()
    app.onTripleClick = jest.fn()
    app.onQuadrupleClick = jest.fn()
    app.click([0, 0])
    app.click([0, 0])
    app.click([0, 0])
    app.click([0, 0])
    expect(app.onDoubleClick).toHaveBeenCalledTimes(1)
    expect(app.onTripleClick).toHaveBeenCalledTimes(1)
    expect(app.onQuadrupleClick).toHaveBeenCalledTimes(1)
  })

  it('Detects two triple clicks', () => {
    const app = new TLTestApp()
    app.onDoubleClick = jest.fn()
    app.onTripleClick = jest.fn()
    app.onQuadrupleClick = jest.fn()
    app.click([0, 0])
    app.click([0, 0])
    app.click([0, 0])
    jest.advanceTimersByTime(DOUBLE_CLICK)
    app.click([0, 0])
    app.click([0, 0])
    app.click([0, 0])
    expect(app.onDoubleClick).toHaveBeenCalledTimes(2)
    expect(app.onTripleClick).toHaveBeenCalledTimes(2)
    expect(app.onQuadrupleClick).toHaveBeenCalledTimes(0)
  })

  it('Detects two quadruple clicks', () => {
    const app = new TLTestApp()
    app.onDoubleClick = jest.fn()
    app.onTripleClick = jest.fn()
    app.onQuadrupleClick = jest.fn()
    app.click([0, 0])
    app.click([0, 0])
    app.click([0, 0])
    app.click([0, 0])
    jest.advanceTimersByTime(DOUBLE_CLICK)
    app.click([0, 0])
    app.click([0, 0])
    app.click([0, 0])
    app.click([0, 0])
    expect(app.onDoubleClick).toHaveBeenCalledTimes(2)
    expect(app.onTripleClick).toHaveBeenCalledTimes(2)
    expect(app.onQuadrupleClick).toHaveBeenCalledTimes(2)
  })

  it('Ignores overflow', () => {
    const app = new TLTestApp()
    app.onDoubleClick = jest.fn()
    app.onTripleClick = jest.fn()
    app.onQuadrupleClick = jest.fn()
    app.click([0, 0])
    jest.advanceTimersByTime(DOUBLE_CLICK / 2)
    expect(app._clickState).toBe('pendingDouble')
    app.click([0, 0])
    jest.advanceTimersByTime(DOUBLE_CLICK / 2)
    expect(app._clickState).toBe('pendingTriple')
    app.click([0, 0])
    jest.advanceTimersByTime(DOUBLE_CLICK / 2)
    expect(app._clickState).toBe('pendingQuadruple')
    app.click([0, 0])
    jest.advanceTimersByTime(DOUBLE_CLICK / 2)
    expect(app._clickState).toBe('overflow')
    app.click([0, 0])
    jest.advanceTimersByTime(DOUBLE_CLICK / 2)
    expect(app._clickState).toBe('overflow')
    app.click([0, 0])
    jest.advanceTimersByTime(DOUBLE_CLICK / 2)
    expect(app._clickState).toBe('overflow')
    app.click([0, 0])
    jest.advanceTimersByTime(DOUBLE_CLICK / 2)
    expect(app._clickState).toBe('overflow')
    app.click([0, 0])
    expect(app.onDoubleClick).toHaveBeenCalledTimes(1)
    expect(app.onTripleClick).toHaveBeenCalledTimes(1)
    expect(app.onQuadrupleClick).toHaveBeenCalledTimes(1)
  })
})