fix(prefer-to-have-style): handle toHaveProperty with variable property name (#347)

Author: G-Rath

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)'}
+        );
+      `,
+    },
   ],
 });

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)}}`
             ),