Better factory + fix missing element's parent

Author: dprevost-LMI

test/__mocks__/@wdio/globals.ts

@@ -28,21 +28,22 @@ const getElementMethods = () => ({
     } }, 'getSize') as unknown as WebdriverIO.Element['getSize'],
 } satisfies Partial<WebdriverIO.Element>)
 
-const elementFactory = (_selector: string, index?: number): WebdriverIO.Element => {
+export const elementFactory = (_selector: string, index?: number, parent: WebdriverIO.Browser | WebdriverIO.Element = browser): WebdriverIO.Element => {
     const partialElement = {
         selector: _selector,
         ...getElementMethods(),
         index,
         $,
-        $$
+        $$,
+        parent
     } satisfies Partial<WebdriverIO.Element>
 
     const element = partialElement as unknown as WebdriverIO.Element
     element.getElement = vi.fn().mockResolvedValue(element)
     return element
 }
 
-function $(_selector: string) {
+const $ = vi.fn((_selector: string) => {
     const element = elementFactory(_selector)
 
     // Wdio framework does return a Promise-wrapped element, so we need to mimic this behavior
@@ -59,25 +60,46 @@ function $(_selector: string) {
         }
     })
     return runtimeChainableElement
-}
+})
 
-function $$(selector: string) {
+const $$ = vi.fn((selector: string) => {
     const length = (this as any)?._length || 2
+    return chainableElementArrayFactory(selector, length)
+})
+
+export function elementArrayFactory(selector: string, length?: number): WebdriverIO.ElementArray {
     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.selector = selector
-    elementArray.getElements = async () => elementArray
+    elementArray.getElements = vi.fn().mockResolvedValue(elementArray)
     elementArray.filter = async <T>(fn: (element: WebdriverIO.Element, index: number, array: T[]) => boolean | Promise<boolean>) => {
         const results = await Promise.all(elements.map((el, i) => fn(el, i, elements as unknown as T[])))
         return Array.prototype.filter.call(elements, (_, i) => results[i])
     }
-
     elementArray.parent = browser
 
+    // TODO Verify if we need to implement other array methods
+    // [Symbol.iterator]: array[Symbol.iterator].bind(array)
+    // filter: vi.fn().mockReturnThis(),
+    // map: vi.fn().mockReturnThis(),
+    // find: vi.fn().mockReturnThis(),
+    // forEach: vi.fn(),
+    // some: vi.fn(),
+    // every: vi.fn(),
+    // slice: vi.fn().mockReturnThis(),
+    // toArray: vi.fn().mockReturnThis(),
+    // getElements: vi.fn().mockResolvedValue(array)
+
+    return elementArray
+}
+
+export function chainableElementArrayFactory(selector: string, length: number) {
+    const elementArray = elementArrayFactory(selector, 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
 

test/globals_mock.test.ts

@@ -10,8 +10,7 @@ describe('globals mock', () => {
 
             // It behaves like a promise
             expect(el).toHaveProperty('then')
-            // @ts-expect-error
-            expect(typeof el.then).toBe('function')
+            expect(el).toBeInstanceOf(Promise)
         })
 
         it('should resolve to an element', async () => {
@@ -22,6 +21,13 @@ describe('globals mock', () => {
             expect(el.getElement).toBeDefined()
         })
 
+        it('should resolve to an element on getElement', async () => {
+            const el = await $('foo')
+            const resolvedEl = await el.getElement()
+
+            expect(resolvedEl).toBe(el)
+        })
+
         it('should allow calling getElement on the chainable promise', async () => {
             const chainable = $('foo')
 
@@ -46,14 +52,14 @@ describe('globals mock', () => {
             expect(result).toBe(true)
         })
 
-        it('should allow chaining simple methods', async () => {
+        it('should allow chaining simple methods with await', async () => {
             const text = await $('foo').getText()
 
             expect(text).toBe(' Valid Text ')
         })
     })
 
-    describe('$$', () => {
+    describe($$, () => {
         it('should return a ChainablePromiseArray', async () => {
             const els = $$('foo')
             expect(els).toHaveProperty('then')
@@ -68,6 +74,12 @@ describe('globals mock', () => {
             expect(els.selector).toBe('foo')
         })
 
+        it('should returns ElementArray on getElements', async () => {
+            const els = await $$('foo')
+
+            expect(await els.getElements()).toEqual(els)
+        })
+
         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`
@@ -80,9 +92,24 @@ 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'])
         })
+
+        it('should allow calling methods like isEnabled on elements of chainable promise', async () => {
+            const check = $$('foo')[0].isEnabled()
+            expect(check).toBeInstanceOf(Promise)
+
+            const result = await check
+            expect(result).toBe(true)
+        })
+
+        it('should allow chaining simple methods with await', async () => {
+            const text = await $$('foo')[0].getText()
+
+            expect(text).toBe(' Valid Text ')
+        })
     })
 })