SWAMPy

✎ CARVE FLESH

EDITING: scrollUtils.spec.js

/*
 * Copyright (C) 2017 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that they will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */
import {registerScrollEvents} from '../scrollUtils'

function createMockWindow(opts) {
  const callbacks = {}
  return {
    addEventListener: jest.fn((event, callback) => (callbacks[event] = callback)),
    pageYOffset: 0,
    setTimeout: jest.fn(),
    document: {
      documentElement: {
        clientHeight: 42,
        getBoundingClientRect: () => ({bottom: 42})
      }
    },
    callbacks,
    ...opts
  }
}

function mockRegister() {
  const wind = createMockWindow()
  const pastCb = jest.fn()
  const futureCb = jest.fn()
  const scrollPositionChange = jest.fn()
  const callbacks = {}

registerScrollEvents({
    window: wind,
    scrollIntoPast: pastCb,
    scrollIntoFuture: futureCb,
    scrollPositionChange,
    callbacks
  })
  return {wind, pastCb, futureCb, scrollPositionChange}
}

it('registers proper events', () => {
  const {wind} = mockRegister()
  expect(wind.addEventListener).toHaveBeenCalledWith('wheel', expect.anything())
  expect(wind.addEventListener).toHaveBeenCalledWith('touchstart', expect.anything())
  expect(wind.addEventListener).toHaveBeenCalledWith('touchmove', expect.anything())
  expect(wind.addEventListener).toHaveBeenCalledWith('touchend', expect.anything())
})

describe('wheel events', () => {
  describe('scrolling into the past', () => {
    it('invokes the callback and preventDefault when a wheel event happens at the top of the page', () => {
      const {wind, pastCb} = mockRegister()
      const mockPreventDefault = jest.fn()
      const wheelHandler = wind.callbacks.wheel
      wheelHandler({deltaY: -42, preventDefault: mockPreventDefault})
      expect(mockPreventDefault).toHaveBeenCalled()
      expect(pastCb).toHaveBeenCalled()
    })

it('does not invoke the callback when the window is not scrolled to the top', () => {
      const {wind, pastCb} = mockRegister()
      wind.pageYOffset = 42
      const mockPreventDefault = jest.fn()
      const wheelHandler = wind.callbacks.wheel
      wheelHandler({deltaY: -42, preventDefault: mockPreventDefault})
      expect(mockPreventDefault).not.toHaveBeenCalled()
      expect(pastCb).not.toHaveBeenCalled()
    })
  })

describe('scrolling into the future', () => {
    it('invokes the callback and preventDefault when a wheel event happens at the bottom of the page', () => {
      const {wind, futureCb} = mockRegister()
      const mockPreventDefault = jest.fn()
      const wheelHandler = wind.callbacks.wheel
      wheelHandler({deltaY: 42, preventDefault: mockPreventDefault})
      expect(mockPreventDefault).toHaveBeenCalled()
      expect(futureCb).toHaveBeenCalled()
    })

it('invokes the callback and preventDefault when the document is shorter than the window', () => {
      const {wind, futureCb} = mockRegister()
      wind.document.documentElement.getBoundingClientRect = () => ({bottom: 15})
      const mockPreventDefault = jest.fn()
      const wheelHandler = wind.callbacks.wheel
      wheelHandler({deltaY: 42, preventDefault: mockPreventDefault})
      expect(mockPreventDefault).toHaveBeenCalled()
      expect(futureCb).toHaveBeenCalled()
    })

it('does not invoke the callback when the window is not scrolled to the bottom', () => {
      const {wind, futureCb} = mockRegister()
      wind.document.documentElement.getBoundingClientRect = () => ({bottom: 100})
      const mockPreventDefault = jest.fn()
      const wheelHandler = wind.callbacks.wheel
      wheelHandler({deltaY: 42, preventDefault: mockPreventDefault})
      expect(mockPreventDefault).not.toHaveBeenCalled()
      expect(futureCb).not.toHaveBeenCalled()
    })
  })
})

