fix(prefer-to-have-style): handle toHaveProperty with variable prop…

…erty name (#347)
testing-library · Mar 21, 2024 · 622c191 · 622c191
1 parent 93bda4a
commit 622c191
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/src/__tests__/lib/rules/prefer-to-have-style.js b/src/__tests__/lib/rules/prefer-to-have-style.js
@@ -177,5 +177,33 @@ ruleTester.run("prefer-to-have-style", rule, {
       errors,
       output: null,
     },
+    {
+      code: `
+        expect(myStencil({color: '--my-var'}).style).toHaveProperty(
+          myStencil.vars.color,
+          'var(--my-var)'
+        );
+      `,
+      errors,
+      output: `
+        expect(myStencil({color: '--my-var'})).toHaveStyle(
+          {[myStencil.vars.color]: 'var(--my-var)'}
+        );
+      `,
+    },
+    {
+      code: `
+        expect(myStencil({color: '--my-var'}).style).not.toHaveProperty(
+          myStencil.vars.color,
+          'var(--my-var)'
+        );
+      `,
+      errors,
+      output: `
+        expect(myStencil({color: '--my-var'})).not.toHaveStyle(
+          {[myStencil.vars.color]: 'var(--my-var)'}
+        );
+      `,
+    },
   ],
 });
diff --git a/src/rules/prefer-to-have-style.js b/src/rules/prefer-to-have-style.js
@@ -256,7 +256,7 @@ export const create = (context) => {
             fixer.replaceText(matcher, "toHaveStyle"),
             fixer.replaceTextRange(
               [styleName.range[0], styleValue.range[1]],
-              `{${camelCase(styleName.value)}: ${context
+              `{${getReplacementObjectProperty(styleName)}: ${context
                 .getSourceCode()
                 .getText(styleValue)}}`
             ),
@@ -288,7 +288,7 @@ export const create = (context) => {
             fixer.replaceText(matcher, "toHaveStyle"),
             fixer.replaceTextRange(
               [styleName.range[0], styleValue.range[1]],
-              `{${camelCase(styleName.value)}: ${context
+              `{${getReplacementObjectProperty(styleName)}: ${context
                 .getSourceCode()
                 .getText(styleValue)}}`
             ),