fix: fixed suggestions for 'no-missing-button-type' rule (#1137)

Author: Rel1cx

packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.spec.ts

@@ -5,6 +5,56 @@ import rule, { RULE_NAME } from "./no-missing-button-type";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
+    {
+      code: tsx`<button />;`,
+      errors: [
+        {
+          messageId: "noMissingButtonType",
+          suggestions: [
+            {
+              messageId: "addButtonType",
+              data: { type: "button" },
+              output: tsx`<button type="button" />;`,
+            },
+            {
+              messageId: "addButtonType",
+              data: { type: "submit" },
+              output: tsx`<button type="submit" />;`,
+            },
+            {
+              messageId: "addButtonType",
+              data: { type: "reset" },
+              output: tsx`<button type="reset" />;`,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: tsx`<button type />;`,
+      errors: [
+        {
+          messageId: "noMissingButtonType",
+          suggestions: [
+            {
+              messageId: "addButtonType",
+              data: { type: "button" },
+              output: tsx`<button type="button" />;`,
+            },
+            {
+              messageId: "addButtonType",
+              data: { type: "submit" },
+              output: tsx`<button type="submit" />;`,
+            },
+            {
+              messageId: "addButtonType",
+              data: { type: "reset" },
+              output: tsx`<button type="reset" />;`,
+            },
+          ],
+        },
+      ],
+    },
     {
       code: tsx`<button>Click me</button>;`,
       errors: [
@@ -39,17 +89,17 @@ ruleTester.run(RULE_NAME, rule, {
             {
               messageId: "addButtonType",
               data: { type: "button" },
-              output: tsx`<PolyComponent as="button" type="button">Click me</PolyComponent>;`,
+              output: tsx`<PolyComponent type="button" as="button">Click me</PolyComponent>;`,
             },
             {
               messageId: "addButtonType",
               data: { type: "submit" },
-              output: tsx`<PolyComponent as="button" type="submit">Click me</PolyComponent>;`,
+              output: tsx`<PolyComponent type="submit" as="button">Click me</PolyComponent>;`,
             },
             {
               messageId: "addButtonType",
               data: { type: "reset" },
-              output: tsx`<PolyComponent as="button" type="reset">Click me</PolyComponent>;`,
+              output: tsx`<PolyComponent type="reset" as="button">Click me</PolyComponent>;`,
             },
           ],
         },

packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.ts

@@ -12,9 +12,9 @@ export const RULE_FEATURES = [
 
 export const BUTTON_TYPES = ["button", "submit", "reset"] as const;
 
-export type MessageID =
-  | CamelCase<typeof RULE_NAME>
-  | "addButtonType";
+export type MessageID = CamelCase<typeof RULE_NAME> | RuleSuggestMessageID;
+
+export type RuleSuggestMessageID = "addButtonType";
 
 export default createRule<[], MessageID>({
   meta: {
@@ -55,12 +55,12 @@ export function create(context: RuleContext<MessageID, []>): RuleListener {
           attributeNode,
           propNameOnJsx,
         );
-        if (attributeValue.kind === "some" && typeof attributeValue.value !== "string") {
+        if (attributeValue.kind !== "some" || typeof attributeValue.value !== "string") {
           context.report({
             messageId: "noMissingButtonType",
             node: attributeNode,
             suggest: getSuggest((type) => (fixer: RuleFixer) => {
-              return fixer.replaceText(node, `${propNameOnJsx}="${type}"`);
+              return fixer.replaceText(attributeNode, `${propNameOnJsx}="${type}"`);
             }),
           });
         }
@@ -71,9 +71,7 @@ export function create(context: RuleContext<MessageID, []>): RuleListener {
           messageId: "noMissingButtonType",
           node,
           suggest: getSuggest((type) => (fixer: RuleFixer) => {
-            const lastToken = context.sourceCode.getLastToken(node.openingElement);
-            if (lastToken == null) return null;
-            return fixer.insertTextBefore(lastToken, ` type="${type}"`);
+            return fixer.insertTextAfter(node.openingElement.name, ` type="${type}"`);
           }),
         });
       }