From 4436f175424a4a5e70197b02af17438273960f6f Mon Sep 17 00:00:00 2001
From: Mykola Grybyk <25589559+mgrybyk@users.noreply.github.com>
Date: Mon, 31 Aug 2020 15:17:11 +0200
Subject: [PATCH] Fix toHaveChildren matcher (#174)

* fix to have children matcher

* fix typos
---
 README.md                                    | 26 +++++----
 src/matchers/element/toHaveChildren.ts       | 12 +++-
 test/matchers/element/toHaveChildren.test.ts | 59 ++++++++++++++++++++
 types/expect-webdriverio.d.ts                |  2 +-
 4 files changed, 86 insertions(+), 13 deletions(-)
 create mode 100644 test/matchers/element/toHaveChildren.test.ts

diff --git a/README.md b/README.md
index dfd6ce31..fd58427b 100644
--- a/README.md
+++ b/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
diff --git a/src/matchers/element/toHaveChildren.ts b/src/matchers/element/toHaveChildren.ts
index 5b5fac4d..bb920a04 100644
--- a/src/matchers/element/toHaveChildren.ts
+++ b/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,
diff --git a/test/matchers/element/toHaveChildren.test.ts b/test/matchers/element/toHaveChildren.test.ts
new file mode 100644
index 00000000..e0995d9a
--- /dev/null
+++ b/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)
+    })
+})
diff --git a/types/expect-webdriverio.d.ts b/types/expect-webdriverio.d.ts
index ac776717..a85376b8 100644
--- a/types/expect-webdriverio.d.ts
+++ b/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