fix: turned out to be a little more complex

testing-library · Nov 30, 2023 · 90296fc · 90296fc
1 parent 118f295
commit 90296fc
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 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(

diff --git a/src/to-have-style.js b/src/to-have-style.js
@@ -17,12 +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) === 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,
+      )
+    })
   )
 }