Use supported type instead of unknown for toHaveElementProperty

Author: dprevost-LMI

src/matchers/element/toHaveElementProperty.ts

@@ -11,7 +11,7 @@ import {
 async function condition(
     el: WebdriverIO.Element,
     property: string,
-    expected: unknown | RegExp | WdioAsymmetricMatcher<string>,
+    expected: string | number | null | RegExp | WdioAsymmetricMatcher<string>,
     options: ExpectWebdriverIO.StringOptions = DEFAULT_OPTIONS
 ) {
     const { asString = false } = options
@@ -33,13 +33,13 @@ async function condition(
     }
 
     // To review the cast to be more type safe but for now let's keep the existing behavior to ensure no regression
-    return compareText(prop.toString(), expected as string, options)
+    return compareText(prop.toString(), expected as string | RegExp | WdioAsymmetricMatcher<string>, options)
 }
 
 export async function toHaveElementProperty(
     received: WdioElementOrArrayMaybePromise,
     property: string,
-    expectedValue: MaybeArray<unknown | RegExp | WdioAsymmetricMatcher<string>>,
+    expectedValue: MaybeArray<string | number | null | RegExp | WdioAsymmetricMatcher<string>>,
     options: ExpectWebdriverIO.StringOptions = DEFAULT_OPTIONS
 ) {
     const { expectation = 'property', verb = 'have', isNot, matcherName = 'toHaveElementProperty' } = this
@@ -58,7 +58,8 @@ export async function toHaveElementProperty(
                 (elements) => defaultMultipleElementsIterationStrategy(
                     elements,
                     expectedValue,
-                    (element, expected) => condition(element, property, expected, options)
+                    (element, expected) => condition(element, property, expected, options),
+                    { supportArrayForSingleElement: true }
                 )
             )
             el = result.elementOrArray

src/util/executeCommand.ts

@@ -84,13 +84,15 @@ export async function executeCommand<T>(
  * @param elements The element or array of elements.
  * @param expectedValues The expected value or array of expected values.
  * @param condition The condition to execute on each element.
+ * @param options Optional configuration options.
  */
 export async function defaultMultipleElementsIterationStrategy<Expected, Value>(
     elements: WebdriverIO.Element | WdioElements,
     expectedValues: MaybeArray<Expected>,
     condition: (awaitedElement: WebdriverIO.Element, expectedValue: Expected) => Promise<
         { result: boolean; value?: Value }
-    >
+    >,
+    { supportArrayForSingleElement = false } =  {}
 ): Promise<{ result: boolean; value?: Value | string }[]> {
     if (isElementArrayLike(elements)) {
         if (Array.isArray(expectedValues)) {
@@ -101,8 +103,13 @@ export async function defaultMultipleElementsIterationStrategy<Expected, Value>(
         }
         return await map(elements, (el: WebdriverIO.Element) => condition(el, expectedValues))
 
-    } else if (Array.isArray(expectedValues)) {
-        return [{ result: false, value: 'Expected value cannot be an array' }]
+    } else if ( Array.isArray(expectedValues)) {
+        if (!supportArrayForSingleElement) {
+            return [{ result: false, value: 'Expected value cannot be an array' }]
+        }
+
+        // Case where a single element's value can be an array compared to an expected value array and not multiple expected values
+        return [await condition(elements, expectedValues as Expected)]
     }
     return [await condition(elements, expectedValues)]
 }

test/matchers/element/toHaveElementProperty.test.ts

@@ -46,7 +46,7 @@ describe(toHaveElementProperty, () => {
             expect(result.pass).toBe(true)
         })
 
-        // TODO With unknonwn as expect should array be be supported ? If so this is a bug!!!
+        // TODO Need deep equality to support array and object properly
         test('success with when property value is an array, bug?', async () => {
             vi.mocked(el.getProperty).mockResolvedValue([5])
 
@@ -57,14 +57,15 @@ describe(toHaveElementProperty, () => {
 Expect $(\`sel\`) to have property property
 
 Expected: [5]
-Received: "Expected value cannot be an array"`
+Received: [5]`
             )
         })
 
-        // TODO With unknonwn as expect should array be be supported ? If so this is a bug!!!
+        // TODO Need deep equality to support array and object properly
         test('success with when property value an object, bug?', async () => {
             vi.mocked(el.getProperty).mockResolvedValue( { foo: 'bar' } )
 
+            // @ts-expect-error -- object not working for now, to support later
             const result = await thisContext.toHaveElementProperty(el, 'property', { foo: 'bar' } )
 
             expect(result.pass).toBe(false)

test/util/executeCommand.test.ts

@@ -1,6 +1,6 @@
-import { describe, expect, test, vi } from 'vitest'
+import { describe, expect, test, vi, beforeEach } from 'vitest'
 import { $, $$ } from '@wdio/globals'
-import { executeCommand } from '../../src/util/executeCommand'
+import { executeCommand, defaultMultipleElementsIterationStrategy } from '../../src/util/executeCommand'
 
 vi.mock('@wdio/globals')
 
@@ -222,3 +222,71 @@ describe(executeCommand, () => {
         })
     })
 })
+
+describe(defaultMultipleElementsIterationStrategy, () => {
+
+    describe('given single element', () => {
+        let singleElement: WebdriverIO.Element
+        let condition: any
+
+        beforeEach(async () => {
+            singleElement = await $('single-mock-element').getElement()
+            condition = vi.fn().mockImplementation(async (_el, expected) => ({ result: true, value: expected }))
+        })
+
+        test('should handle single element and single expected value', async () => {
+            const result = await defaultMultipleElementsIterationStrategy(singleElement, 'val', condition)
+
+            expect(result).toEqual([{ result: true, value: 'val' }])
+        })
+
+        test('should fail if single element and expected value is array (default)', async () => {
+            const result = await defaultMultipleElementsIterationStrategy(singleElement, ['val'], condition)
+
+            expect(result).toEqual([{ result: false, value: 'Expected value cannot be an array' }])
+        })
+
+        test('should handle single element and expected value array if supportArrayForSingleElement is true', async () => {
+            const result = await defaultMultipleElementsIterationStrategy(singleElement, ['val'], condition, { supportArrayForSingleElement: true })
+
+            expect(result).toEqual([{ result: true, value: ['val'] }])
+            expect(condition).toHaveBeenCalledTimes(1)
+        })
+    })
+
+    describe('given multiple elements', () => {
+        let elements: WebdriverIO.ElementArray
+        let condition: () => Promise<{ result: boolean; value: string }>
+
+        beforeEach(async () => {
+            elements = await $$('elements').getElements()
+            expect(elements.length).toBe(2)
+            condition = vi.fn()
+                .mockResolvedValueOnce({ result: true, value: 'val1' })
+                .mockResolvedValueOnce({ result: true, value: 'val2' })
+        })
+
+        test('should iterate over array of elements and array of expected values', async () => {
+            const result = await defaultMultipleElementsIterationStrategy(elements, ['val1', 'val2'], condition)
+
+            expect(result).toEqual([{ result: true, value: 'val1' }, { result: true, value: 'val2' }])
+            expect(condition).toHaveBeenCalledTimes(2)
+        })
+
+        test('should fail if array lengths mismatch', async () => {
+            const result = await defaultMultipleElementsIterationStrategy([elements[0]] as any, ['val1', 'val2'], condition)
+
+            expect(result).toEqual([{ result: false, value: 'Received array length 1, expected 2' }])
+        })
+
+        test('should iterate over array of elements and single expected value', async () => {
+            condition = vi.fn()
+                .mockResolvedValue({ result: true, value: 'val' })
+
+            const result = await defaultMultipleElementsIterationStrategy(elements, 'val', condition)
+
+            expect(result).toEqual([{ result: true, value: 'val' }, { result: true, value: 'val' }])
+            expect(condition).toHaveBeenCalledTimes(2)
+        })
+    })
+})

types/expect-webdriverio.d.ts

@@ -220,7 +220,8 @@ interface WdioElementOrArrayMatchers<_R, ActualT = unknown> {
      */
     toHaveElementProperty: FnWhenElementOrArrayLike<ActualT, (
         property: string,
-        value: MaybeArray<unknown | RegExp | ExpectWebdriverIO.PartialMatcher<string> | null>,
+        // Needs deep equality to support unknown property types (objects & arrays)
+        value: MaybeArray<string | number | null | RegExp | ExpectWebdriverIO.PartialMatcher<string>>,
         options?: ExpectWebdriverIO.StringOptions
     ) => Promise<void>>