cbvirtua 1.0.106 → 1.0.107

package/better-scroll-dev/better-scroll-dev/packages/core/src/scroller/__tests__/Scroller.spec.ts

@@ -0,0 +1,439 @@
+import { Behavior } from '../Behavior'
+import createAnimater from '../../animater'
+import Translater from '../../translater'
+import { OptionsConstructor } from '../../Options'
+import ActionsHandler from '../../base/ActionsHandler'
+import Actions from '../Actions'
+
+jest.mock('../Behavior')
+jest.mock('../../animater')
+jest.mock('../../translater')
+jest.mock('../../Options')
+jest.mock('../../base/ActionsHandler')
+jest.mock('../Actions')
+
+import Scroller from '../Scroller'
+import { createDiv } from '../../__tests__/__utils__/layout'
+
+describe('Scroller Class tests', () => {
+  let scroller: Scroller
+  let wrapper: HTMLElement
+  let content: HTMLElement
+
+  beforeEach(() => {
+    // redefine window.performance
+    // because we will use window.performance.timing.navigationStart
+    // in our file('src/util/lang.ts')
+    Object.defineProperty(window, 'performance', {
+      get() {
+        return undefined
+      },
+    })
+    wrapper = createDiv(100, 200, 0, 0)
+    content = createDiv(100, 400, 0, 0)
+    document.body.appendChild(content)
+    wrapper.appendChild(content)
+    let bscrollOptions = new OptionsConstructor() as any
+
+    scroller = new Scroller(wrapper, content, bscrollOptions)
+  })
+
+  it('should init hooks when call constructor function', () => {
+    ;[
+      'beforeStart',
+      'beforeMove',
+      'beforeScrollStart',
+      'scrollStart',
+      'scroll',
+      'beforeEnd',
+      'scrollEnd',
+      'resize',
+      'beforeRefresh',
+      'touchEnd',
+      'flick',
+      'scrollCancel',
+      'momentum',
+      'scrollTo',
+      'scrollToElement',
+      'minDistanceScroll',
+    ].forEach((key) => {
+      expect(scroller.hooks.eventTypes).toHaveProperty(key)
+    })
+  })
+
+  describe('bindTranslater', () => {
+    it('should bind beforeTranslate hook', () => {
+      let transform: string[] = []
+      scroller.translater.hooks.trigger('beforeTranslate', transform)
+
+      expect(transform).toContain(' translateZ(0)')
+    })
+
+    it('should bind translate hook', () => {
+      scroller.actions.getCurrentPos = jest.fn().mockImplementation(() => {
+        return {
+          x: 0,
+          y: 0,
+        }
+      })
+      scroller.translater.hooks.trigger('translate', { x: 0, y: -20 })
+
+      expect(scroller.scrollBehaviorX.updatePosition).toBeCalled()
+      expect(scroller.scrollBehaviorY.updatePosition).toBeCalled()
+
+      expect(scroller.scrollBehaviorX.updatePosition).toHaveBeenCalledWith(0)
+      expect(scroller.scrollBehaviorY.updatePosition).toHaveBeenCalledWith(-20)
+    })
+  })
+
+  describe('bindAnimater', () => {
+    it('should bind end hook ', () => {
+      let pos = {
+        x: 0,
+        y: 20,
+      }
+      let scrollEndMockHandler = jest.fn()
+      scroller.hooks.on('scrollEnd', scrollEndMockHandler)
+      scroller.scrollBehaviorX.checkInBoundary = jest
+        .fn()
+        .mockImplementation(() => {
+          return {
+            position: 0,
+            inBoundary: true,
+          }
+        })
+      scroller.scrollBehaviorY.checkInBoundary = jest
+        .fn()
+        .mockImplementation(() => {
+          return {
+            position: 0,
+            inBoundary: true,
+          }
+        })
+      scroller.animater.hooks.trigger('end', pos)
+
+      expect(scroller.animater.setPending).toHaveBeenCalledWith(false)
+      expect(scrollEndMockHandler).toHaveBeenCalledWith({
+        x: 0,
+        y: 20,
+      })
+    })
+
+    it('should bubble hooks', () => {
+      let scrollEndMockHandler = jest.fn()
+      let scrollMockHandler = jest.fn()
+      scroller.hooks.on('scrollEnd', scrollEndMockHandler)
+      scroller.hooks.on('scroll', scrollMockHandler)
+      scroller.animater.hooks.trigger('forceStop')
+      scroller.animater.hooks.trigger('move')
+
+      expect(scrollEndMockHandler).toBeCalled()
+      expect(scrollMockHandler).toBeCalled()
+    })
+  })
+
+  describe('bindActions', () => {
+    it('bind end hook', () => {
+      let touchEndMockHandler = jest.fn()
+      let e = new Event('touch') as any
+      Object.defineProperty(e, 'target', {
+        get() {
+          return scroller.wrapper
+        },
+      })
+      // cancelable scroller end hook
+      scroller.hooks.on(scroller.hooks.eventTypes.touchEnd, touchEndMockHandler)
+      scroller.hooks.trigger(scroller.hooks.eventTypes.touchEnd, { x: 0, y: 0 })
+      scroller.hooks.on(
+        scroller.hooks.eventTypes.end,
+        jest.fn().mockImplementationOnce(() => true)
+      )
+      const ret = scroller.actions.hooks.trigger(
+        scroller.actions.hooks.eventTypes.end,
+        e,
+        { x: 0, y: 0 }
+      )
+
+      expect(ret).toBe(true)
+      expect(touchEndMockHandler).toBeCalled()
+      expect(touchEndMockHandler).toHaveBeenCalledWith({
+        x: 0,
+        y: 0,
+      })
+
+      /* click operation */
+      // case 1
+
+      scroller.hooks.on(
+        scroller.hooks.eventTypes.checkClick,
+        jest.fn().mockImplementationOnce(() => true)
+      )
+      scroller.actions.hooks.trigger(scroller.actions.hooks.eventTypes.end, e, {
+        x: 0,
+        y: 0,
+      })
+
+      expect(scroller.animater.setForceStopped).toBeCalledWith(false)
+
+      // case 2 dblclick
+      const mockFn2 = jest.fn()
+      scroller.options.dblclick = true
+      scroller.lastClickTime = Date.now()
+      scroller.wrapper.addEventListener('dblclick', mockFn2)
+      scroller.actions.hooks.trigger(scroller.actions.hooks.eventTypes.end, e, {
+        x: 0,
+        y: 0,
+      })
+      expect(mockFn2).toBeCalled()
+
+      // case 3 tap
+      const mockFn3 = jest.fn()
+      scroller.options.tap = 'tap'
+      scroller.wrapper.addEventListener('tap', mockFn3)
+      scroller.actions.hooks.trigger(scroller.actions.hooks.eventTypes.end, e, {
+        x: 0,
+        y: 0,
+      })
+      expect(mockFn3).toBeCalled()
+
+      // case 4 click
+      const mockFn4 = jest.fn()
+      scroller.options.click = true
+      scroller.wrapper.addEventListener('click', mockFn4)
+      scroller.actions.hooks.trigger(scroller.actions.hooks.eventTypes.end, e, {
+        x: 0,
+        y: 0,
+      })
+      expect(mockFn4).toBeCalled()
+
+      // case 5 force stopped
+      scroller.animater.forceStopped = true
+      const ret2 = scroller.actions.hooks.trigger(
+        scroller.actions.hooks.eventTypes.end,
+        e,
+        { x: 0, y: 0 }
+      )
+      expect(ret2).toBe(true)
+    })
+
+    it('bind scrollEnd hook', () => {
+      let momentumMockHandler = jest.fn()
+      let noop = (() => {}) as any
+      scroller.hooks.on('momentum', momentumMockHandler)
+      scroller.scrollBehaviorX.end = jest.fn().mockImplementation(() => {
+        return {
+          duration: 400,
+          destination: 0,
+        }
+      })
+      scroller.scrollBehaviorY.end = jest.fn().mockImplementation(() => {
+        return {
+          duration: 400,
+          destination: -20,
+        }
+      })
+      // flick
+      const mockFn = jest.fn()
+      scroller.hooks.events['flick'] = [noop, noop]
+      scroller.hooks.on(scroller.hooks.eventTypes.flick, mockFn)
+      scroller.actions.hooks.trigger(
+        scroller.actions.hooks.eventTypes.scrollEnd,
+        { x: 0, y: -20 },
+        50
+      )
+      expect(mockFn).toBeCalled()
+
+      // momentum
+      scroller.hooks.events['flick'] = []
+      scroller.actions.hooks.trigger(
+        scroller.actions.hooks.eventTypes.scrollEnd,
+        { x: 0, y: -40 },
+        50
+      )
+      expect(scroller.animater.setForceStopped).toBeCalledWith(false)
+
+      // force stop from transition
+      scroller.actions.contentMoved = false
+      scroller.animater.forceStopped = true
+      scroller.actions.hooks.trigger(
+        scroller.actions.hooks.eventTypes.scrollEnd,
+        { x: 0, y: -20 },
+        50
+      )
+      expect(scroller.animater.setForceStopped).toBeCalledWith(false)
+
+      const mockFn2 = jest.fn()
+      scroller.actions.contentMoved = true
+      scroller.hooks.on(scroller.hooks.eventTypes.scrollEnd, mockFn2)
+      scroller.actions.hooks.trigger(
+        scroller.actions.hooks.eventTypes.scrollEnd,
+        { x: 0, y: -20 },
+        50
+      )
+      expect(mockFn2).toBeCalledWith({
+        x: 0,
+        y: -20,
+      })
+    })
+  })
+
+  it('should invoke resize method when window is resized', () => {
+    jest.useFakeTimers()
+    const mockFn = jest.fn()
+    scroller.hooks.on(scroller.hooks.eventTypes.resize, mockFn)
+    const resizeEvent = document.createEvent('Event')
+    resizeEvent.initEvent('resize', true, true)
+    window.dispatchEvent(resizeEvent)
+    jest.advanceTimersByTime(60)
+    jest.clearAllTimers()
+    expect(mockFn).toBeCalledTimes(1)
+
+    // disable scroller
+    scroller.actions.enabled = false
+    resizeEvent.initEvent('resize', true, true)
+    window.dispatchEvent(resizeEvent)
+    expect(mockFn).toBeCalledTimes(1)
+  })
+
+  it('should trigger scrollTo hook when invoking scrollTo method', () => {
+    let scrollToMockHandler = jest.fn()
+    scroller.hooks.on('scrollTo', scrollToMockHandler)
+    scroller.actions.getCurrentPos = jest.fn().mockImplementation(() => {
+      return {
+        x: 0,
+        y: 0,
+      }
+    })
+    scroller.scrollTo(0, -20, 800)
+
+    expect(scrollToMockHandler).toBeCalledWith({
+      x: 0,
+      y: -20,
+    })
+    expect(scroller.animater.move).toBeCalledWith(
+      {
+        x: 0,
+        y: 0,
+      },
+      {
+        x: 0,
+        y: -20,
+      },
+      800,
+      'cubic-bezier(0.165, 0.84, 0.44, 1)'
+    )
+  })
+
+  it('scrollToElement()', () => {
+    let scrollToElementMockHandler = jest.fn()
+    scroller.hooks.on(
+      scroller.hooks.eventTypes.scrollToElement,
+      scrollToElementMockHandler
+    )
+
+    scroller.refresh(scroller.content)
+    scroller.scrollBehaviorX.adjustPosition = jest.fn(() => {
+      return 0
+    })
+    scroller.scrollBehaviorY.adjustPosition = jest.fn(() => {
+      return 0
+    })
+    scroller.actions.getCurrentPos = jest.fn().mockImplementation(() => {
+      return {
+        x: 0,
+        y: 0,
+      }
+    })
+
+    scroller.scrollToElement(content, 0, false, false)
+    expect(scrollToElementMockHandler).toBeCalled()
+    // to a specified position
+    scroller.scrollToElement(content, 0, 0, 0)
+    expect(scrollToElementMockHandler).toHaveBeenLastCalledWith(content, {
+      left: 0,
+      top: 0,
+    })
+
+    const mockFn2 = jest.fn()
+    scroller.hooks.on(scroller.hooks.eventTypes.scrollToElement, () => true)
+    scroller.hooks.on(scroller.hooks.eventTypes.scrollToElement, mockFn2)
+    scroller.scrollToElement(content, 0, 0, 0)
+
+    expect(mockFn2).not.toBeCalled()
+  })
+
+  it('scrollBy ', () => {
+    const mockFn = jest.fn()
+    scroller.hooks.on(scroller.hooks.eventTypes.scrollTo, mockFn)
+    scroller.scrollBy(20, 20)
+    expect(mockFn).toBeCalledWith({
+      x: 20,
+      y: 20,
+    })
+  })
+
+  it('enable() & disable()', () => {
+    scroller.disable()
+    expect(scroller.actions.enabled).toBe(false)
+
+    scroller.enable()
+    expect(scroller.actions.enabled).toBe(true)
+  })
+
+  it('should update postions when invoking updatePositions method', () => {
+    scroller.updatePositions({
+      x: 20,
+      y: -20,
+    })
+
+    expect(scroller.scrollBehaviorX.updatePosition).toHaveBeenCalledWith(20)
+    expect(scroller.scrollBehaviorY.updatePosition).toHaveBeenCalledWith(-20)
+  })
+
+  it('refresh()', () => {
+    scroller.options.bindToTarget = true
+    scroller.refresh(document.createElement('p'))
+
+    expect(scroller.scrollBehaviorX.refresh).toBeCalled()
+    expect(scroller.scrollBehaviorY.refresh).toBeCalled()
+    expect(scroller.actions.refresh).toBeCalled()
+    expect(scroller.actionsHandler.setContent).toBeCalled()
+  })
+
+  it('destroy()', () => {
+    scroller.destroy()
+    const keys = [
+      'actionsHandler',
+      'actions',
+      'animater',
+      'translater',
+      'scrollBehaviorX',
+      'scrollBehaviorY',
+    ]
+    keys.forEach((key) => {
+      expect(scroller[key].destroy).toBeCalled()
+    })
+  })
+
+  it('resetPosition() ', () => {
+    const mockFn = jest.fn()
+    scroller.hooks.on(scroller.hooks.eventTypes.scrollTo, mockFn)
+    scroller.resetPosition()
+    expect(mockFn).toBeCalledWith({
+      x: 0,
+      y: 0,
+    })
+  })
+  it('scrollTo()', () => {
+    // minDistanceScroll
+    const mockFn = jest.fn()
+    scroller.hooks.on(scroller.hooks.eventTypes.minDistanceScroll, mockFn)
+
+    scroller.scrollTo(0, 0.5, 300)
+  })
+  it('should not toggle pointer-events when casting last position into integer in touchend handlers', () => {
+    scroller.actions.ensuringInteger = true
+    scroller.translater.hooks.trigger('translate', { x: 0, y: -20 })
+    expect(scroller.actions.ensuringInteger).toBe(false)
+  })
+})

