From ac71f14a0a4b54dbf33dc6d3685c696d5952ba66 Mon Sep 17 00:00:00 2001
From: waynzh <waynzh19@gmail.com>
Date: Mon, 16 Dec 2024 17:54:11 +0800
Subject: [PATCH 1/2] test: add suggestions to `no-unused-vars` tests

---
 tests/lib/rules/jsx-uses-vars.js          | 34 +++++++++++-
 tests/lib/rules/script-setup-uses-vars.js | 68 ++++++++++++++++++++++-
 tests/lib/script-setup-vars.js            | 65 +++++++++++++++++++++-
 3 files changed, 159 insertions(+), 8 deletions(-)

diff --git a/tests/lib/rules/jsx-uses-vars.js b/tests/lib/rules/jsx-uses-vars.js
index 680df0161..458f03692 100644
--- a/tests/lib/rules/jsx-uses-vars.js
+++ b/tests/lib/rules/jsx-uses-vars.js
@@ -108,7 +108,21 @@ describe('jsx-uses-vars', () => {
       `,
         errors: [
           {
-            message: "'SomeComponent' is defined but never used."
+            message: "'SomeComponent' is defined but never used.",
+            suggestions: [
+              {
+                desc: "Remove unused variable 'SomeComponent'.",
+                output: `
+        /* eslint vue/jsx-uses-vars: 1 */
+        import './SomeComponent.jsx';
+        export default {
+          render () {
+            return <div></div>;
+          },
+        };
+      `
+              }
+            ]
           }
         ]
       },
@@ -128,7 +142,23 @@ describe('jsx-uses-vars', () => {
       `,
         errors: [
           {
-            message: "'wrapper' is assigned a value but never used."
+            message: "'wrapper' is assigned a value but never used.",
+            suggestions: [
+              {
+                desc: "Remove unused variable 'wrapper'.",
+                output: `
+        /* eslint vue/jsx-uses-vars: 1 */
+        import SomeComponent from './SomeComponent.jsx';
+        
+
+        export default {
+          render () {
+            return <div></div>;
+          },
+        };
+      `
+              }
+            ]
           }
         ]
       }
diff --git a/tests/lib/rules/script-setup-uses-vars.js b/tests/lib/rules/script-setup-uses-vars.js
index f903a3f9b..06241a703 100644
--- a/tests/lib/rules/script-setup-uses-vars.js
+++ b/tests/lib/rules/script-setup-uses-vars.js
@@ -260,7 +260,37 @@ describe('script-setup-uses-vars', () => {
         errors: [
           {
             message: "'Bar' is defined but never used.",
-            line: 6
+            line: 6,
+            suggestions: [
+              {
+                desc: "Remove unused variable 'Bar'.",
+                output: `
+        <script setup>
+          /* eslint vue/script-setup-uses-vars: 1 */
+          // imported components are also directly usable in template
+          import Foo from './Foo.vue'
+          import './Bar.vue'
+          import { ref } from 'vue'
+
+          // write Composition API code just like in a normal setup()
+          // but no need to manually return everything
+          const count = ref(0)
+          const inc = () => {
+            count.value++
+          }
+          const foo = ref(42)
+          console.log(foo.value)
+          const bar = ref(42)
+          bar.value++
+          const baz = ref(42)
+        </script>
+
+        <template>
+          <Foo :count="count" @click="inc" />
+        </template>
+        `
+              }
+            ]
           },
           {
             message: "'baz' is assigned a value but never used.",
@@ -285,7 +315,22 @@ describe('script-setup-uses-vars', () => {
         errors: [
           {
             message: "'camelCase' is defined but never used.",
-            line: 4
+            line: 4,
+            suggestions: [
+              {
+                desc: "Remove unused variable 'camelCase'.",
+                output: `
+        <script setup>
+          /* eslint vue/script-setup-uses-vars: 1 */
+          import './component.vue'
+        </script>
+
+        <template>
+          <CamelCase />
+        </template>
+        `
+              }
+            ]
           }
         ]
       },
@@ -308,7 +353,24 @@ describe('script-setup-uses-vars', () => {
         errors: [
           {
             message: "'msg' is assigned a value but never used.",
-            line: 5
+            line: 5,
+            suggestions: [
+              {
+                desc: "Remove unused variable 'msg'.",
+                output: `
+        <script setup>
+          /* eslint vue/script-setup-uses-vars: 1 */
+          if (a) {
+            
+          }
+        </script>
+
+        <template>
+          <div>{{ msg }}</div>
+        </template>
+        `
+              }
+            ]
           }
         ]
       },
diff --git a/tests/lib/script-setup-vars.js b/tests/lib/script-setup-vars.js
index 49a4fb1ab..31823c841 100644
--- a/tests/lib/script-setup-vars.js
+++ b/tests/lib/script-setup-vars.js
@@ -220,7 +220,36 @@ describe('vue-eslint-parser should properly mark the variables used in the templ
         errors: [
           {
             message: "'Bar' is defined but never used.",
-            line: 5
+            line: 5,
+            suggestions: [
+              {
+                desc: "Remove unused variable 'Bar'.",
+                output: `
+        <script setup>
+          // imported components are also directly usable in template
+          import Foo from './Foo.vue'
+          import './Bar.vue'
+          import { ref } from 'vue'
+
+          // write Composition API code just like in a normal setup()
+          // but no need to manually return everything
+          const count = ref(0)
+          const inc = () => {
+            count.value++
+          }
+          const foo = ref(42)
+          console.log(foo.value)
+          const bar = ref(42)
+          bar.value++
+          const baz = ref(42)
+        </script>
+
+        <template>
+          <Foo :count="count" @click="inc" />
+        </template>
+        `
+              }
+            ]
           },
           {
             message: "'baz' is assigned a value but never used.",
@@ -244,7 +273,21 @@ describe('vue-eslint-parser should properly mark the variables used in the templ
         errors: [
           {
             message: "'camelCase' is defined but never used.",
-            line: 3
+            line: 3,
+            suggestions: [
+              {
+                desc: "Remove unused variable 'camelCase'.",
+                output: `
+        <script setup>
+          import './component.vue'
+        </script>
+
+        <template>
+          <CamelCase />
+        </template>
+        `
+              }
+            ]
           }
         ]
       },
@@ -266,7 +309,23 @@ describe('vue-eslint-parser should properly mark the variables used in the templ
         errors: [
           {
             message: "'msg' is assigned a value but never used.",
-            line: 4
+            line: 4,
+            suggestions: [
+              {
+                desc: "Remove unused variable 'msg'.",
+                output: `
+        <script setup>
+          if (a) {
+            
+          }
+        </script>
+
+        <template>
+          <div>{{ msg }}</div>
+        </template>
+        `
+              }
+            ]
           }
         ]
       },

From 603e26f30866d380308bffb9fa10c21c45088ec3 Mon Sep 17 00:00:00 2001
From: waynzh <waynzh19@gmail.com>
Date: Mon, 16 Dec 2024 18:14:45 +0800
Subject: [PATCH 2/2] Add version check

---
 tests/lib/rules/jsx-uses-vars.js          | 32 +++++++++-------
 tests/lib/rules/script-setup-uses-vars.js | 46 +++++++++++++----------
 tests/lib/script-setup-vars.js            | 45 ++++++++++++----------
 3 files changed, 70 insertions(+), 53 deletions(-)

diff --git a/tests/lib/rules/jsx-uses-vars.js b/tests/lib/rules/jsx-uses-vars.js
index 458f03692..81d907dae 100644
--- a/tests/lib/rules/jsx-uses-vars.js
+++ b/tests/lib/rules/jsx-uses-vars.js
@@ -4,12 +4,12 @@
  */
 'use strict'
 
-const eslint = require('../../eslint-compat')
+const semver = require('semver')
+const { RuleTester, ESLint } = require('../../eslint-compat')
 const rule = require('../../../lib/rules/jsx-uses-vars')
 const { getCoreRule } = require('../../../lib/utils')
 const ruleNoUnusedVars = getCoreRule('no-unused-vars')
 
-const RuleTester = eslint.RuleTester
 const ruleTester = new RuleTester({
   languageOptions: {
     ecmaVersion: 6,
@@ -109,10 +109,11 @@ describe('jsx-uses-vars', () => {
         errors: [
           {
             message: "'SomeComponent' is defined but never used.",
-            suggestions: [
-              {
-                desc: "Remove unused variable 'SomeComponent'.",
-                output: `
+            suggestions: semver.gte(ESLint.version, '9.17.0')
+              ? [
+                  {
+                    desc: "Remove unused variable 'SomeComponent'.",
+                    output: `
         /* eslint vue/jsx-uses-vars: 1 */
         import './SomeComponent.jsx';
         export default {
@@ -121,8 +122,9 @@ describe('jsx-uses-vars', () => {
           },
         };
       `
-              }
-            ]
+                  }
+                ]
+              : null
           }
         ]
       },
@@ -143,10 +145,11 @@ describe('jsx-uses-vars', () => {
         errors: [
           {
             message: "'wrapper' is assigned a value but never used.",
-            suggestions: [
-              {
-                desc: "Remove unused variable 'wrapper'.",
-                output: `
+            suggestions: semver.gte(ESLint.version, '9.17.0')
+              ? [
+                  {
+                    desc: "Remove unused variable 'wrapper'.",
+                    output: `
         /* eslint vue/jsx-uses-vars: 1 */
         import SomeComponent from './SomeComponent.jsx';
         
@@ -157,8 +160,9 @@ describe('jsx-uses-vars', () => {
           },
         };
       `
-              }
-            ]
+                  }
+                ]
+              : null
           }
         ]
       }
diff --git a/tests/lib/rules/script-setup-uses-vars.js b/tests/lib/rules/script-setup-uses-vars.js
index 06241a703..cae0f017e 100644
--- a/tests/lib/rules/script-setup-uses-vars.js
+++ b/tests/lib/rules/script-setup-uses-vars.js
@@ -5,12 +5,12 @@
  */
 'use strict'
 
-const eslint = require('../../eslint-compat')
+const semver = require('semver')
+const { RuleTester, ESLint } = require('../../eslint-compat')
 const rule = require('../../../lib/rules/script-setup-uses-vars')
 const { getCoreRule } = require('../../../lib/utils')
 const ruleNoUnusedVars = getCoreRule('no-unused-vars')
 
-const RuleTester = eslint.RuleTester
 const ruleTester = new RuleTester({
   languageOptions: {
     parser: require('vue-eslint-parser'),
@@ -261,10 +261,11 @@ describe('script-setup-uses-vars', () => {
           {
             message: "'Bar' is defined but never used.",
             line: 6,
-            suggestions: [
-              {
-                desc: "Remove unused variable 'Bar'.",
-                output: `
+            suggestions: semver.gte(ESLint.version, '9.17.0')
+              ? [
+                  {
+                    desc: "Remove unused variable 'Bar'.",
+                    output: `
         <script setup>
           /* eslint vue/script-setup-uses-vars: 1 */
           // imported components are also directly usable in template
@@ -289,8 +290,9 @@ describe('script-setup-uses-vars', () => {
           <Foo :count="count" @click="inc" />
         </template>
         `
-              }
-            ]
+                  }
+                ]
+              : null
           },
           {
             message: "'baz' is assigned a value but never used.",
@@ -316,10 +318,11 @@ describe('script-setup-uses-vars', () => {
           {
             message: "'camelCase' is defined but never used.",
             line: 4,
-            suggestions: [
-              {
-                desc: "Remove unused variable 'camelCase'.",
-                output: `
+            suggestions: semver.gte(ESLint.version, '9.17.0')
+              ? [
+                  {
+                    desc: "Remove unused variable 'camelCase'.",
+                    output: `
         <script setup>
           /* eslint vue/script-setup-uses-vars: 1 */
           import './component.vue'
@@ -329,8 +332,9 @@ describe('script-setup-uses-vars', () => {
           <CamelCase />
         </template>
         `
-              }
-            ]
+                  }
+                ]
+              : null
           }
         ]
       },
@@ -354,10 +358,11 @@ describe('script-setup-uses-vars', () => {
           {
             message: "'msg' is assigned a value but never used.",
             line: 5,
-            suggestions: [
-              {
-                desc: "Remove unused variable 'msg'.",
-                output: `
+            suggestions: semver.gte(ESLint.version, '9.17.0')
+              ? [
+                  {
+                    desc: "Remove unused variable 'msg'.",
+                    output: `
         <script setup>
           /* eslint vue/script-setup-uses-vars: 1 */
           if (a) {
@@ -369,8 +374,9 @@ describe('script-setup-uses-vars', () => {
           <div>{{ msg }}</div>
         </template>
         `
-              }
-            ]
+                  }
+                ]
+              : null
           }
         ]
       },
diff --git a/tests/lib/script-setup-vars.js b/tests/lib/script-setup-vars.js
index 31823c841..6e4438e6a 100644
--- a/tests/lib/script-setup-vars.js
+++ b/tests/lib/script-setup-vars.js
@@ -1,6 +1,7 @@
 'use strict'
 
-const { RuleTester } = require('../eslint-compat')
+const semver = require('semver')
+const { RuleTester, ESLint } = require('../eslint-compat')
 const { getCoreRule } = require('../../lib/utils')
 const ruleNoUnusedVars = getCoreRule('no-unused-vars')
 const ruleNoUndef = getCoreRule('no-undef')
@@ -221,10 +222,11 @@ describe('vue-eslint-parser should properly mark the variables used in the templ
           {
             message: "'Bar' is defined but never used.",
             line: 5,
-            suggestions: [
-              {
-                desc: "Remove unused variable 'Bar'.",
-                output: `
+            suggestions: semver.gte(ESLint.version, '9.17.0')
+              ? [
+                  {
+                    desc: "Remove unused variable 'Bar'.",
+                    output: `
         <script setup>
           // imported components are also directly usable in template
           import Foo from './Foo.vue'
@@ -248,8 +250,9 @@ describe('vue-eslint-parser should properly mark the variables used in the templ
           <Foo :count="count" @click="inc" />
         </template>
         `
-              }
-            ]
+                  }
+                ]
+              : null
           },
           {
             message: "'baz' is assigned a value but never used.",
@@ -274,10 +277,11 @@ describe('vue-eslint-parser should properly mark the variables used in the templ
           {
             message: "'camelCase' is defined but never used.",
             line: 3,
-            suggestions: [
-              {
-                desc: "Remove unused variable 'camelCase'.",
-                output: `
+            suggestions: semver.gte(ESLint.version, '9.17.0')
+              ? [
+                  {
+                    desc: "Remove unused variable 'camelCase'.",
+                    output: `
         <script setup>
           import './component.vue'
         </script>
@@ -286,8 +290,9 @@ describe('vue-eslint-parser should properly mark the variables used in the templ
           <CamelCase />
         </template>
         `
-              }
-            ]
+                  }
+                ]
+              : null
           }
         ]
       },
@@ -310,10 +315,11 @@ describe('vue-eslint-parser should properly mark the variables used in the templ
           {
             message: "'msg' is assigned a value but never used.",
             line: 4,
-            suggestions: [
-              {
-                desc: "Remove unused variable 'msg'.",
-                output: `
+            suggestions: semver.gte(ESLint.version, '9.17.0')
+              ? [
+                  {
+                    desc: "Remove unused variable 'msg'.",
+                    output: `
         <script setup>
           if (a) {
             
@@ -324,8 +330,9 @@ describe('vue-eslint-parser should properly mark the variables used in the templ
           <div>{{ msg }}</div>
         </template>
         `
-              }
-            ]
+                  }
+                ]
+              : null
           }
         ]
       },