Fix toHaveChildren matcher (#174)

* fix to have children matcher

* fix typos

README.md

@@ -367,7 +367,7 @@ expect(elem).toBeChecked()
 
 ### toHaveHref
 
-Checks if link element has a specifc link target.
+Checks if link element has a specific link target.
 
 ##### Usage
 
@@ -389,7 +389,7 @@ expect(link).toHaveLink('https://webdriver.io')
 
 ### toHaveHrefContaining
 
-Checks if link element contains a specifc link target.
+Checks if link element contains a specific link target.
 
 ##### Usage
 
@@ -468,28 +468,34 @@ expect(elem).toBeVisibleInViewport()
 
 ### toHaveChildren
 
-Checks amount of fetched elements using [`$$`](/docs/api/browser/$$.html) command.
+Checks amount of the element's children by calling `element.$('./*')` command.
 
 ##### Usage
 
 ```js
-const elems = $$('div')
-expect(elems).toHaveChildren({ gte: 10 })
+const list = $('ul')
+expect(list).toHaveChildren() // the list has at least one item
 // same as
-assert.ok(elems.length >= 10)
+expect(list).toHaveChildren({ gte: 1 })
+
+expect(list).toHaveChildren(3) // the list has 3 items
+// same as 
+expect(list).toHaveChildren({ eq: 3 })
 ```
 
 ### toBeElementsArrayOfSize
 
-Same as `toHaveChildren`.
+Checks amount of fetched elements using [`$$`](/docs/api/browser/$$.html) command.
 
 ##### Usage
 
 ```js
-const elems = $$('div')
-expect(elems).toBeElementsArrayOfSize({ gte: 10 })
+const listItems = $$('ul>li')
+expect(listItems).toBeElementsArrayOfSize(5) // 5 items in the list
+
+expect(listItems).toBeElementsArrayOfSize({ lte: 10 })
 // same as
-assert.ok(elems.length >= 10)
+assert.ok(listItems.length <= 10)
 ```
 
 ## Error messages

src/matchers/element/toHaveChildren.ts

@@ -9,10 +9,17 @@ async function condition(el: WebdriverIO.Element, gte: number, lte: number, eq?:
     }
 }
 
-function toHaveChildrenFn(received: WebdriverIO.Element | WebdriverIO.ElementArray, options: ExpectWebdriverIO.NumberOptions = {}): any {
+function toHaveChildrenFn(received: WebdriverIO.Element | WebdriverIO.ElementArray, size?: number | ExpectWebdriverIO.NumberOptions, options: ExpectWebdriverIO.NumberOptions = {}): any {
     const isNot = this.isNot
     const { expectation = 'children', verb = 'have' } = this
 
+    // type check
+    if (typeof size === 'number') {
+        options.eq = size
+    } else if (typeof size === 'object') {
+        options = { ...options, ...size }
+    }
+
     const eq = options.eq
     const gte = options.gte || 1
     const lte = options.lte || 0
@@ -31,7 +38,8 @@ function toHaveChildrenFn(received: WebdriverIO.Element | WebdriverIO.ElementArr
         updateElementsArray(pass, received, el)
 
         const error = numberError(gte, lte, eq)
-        const message = enhanceError(el, error, wrapExpectedWithArray(el, children, error), this, verb, expectation, '', options)
+        const expected = wrapExpectedWithArray(el, children, error)
+        const message = enhanceError(el, expected, children, this, verb, expectation, '', options)
 
         return {
             pass,

test/matchers/element/toHaveChildren.test.ts

@@ -0,0 +1,59 @@
+import { toHaveChildren } from '../../../src/matchers/element/toHaveChildren'
+
+describe('toHaveChildren', () => {
+    test('no value', async () => {
+        const el = await $('sel')
+
+        const result = await toHaveChildren(el, { wait: 0 })
+        expect(result.pass).toBe(true)
+    })
+
+    test('exact number value', async () => {
+        const el = await $('sel')
+
+        const result = await toHaveChildren(el, 2, { wait: 1 })
+        expect(result.pass).toBe(true)
+    })
+
+    test('exact value', async () => {
+        const el = await $('sel')
+
+        const result = await toHaveChildren(el, { eq: 2, wait: 1 })
+        expect(result.pass).toBe(true)
+    })
+
+    test('gte value', async () => {
+        const el = await $('sel')
+
+        const result = await toHaveChildren(el, { gte: 2, wait: 1 })
+        expect(result.pass).toBe(true)
+    })
+
+    test('exact value - failure', async () => {
+        const el = await $('sel')
+
+        const result = await toHaveChildren(el, { eq: 3, wait: 1 })
+        expect(result.pass).toBe(false)
+    })
+
+    test('lte value - failure', async () => {
+        const el = await $('sel')
+
+        const result = await toHaveChildren(el, { lte: 1, wait: 0 })
+        expect(result.pass).toBe(false)
+    })
+
+    test('.not exact value - failure', async () => {
+        const el = await $('sel')
+
+        const result = await toHaveChildren.bind({ isNot: true })(el, { eq: 2, wait: 0 })
+        expect(result.pass).toBe(true)
+    })
+
+    test('.not exact value - success', async () => {
+        const el = await $('sel')
+
+        const result = await toHaveChildren.bind({ isNot: true })(el, { eq: 3, wait: 1 })
+        expect(result.pass).toBe(false)
+    })
+})

types/expect-webdriverio.d.ts

@@ -171,7 +171,7 @@ declare namespace ExpectWebdriverIO {
         * `WebdriverIO.Element` -> `$$('./*').length`
         * supports less / greater then or equals to be passed in options
         */
-        toHaveChildren(options?: ExpectWebdriverIO.NumberOptions): R;
+        toHaveChildren(size?: number | ExpectWebdriverIO.NumberOptions, options?: ExpectWebdriverIO.NumberOptions): R;
 
         /**
         * `WebdriverIO.Element` -> `getAttribute` href