fix: handle different use cases

testing-library · Nov 29, 2023 · 118f295 · 118f295
1 parent e7aee18
commit 118f295
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/src/__tests__/to-have-style.js b/src/__tests__/to-have-style.js
@@ -119,7 +119,7 @@ describe('.toHaveStyle', () => {
     )
   })
 
-  test('handles inline custom properties', () => {
+  test('handles inline custom properties (with uppercase letters)', () => {
     const {queryByTestId} = render(`
       <span data-testid="color-example" style="--accentColor: blue">Hello World</span>
     `)
@@ -205,7 +205,7 @@ describe('.toHaveStyle', () => {
         <span data-testid="color-example" style="font-size: 12px">Hello World</span>
       `)
       expect(queryByTestId('color-example')).toHaveStyle({
-        fontSize: 12
+        fontSize: 12,
       })
     })
 
@@ -214,7 +214,7 @@ describe('.toHaveStyle', () => {
         <span data-testid="color-example" style="font-size: 12rem">Hello World</span>
       `)
       expect(() => {
-        expect(queryByTestId('color-example')).toHaveStyle({ fontSize: '12px' })
+        expect(queryByTestId('color-example')).toHaveStyle({fontSize: '12px'})
       }).toThrowError()
     })
 

diff --git a/src/to-have-style.js b/src/to-have-style.js
@@ -20,7 +20,8 @@ function isSubset(styles, computedStyle) {
     Object.entries(styles).every(
       ([prop, value]) =>
         computedStyle[prop] === value ||
-        computedStyle.getPropertyValue(prop) === value,
+        computedStyle.getPropertyValue(prop) === value ||
+        computedStyle.getPropertyValue(prop.toLowerCase()) === value,
     )
   )
 }