Merge branch 'master' into rename-to-main

Author: nickserv

.eslintrc

@@ -4,7 +4,13 @@
     "./node_modules/kcd-scripts/eslint.js",
     "plugin:import/typescript"
   ],
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "project": "*/**/tsconfig.json"
+  },
   "plugins": ["@typescript-eslint"],
+  "ignorePatterns": "wdio.conf.js",
   "rules": {
     "babel/new-cap": "off",
     "func-names": "off",

package.json

@@ -45,7 +45,7 @@
     "@wdio/spec-reporter": "^7.3.1",
     "@wdio/sync": "^7.3.1",
     "eslint": "^7.6.0",
-    "kcd-scripts": "^5.0.0",
+    "kcd-scripts": "^11.1.0",
     "npm-run-all": "^4.1.5",
     "semantic-release": "^17.0.2",
     "ts-node": "^9.1.1",

src/index.ts

@@ -1,16 +1,24 @@
-/* eslint-disable babel/no-invalid-this, no-eval */
+/* eslint-disable no-eval, @babel/new-cap */
 
 import path from 'path'
 import fs from 'fs'
-import {queries as baseQueries} from '@testing-library/dom'
+import {
+  Matcher,
+  MatcherOptions,
+  queries as baseQueries,
+  waitForOptions as WaitForOptions,
+} from '@testing-library/dom'
 import 'simmerjs'
 
+import {BrowserBase, ElementBase} from './wdio-types'
 import {
-  BrowserBase,
+  QueryArg,
   Config,
-  ElementBase,
   QueryName,
   WebdriverIOQueries,
+  ObjectQueryArg,
+  SerializedObject,
+  SerializedArg,
 } from './types'
 
 declare global {
@@ -45,9 +53,9 @@ async function injectDOMTestingLibrary(container: ElementBase) {
   })
 
   if (shouldInject.domTestingLibrary) {
-    await container.execute(function (library) {
+    await container.execute(function (library: string) {
       // add DOM Testing Library to page as a script tag to support Firefox
-      if (navigator.userAgent.indexOf('Firefox') !== -1) {
+      if (navigator.userAgent.includes('Firefox')) {
         const script = document.createElement('script')
         script.innerHTML = library
         return document.head.append(script)
@@ -62,74 +70,83 @@ async function injectDOMTestingLibrary(container: ElementBase) {
     await container.execute(SIMMERJS)
   }
 
-  if (_config) {
-    await container.execute(function (config: Config) {
-      window.TestingLibraryDom.configure(config)
-    }, _config)
-  }
+  await container.execute(function (config: Config) {
+    window.TestingLibraryDom.configure(config)
+  }, _config)
 }
 
-function serializeObject(object: Object): Object {
+function serializeObject(object: ObjectQueryArg): SerializedObject {
   return Object.entries(object)
-    .map(([key, value]) => [key, serializeArg(value)])
-    .reduce((acc, [key, value]) => ({...acc, [key]: value}), {})
+    .map<[string, SerializedArg]>(([key, value]: [string, QueryArg]) => [
+      key,
+      serializeArg(value),
+    ])
+    .reduce((acc, [key, value]) => ({...acc, [key]: value}), {
+      serialized: 'object',
+    })
 }
 
-function serializeArg(arg: any) {
+function serializeArg(arg: QueryArg): SerializedArg {
   if (arg instanceof RegExp) {
-    return {RegExp: arg.toString()}
+    return {serialized: 'RegExp', RegExp: arg.toString()}
   }
   if (typeof arg === 'undefined') {
-    return {Undefined: true}
+    return {serialized: 'Undefined', Undefined: true}
   }
   if (arg && typeof arg === 'object') {
     return serializeObject(arg)
   }
   return arg
 }
 
+type SerializedQueryResult =
+  | {selector: string | false; element: HTMLElement}[]
+  | string
+  | {selector: string | false; element: HTMLElement}
+  | null
+
 function executeQuery(
   query: QueryName,
   container: HTMLElement,
-  ...args: any[]
+  ...args: SerializedArg[]
 ) {
-  const done = args.pop() as (result: any) => void
+  const done = args.pop() as unknown as (result: SerializedQueryResult) => void
 
-  function deserializeObject(object: object): object {
+  function deserializeObject(object: SerializedObject) {
     return Object.entries(object)
-      .map(([key, value]) => [key, deserializeArg(value)])
+      .map<[string, QueryArg]>(([key, value]) => [key, deserializeArg(value)])
       .reduce((acc, [key, value]) => ({...acc, [key]: value}), {})
   }
 
-  function deserializeArg(arg: any) {
-    if (arg && arg.RegExp) {
+  function deserializeArg(arg: SerializedArg): QueryArg {
+    if (typeof arg === 'object' && arg.serialized === 'RegExp') {
       return eval(arg.RegExp)
     }
-    if (arg && arg.Undefined) {
+    if (typeof arg === 'object' && arg.serialized === 'Undefined') {
       return undefined
     }
-    if (arg && typeof arg === 'object') {
+    if (typeof arg === 'object') {
       return deserializeObject(arg)
     }
     return arg
   }
 
   const [matcher, options, waitForOptions] = args.map(deserializeArg)
 
-  ;(async () => {
-    let result: undefined | null | HTMLElement | HTMLElement[]
+  void (async () => {
+    let result: ReturnType<typeof window.TestingLibraryDom[typeof query]> = null
     try {
       // Override RegExp to fix 'matcher instanceof RegExp' check on Firefox
       window.RegExp = RegExp
 
       result = await window.TestingLibraryDom[query](
         container,
-        matcher,
-        options,
-        waitForOptions,
+        matcher as Matcher,
+        options as MatcherOptions,
+        waitForOptions as WaitForOptions,
       )
-    } catch (e) {
-      done(e.message)
+    } catch (e: unknown) {
+      return done((e as Error).message)
     }
 
     if (!result) {
@@ -160,10 +177,10 @@ Element. There are valid WebElement JSONs that exclude the key but can be turned
 into Elements, such as { ELEMENT: elementId }; this can happen in setups that
 aren't generated by @wdio/cli.
 */
-function createElement(
+async function createElement(
   container: ElementBase,
-  result: {selector: string | false; element: any},
-) {
+  result: {selector: string | false; element: object},
+): Promise<WebdriverIO.Element> {
   // use selector if possible so that element can be refetched
   if (result.selector) {
     return container.$(result.selector)
@@ -176,11 +193,12 @@ function createElement(
   })
 }
 
-function createQuery(container: ElementBase, queryName: string) {
-  return async (...args: any[]) => {
+function createQuery(container: ElementBase, queryName: QueryName) {
+  return async (...args: QueryArg[]) => {
     await injectDOMTestingLibrary(container)
 
-    const result = await container.executeAsync(
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const result: SerializedQueryResult = await container.executeAsync(
       executeQuery,
       queryName,
       container,
@@ -204,7 +222,7 @@ function createQuery(container: ElementBase, queryName: string) {
 }
 
 function within(element: ElementBase) {
-  return Object.keys(baseQueries).reduce(
+  return (Object.keys(baseQueries) as QueryName[]).reduce(
     (queries, queryName) => ({
       ...queries,
       [queryName]: createQuery(element, queryName),
@@ -213,22 +231,29 @@ function within(element: ElementBase) {
   ) as WebdriverIOQueries
 }
 
-function setupBrowser(browser: BrowserBase) {
-  const queries: {[key: string]: any} = {}
+/*
+eslint-disable
+@typescript-eslint/no-explicit-any,
+@typescript-eslint/no-unsafe-argument
+*/
+function setupBrowser(browser: BrowserBase): WebdriverIOQueries {
+  const queries: {[key: string]: WebdriverIOQueries[QueryName]} = {}
 
   Object.keys(baseQueries).forEach((key) => {
-    const queryName = key as keyof typeof baseQueries
+    const queryName = key as QueryName
 
-    const query = async (...args: any[]) => {
+    const query = async (
+      ...args: Parameters<WebdriverIOQueries[QueryName]>
+    ) => {
       const body = await browser.$('body')
-      return within(body)[queryName](...args)
+      return within(body)[queryName](...(args as any[]))
     }
 
     // add query to response queries
-    queries[queryName] = query
+    queries[queryName] = query as WebdriverIOQueries[QueryName]
 
     // add query to BrowserObject
-    browser.addCommand(queryName, query)
+    browser.addCommand(queryName, query as WebdriverIOQueries[QueryName])
 
     // add query to Elements
     browser.addCommand(
@@ -242,6 +267,11 @@ function setupBrowser(browser: BrowserBase) {
 
   return queries as WebdriverIOQueries
 }
+/*
+eslint-enable
+@typescript-eslint/no-explicit-any,
+@typescript-eslint/no-unsafe-argument
+*/
 
 function configure(config: Partial<Config>) {
   _config = config

src/types.ts

@@ -2,50 +2,17 @@ import {
   Config as BaseConfig,
   BoundFunction as BoundFunctionBase,
   queries,
+  waitForOptions,
+  SelectorMatcherOptions,
+  MatcherOptions,
 } from '@testing-library/dom'
 
-declare global {
-  namespace WebdriverIO {
-    interface Element extends ElementBase {}
-  }
-}
-
-export type ElementBase = {
-  $(
-    selector: string | object,
-  ): WebdriverIO.Element | Promise<WebdriverIO.Element>
-
-  execute<T>(
-    script: string | ((...args: any[]) => T),
-    ...args: any[]
-  ): Promise<T>
-
-  execute<T>(script: string | ((...args: any[]) => T), ...args: any[]): T
-
-  executeAsync(script: string | ((...args: any[]) => void), ...args: any[]): any
-}
-
-export type BrowserBase = {
-  $(
-    selector: string | object,
-  ): WebdriverIO.Element | Promise<WebdriverIO.Element>
-
-  addCommand<T extends boolean>(
-    queryName: string,
-    commandFn: (
-      this: T extends true ? ElementBase : BrowserBase,
-      ...args: any[]
-    ) => void,
-    isElementCommand?: T,
-  ): any
-}
-
 export type Config = Pick<
   BaseConfig,
-  | 'testIdAttribute'
   | 'asyncUtilTimeout'
   | 'computedStyleSupportsPseudoElements'
   | 'defaultHidden'
+  | 'testIdAttribute'
   | 'throwSuggestions'
 >
 
@@ -83,3 +50,30 @@ export type WebdriverIOQueriesSync = WebdriverIOBoundFunctionsSync<
 >
 
 export type QueryName = keyof typeof queries
+
+export type ObjectQueryArg =
+  | MatcherOptions
+  | queries.ByRoleOptions
+  | SelectorMatcherOptions
+  | waitForOptions
+
+export type QueryArg =
+  | ObjectQueryArg
+  | RegExp
+  | number
+  | string
+  | undefined
+
+export type SerializedObject = {
+  serialized: 'object'
+  [key: string]: SerializedArg
+}
+export type SerializedRegExp = {serialized: 'RegExp'; RegExp: string}
+export type SerializedUndefined = {serialized: 'Undefined'; Undefined: true}
+
+export type SerializedArg =
+  | SerializedObject
+  | SerializedRegExp
+  | SerializedUndefined
+  | number
+  | string

src/wdio-types.ts

@@ -0,0 +1,46 @@
+/*
+Types related to WebdriverIO are intentionally loose in order to support wdio
+version 6 and 7 at the same time. Disable eslint rules that prevent that.
+*/
+
+/*
+eslint-disable @typescript-eslint/no-explicit-any,
+@typescript-eslint/no-namespace,
+@typescript-eslint/no-empty-interface
+*/
+
+declare global {
+  namespace WebdriverIO {
+    interface Element extends ElementBase {}
+  }
+}
+
+export type ElementBase = {
+  $(
+    selector: object | string,
+  ): Promise<WebdriverIO.Element> | WebdriverIO.Element
+
+  execute<T>(
+    script: string | ((...args: any[]) => T),
+    ...args: any[]
+  ): Promise<T>
+
+  execute<T>(script: string | ((...args: any[]) => T), ...args: any[]): T
+
+  executeAsync(script: string | ((...args: any[]) => void), ...args: any[]): any
+}
+
+export type BrowserBase = {
+  $(
+    selector: object | string,
+  ): Promise<WebdriverIO.Element> | WebdriverIO.Element
+
+  addCommand<T extends boolean>(
+    queryName: string,
+    commandFn: (
+      this: T extends true ? ElementBase : BrowserBase,
+      ...args: any[]
+    ) => void,
+    isElementCommand?: T,
+  ): any
+}