test: add suggestions to no-unused-vars tests

Author: waynzh

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>;
+          },
+        };
+      `
+              }
+            ]
           }
         ]
       }

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>
+        `
+              }
+            ]
           }
         ]
       },

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>
+        `
+              }
+            ]
           }
         ]
       },