package/better-scroll-dev/better-scroll-dev/packages/core/src/scroller/__tests__/createOptions.spec.ts

@@ -0,0 +1,52 @@
+import {
+  createActionsHandlerOptions,
+  createBehaviorOptions,
+} from '../createOptions'
+import { OptionsConstructor } from '../../Options'
+
+jest.mock('../../Options')
+
+describe('createOptions helper function tests', () => {
+  let bsOptions: any
+  beforeEach(() => {
+    bsOptions = new OptionsConstructor()
+  })
+  it('should return correct object when invoking createActionsHandlerOptions function', () => {
+    let ret = createActionsHandlerOptions(bsOptions)
+
+    expect(ret).toEqual({
+      click: false,
+      bindToWrapper: false,
+      disableMouse: true,
+      preventDefault: true,
+      stopPropagation: false,
+      preventDefaultException: {
+        tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|AUDIO)$/,
+      },
+    })
+  })
+
+  it('should return correct object when invoking createBehaviorOptions function', () => {
+    let ret = createBehaviorOptions(bsOptions, 'scrollY', [true, true], {
+      size: 'width',
+      position: 'top',
+    })
+
+    expect(ret).toEqual({
+      momentum: true,
+      momentumLimitTime: 300,
+      momentumLimitDistance: 15,
+      deceleration: 0.0015,
+      swipeBounceTime: 500,
+      swipeTime: 2500,
+      scrollable: true,
+      outOfBoundaryDampingFactor: 1 / 3,
+      specifiedIndexAsContent: 0,
+      bounces: [true, true],
+      rect: {
+        size: 'width',
+        position: 'top',
+      },
+    })
+  })
+})

