chore: test with vijest

# Conflicts:
#	packages/@interactjs/arrange/ArrangeEvent.ts
#	packages/@interactjs/arrange/arrange.spec.ts
#	packages/@interactjs/multi-target/multiTarget.spec.ts
#	packages/@interactjs/snappers/elements.spec.ts

Author: taye

jest.config.ts

@@ -1,9 +1,9 @@
 import type { Config } from '@jest/types'
-import { defaults } from 'jest-config' // eslint-disable-line import/no-extraneous-dependencies
 
-import { sourcesGlob } from './scripts/utils'
+// import { sourcesGlob } from './scripts/utils'
 
 const config: Config.InitialOptions = {
+  preset: 'vijest',
   coverageThreshold: {
     global: {
       statements: 59,
@@ -12,21 +12,10 @@ const config: Config.InitialOptions = {
       lines: 59,
     },
   },
-  collectCoverageFrom: [sourcesGlob],
-  coveragePathIgnorePatterns: [
-    '[\\\\/]_',
-    '\\.d\\.ts$',
-    '@interactjs[\\\\/](rebound|symbol-tree)[\\\\/]',
-  ],
-  coverageReporters: [
-    'json',
-    'text',
-    ['lcov', { projectRoot: 'packages/@interactjs' }],
-  ],
-  moduleFileExtensions: [...defaults.moduleFileExtensions, 'vue'],
-  transform: {
-    '^.+\\.(ts|js|vue)$': ['babel-jest', require('./babel.config')],
-  },
+  // collectCoverage: true,
+  // collectCoverageFrom: [sourcesGlob],
+  coveragePathIgnorePatterns: ['[\\\\/]_', '\\.d\\.ts$', '@interactjs[\\\\/](rebound|symbol-tree)[\\\\/]'],
+  coverageReporters: ['json', 'text', ['lcov', { projectRoot: 'packages/@interactjs' }]],
 }
 
 export default config

package.json

@@ -33,7 +33,6 @@
     "@babel/runtime": "^7.15.3",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.4",
-    "@types/puppeteer": "^5.4.4",
     "@types/react": "^17.0.19",
     "@types/shelljs": "^0.8.9",
     "@types/tape": "^4.13.2",
@@ -47,7 +46,6 @@
     "@vue/runtime-dom": "^3.2.6",
     "@vue/test-utils": "^1.2.2",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-jest": "^27.1.0",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babelify": "^10.0.0",
     "browser-pack-flat": "^3.4.2",
@@ -76,18 +74,15 @@
     "hash-sum": "^2.0.0",
     "husky": "5",
     "jest": "^27.1.0",
-    "jest-puppeteer": "^5.0.4",
     "jsdoc": "https://github.com/taye/jsdoc/tarball/6b210948",
     "jsdoc-babel": "^0.5.0",
     "jsdoc-stale": "https://github.com/taye/jsdoc-stale/tarball/749bf17",
-    "jsdom": "^17.0.0",
     "lint-staged": "^11.1.2",
     "mkdirp": "^1.0.4",
     "nodemon": "^2.0.12",
     "p-queue": "^7.1.0",
     "prettier": "^2.3.2",
     "promise-polyfill": "^8.2.0",
-    "puppeteer": "^10.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rebound": "^0.1.0",
@@ -101,9 +96,9 @@
     "ts-node": "^10.2.1",
     "tslint": "^6.1.3",
     "typescript": "^4.4.2",
+    "vijest": "^0.0.0",
     "vite": "^2.5.1",
     "vue": "^3.2.6",
-    "vue-jest": "4",
     "yargs": "^17.1.1"
   },
   "engines": {

packages/@interactjs/actions/drop/DropEvent.ts

@@ -7,12 +7,11 @@ import * as arr from '@interactjs/utils/arr'
 import type { DropState } from './plugin'
 
 export class DropEvent extends BaseEvent<'drag'> {
-  target: Element
+  declare target: Element
   dropzone: Interactable
   dragEvent: InteractEvent<'drag'>
   relatedTarget: Element
   draggable: Interactable
-  timeStamp: number
   propagationStopped = false
   immediatePropagationStopped = false
 

packages/@interactjs/auto-start/autoStart.spec.ts

@@ -4,45 +4,65 @@ import * as helpers from '@interactjs/core/tests/_helpers'
 import autoStart from './base'
 
 test('autoStart', () => {
-  const rect = { top: 100, left: 200, bottom: 300, right: 400 }
-  const { interaction, interactable, event, coords, target: element } = helpers.testEnv({
+  window.PointerEvent = null
+
+  document.body.innerHTML = `
+    <style>
+    #target { position: absolute; top: 100px; left: 200px; bottom: 300px; right: 400px }
+    </style>
+    <div id=target></div>
+  `
+
+  Object.assign(document.body.style)
+
+  const {
+    interaction,
+    interactable,
+    event,
+    coords,
+    target: element,
+    down,
+  } = helpers.testEnv({
     plugins: [autoStart, drag],
-    rect,
+    target: document.getElementById('target'),
   })
 
   interactable.draggable(true)
   interaction.pointerType = coords.pointerType = 'mouse'
   coords.buttons = 1
 
-  interaction.pointerDown(event, event, element)
+  down()
 
   // prepares action
   expect(interaction.prepared).toEqual({ name: 'drag', axis: 'xy', edges: undefined })
 
   // set interaction.rect
-  expect(interaction.rect).toEqual({ ...rect, width: rect.right - rect.left, height: rect.bottom - rect.top })
+  expect(interaction.rect).toEqual(
+    helpers.getProps(element.getBoundingClientRect(), ['top', 'left', 'bottom', 'right', 'width', 'height']),
+  )
 
   // sets drag cursor
   expect(element.style.cursor).toBe('move')
 
-  let checkerArgs: any[]
+  const cursorChecker = jest.fn(() => 'pointer')
 
   interactable.draggable({
-    cursorChecker (...args) {
-      checkerArgs = args
-
-      return 'custom-cursor'
-    },
+    cursorChecker,
   })
 
   interaction.pointerDown(event, event, element)
 
   // calls cursorChecker with expected args
-  expect(checkerArgs).toEqual([{ name: 'drag', axis: 'xy', edges: undefined }, interactable, element, false])
+  expect(cursorChecker).toHaveBeenCalledWith(
+    { name: 'drag', axis: 'xy', edges: undefined },
+    interactable,
+    element,
+    false,
+  )
 
   interaction.pointerDown(event, event, element)
   // uses cursorChecker value
-  expect(element.style.cursor).toBe('custom-cursor')
+  expect(element.style.cursor).toBe('pointer')
 
   coords.page.x += 10
   coords.client.x += 10
@@ -51,5 +71,10 @@ test('autoStart', () => {
   expect(interaction._interacting).toBe(true)
 
   // calls cursorChecker with true for interacting arg
-  expect(checkerArgs).toEqual([{ name: 'drag', axis: 'xy', edges: undefined }, interactable, element, true])
+  expect(cursorChecker).toHaveBeenCalledWith(
+    { name: 'drag', axis: 'xy', edges: undefined },
+    interactable,
+    element,
+    true,
+  )
 })

packages/@interactjs/core/BaseEvent.ts

@@ -3,12 +3,12 @@ import type { Interaction, InteractionProxy } from '@interactjs/core/Interaction
 import type { ActionName } from '@interactjs/core/scope'
 
 export class BaseEvent<T extends ActionName | null = never> {
-  type: string
-  target: EventTarget
-  currentTarget: Node
-  interactable: Interactable
-  _interaction: Interaction<T>
-  timeStamp: any
+  declare type: string
+  declare target: EventTarget
+  declare currentTarget: Node
+  declare interactable: Interactable
+  declare _interaction: Interaction<T>
+  declare timeStamp: number
   immediatePropagationStopped = false
   propagationStopped = false
 

packages/@interactjs/core/InteractEvent.ts

@@ -1,4 +1,3 @@
-import type { ActionName } from '@interactjs/core/scope'
 import type { Point, FullRect, PointerEventType, Element } from '@interactjs/types/index'
 import extend from '@interactjs/utils/extend'
 import getOriginXY from '@interactjs/utils/getOriginXY'
@@ -7,6 +6,7 @@ import hypot from '@interactjs/utils/hypot'
 import { BaseEvent } from './BaseEvent'
 import type { Interaction } from './Interaction'
 import { defaults } from './options'
+import type { ActionName } from './scope'
 
 export type EventPhase = keyof PhaseMap
 
@@ -34,10 +34,10 @@ export interface InteractEvent {
 
 export class InteractEvent<
   T extends ActionName = never,
-  P extends EventPhase = EventPhase
+  P extends EventPhase = EventPhase,
 > extends BaseEvent<T> {
-  target: Element
-  currentTarget: Element
+  declare target: Element
+  declare currentTarget: Element
   relatedTarget: Element | null = null
   screenX?: number
   screenY?: number
@@ -61,7 +61,6 @@ export class InteractEvent<
   velocity: Point
   speed: number
   swipe: ReturnType<InteractEvent<T>['getSwipe']>
-  timeStamp: any
   // resize
   axes?: 'x' | 'y' | 'xy'
   preEnd?: boolean

packages/@interactjs/core/Interaction.ts

@@ -1,4 +1,3 @@
-import type { ActionDefaults } from '@interactjs/core/options'
 import type {
   Element,
   EdgeOptions,
@@ -14,6 +13,8 @@ import { warnOnce, copyAction } from '@interactjs/utils/misc'
 import * as pointerUtils from '@interactjs/utils/pointerUtils'
 import * as rectUtils from '@interactjs/utils/rect'
 
+import type { ActionDefaults } from '@interactjs/core/options'
+
 import type { EventPhase } from './InteractEvent'
 import { InteractEvent } from './InteractEvent'
 import type { Interactable } from './Interactable'
@@ -110,18 +111,18 @@ let idCounter = 0
 
 export class Interaction<T extends ActionName | null = ActionName> {
   // current interactable being interacted with
-  interactable: Interactable = null
+  interactable: Interactable | null = null
 
   // the target element of the interactable
-  element: Element = null
-  rect: FullRect
+  element: Element | null = null
+  rect: FullRect | null = null
   _rects?: {
     start: FullRect
     corrected: FullRect
     previous: FullRect
     delta: FullRect
   }
-  edges: EdgeOptions
+  edges: EdgeOptions | null = null
 
   _scopeFire: Scope['fire']
 
@@ -138,7 +139,7 @@ export class Interaction<T extends ActionName | null = ActionName> {
   pointers: PointerInfo[] = []
 
   // pointerdown/mousedown/touchstart event
-  downEvent: PointerEventType = null
+  downEvent: PointerEventType | null = null
 
   downPointer: PointerType = {} as PointerType
 
@@ -160,7 +161,7 @@ export class Interaction<T extends ActionName | null = ActionName> {
   _interacting = false
   _ending = false
   _stopped = true
-  _proxy: InteractionProxy<T> = null
+  _proxy: InteractionProxy<T> | null = null
 
   simulation = null
 
@@ -227,7 +228,7 @@ export class Interaction<T extends ActionName | null = ActionName> {
       pointerIndex,
       pointerInfo,
       type: 'down',
-      interaction: (this as unknown) as Interaction<never>,
+      interaction: this as unknown as Interaction<never>,
     })
   }
 
@@ -324,7 +325,7 @@ export class Interaction<T extends ActionName | null = ActionName> {
       dx,
       dy,
       duplicate: duplicateMove,
-      interaction: (this as unknown) as Interaction<never>,
+      interaction: this as unknown as Interaction<never>,
     }
 
     if (!duplicateMove) {
@@ -403,7 +404,7 @@ export class Interaction<T extends ActionName | null = ActionName> {
       eventTarget,
       type: type as any,
       curEventTarget,
-      interaction: (this as unknown) as Interaction<never>,
+      interaction: this as unknown as Interaction<never>,
     })
 
     if (!this.simulation) {
@@ -418,7 +419,7 @@ export class Interaction<T extends ActionName | null = ActionName> {
     this._scopeFire('interactions:blur', {
       event,
       type: 'blur',
-      interaction: (this as unknown) as Interaction<never>,
+      interaction: this as unknown as Interaction<never>,
     })
   }
 
@@ -538,7 +539,7 @@ export class Interaction<T extends ActionName | null = ActionName> {
       down,
       pointerInfo,
       pointerIndex,
-      interaction: (this as unknown) as Interaction<never>,
+      interaction: this as unknown as Interaction<never>,
     })
 
     return pointerIndex
@@ -557,7 +558,7 @@ export class Interaction<T extends ActionName | null = ActionName> {
       eventTarget: null,
       pointerIndex,
       pointerInfo,
-      interaction: (this as unknown) as Interaction<never>,
+      interaction: this as unknown as Interaction<never>,
     })
 
     this.pointers.splice(pointerIndex, 1)

packages/@interactjs/core/interactablePreventDefault.spec.ts

@@ -5,6 +5,8 @@ import interactablePreventDefault from './interactablePreventDefault'
 import * as helpers from './tests/_helpers'
 
 test('core/interactablePreventDefault', () => {
+  window.PointerEvent = null
+
   const { scope, interactable } = helpers.testEnv({
     plugins: [interactablePreventDefault, autoStart, drag],
   })
@@ -13,12 +15,12 @@ test('core/interactablePreventDefault', () => {
 
   interactable.draggable({})
 
-  const mouseEvent: MouseEvent = new MouseEvent('mousedown', { bubbles: true })
+  const mouseDown: MouseEvent = new MouseEvent('mousedown', { bubbles: true })
   const nativeDragStart: Event = new Event('dragstart', { bubbles: true })
 
   nativeDragStart.preventDefault = jest.fn()
 
-  scope.document.body.dispatchEvent(mouseEvent)
+  scope.document.body.dispatchEvent(mouseDown)
   scope.document.body.dispatchEvent(nativeDragStart)
 
   // native dragstart is prevented on interactable