refactor: clean up paths (#756)

* refactor: move utils

* refactor: use bound APIs instead of imports

* refactor: merge files for `type`

* refactor: clean up file structure

* refactor: clean up file structure

* refactor: move tests and simplify imports

* refactor: fix absolute import once again

Author: ph-fritsche

.eslintrc.js

@@ -1,10 +1,9 @@
 module.exports = {
   extends: './node_modules/kcd-scripts/eslint.js',
+  parser: '@typescript-eslint/parser',
   settings: {
     'import/resolver': {
-      node: {
-        extensions: ['.js', '.ts'],
-      },
+      typescript: {},
     },
   },
   rules: {

jest.config.js

@@ -1,9 +1,21 @@
 const config = require('kcd-scripts/jest')
 
-module.exports = {
-  ...config,
-  testEnvironment: 'jest-environment-jsdom',
+config.roots = ['<rootDir>']
 
-  // this repo is testing utils
-  testPathIgnorePatterns: config.testPathIgnorePatterns.filter(f => f !== '/__tests__/utils/'),
+config.moduleNameMapper = {
+  '^#src$': '<rootDir>/src/index',
+  '^#src/(.*)$': '<rootDir>/src/$1',
+  '^#testHelpers/(.*)$': '<rootDir>/tests/_helpers/$1',
 }
+
+config.testEnvironment = 'jsdom'
+
+config.setupFilesAfterEnv = ['<rootDir>/tests/_setup-env.js']
+
+config.testMatch.push('<rootDir>/tests/**/*.+(js|jsx|ts|tsx)')
+
+// Ignore files/dirs starting with an underscore (setup, helper, ...)
+// unless the file ends on `.test.{type}` so that we can add tests of our test utilities.
+config.testPathIgnorePatterns.push('/_.*(?<!\\.test\\.[jt]sx?)$')
+
+module.exports = config

package.json

@@ -46,6 +46,7 @@
     "@types/estree": "0.0.45",
     "@types/jest-in-case": "^1.0.3",
     "@types/react": "^17.0.3",
+    "eslint-import-resolver-typescript": "^2.5.0",
     "is-ci": "^2.0.0",
     "jest-in-case": "^1.0.2",
     "jest-serializer-ansi": "^1.0.3",

src/__tests__/react/keyboard.tsx

@@ -1,5 +1,4 @@
 import {isDisabled, isElementType} from './utils'
-import {type} from './type'
 import type {UserEvent} from './setup'
 
 export function clear(this: UserEvent, element: Element) {
@@ -24,7 +23,7 @@ export function clear(this: UserEvent, element: Element) {
     ;(element as HTMLInputElement).type = 'text'
   }
 
-  void type.call(this, element, '{selectall}{del}', {
+  this.type(element, '{selectall}{del}', {
     delay: 0,
     initialSelectionStart:
       element.selectionStart ?? /* istanbul ignore next */ undefined,

src/clear.ts

@@ -1,5 +1,4 @@
 import {hasPointerEvents, PointerOptions} from './utils'
-import {hover} from './hover'
 import type {UserEvent} from './setup'
 
 export declare interface clickOptions {
@@ -24,7 +23,7 @@ export function click(
   // istanbul ignore else
   if (!skipHover)
     // We just checked for `pointerEvents`. We can always skip this one in `hover`.
-    hover.call(this, element, init, {skipPointerEventsCheck: true})
+    this.hover(element, init, {skipPointerEventsCheck: true})
 
   const keys =
     init?.button === 2 || init?.buttons === 2 ? '[MouseRight]' : '[MouseLeft]'
@@ -42,7 +41,7 @@ export function dblClick(
       'unable to double-click element as it has or inherits pointer-events set to "none".',
     )
   }
-  hover.call(this, element, init, {skipPointerEventsCheck})
+  this.hover(element, init, {skipPointerEventsCheck})
 
   this.pointer({keys: '[MouseLeft][MouseLeft]', target: element})
 }

src/click.ts

@@ -1,4 +1,4 @@
-import {createPointerState} from 'pointer'
+import {createPointerState} from './pointer'
 import type {UserEvent} from './setup'
 import {hasPointerEvents, PointerOptions} from './utils'
 

src/hover.ts

@@ -1,11 +1,11 @@
 /* eslint-disable complexity */
 
 import {fireEvent} from '@testing-library/dom'
-import {focus} from '../focus'
 import {
   Coords,
   findClosest,
   firePointerEvent,
+  focus,
   isDisabled,
   isFocusable,
 } from '../utils'

src/pointer/pointerPress.ts

@@ -1,13 +1,11 @@
 import {createEvent, getConfig, fireEvent} from '@testing-library/dom'
 import {
+  focus,
   hasPointerEvents,
   isDisabled,
   isElementType,
   PointerOptions,
 } from './utils'
-import {click} from './click'
-import {focus} from './focus'
-import {hover, unhover} from './hover'
 import type {UserEvent} from './setup'
 
 export function selectOptions(
@@ -110,7 +108,7 @@ function selectOptionsBase(
         : hasPointerEvents(select)
       // the click to open the select options
       if (withPointerEvents) {
-        click.call(this, select, init, {skipPointerEventsCheck: true})
+        this.click(select, init, {skipPointerEventsCheck: true})
       } else {
         focus(select)
       }
@@ -136,9 +134,9 @@ function selectOptionsBase(
     }
   } else if (select.getAttribute('role') === 'listbox') {
     selectedOptions.forEach(option => {
-      hover.call(this, option, init, {skipPointerEventsCheck})
-      click.call(this, option, init, {skipPointerEventsCheck})
-      unhover.call(this, option, init, {skipPointerEventsCheck})
+      this.hover(option, init, {skipPointerEventsCheck})
+      this.click(option, init, {skipPointerEventsCheck})
+      this.unhover(option, init, {skipPointerEventsCheck})
     })
   } else {
     throw getConfig().getElementError(

src/select-options.ts src/selectOptions.ts

@@ -7,10 +7,9 @@ import type {keyboardState} from './keyboard/types'
 import {paste} from './paste'
 import {createPointerState, pointer} from './pointer'
 import type {pointerOptions, pointerState} from './pointer/types'
-import {deselectOptions, selectOptions} from './select-options'
+import {deselectOptions, selectOptions} from './selectOptions'
 import {tab, tabOptions} from './tab'
-import {type} from './type'
-import {typeOptions} from './type/typeImplementation'
+import {type, typeOptions} from './type'
 import {upload, uploadOptions} from './upload'
 import {PointerOptions} from './utils'
 

src/setup.ts

@@ -1,13 +1,13 @@
 import {fireEvent} from '@testing-library/dom'
 import {
+  blur,
+  focus,
   getActiveElement,
   FOCUSABLE_SELECTOR,
   isVisible,
   isDisabled,
   isDocument,
 } from './utils'
-import {focus} from './focus'
-import {blur} from './blur'
 import type {UserEvent} from './setup'
 
 function getNextElement(

src/tab.ts

@@ -1,12 +1,13 @@
+import {getConfig as getDOMTestingLibraryConfig} from '@testing-library/dom'
+import {prepareDocument} from './document'
+import type {UserEvent} from './setup'
 import {
   setSelectionRange,
   getSelectionRange,
   getValue,
   getActiveElement,
-} from '../utils'
-import {click} from '../click'
-import {keyboardImplementationWrapper} from '../keyboard'
-import {UserEvent} from '../setup'
+} from './utils'
+import {keyboardImplementationWrapper} from './keyboard'
 
 export interface typeOptions {
   delay?: number
@@ -16,10 +17,47 @@ export interface typeOptions {
   initialSelectionEnd?: number
 }
 
-export async function typeImplementation(
+export function type(
   this: UserEvent,
   element: Element,
   text: string,
+  options?: typeOptions & {delay?: 0},
+): void
+export function type(
+  this: UserEvent,
+  element: Element,
+  text: string,
+  options: typeOptions & {delay: number},
+): Promise<void>
+// this needs to be wrapped in the event/asyncWrapper for React's act and angular's change detection
+// depending on whether it will be async.
+export function type(
+  this: UserEvent,
+  element: Element,
+  text: string,
+  {delay = 0, ...options}: typeOptions = {},
+): Promise<void> | void {
+  prepareDocument(element.ownerDocument)
+
+  // we do not want to wrap in the asyncWrapper if we're not
+  // going to actually be doing anything async, so we only wrap
+  // if the delay is greater than 0
+
+  if (delay > 0) {
+    return getDOMTestingLibraryConfig().asyncWrapper(() =>
+      typeImplementation(this, element, text, {delay, ...options}),
+    )
+  } else {
+    return void typeImplementation(this, element, text, {delay, ...options})
+      // prevents users from dealing with UnhandledPromiseRejectionWarning
+      .catch(console.error)
+  }
+}
+
+async function typeImplementation(
+  userEvent: UserEvent,
+  element: Element,
+  text: string,
   {
     delay,
     skipClick = false,
@@ -32,7 +70,7 @@ export async function typeImplementation(
   // we use this workaround for now to prevent changing behavior
   if ((element as {disabled?: boolean}).disabled) return
 
-  if (!skipClick) click.call(this, element)
+  if (!skipClick) userEvent.click(element)
 
   // The focused element could change between each event, so get the currently active element each time
   const currentElement = () => getActiveElement(element.ownerDocument)

src/type/typeImplementation.ts src/type.ts

@@ -1,8 +1,5 @@
 import {fireEvent, createEvent} from '@testing-library/dom'
-import {click} from './click'
-import {blur} from './blur'
-import {focus} from './focus'
-import {isDisabled, isElementType} from './utils'
+import {blur, focus, isDisabled, isElementType} from './utils'
 import type {UserEvent} from './setup'
 
 interface uploadInit {
@@ -32,7 +29,7 @@ export function upload(
   }
   if (isDisabled(element)) return
 
-  click.call(this, element, init?.clickInit)
+  this.click(element, init?.clickInit)
 
   const files = (Array.isArray(fileOrFiles) ? fileOrFiles : [fileOrFiles])
     .filter(file => !applyAccept || isAcceptableFile(file, input.accept))

src/type/index.ts

@@ -1,4 +1,6 @@
-import {getActiveElement, isFocusable, eventWrapper} from './utils'
+import {eventWrapper} from '../misc/eventWrapper'
+import {getActiveElement} from './getActiveElement'
+import {isFocusable} from './isFocusable'
 
 function blur(element: Element) {
   if (!isFocusable(element)) return

src/upload.ts

@@ -1,4 +1,6 @@
-import {getActiveElement, isFocusable, eventWrapper} from './utils'
+import {eventWrapper} from '../misc/eventWrapper'
+import {getActiveElement} from './getActiveElement'
+import {isFocusable} from './isFocusable'
 
 function focus(element: Element) {
   if (!isFocusable(element)) return

src/blur.ts src/utils/focus/blur.ts

@@ -12,6 +12,8 @@ export * from './edit/isValidInputTimeValue'
 export * from './edit/maxLength'
 export * from './edit/selectionRange'
 
+export * from './focus/blur'
+export * from './focus/focus'
 export * from './focus/getActiveElement'
 export * from './focus/isFocusable'
 export * from './focus/selector'

src/focus.ts src/utils/focus/focus.ts

@@ -1,6 +1,6 @@
 /* eslint-disable testing-library/no-node-access */
 import {eventMap} from '@testing-library/dom/dist/event-map'
-import {isElementType} from '../../utils'
+import {isElementType} from '#src/utils'
 // this is pretty helpful:
 // https://codesandbox.io/s/quizzical-worker-eo909
 

src/utils/index.ts

@@ -1,5 +1,5 @@
-import userEvent from '../'
-import {setup} from './helpers/utils'
+import userEvent from '#src'
+import {setup} from '#testHelpers/utils'
 
 test('clears text', () => {
   const {element, getEventSnapshot} = setup('<input value="hello" />')

src/dom-helpers.d.ts src/utils/misc/dom-helpers.d.ts

@@ -1,5 +1,5 @@
-import userEvent from '../'
-import {setup, addEventListener, addListeners} from './helpers/utils'
+import userEvent from '#src'
+import {setup, addEventListener, addListeners} from '#testHelpers/utils'
 
 test('click in button', () => {
   const {element, getEventSnapshot} = setup('<button />')

src/__mocks__/@testing-library/dom.js tests/__mocks__/@testing-library/dom.js

@@ -1,5 +1,5 @@
-import userEvent from '../'
-import {setup, addEventListener, addListeners} from './helpers/utils'
+import userEvent from '#src'
+import {setup, addEventListener, addListeners} from '#testHelpers/utils'
 
 test('fires the correct events on buttons', () => {
   const {element, getEventSnapshot} = setup('<button />')