package/better-scroll-dev/better-scroll-dev/packages/core/src/scroller/createOptions.ts

@@ -0,0 +1,47 @@
+import { Options as BScrollOptions } from '../Options'
+import { Options as ActionsHandlerOptions } from '../base/ActionsHandler'
+import { Options as BehaviorOptions, Bounces, Rect } from './Behavior'
+
+export function createActionsHandlerOptions(bsOptions: BScrollOptions) {
+  const options = [
+    'click',
+    'bindToWrapper',
+    'disableMouse',
+    'disableTouch',
+    'preventDefault',
+    'stopPropagation',
+    'tagException',
+    'preventDefaultException',
+    'autoEndDistance',
+  ].reduce<ActionsHandlerOptions>((prev, cur) => {
+    prev[cur] = bsOptions[cur]
+    return prev
+  }, {} as ActionsHandlerOptions)
+  return options
+}
+
+export function createBehaviorOptions(
+  bsOptions: BScrollOptions,
+  extraProp: 'scrollX' | 'scrollY',
+  bounces: Bounces,
+  rect: Rect
+) {
+  const options = [
+    'momentum',
+    'momentumLimitTime',
+    'momentumLimitDistance',
+    'deceleration',
+    'swipeBounceTime',
+    'swipeTime',
+    'outOfBoundaryDampingFactor',
+    'specifiedIndexAsContent',
+  ].reduce<BehaviorOptions>((prev, cur) => {
+    prev[cur] = bsOptions[cur]
+    return prev
+  }, {} as BehaviorOptions)
+  // add extra property
+  options.scrollable = !!bsOptions[extraProp]
+  options.bounces = bounces
+  options.rect = rect
+  return options
+}

