From afc8d779d9cb4d5e178b3c71e9f69325f4aedafa Mon Sep 17 00:00:00 2001
From: Bea Esguerra <beaesguerra@users.noreply.github.com>
Date: Fri, 13 Dec 2024 16:10:11 -0700
Subject: [PATCH] Update error message for aphrodite-add-style-variable-name
 rule (#1096)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary:
Updating the error message so it is more useful (noticed this after testing with the demo project)

Previously: `Variable name "div" does not match tag name "div". Variable name should be "StyledDiv"`

<img width="1203" alt="Screenshot 2024-12-13 at 2 26 27 PM" src="https://github.com/user-attachments/assets/1d3fd862-461f-4afd-b4bf-10c4ae7368be" />



New: `Variable name "div" does not match the expected naming convention. Expected: "StyledDiv"`

Issue: FEI-5952

## Test plan:
- Tests continue to pass
- Will integrate with the demo project once this update is released!

Author: beaesguerra

Reviewers: kevinb-khan

Required Reviewers:

Approved By: kevinb-khan

Checks: ✅ Test (macos-latest, 20.x), ✅ CodeQL, ✅ gerald, ✅ Lint, typecheck, and coverage check (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Analyze (javascript), ✅ gerald, ⏭️  dependabot

Pull Request URL: https://github.com/Khan/wonder-stuff/pull/1096
---
 .changeset/perfect-cycles-fry.md                          | 5 +++++
 .../src/rules/aphrodite-add-style-variable-name.ts        | 3 +--
 .../test/rules/aphrodite-add-style-variable-name.test.ts  | 8 --------
 3 files changed, 6 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/perfect-cycles-fry.md

diff --git a/.changeset/perfect-cycles-fry.md b/.changeset/perfect-cycles-fry.md
new file mode 100644
index 00000000..4affaead
--- /dev/null
+++ b/.changeset/perfect-cycles-fry.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/eslint-plugin": patch
+---
+
+Update error message for `aphrodite-add-style-variable-name` rule
diff --git a/packages/eslint-plugin-khan/src/rules/aphrodite-add-style-variable-name.ts b/packages/eslint-plugin-khan/src/rules/aphrodite-add-style-variable-name.ts
index 10afefad..25f6545b 100644
--- a/packages/eslint-plugin-khan/src/rules/aphrodite-add-style-variable-name.ts
+++ b/packages/eslint-plugin-khan/src/rules/aphrodite-add-style-variable-name.ts
@@ -10,7 +10,7 @@ const createRule = ESLintUtils.RuleCreator<MyPluginDocs>(
 type Options = [];
 type MessageIds = "errorString";
 
-const message = `Variable name "{{ variableName }}" does not match tag name "{{ tagName }}". Variable name should be "{{ expectedName }}"`;
+const message = `Variable name "{{ variableName }}" does not match the expected naming convention. Expected: "{{ expectedName }}"`;
 
 /**
  * Converts a string into PascalCase.
@@ -99,7 +99,6 @@ export default createRule<Options, MessageIds>({
                         messageId: "errorString",
                         data: {
                             variableName,
-                            tagName,
                             expectedName,
                         },
                     });
diff --git a/packages/eslint-plugin-khan/test/rules/aphrodite-add-style-variable-name.test.ts b/packages/eslint-plugin-khan/test/rules/aphrodite-add-style-variable-name.test.ts
index 721bf41a..76168827 100644
--- a/packages/eslint-plugin-khan/test/rules/aphrodite-add-style-variable-name.test.ts
+++ b/packages/eslint-plugin-khan/test/rules/aphrodite-add-style-variable-name.test.ts
@@ -80,7 +80,6 @@ ruleTester.run(ruleName, rule, {
                     messageId: "errorString",
                     data: {
                         variableName: "foo",
-                        tagName: "div",
                         expectedName: "StyledDiv",
                     },
                 },
@@ -93,7 +92,6 @@ ruleTester.run(ruleName, rule, {
                     messageId: "errorString",
                     data: {
                         variableName: "div",
-                        tagName: "div",
                         expectedName: "StyledDiv",
                     },
                 },
@@ -106,7 +104,6 @@ ruleTester.run(ruleName, rule, {
                     messageId: "errorString",
                     data: {
                         variableName: "span",
-                        tagName: "span",
                         expectedName: "StyledSpan",
                     },
                 },
@@ -119,7 +116,6 @@ ruleTester.run(ruleName, rule, {
                     messageId: "errorString",
                     data: {
                         variableName: "p",
-                        tagName: "p",
                         expectedName: "StyledP",
                     },
                 },
@@ -132,7 +128,6 @@ ruleTester.run(ruleName, rule, {
                     messageId: "errorString",
                     data: {
                         variableName: "styledDiv",
-                        tagName: "div",
                         expectedName: "StyledDiv",
                     },
                 },
@@ -145,7 +140,6 @@ ruleTester.run(ruleName, rule, {
                     messageId: "errorString",
                     data: {
                         variableName: "FooBar",
-                        tagName: "foo-bar",
                         expectedName: "StyledFooBar",
                     },
                 },
@@ -158,7 +152,6 @@ ruleTester.run(ruleName, rule, {
                     messageId: "errorString",
                     data: {
                         variableName: "FooBar",
-                        tagName: "foo_bar",
                         expectedName: "StyledFooBar",
                     },
                 },
@@ -171,7 +164,6 @@ ruleTester.run(ruleName, rule, {
                     messageId: "errorString",
                     data: {
                         variableName: "FooBar",
-                        tagName: "FooBar",
                         expectedName: "StyledFooBar",
                     },
                 },