fix: Changed toHaveStyle to use getPropertyValue instead of accessing the property directly (#285)

* Changed toHaveStyle to use getPropertyValue instead of accessing the property directly
* Using px instead of rem
* changed test description
* Update src/__tests__/to-have-style.js
* Apply suggestions from code review

Co-authored-by: Ernesto García <[email protected]>

Author: luanraithz

src/__tests__/to-have-style.js

@@ -103,6 +103,9 @@ describe('.toHaveStyle', () => {
       expect(container.querySelector('.label')).toHaveStyle('color white'),
     ).toThrowError()
 
+    expect(() =>
+      expect(container.querySelector('.label')).toHaveStyle('--color: black'),
+    ).toThrowError()
     document.body.removeChild(style)
     document.body.removeChild(container)
   })
@@ -116,6 +119,33 @@ describe('.toHaveStyle', () => {
     )
   })
 
+  test('handles inline custom properties', () => {
+    const {queryByTestId} = render(`
+      <span data-testid="color-example" style="--color: blue">Hello World</span>
+    `)
+    expect(queryByTestId('color-example')).toHaveStyle('--color: blue')
+  })
+
+  test('handles global custom properties', () => {
+    const style = document.createElement('style')
+    style.innerHTML = `
+      div {
+        --color: blue;
+      }
+    `
+
+    const {container} = render(`
+      <div>
+        Hello world
+      </div>
+    `)
+
+    document.body.appendChild(style)
+    document.body.appendChild(container)
+
+    expect(container).toHaveStyle(`--color: blue`)
+  })
+
   test('properly normalizes colors for border', () => {
     const {queryByTestId} = render(`
     <span data-testid="color-example" style="border: 1px solid #fff">Hello World</span>
@@ -170,6 +200,24 @@ describe('.toHaveStyle', () => {
       })
     })
 
+    test('Uses px as the default unit', () => {
+      const {queryByTestId} = render(`
+        <span data-testid="color-example" style="font-size: 12px">Hello World</span>
+      `)
+      expect(queryByTestId('color-example')).toHaveStyle({
+        fontSize: 12
+      })
+    })
+
+    test('Fails with an invalid unit', () => {
+      const {queryByTestId} = render(`
+        <span data-testid="color-example" style="font-size: 12rem">Hello World</span>
+      `)
+      expect(() => {
+        expect(queryByTestId('color-example')).toHaveStyle({ fontSize: '12px' })
+      }).toThrowError()
+    })
+
     test('supports dash-cased property names', () => {
       const {container} = render(`
         <div class="label" style="background-color: blue; height: 100%">

src/to-have-style.js

@@ -22,7 +22,7 @@ function isSubset(styles, computedStyle) {
     Object.entries(styles).every(
       ([prop, value]) =>
         computedStyle[prop] === value ||
-        computedStyle[prop.toLowerCase()] === value,
+        computedStyle.getPropertyValue(prop.toLowerCase()) === value,
     )
   )
 }