package/better-scroll-dev/better-scroll-dev/packages/core/src/translater/__mocks__/index.ts

@@ -0,0 +1,18 @@
+import { EventEmitter } from '@better-scroll/shared-utils'
+
+const Translater = jest.fn().mockImplementation((content) => {
+  return {
+    style: content.style,
+    hooks: new EventEmitter(['beforeTranslate', 'translate']),
+    getComputedPosition: jest
+      .fn()
+      .mockImplementation((position = { x: 0, y: 0 }) => {
+        return position
+      }),
+    translate: jest.fn(),
+    destroy: jest.fn(),
+    setContent: jest.fn(),
+  }
+})
+
+export default Translater

package/better-scroll-dev/better-scroll-dev/packages/core/src/translater/__tests__/index.spec.ts

@@ -0,0 +1,57 @@
+import Translater from '../index'
+
+describe('Translater Class test suit', () => {
+  let translater: Translater
+  let contentEl = document.createElement('div')
+
+  beforeEach(() => {
+    translater = new Translater(contentEl)
+  })
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('work well when call translate()', () => {
+    const mockFn1 = jest.fn()
+    const mockFn2 = jest.fn()
+    translater.hooks.on(translater.hooks.eventTypes.beforeTranslate, mockFn1)
+    translater.hooks.on(translater.hooks.eventTypes.translate, mockFn2)
+
+    translater.translate({ x: 0, y: 0, dummy: 0 })
+
+    expect(mockFn1).toBeCalled()
+    expect(mockFn1).toBeCalledWith(['translateX(0px)', 'translateY(0px)'], {
+      x: 0,
+      y: 0,
+      dummy: 0,
+    })
+    expect(mockFn2).toBeCalled()
+    expect(mockFn2).toBeCalledWith({ x: 0, y: 0, dummy: 0 })
+    expect(translater.content.style.transform).toBe(
+      'translateX(0px) translateY(0px)'
+    )
+  })
+
+  it('get correct position when call getComputedPosition()', () => {
+    // jsDOM library's getComputedStyle is different from browser
+    window.getComputedStyle = jest.fn().mockImplementation(() => {
+      return {
+        transform: 'matrix(1, 0, 0, 1, 0, 0)',
+      }
+    })
+    const { x, y } = translater.getComputedPosition()
+
+    expect(x).toBe(0)
+    expect(y).toBe(0)
+  })
+
+  it('should clear hooks when destroyed', () => {
+    translater.hooks.on(translater.hooks.eventTypes.beforeTranslate, () => {})
+
+    expect(translater.hooks.eventTypes.beforeTranslate).toBe('beforeTranslate')
+
+    translater.destroy()
+
+    expect(translater.hooks.eventTypes.beforeTranslate).toBeFalsy()
+  })
+})

