ToHaveStyle improvement (#1950)

* update-1

* updating docs

* update

Author: RodBuild

.gitignore

@@ -6,6 +6,7 @@ coverage
 
 .vscode
 .idea
+.DS_Store
 
 *.log
 *.log.*

docs/API.md

@@ -501,6 +501,21 @@ const elem = await $('#elem')
 await expect(elem).toHaveId('elem')
 ```
 
+### toHaveStyle
+
+Checks if an element has specific `CSS` properties. By default, values must match exactly. Only the `CSS` properties you specify are validated; other properties on the element are ignored.
+
+##### Usage
+
+```js
+const elem = await $('#elem')
+await expect(elem).toHaveStyle({
+  'font-family': 'Faktum',
+  'font-weight': '500',
+  'font-size': '12px',
+})
+```
+
 ### toHaveText
 
 Checks if element has a specific text. Can also be called with an array as parameter in the case where the element can have different texts.
@@ -580,7 +595,7 @@ await expect(list).toHaveChildren() // the list has at least one item
 await expect(list).toHaveChildren({ gte: 1 })
 
 await expect(list).toHaveChildren(3) // the list has 3 items
-// same as 
+// same as
 await expect(list).toHaveChildren({ eq: 3 })
 ```
 

src/utils.ts

@@ -309,15 +309,23 @@ export const compareObject = (actual: object | number, expected: string | number
 export const compareStyle = async (
     actualEl: WebdriverIO.Element,
     style: { [key: string]: string },
-    { ignoreCase = true, trim = false }
+    {
+        ignoreCase = false,
+        trim = true,
+        containing = false,
+        atStart = false,
+        atEnd = false,
+        atIndex,
+        replace,
+    }: ExpectWebdriverIO.StringOptions
 ) => {
     let result = true
     const actual: Record<string, string | undefined> = {}
 
     for (const key in style) {
         const css: ParsedCSSValue = await actualEl.getCSSProperty(key)
 
-        let actualVal: string = css.value as string
+        let actualVal: string = String(css.value || '')
         let expectedVal: string = style[key]
 
         if (trim) {
@@ -329,8 +337,26 @@ export const compareStyle = async (
             expectedVal = expectedVal.toLowerCase()
         }
 
-        result = result && actualVal === expectedVal
-        actual[key] = css.value
+        if (containing) {
+            result = actualVal.includes(expectedVal)
+            actual[key] = actualVal
+        } else if (atStart) {
+            result = actualVal.startsWith(expectedVal)
+            actual[key] = actualVal
+        } else if (atEnd) {
+            result = actualVal.endsWith(expectedVal)
+            actual[key] = actualVal
+        } else if (atIndex) {
+            result = actualVal.substring(atIndex, actualVal.length).startsWith(expectedVal)
+            actual[key] = actualVal
+        } else if (replace){
+            const replacedActual = replaceActual(replace, actualVal)
+            result = replacedActual === expectedVal
+            actual[key] = replacedActual
+        } else {
+            result = result && actualVal === expectedVal
+            actual[key] = css.value
+        }
     }
 
     return {

test/matchers/element/toHaveStyle.test.ts

@@ -224,4 +224,132 @@ describe('toHaveStyle', () => {
         expect(result.pass).toBe(true)
         expect(el._attempts).toBe(1)
     })
-})
+
+    test('sucess if style matches with containing', async () => {
+        const el: any = await $('sel')
+        el._attempts = 0
+        let counter = 0
+
+        el.getCSSProperty = vi.fn().mockImplementation((property: string) => {
+            counter++
+            if (counter === Object.keys(mockStyle).length) {
+                counter = 0
+                el._attempts++
+            }
+            return { value: mockStyle[property] }
+        })
+
+        const result = await toHaveStyle.call(
+            {},
+            el,
+            {
+                'font-family': 'Faktum',
+                'font-size': '26',
+                color: '000',
+            },
+            { containing: true }
+        )
+        expect(result.pass).toBe(true)
+        expect(el._attempts).toBe(1)
+    })
+
+    test('sucess if style matches with atStart', async () => {
+        const el: any = await $('sel')
+        el._attempts = 0
+        let counter = 0
+
+        const actualStyle: { [key: string]: string } = {
+            'font-family': 'Faktum Lorem ipsum dolor sit amet',
+            'text-rendering': 'optimizeLegibility',
+            'overflow-wrap': 'break-word',
+        }
+
+        el.getCSSProperty = vi.fn().mockImplementation((property: string) => {
+            counter++
+            if (counter === Object.keys(actualStyle).length) {
+                counter = 0
+                el._attempts++
+            }
+            return { value: actualStyle[property] }
+        })
+
+        const result = await toHaveStyle.call(
+            {},
+            el,
+            {
+                'font-family': 'Faktum',
+                'text-rendering': 'optimize',
+                'overflow-wrap': 'break',
+            },
+            { atStart: true }
+        )
+        expect(result.pass).toBe(true)
+        expect(el._attempts).toBe(1)
+    })
+
+    test('sucess if style matches with atEnd', async () => {
+        const el: any = await $('sel')
+        el._attempts = 0
+        let counter = 0
+
+        const actualStyle: { [key: string]: string } = {
+            'font-family': 'Faktum Lorem ipsum dolor sit amet',
+            'text-rendering': 'optimizeLegibility',
+            'overflow-wrap': 'break-word',
+        }
+
+        el.getCSSProperty = vi.fn().mockImplementation((property: string) => {
+            counter++
+            if (counter === Object.keys(actualStyle).length) {
+                counter = 0
+                el._attempts++
+            }
+            return { value: actualStyle[property] }
+        })
+
+        const result = await toHaveStyle.call(
+            {},
+            el,
+            {
+                'font-family': 'sit amet',
+                'text-rendering': 'Legibility',
+                'overflow-wrap': '-word',
+            },
+            { atEnd: true }
+        )
+        expect(result.pass).toBe(true)
+        expect(el._attempts).toBe(1)
+    })
+
+    test('sucess if style matches with atIndex', async () => {
+        const el: any = await $('sel')
+        el._attempts = 0
+        let counter = 0
+
+        const actualStyle: { [key: string]: string } = {
+            'font-family': 'Faktum Lorem ipsum dolor sit amet',
+            'text-rendering': 'optimizeLegibility',
+            'overflow-wrap': 'break-word',
+        }
+
+        el.getCSSProperty = vi.fn().mockImplementation((property: string) => {
+            counter++
+            if (counter === Object.keys(actualStyle).length) {
+                counter = 0
+                el._attempts++
+            }
+            return { value: actualStyle[property] }
+        })
+
+        const result = await toHaveStyle.call({}, el,
+            {
+                'font-family': 'tum Lorem ipsum dolor sit amet',
+                'text-rendering': 'imizeLegibility',
+                'overflow-wrap': 'ak-word',
+            },
+            { atIndex: 3 })
+        expect(result.pass).toBe(true)
+        expect(el._attempts).toBe(1)
+    })
+
+})