describe('touch events', () => {
  let mockWindow = null
  afterEach(() => {
    // need to reset global touch state after each test
    mockWindow.callbacks.touchend({})
  })

describe('scrolling into the past', () => {
    it('invokes the callback and preventDefault when touch events happen at the top of the page', () => {
      const {wind, pastCb} = mockRegister()
      mockWindow = wind
      const {touchstart, touchmove} = wind.callbacks
      touchstart({changedTouches: [{screenY: 10, identifier: 'touchid'}]})
      touchmove({changedTouches: {touchid: {screenY: 14}}})
      expect(pastCb).toHaveBeenCalled()
    })

it('does not invoke the callback when the window is not scrolled to the top', () => {
      const {wind, pastCb} = mockRegister()
      mockWindow = wind
      wind.pageYOffset = 42
      const {touchstart, touchmove} = wind.callbacks
      touchstart({changedTouches: [{screenY: 10, identifier: 'touchid'}]})
      touchmove({changedTouches: {touchid: {screenY: 14}}})
      expect(pastCb).not.toHaveBeenCalled()
    })

it('does not invoke the callback when the scroll is not large enough', () => {
      const {wind, pastCb} = mockRegister()
      mockWindow = wind
      wind.pageYOffset = 42
      const {touchstart, touchmove} = wind.callbacks
      touchstart({changedTouches: [{screenY: 10, identifier: 'touchid'}]})
      touchmove({changedTouches: {touchid: {screenY: 13}}})
      expect(pastCb).not.toHaveBeenCalled()
    })
  })

describe('scrolling into the future', () => {
    it('invokes the callback and preventDefault when touch events happen at the bottom of the page', () => {
      const {wind, futureCb} = mockRegister()
      mockWindow = wind
      const {touchstart, touchmove} = wind.callbacks
      touchstart({changedTouches: [{screenY: 10, identifier: 'touchid'}]})
      touchmove({changedTouches: {touchid: {screenY: 6}}})
      expect(futureCb).toHaveBeenCalled()
    })

it('does not invoke the callback when the window is not scrolled to the bottom', () => {
      const {wind, futureCb} = mockRegister()
      mockWindow = wind
      const {touchstart, touchmove} = wind.callbacks
      wind.document.documentElement.getBoundingClientRect = () => ({bottom: 84})
      touchstart({changedTouches: [{screenY: 10, identifier: 'touchid'}]})
      touchmove({changedTouches: {touchid: {screenY: 6}}})
      expect(futureCb).not.toHaveBeenCalled()
    })

it('does not invoke the callback when the scroll is not large enough', () => {
      const {wind, futureCb} = mockRegister()
      mockWindow = wind
      const {touchstart, touchmove} = wind.callbacks
      touchstart({changedTouches: [{screenY: 10, identifier: 'touchid'}]})
      touchmove({changedTouches: {touchid: {screenY: 7}}})
      expect(futureCb).not.toHaveBeenCalled()
    })
  })
})

describe('scroll events', () => {
  it('throttles the callback', () => {
    const mockWindow = createMockWindow()
    const mockScrollCb = jest.fn()
    registerScrollEvents({
      window: mockWindow,
      scrollIntoPast: jest.fn(),
      scrollIntoFuture: jest.fn(),
      scrollPositionChange: mockScrollCb
    })

mockWindow.pageYOffset = 42
    mockWindow.callbacks.scroll()
    mockWindow.pageYOffset = 84
    mockWindow.callbacks.scroll()

const setTimeoutMock = mockWindow.setTimeout
    expect(setTimeoutMock).toHaveBeenCalledTimes(1)
    mockWindow.setTimeout.mock.calls[0][0]()
    expect(mockScrollCb).toHaveBeenCalledTimes(1)
    expect(mockScrollCb).toHaveBeenCalledWith(84)
  })
})

CANCEL

Name	Type	Size	Modified	Actions
↩ ..	DIR	—	—
📁 __snapshots__/	DIR	—	2023-09-24 03:39
📄 alertUtils.spec.js	JS	1.6 KB	2023-09-24 03:39	EDIT
📄 apiUtils.spec.js	JS	22.8 KB	2023-09-24 03:39	EDIT
📄 configureAxios.spec.js	JS	1.1 KB	2023-09-24 03:39	EDIT
📄 contentUtils.spec.js	JS	1.4 KB	2023-09-24 03:39	EDIT
📄 dateUtils.spec.js	JS	8.1 KB	2023-09-24 03:39	EDIT
📄 daysUtils.spec.js	JS	14.6 KB	2023-09-24 03:39	EDIT
📄 redux-identifiable-thunk.spec.js	JS	3.7 KB	2023-09-24 03:39	EDIT
📄 scrollUtils.spec.js	JS	7.7 KB	2023-09-24 03:39	EDIT
📄 statusUtils.spec.js	JS	8.4 KB	2023-09-24 03:39	EDIT