fix(no-unused-components): Ignore names that can not be identified

lib/utils/index.js

@@ -265,10 +265,11 @@ module.exports = {
 
     return componentsNode.value.properties
       .filter(p => p.type === 'Property')
-      .map(node => ({
-        node,
-        name: this.getStaticPropertyName(node.key)
-      }))
+      .map(node => {
+        const name = this.getStaticPropertyName(node)
+        return name ? { node, name } : null
+      })
+      .filter(comp => comp != null)
   },
 
   /**

tests/lib/rules/no-unused-components.js

@@ -427,6 +427,50 @@ tester.run('no-unused-components', rule, {
       <template>
         <component :is></component>
       </template>`
+    },
+
+    // computed properties
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div />
+      </template>
+      <script>
+        export default {
+          components: {
+            [foo.bar]: baz
+          }
+        }
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div />
+      </template>
+      <script>
+        export default {
+          components: {
+            [foo]: Bar
+          }
+        }
+      </script>`
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <foo />
+      </template>
+      <script>
+        export default {
+          components: {
+            ['foo']: Foo
+          }
+        }
+      </script>`
     }
   ],
   invalid: [
@@ -566,6 +610,40 @@ tester.run('no-unused-components', rule, {
         message: 'The "Foo" component has been registered but not used.',
         line: 8
       }]
+    },
+
+    // computed properties
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div />
+      </template>
+      <script>
+        export default {
+          components: {
+            ['foo']: Foo,
+            [\`bar\`]: Bar,
+            ['baz']: Baz,
+            [qux]: Qux,
+            ...components,
+            quux,
+          }
+        }
+      </script>`,
+      errors: [{
+        message: 'The "foo" component has been registered but not used.',
+        line: 8
+      }, {
+        message: 'The "bar" component has been registered but not used.',
+        line: 9
+      }, {
+        message: 'The "baz" component has been registered but not used.',
+        line: 10
+      }, {
+        message: 'The "quux" component has been registered but not used.',
+        line: 13
+      }]
     }
   ]
 })

tests/lib/utils/index.js

@@ -246,6 +246,25 @@ describe('getRegisteredComponents', () => {
       ['PrimaryButton', 'secondaryButton', 'the-modal', 'the_dropdown', 'the_input', 'SomeComponent'],
     )
   })
+
+  it('should return an array of only components whose names can be identified', () => {
+    node = parse(`const test = {
+      name: 'test',
+      components: {
+        ...test,
+        Foo,
+        [bar]: Bar,
+        [baz.baz]: Baz,
+        [\`\${qux}\`]: Qux,
+        [\`Quux\`]: Quux
+      }
+    }`)
+
+    assert.deepEqual(
+      utils.getRegisteredComponents(node).map(c => c.name),
+      ['Foo', 'Quux'],
+    )
+  })
 })
 
 describe('getComponentProps', () => {