build: fix eslint errors after kcd-scripts update

Most eslint warnings are related to the
@typescript-eslint/no-explicit-any rule being switched on. It is
possible to replace most uses of any with specific types, however there
are two main areas where that is not possible:

- The stub WebdriverIO types are intentionally loose to support multiple
versions of WebdriverIO as well as differences between sync and async
mode types.

- The setupBrowser function does not currently have any way to know
which query it is setting up in each iteration of the forEach, resulting
in issues when typing the resulting query. This can't be resolved
without a refactor of how the queries are set up. Likely each variant of
query will need their own version of createQuery, e.g.
createFindAllByQuery, createFindByQuery etc.

There are additional errors resulting from the parserOptions.project
property being set in the base eslint.js file. It looks like kcd-scripts
assumes that there is a single tsconfig, whereas we need multiple
tsconfigs to support the different WebdriverIO modes in our async and
sync tests. This is fixed by overriding the parserOptions.project
option to be a glob that matches all our tsconfigs.

Author: olivierwilkinson

.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",

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
+}

test/async/types.ts

@@ -1,3 +1,9 @@
+/*
+eslint-disable
+@typescript-eslint/no-namespace,
+@typescript-eslint/no-empty-interface
+*/
+
 import {WebdriverIOQueries} from '../../src'
 
 declare global {