Make type Element[] work with toBeElementsArrayOfSize (#1980)

* fix: tsc error with elements matcher and type `WebdriverIO.Element[]`

`WebdriverIO.Element[]` needs to also be a `ElementArrayLike`

* chore: add checks:all command to eases checks everything

* fix: have `toBeElementsArrayOfSize`work with type `WebdriverIO.Element[]`

Author: dprevost-LMI

src/matchers/elements/toBeElementsArrayOfSize.ts

@@ -1,7 +1,7 @@
 import { waitUntil, enhanceError, compareNumbers, numberError } from '../../utils.js'
 import { refetchElements } from '../../util/refetchElements.js'
 import { DEFAULT_OPTIONS } from '../../constants.js'
-import type { WdioElementsMaybePromise } from '../../types.js'
+import type { WdioElements, WdioElementsMaybePromise } from '../../types.js'
 
 export async function toBeElementsArrayOfSize(
     received: WdioElementsMaybePromise,
@@ -17,17 +17,16 @@ export async function toBeElementsArrayOfSize(
         options,
     })
 
-    // type check
     let numberOptions: ExpectWebdriverIO.NumberOptions
     if (typeof expectedValue === 'number') {
-        numberOptions = { eq: expectedValue } as ExpectWebdriverIO.NumberOptions
+        numberOptions = { eq: expectedValue } satisfies ExpectWebdriverIO.NumberOptions
     } else if (!expectedValue || (typeof expectedValue.eq !== 'number' && typeof expectedValue.gte !== 'number' && typeof expectedValue.lte !== 'number')) {
         throw new Error('Invalid params passed to toBeElementsArrayOfSize.')
     } else {
         numberOptions = expectedValue
     }
 
-    let elements = await received as WebdriverIO.ElementArray
+    let elements = await received as WdioElements
     const originalLength = elements.length
     const pass = await waitUntil(async () => {
         /**

src/types.ts

@@ -5,12 +5,14 @@ export type WdioElementMaybePromise =
     WebdriverIO.Element |
     ChainablePromiseElement
 
+export type WdioElements = WebdriverIO.ElementArray | WebdriverIO.Element[]
+
 export type WdioElementsMaybePromise =
-    WebdriverIO.ElementArray |
+    WdioElements |
     ChainablePromiseArray
 
 export type RawMatcherFn<Context extends MatcherContext = MatcherContext> = {
     (this: Context, actual: unknown, ...expected: unknown[]): ExpectationResult;
 }
 
-export type WdioMatchersObject = Map<string, RawMatcherFn>
+export type WdioMatchersObject = Map<string, RawMatcherFn>

src/util/elementsUtil.ts

@@ -11,3 +11,7 @@ export const wrapExpectedWithArray = (el: WebdriverIO.Element | WebdriverIO.Elem
     }
     return expected
 }
+
+export const isElementArray = (obj: unknown): obj is WebdriverIO.ElementArray => {
+    return obj !== null && typeof obj === 'object' && 'selector' in obj && 'foundWith' in obj && 'parent' in obj
+}

src/util/formatMessage.ts

@@ -1,5 +1,7 @@
 import { printDiffOrStringify, printExpected, printReceived } from 'jest-matcher-utils'
 import { equals } from '../jasmineUtils.js'
+import type { WdioElements } from '../types.js'
+import { isElementArray } from './elementsUtil.js'
 
 const EXPECTED_LABEL = 'Expected'
 const RECEIVED_LABEL = 'Received'
@@ -15,15 +17,15 @@ export const getSelector = (el: WebdriverIO.Element | WebdriverIO.ElementArray)
     return result
 }
 
-export const getSelectors = (el: WebdriverIO.Element | WebdriverIO.ElementArray) => {
+export const getSelectors = (el: WebdriverIO.Element | WdioElements) => {
     const selectors = []
-    let parent: WebdriverIO.Element | WebdriverIO.Browser | WebdriverIO.MultiRemoteBrowser | undefined
+    let parent: WebdriverIO.ElementArray['parent'] | undefined
 
-    if (Array.isArray(el)) {
-        selectors.push(`${(el as WebdriverIO.ElementArray).foundWith}(\`${getSelector(el)}\`)`)
+    if (isElementArray(el)) {
+        selectors.push(`${(el).foundWith}(\`${getSelector(el)}\`)`)
         parent = el.parent
-    } else {
-        parent = el as WebdriverIO.Element
+    } else if (!Array.isArray(el)) {
+        parent = el
     }
 
     while (parent && 'selector' in parent) {
@@ -42,7 +44,7 @@ export const not = (isNot: boolean): string => {
 }
 
 export const enhanceError = (
-    subject: string | WebdriverIO.Element | WebdriverIO.ElementArray,
+    subject: string | WebdriverIO.Element | WdioElements,
     expected: unknown,
     actual: unknown,
     context: { isNot: boolean },

src/util/refetchElements.ts

@@ -1,19 +1,19 @@
 import { DEFAULT_OPTIONS } from '../constants.js'
+import type { WdioElements } from '../types.js'
+import { isElementArray } from './elementsUtil.js'
 
 /**
- * refetch elements array
- * @param elements WebdriverIO.ElementArray
+ * Refetch elements array or return when elements is not of type WebdriverIO.ElementArray
+ * @param elements WebdriverIO.ElementArray | WebdriverIO.Element[]
  */
 export const refetchElements = async (
-    elements: WebdriverIO.ElementArray,
+    elements: WdioElements,
     wait = DEFAULT_OPTIONS.wait,
     full = false
-): Promise<WebdriverIO.ElementArray> => {
-    if (elements) {
-        if (wait > 0 && (elements.length === 0 || full)) {
-            // @ts-ignore
-            elements = (await elements.parent[elements.foundWith](elements.selector, ...elements.props) as WebdriverIO.ElementArray)
-        }
+): Promise<WdioElements> => {
+    if (elements && wait > 0 && (elements.length === 0 || full) && isElementArray(elements) && elements.parent && elements.foundWith && elements.foundWith in elements.parent) {
+        const fetchFunction = elements.parent[elements.foundWith as keyof typeof elements.parent] as Function
+        elements = await fetchFunction(elements.selector, ...elements.props)
     }
     return elements
 }