package/better-scroll-dev/better-scroll-dev/packages/core/src/translater/index.ts

@@ -0,0 +1,80 @@
+import {
+  style,
+  safeCSSStyleDeclaration,
+  EventEmitter,
+} from '@better-scroll/shared-utils'
+export interface TranslaterPoint {
+  x: number
+  y: number
+  [key: string]: number
+}
+
+interface TranslaterMetaData {
+  x: [string, string]
+  y: [string, string]
+  [key: string]: any
+}
+const translaterMetaData: TranslaterMetaData = {
+  x: ['translateX', 'px'],
+  y: ['translateY', 'px'],
+}
+
+export default class Translater {
+  content: HTMLElement
+  style: CSSStyleDeclaration
+  hooks: EventEmitter
+  constructor(content: HTMLElement) {
+    this.setContent(content)
+    this.hooks = new EventEmitter(['beforeTranslate', 'translate'])
+  }
+
+  getComputedPosition() {
+    let cssStyle = window.getComputedStyle(
+      this.content,
+      null
+    ) as safeCSSStyleDeclaration
+    let matrix = cssStyle[style.transform].split(')')[0].split(', ')
+    const x = +(matrix[12] || matrix[4]) || 0
+    const y = +(matrix[13] || matrix[5]) || 0
+
+    return {
+      x,
+      y,
+    }
+  }
+
+  translate(point: TranslaterPoint) {
+    let transformStyle = [] as string[]
+    Object.keys(point).forEach((key) => {
+      if (!translaterMetaData[key]) {
+        return
+      }
+      const transformFnName = translaterMetaData[key][0]
+      if (transformFnName) {
+        const transformFnArgUnit = translaterMetaData[key][1]
+        const transformFnArg = point[key]
+        transformStyle.push(
+          `${transformFnName}(${transformFnArg}${transformFnArgUnit})`
+        )
+      }
+    })
+    this.hooks.trigger(
+      this.hooks.eventTypes.beforeTranslate,
+      transformStyle,
+      point
+    )
+    this.style[style.transform as any] = transformStyle.join(' ')
+    this.hooks.trigger(this.hooks.eventTypes.translate, point)
+  }
+
+  setContent(content: HTMLElement) {
+    if (this.content !== content) {
+      this.content = content
+      this.style = content.style
+    }
+  }
+
+  destroy() {
+    this.hooks.destroy()
+  }
+}

package/better-scroll-dev/better-scroll-dev/packages/core/src/utils/__tests__/bubbling.spec.ts

@@ -0,0 +1,14 @@
+import { bubbling } from '../bubbling'
+import { EventEmitter } from '@better-scroll/shared-utils'
+
+describe('bubbling', () => {
+  it('bubbling', () => {
+    const parentHooks = new EventEmitter(['test'])
+    const childHooks = new EventEmitter(['test'])
+    bubbling(childHooks, parentHooks, ['test'])
+    const handler = jest.fn(() => {})
+    parentHooks.on('test', handler)
+    childHooks.trigger('test', 'dummy test')
+    expect(handler).toBeCalledWith('dummy test')
+  })
+})