From 608e967a334d90e3c96cf54d6615be6206ddbe4e Mon Sep 17 00:00:00 2001
From: Gareth Jones <jones258@gmail.com>
Date: Fri, 22 Mar 2024 09:15:31 +1300
Subject: [PATCH] fix(prefer-to-have-style): handle `toHaveProperty` with
 variable property name

---
 .../lib/rules/prefer-to-have-style.js         | 28 +++++++++++++++++++
 src/rules/prefer-to-have-style.js             |  4 +--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/__tests__/lib/rules/prefer-to-have-style.js b/src/__tests__/lib/rules/prefer-to-have-style.js
index dbc7066..f9d72ff 100644
--- 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
index 9440cbd..001bb8c 100644
--- 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)}}`
             ),