feat: add autofix for no-missing-context-display-name (#1128)

Author: k-yle

packages/plugins/eslint-plugin-react-x/src/rules/no-missing-context-display-name.spec.ts

@@ -12,6 +12,10 @@ ruleTester.run(RULE_NAME, rule, {
     {
       code: tsx`const ctx = createContext();`,
       errors: [{ messageId: "noMissingContextDisplayName" }],
+      output: tsx`
+        const ctx = createContext()
+        ctx.displayName = "ctx";
+      `,
     },
     {
       code: tsx`
@@ -20,13 +24,24 @@ ruleTester.run(RULE_NAME, rule, {
         ctx1.displayName = "ctx";
       `,
       errors: [{ messageId: "noMissingContextDisplayName" }],
+      output: tsx`
+        const ctx1 = createContext();
+        const ctx2 = createContext()
+        ctx2.displayName = "ctx2";
+        ctx1.displayName = "ctx";
+      `,
     },
     {
       code: tsx`
         const ctx = createContext();
         ctx.displayname = "ctx";
       `,
       errors: [{ messageId: "noMissingContextDisplayName" }],
+      output: tsx`
+        const ctx = createContext()
+        ctx.displayName = "ctx";
+        ctx.displayname = "ctx";
+      `,
     },
     {
       code: tsx`
@@ -35,6 +50,37 @@ ruleTester.run(RULE_NAME, rule, {
       `,
       errors: [{ messageId: "noMissingContextDisplayName" }],
     },
+    {
+      // this doesn't make sense, it's just to test the autofixer
+      code: tsx`
+        const [nonsense] = createContext();
+        const { invalid } = createContext();
+      `,
+      errors: [
+        { messageId: "noMissingContextDisplayName" },
+        { messageId: "noMissingContextDisplayName" },
+      ],
+    },
+    {
+      // not autofixable
+      code: tsx`
+        const contexts = { a: createContext(), b: createContext() };
+      `,
+      errors: [
+        { messageId: "noMissingContextDisplayName" },
+        { messageId: "noMissingContextDisplayName" },
+      ],
+    },
+    {
+      // not autofixable
+      code: tsx`
+        const [a, b] = [createContext(), createContext()];
+      `,
+      errors: [
+        { messageId: "noMissingContextDisplayName" },
+        { messageId: "noMissingContextDisplayName" },
+      ],
+    },
   ],
   valid: [
     ...allFunctions,

packages/plugins/eslint-plugin-react-x/src/rules/no-missing-context-display-name.ts

@@ -20,6 +20,7 @@ export default createRule<[], MessageID>({
       description: "Enforces that all contexts have a `displayName` which can be used in devtools.",
       [Symbol.for("rule_features")]: RULE_FEATURES,
     },
+    fixable: "code",
     messages: {
       noMissingContextDisplayName: "Add missing 'displayName' for context.",
     },
@@ -62,6 +63,9 @@ export function create(context: RuleContext<MessageID, []>): RuleListener {
           context.report({
             messageId: "noMissingContextDisplayName",
             node: id,
+            fix: id.type === T.Identifier && id.parent === call.parent
+              ? ((fixer) => fixer.insertTextAfter(call, `\n${id.name}.displayName = ${JSON.stringify(id.name)}`))
+              : null,
           });
         }
       }