chore: Better leverage of vitest with typings (#1989)

* Better typed vitest mock

- Leverage better vitest
- Try to have better typed mock since Wdio object can be complexe and it will help with future changes
- Remove weird _value mock and replace by vi mock

* Fix remaining tests

* Working refactor of test framework to better leverage vitest + types

* Remove unnecessary fixture code

* remove unused mocked code

* now required config, not sure why though

* code review and remove more any in test code

* fix small missed

* Fix pipeline

Author: dprevost-LMI

__mocks__/@wdio/globals.ts

@@ -1,137 +1,21 @@
-import { vi } from 'vitest'
+/**
+ * Global mocks on root only as vitest support
+ * Re-exporting from test folder to benefit from typed mocks
+ */
+import { browser } from '../../test/__mocks__/@wdio/globals'
 
-const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
-
-function beFn() {
-    return this._value ? this._value() : true
-}
-
-function strFn() {
-    return this._value ? this._value() : ' Valid Text '
-}
-
-function getPropertyFn(propName) {
-    return this._value ? this._value(propName) : undefined
-}
-
-function getTextFn() {
-    return this._text ? this._text() : undefined
+export function $(selector: string) {
+    return browser.$(selector)
 }
 
-function getHTMLFn({ includeSelectorTag }) {
-    return this._html ? this._html(includeSelectorTag) : undefined
+export function $$(selector: string) {
+    return browser.$$(selector)
 }
 
-function getComputedLabelFn() {
-    return this._computed_label ? this._computed_label() : undefined
-}
-
-function getComputedRoleFn() {
-    return this._computed_role ? this._computed_role() : undefined
-}
-
-function getSizeFn(property?: 'height' | 'width') {
-    return this._size ? this._size(property) : undefined
-}
-
-const elementMethods = {
-    isDisplayed: beFn,
-    isDisplayedInViewport: beFn,
-    isExisting: beFn,
-    isSelected: beFn,
-    isClickable: beFn,
-    isFocused: beFn,
-    isEnabled: beFn,
-    getProperty: getPropertyFn,
-    getText: getTextFn,
-    getHTML: getHTMLFn,
-    getComputedLabel: getComputedLabelFn,
-    getComputedRole: getComputedRoleFn,
-    getSize: getSizeFn,
-}
-
-const element = {
-    $,
-    $$,
-    ...elementMethods
-}
-
-export function $(selector) {
-    const el: any = {
-        ...element,
-        selector
-    }
-    for (const [prop, method] of Object.entries(elementMethods)) {
-        el[prop] = vi.fn(method)
-    }
-    el.getElement = async () => el
-    return el
-}
-
-export function $$(selector) {
-    const length = this?._length || 2
-    const els: any = Array(length).map((_, index) => {
-        const el = {
-            ...element,
-            selector,
-            index
-        }
-        for (const [prop, method] of Object.entries(elementMethods)) {
-            el[prop] = vi.fn(method)
-        }
-        return el
-    })
-    // Required to refetch
-    const parent: any = element
-    parent._length = length
-    els.parent = parent
-
-    els.foundWith = '$$'
-    // Required to check length prop
-    els.props = []
-    els.props.length = length
-    els.selector = selector
-    els.getElements = async () => els
-    return els
-}
-
-async function waitUntil(condition, { timeout, interval }) {
-    if (!Number.isInteger(timeout) || timeout < 1) {
-        throw new Error('wrong args passed to waitUntil fixture')
-    }
-    let attemptsLeft = timeout / interval
-    while (attemptsLeft > 0) {
-        try {
-            const result = await condition()
-            if (result) {
-                return true
-            }
-        } catch {
-            // don't do anything
-        }
-        attemptsLeft--
-        await sleep(interval)
-    }
-    throw new Error('waitUntil: timeout after ' + timeout)
-}
-
-async function execute(fn) {
-    if (typeof fn === 'function' && fn.toString().includes('navigator.clipboard.readText')) {
-        return 'some clipboard text'
-    }
-}
-
-async function setPermissions() {
-    return true
-}
+export { browser }
 
-export const browser = {
-    $,
-    $$,
-    execute,
-    waitUntil,
-    setPermissions,
-    getUrl: strFn,
-    getTitle: strFn,
-    call(fn) { return fn() },
+export default {
+    browser,
+    $: browser.$,
+    $$: browser.$$,
 }

test/__fixtures__/beforeAll.js

@@ -0,0 +1,73 @@
+/**
+ * The real globals is mocked under the root folder.
+ * 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 { RectReturn } from '@wdio/protocols'
+export type Size = Pick<RectReturn, 'width' | 'height'>
+
+const getElementMethods = () => ({
+    isDisplayed: vi.spyOn({ isDisplayed: async () => true }, 'isDisplayed'),
+    isExisting: vi.spyOn({ isExisting: async () => true }, 'isExisting'),
+    isSelected: vi.spyOn({ isSelected: async () => true }, 'isSelected'),
+    isClickable: vi.spyOn({ isClickable: async () => true }, 'isClickable'),
+    isFocused: vi.spyOn({ isFocused: async () => true }, 'isFocused'),
+    isEnabled: vi.spyOn({ isEnabled: async () => true }, 'isEnabled'),
+    getProperty: vi.spyOn({ getProperty: async (_prop: string) => undefined }, 'getProperty'),
+    getText: vi.spyOn({ getText: async () => ' Valid Text ' }, 'getText'),
+    getHTML: vi.spyOn({ getHTML: async () => { return '<Html/>' } }, 'getHTML'),
+    getComputedLabel: vi.spyOn({ getComputedLabel: async () => 'Computed Label' }, 'getComputedLabel'),
+    getComputedRole: vi.spyOn({ getComputedRole: async () => 'Computed Role' }, 'getComputedRole'),
+    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'],
+} satisfies Partial<WebdriverIO.Element>)
+
+function $(_selector: string) {
+    const element = {
+        selector: _selector,
+        ...getElementMethods(),
+        $,
+        $$
+    } satisfies Partial<WebdriverIO.Element> as unknown as WebdriverIO.Element
+    element.getElement = async () => Promise.resolve(element)
+    return element as unknown as ChainablePromiseElement
+}
+
+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
+
+    elements.foundWith = '$$'
+    elements.props = []
+    elements.props.length = length
+    elements.selector = selector
+    elements.getElements = async () => elements
+    elements.length = length
+    return elements as unknown as ChainablePromiseArray
+}
+
+export const browser = {
+    $,
+    $$,
+    execute: vi.fn(),
+    setPermissions: vi.spyOn({ setPermissions: async () => {} }, 'setPermissions'),
+    getUrl: vi.spyOn({ getUrl: async () => '  Valid text  ' }, 'getUrl'),
+    getTitle: vi.spyOn({ getTitle: async () => 'Example Domain' }, 'getTitle'),
+    call(fn: Function) { return fn() },
+} satisfies Partial<WebdriverIO.Browser> as unknown as WebdriverIO.Browser
+

test/__fixtures__/index.js

@@ -59,7 +59,7 @@ test('matchers', () => {
 })
 
 test('allows to add matcher', () => {
-    const matcher: any = vi.fn((actual: any, expected: any) => ({ pass: actual === expected }))
+    const matcher: any = vi.fn((actual, expected) => ({ pass: actual === expected }))
     expectLib.extend({ toBeCustom: matcher })
 
     // @ts-expect-error not in types