fix: support uppercase custom props in toHaveStyle (#552)

testing-library · Nov 30, 2023 · b7b7c6a · b7b7c6a
1 parent 4ae0231
commit b7b7c6a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/src/__tests__/to-have-style.js b/src/__tests__/to-have-style.js
@@ -70,6 +70,7 @@ describe('.toHaveStyle', () => {
       background-color: black;
       color: white;
       float: left;
+      --var-name: 0px;
       transition: opacity 0.2s ease-out, top 0.3s cubic-bezier(1.175, 0.885, 0.32, 1.275);
     }
   `
@@ -92,6 +93,11 @@ describe('.toHaveStyle', () => {
       ),
     ).toThrowError()
 
+    // Custom property names are case sensitive
+    expect(() =>
+      expect(container.querySelector('.label')).toHaveStyle('--VAR-NAME: 0px;'),
+    ).toThrowError()
+
     // Make sure the test fails if the css syntax is not valid
     expect(() =>
       expect(container.querySelector('.label')).not.toHaveStyle(
@@ -119,11 +125,11 @@ describe('.toHaveStyle', () => {
     )
   })
 
-  test('handles inline custom properties', () => {
+  test('handles inline custom properties (with uppercase letters)', () => {
     const {queryByTestId} = render(`
-      <span data-testid="color-example" style="--color: blue">Hello World</span>
+      <span data-testid="color-example" style="--accentColor: blue">Hello World</span>
     `)
-    expect(queryByTestId('color-example')).toHaveStyle('--color: blue')
+    expect(queryByTestId('color-example')).toHaveStyle('--accentColor: blue')
   })
 
   test('handles global custom properties', () => {
@@ -205,7 +211,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 +220,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
@@ -17,11 +17,17 @@ function getStyleDeclaration(document, css) {
 function isSubset(styles, computedStyle) {
   return (
     !!Object.keys(styles).length &&
-    Object.entries(styles).every(
-      ([prop, value]) =>
-        computedStyle[prop] === value ||
-        computedStyle.getPropertyValue(prop.toLowerCase()) === value,
-    )
+    Object.entries(styles).every(([prop, value]) => {
+      const isCustomProperty = prop.startsWith('--')
+      const spellingVariants = [prop]
+      if (!isCustomProperty) spellingVariants.push(prop.toLowerCase())
+
+      return spellingVariants.some(
+        name =>
+          computedStyle[name] === value ||
+          computedStyle.getPropertyValue(name) === value,
+      )
+    })
   )
 }