Ensure mocks used represented wdio framework reality

Author: dprevost-LMI

.github/workflows/test.yml

@@ -21,7 +21,5 @@ jobs:
           node-version: ${{ matrix.node-version }}
       - name: Install Dependencies
         run: npm install --force
-      - name: Build
-        run: npm run build
-      - name: Run Tests
-        run: npm test
+      - name: Run All Checks
+        run: npm check:all

test/__mocks__/@wdio/globals.ts

@@ -20,6 +20,8 @@ const getElementMethods = () => ({
     getHTML: vi.spyOn({ getHTML: async () => { return '<Html/>' } }, 'getHTML'),
     getComputedLabel: vi.spyOn({ getComputedLabel: async () => 'Computed Label' }, 'getComputedLabel'),
     getComputedRole: vi.spyOn({ getComputedRole: async () => 'Computed Role' }, 'getComputedRole'),
+    // Null is not part of the type, to fix in wdio one day
+    getAttribute: vi.spyOn({ getAttribute: async (_attr: string) => null as unknown as string }, 'getAttribute'),
     getSize: vi.spyOn({ getSize: async (prop?: 'width' | 'height') => {
         if (prop === 'width') { return 100 }
         if (prop === 'height') { return 50 }
@@ -28,38 +30,67 @@ const getElementMethods = () => ({
     getAttribute: vi.spyOn({ getAttribute: async (_attr: string) => 'some attribute' }, 'getAttribute'),
 } satisfies Partial<WebdriverIO.Element>)
 
-function $(_selector: string) {
-    const element = {
+const elementFactory = (_selector: string, index?: number): WebdriverIO.Element => {
+    const partialElement = {
         selector: _selector,
         ...getElementMethods(),
+        index,
         $,
         $$
-    } satisfies Partial<WebdriverIO.Element> as unknown as WebdriverIO.Element
-    element.getElement = async () => Promise.resolve(element)
-    return element as unknown as ChainablePromiseElement
+    } satisfies Partial<WebdriverIO.Element>
+
+    const element = partialElement as unknown as WebdriverIO.Element
+    element.getElement = vi.fn().mockResolvedValue(element)
+    return element
+}
+
+function $(_selector: string) {
+    const element = elementFactory(_selector)
+
+    // Wdio framework does return a Promise-wrapped element, so we need to mimic this behavior
+    const chainablePromiseElement = Promise.resolve(element) as unknown as ChainablePromiseElement
+
+    // Ensure `'getElement' in chainableElement` is false while allowing to use `await chainableElement.getElement()`
+    const runtimeChainableElement = new Proxy(chainablePromiseElement, {
+        get(target, prop) {
+            if (prop in element) {
+                return element[prop as keyof WebdriverIO.Element]
+            }
+            const value = Reflect.get(target, prop)
+            return typeof value === 'function' ? value.bind(target) : value
+        }
+    })
+    return runtimeChainableElement
 }
 
 function $$(selector: string) {
-    const length = (this)?._length || 2
-    const elements = Array(length).fill(null).map((_, index) => {
-        const element = {
-            selector,
-            index,
-            ...getElementMethods(),
-            $,
-            $$
-        } satisfies Partial<WebdriverIO.Element> as unknown as WebdriverIO.Element
-        element.getElement = async () => Promise.resolve(element)
-        return element
-    }) satisfies WebdriverIO.Element[] as unknown as WebdriverIO.ElementArray
+    const length = (this as any)?._length || 2
+    const elements: WebdriverIO.Element[] = Array(length).fill(null).map((_, index) => elementFactory(selector, index))
+
+    const elementArray = elements as unknown as WebdriverIO.ElementArray
+
+    elementArray.foundWith = '$$'
+    elementArray.props = []
+    elementArray.props.length = length
+    elementArray.selector = selector
+    elementArray.getElements = async () => elementArray
+    elementArray.length = length
+
+    // Wdio framework does return a Promise-wrapped element, so we need to mimic this behavior
+    const chainablePromiseArray = Promise.resolve(elementArray) as unknown as ChainablePromiseArray
+
+    // Ensure `'getElements' in chainableElements` is false while allowing to use `await chainableElement.getElements()`
+    const runtimeChainablePromiseArray = new Proxy(chainablePromiseArray, {
+        get(target, prop) {
+            if (elementArray && prop in elementArray) {
+                return elementArray[prop as keyof WebdriverIO.ElementArray]
+            }
+            const value = Reflect.get(target, prop)
+            return typeof value === 'function' ? value.bind(target) : value
+        }
+    })
 
-    elements.foundWith = '$$'
-    elements.props = []
-    elements.props.length = length
-    elements.selector = selector
-    elements.getElements = async () => elements
-    elements.length = length
-    return elements as unknown as ChainablePromiseArray
+    return runtimeChainablePromiseArray
 }
 
 export const browser = {

test/globals_mock.test.ts

@@ -0,0 +1,88 @@
+import { describe, it, expect, vi } from 'vitest'
+import { $, $$ } from '@wdio/globals'
+
+vi.mock('@wdio/globals')
+
+describe('globals mock', () => {
+    describe($, () => {
+        it('should return a ChainablePromiseElement', async () => {
+            const el = $('foo')
+
+            // It behaves like a promise
+            expect(el).toHaveProperty('then')
+            // @ts-expect-error
+            expect(typeof el.then).toBe('function')
+        })
+
+        it('should resolve to an element', async () => {
+            const el = await $('foo')
+
+            expect(el.selector).toBe('foo')
+            // The resolved element should not be the proxy, but the underlying mock
+            expect(el.getElement).toBeDefined()
+        })
+
+        it('should allow calling getElement on the chainable promise', async () => {
+            const chainable = $('foo')
+
+            // 'getElement' should not be present in the chainable object if checked via `in`
+            // based on user request logs: 'getElements' in elements false
+            expect('getElement' in chainable).toBe(false)
+
+            // But it should be callable
+            const el = chainable.getElement()
+            expect(el).toBeInstanceOf(Promise)
+
+            const awaitedEl = await el
+            expect(awaitedEl.selector).toBe('foo')
+            expect(awaitedEl.getElement).toBeDefined()
+        })
+
+        it('should allow calling methods like isEnabled on the chainable promise', async () => {
+            const check = $('foo').isEnabled()
+            expect(check).toBeInstanceOf(Promise)
+
+            const result = await check
+            expect(result).toBe(true)
+        })
+
+        it('should allow chaining simple methods', async () => {
+            const text = await $('foo').getText()
+
+            expect(text).toBe(' Valid Text ')
+        })
+    })
+
+    describe('$$', () => {
+        it('should return a ChainablePromiseArray', async () => {
+            const els = $$('foo')
+            expect(els).toHaveProperty('then')
+            // @ts-expect-error
+            expect(typeof els.then).toBe('function')
+        })
+
+        it('should resolve to an element array', async () => {
+            const els = await $$('foo')
+            expect(Array.isArray(els)).toBe(true)
+            expect(els).toHaveLength(2) // Default length in mock
+            expect(els.selector).toBe('foo')
+        })
+
+        it('should allow calling getElements on the chainable promise', async () => {
+            const chainable = $$('foo')
+            // 'getElements' should not be present in the chainable object if checked via `in`
+            expect('getElements' in chainable).toBe(false)
+
+            // But it should be callable
+            const els = await chainable.getElements()
+            expect(els).toHaveLength(2) // Default length
+        })
+
+        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'])
+        })
+    })
+})

test/softAssertions.test.ts

@@ -10,8 +10,10 @@ describe('Soft Assertions', () => {
 
     beforeEach(async () => {
         el = $('sel')
+
         // We need to mock getText() which is what the toHaveText matcher actually calls
-        el.getText = vi.fn().mockImplementation(() => 'Actual Text')
+        vi.mocked(el.getText).mockResolvedValue('Actual Text')
+
         // Clear any soft assertion failures before each test
         expectWdio.clearSoftFailures()
     })
@@ -157,11 +159,13 @@ describe('Soft Assertions', () => {
     describe('Different Matcher Types', () => {
         beforeEach(async () => {
             el = $('sel')
+
             // Mock different methods for different matchers
-            el.getText = vi.fn().mockImplementation(() => 'Actual Text')
-            el.isDisplayed = vi.fn().mockImplementation(() => false)
-            el.getAttribute = vi.fn().mockImplementation(() => 'actual-class')
-            el.isClickable = vi.fn().mockImplementation(() => false)
+            vi.mocked(el.getText).mockResolvedValue('Actual Text')
+            vi.mocked(el.isDisplayed).mockResolvedValue(false)
+            vi.mocked(el.getAttribute).mockResolvedValue('actual-class')
+            vi.mocked(el.isClickable).mockResolvedValue(false)
+
             expectWdio.clearSoftFailures()
         })
 
@@ -245,9 +249,9 @@ describe('Soft Assertions', () => {
             const softService = SoftAssertService.getInstance()
             softService.setCurrentTest('concurrent-test', 'concurrent', 'test file')
 
-            el.getText = vi.fn().mockImplementation(() => 'Actual Text')
-            el.isDisplayed = vi.fn().mockImplementation(() => false)
-            el.isClickable = vi.fn().mockImplementation(() => false)
+            vi.mocked(el.getText).mockResolvedValue('Actual Text')
+            vi.mocked(el.isDisplayed).mockResolvedValue(false)
+            vi.mocked(el.isClickable).mockResolvedValue(false)
 
             // Fire multiple assertions rapidly
             const promises = [
@@ -276,20 +280,14 @@ describe('Soft Assertions', () => {
             softService.setCurrentTest('error-test', 'error test', 'test file')
 
             // Mock a matcher that throws a unique error
-            const originalMethod = el.getText
-            el.getText = vi.fn().mockImplementation(() => {
-                throw new TypeError('Weird browser error')
-            })
+            vi.mocked(el.getText).mockRejectedValue(new TypeError('Weird browser error'))
 
             await expectWdio.soft(el).toHaveText('Expected Text')
 
             const failures = expectWdio.getSoftFailures()
             expect(failures.length).toBe(1)
             expect(failures[0].error).toBeInstanceOf(Error)
             expect(failures[0].error.message).toContain('Weird browser error')
-
-            // Restore
-            el.getText = originalMethod
         })
 
         it('should handle very long error messages', async () => {

vitest.config.ts

@@ -8,6 +8,8 @@ export default defineConfig({
             '**/node_modules/**'
         ],
         testTimeout: 15 * 1000,
+        clearMocks: true, // clears all mock call histories before each test
+        restoreMocks: true, // restores the original implementation of spies
         coverage: {
             enabled: true,
             exclude: [
@@ -26,10 +28,10 @@ export default defineConfig({
                 'types-checks-filter-out-node_modules.js',
             ],
             thresholds: {
-                lines: 88,
-                functions: 86,
-                statements: 88,
-                branches: 79,
+                lines: 88.4,
+                functions: 86.9,
+                statements: 88.3,
+                branches: 79.6,
             }
         }
     }