Final mock version with everything + toHaveText more tests

dprevost-LMI · dprevost-LMI · commit 51512277279b · 2026-01-25T20:01:46.000-05:00
diff --git a/test/__mocks__/@wdio/globals.ts b/test/__mocks__/@wdio/globals.ts
@@ -3,7 +3,7 @@
  * This file exist for better typed mock implementation, so that we can follow wdio/globals API updates more easily.
  */
 import { vi } from 'vitest'
-import type { ChainablePromiseArray, ChainablePromiseElement } from 'webdriverio'
+import type { ChainablePromiseArray, ChainablePromiseElement, ParsedCSSValue } from 'webdriverio'
 
 import type { RectReturn } from '@wdio/protocols'
 export type Size = Pick<RectReturn, 'width' | 'height'>
@@ -21,11 +21,17 @@ const getElementMethods = () => ({
     getComputedLabel: vi.spyOn({ getComputedLabel: async () => 'Computed Label' }, 'getComputedLabel'),
     getComputedRole: vi.spyOn({ getComputedRole: async () => 'Computed Role' }, 'getComputedRole'),
     getAttribute: vi.spyOn({ getAttribute: async (_attr: string) => 'some attribute' }, 'getAttribute'),
+    getCSSProperty: vi.spyOn({ getCSSProperty: async (_prop: string, _pseudo?: string) =>
+        ({ value: 'colorValue', parsed: {} } satisfies ParsedCSSValue) }, 'getCSSProperty'),
     getSize: vi.spyOn({ getSize: async (prop?: 'width' | 'height') => {
         if (prop === 'width') { return 100 }
         if (prop === 'height') { return 50 }
         return { width: 100, height: 50 } satisfies Size
-    } }, 'getSize') as unknown as WebdriverIO.Element['getSize'],
+    } },
+    // Force wrong size & number typing, fixed by https://github.com/webdriverio/webdriverio/pull/15003
+    'getSize') as unknown as WebdriverIO.Element['getSize'],
+    $,
+    $$,
 } satisfies Partial<WebdriverIO.Element>)
 
 export const elementFactory = (_selector: string, index?: number, parent: WebdriverIO.Browser | WebdriverIO.Element = browser): WebdriverIO.Element => {
@@ -40,9 +46,50 @@ export const elementFactory = (_selector: string, index?: number, parent: Webdri
 
     const element = partialElement as unknown as WebdriverIO.Element
     element.getElement = vi.fn().mockResolvedValue(element)
+
+    // Note: an element found has element.elementId while a not found has element.error
+    element.elementId = `${_selector}${index ? '-' + index : ''}`
+
     return element
 }
 
+export const notFoundElementFactory = (_selector: string, index?: number, parent: WebdriverIO.Browser | WebdriverIO.Element = browser): WebdriverIO.Element => {
+    const partialElement = {
+        selector: _selector,
+        index,
+        $,
+        $$,
+        isExisting: vi.fn().mockResolvedValue(false),
+        parent
+    } satisfies Partial<WebdriverIO.Element>
+
+    const element = partialElement as unknown as WebdriverIO.Element
+
+    // Note: an element found has element.elementId while a not found has element.error
+    const elementId = `${_selector}${index ? '-' + index : ''}`
+    const error = (functionName: string) => new Error(`Can't call ${functionName} on element with selector ${elementId} because element wasn't found`)
+
+    // Mimic element not found by throwing error on any method call beisde isExisting
+    const notFoundElement = new Proxy(element, {
+        get(target, prop) {
+            if (prop in element) {
+                const value = element[prop as keyof WebdriverIO.Element]
+                return value
+            }
+            if (['then', 'catch', 'toStringTag'].includes(prop as string) || typeof prop === 'symbol') {
+                const value = Reflect.get(target, prop)
+                return typeof value === 'function' ? value.bind(target) : value
+            }
+            element.error = error(prop as string)
+            return () => { throw element.error }
+        }
+    })
+
+    element.getElement = vi.fn().mockResolvedValue(notFoundElement)
+
+    return notFoundElement
+}
+
 const $ = vi.fn((_selector: string) => {
     const element = elementFactory(_selector)
 
@@ -106,6 +153,30 @@ export function chainableElementArrayFactory(selector: string, length: number) {
     // Ensure `'getElements' in chainableElements` is false while allowing to use `await chainableElement.getElements()`
     const runtimeChainablePromiseArray = new Proxy(chainablePromiseArray, {
         get(target, prop) {
+            if (typeof prop === 'string' && /^\d+$/.test(prop)) {
+                const index = parseInt(prop, 10)
+                if (index >= length) {
+                    const error = new Error(`Index out of bounds! $$(${selector}) returned only ${length} elements.`)
+                    return new Proxy(Promise.resolve(), {
+                        get(target, prop) {
+                            if (prop === 'then') {
+                                return (resolve: any, reject: any) => reject(error)
+                            }
+                            // Allow resolving methods like 'catch', 'finally' normally from the promise if needed,
+                            // but usually we want any interaction to fail?
+                            // Actually, standard promise methods might be accessed.
+                            // But the user requirements says: `$$('foo')[3].getText()` should return a promise (that rejects).
+
+                            // If accessing a property that exists on Promise (like catch, finally, Symbol.toStringTag), maybe we should be careful.
+                            // However, the test expects `el` (the proxy) to be a Promise instance.
+                            // And `el.getText()` to return a promise.
+
+                            // If I return a function that returns a rejected promise for everything else:
+                            return () => Promise.reject(error)
+                        }
+                    })
+                }
+            }
             if (elementArray && prop in elementArray) {
                 return elementArray[prop as keyof WebdriverIO.ElementArray]
             }
@@ -126,4 +197,3 @@ export const browser = {
     getTitle: vi.spyOn({ getTitle: async () => 'Example Domain' }, 'getTitle'),
     call(fn: Function) { return fn() },
 } satisfies Partial<WebdriverIO.Browser> as unknown as WebdriverIO.Browser
-
diff --git a/test/globals_mock.test.ts b/test/globals_mock.test.ts
@@ -1,5 +1,6 @@
 import { describe, it, expect, vi } from 'vitest'
 import { $, $$ } from '@wdio/globals'
+import { notFoundElementFactory } from './__mocks__/@wdio/globals.js'
 
 vi.mock('@wdio/globals')
 
@@ -92,7 +93,6 @@ describe('globals mock', () => {
 
         it('should allow iterating if awaited', async () => {
             const els = await $$('foo')
-
             // map is available on the resolved array
             const selectors = els.map(el => el.selector)
             expect(selectors).toEqual(['foo', 'foo'])
@@ -111,5 +111,57 @@ describe('globals mock', () => {
 
             expect(text).toBe(' Valid Text ')
         })
+
+        it('should returns ElementArray on getElements', async () => {
+            const els = await $$('foo')
+
+            expect(await els.getElements()).toEqual(els)
+        })
+
+        it('should return a promise-like object when accessing index out of bounds', () => {
+            const el = $$('foo')[3]
+            // It shouldn't throw synchronously
+            expect(el).toBeDefined()
+            expect(el).toBeInstanceOf(Promise)
+
+            // Methods should return a Promise
+            const getEl = el.getElement()
+            expect(getEl).toBeInstanceOf(Promise)
+            // catch unhandled rejection to avoid warnings
+            getEl.catch(() => {})
+
+            const getText = el.getText()
+            expect(getText).toBeInstanceOf(Promise)
+            // catch unhandled rejection to avoid warnings
+            getText.catch(() => {})
+        })
+
+        it('should throw "Index out of bounds" when awaiting index out of bounds', async () => {
+            await expect(async () => await $$('foo')[3]).rejects.toThrow('Index out of bounds! $$(foo) returned only 2 elements.')
+            await expect(async () => await $$('foo')[3].getElement()).rejects.toThrow('Index out of bounds! $$(foo) returned only 2 elements.')
+            await expect(async () => await $$('foo')[3].getText()).rejects.toThrow('Index out of bounds! $$(foo) returned only 2 elements.')
+        })
+    })
+
+    describe('notFoundElementFactory', () => {
+        it('should return false for isExisting', async () => {
+            const el = notFoundElementFactory('not-found')
+            expect(await el.isExisting()).toBe(false)
+        })
+
+        it('should resolve to itself when calling getElement', async () => {
+            const el = notFoundElementFactory('not-found')
+            expect(await el.getElement()).toBe(el)
+        })
+
+        it('should throw error on method calls', async () => {
+            const el = notFoundElementFactory('not-found')
+            expect(() => el.click()).toThrow("Can't call click on element with selector not-found because element wasn't found")
+        })
+
+        it('should throw error when awaiting a method call (sync throw)', async () => {
+            const el = notFoundElementFactory('not-found')
+            expect(() => el.getText()).toThrow("Can't call getText on element with selector not-found because element wasn't found")
+        })
     })
 })
diff --git a/test/matchers/element/toHaveText.test.ts b/test/matchers/element/toHaveText.test.ts
@@ -2,6 +2,7 @@ import { $, $$ } from '@wdio/globals'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
 import { toHaveText } from '../../../src/matchers/element/toHaveText.js'
 import type { ChainablePromiseArray } from 'webdriverio'
+import { notFoundElementFactory } from '../../__mocks__/@wdio/globals.js'
 
 vi.mock('@wdio/globals')
 
@@ -484,4 +485,48 @@ Expect ${selectorName} to have text
             })
         })
     })
+
+    describe('Edge cases', () => {
+        test('should have pass false with proper error message when actual is an empty array of elements', async () => {
+            // @ts-ignore
+            const result = await thisContext.toHaveText([], 'webdriverio')
+
+            expect(result.pass).toBe(true)
+        })
+
+        // TODO view later to handle this case more gracefully
+        test('given element is not found then it throws error when an element does not exists', async () => {
+            const element: WebdriverIO.Element = notFoundElementFactory('sel')
+
+            await expect(thisContext.toHaveText(element, 'webdriverio')).rejects.toThrow("Can't call getText on element with selector sel because element wasn't found")
+        })
+
+        // TODO view later to handle this case more gracefully
+        test('given element from out of bound ChainableArray, then it throws error when an element does not exists', async () => {
+            const element: ChainablePromiseElement = $$('elements')[3]
+
+            await expect(thisContext.toHaveText(element, 'webdriverio')).rejects.toThrow('Index out of bounds! $$(elements) returned only 2 elements.')
+        })
+
+        // Throws with wierd and differrent error message!
+        test.skip.for([
+            { actual: undefined, selectorName: 'undefined' },
+            { actual: null, selectorName: 'null' },
+            { actual: true, selectorName: 'true' },
+            { actual: 5, selectorName: '5' },
+            { actual: 'test', selectorName: 'test' },
+            { actual: Promise.resolve(true), selectorName: 'true' },
+            { actual: {}, selectorName: '{}' },
+            { actual: ['1', '2'], selectorName: '["1","2"]' },
+        ])('should have pass false with proper error message when actual is unsupported type of $actual', async ({ actual, selectorName }) => {
+            const result = await thisContext.toHaveText(actual as any, 'webdriverio')
+
+            expect(result.pass).toBe(false)
+            expect(result.message()).toEqual(`\
+Expect ${selectorName} to have text
+
+Expected: "webdriverio"
+Received: undefined`)
+        })
+    })
 })
