Fix attribute-hyphenation ignore lists (#513)

* tests: attribute-hyphenation: Fix the ignore-list test

The test introduced in f9e1eee didn't
actually test what it meant to test for.  It attempts to verify that
the ignore list is obeyed; but its subject is an element that is
ignored in its entirety!  The code under test was never triggered!

Fix this by changing <div> for <custom> in the test case, and also add
the same test-case without the `ignore` config, in order to verify
that it actually has something to ignore.

* attribute-hyphenation: Work correctly when ignore has != 1 item

Currently, the "ignore" options array only works correctly with exactly 1
item.  Adjust it to work with 0 and with >1 items.

* attribute-hyphenation: Fix spelling mistakes

 - hypen -> hyphen
 - cann't -> can't

* Update test suite for attribute-hyphenation

Author: LukeShu

lib/rules/attribute-hyphenation.js

@@ -49,10 +49,10 @@ module.exports = {
     const option = context.options[0]
     const optionsPayload = context.options[1]
     const useHyphenated = option !== 'never'
-    const ignoredAttributes = ['data-', 'aria-', 'slot-scope']
+    let ignoredAttributes = ['data-', 'aria-', 'slot-scope']
 
     if (optionsPayload && optionsPayload.ignore) {
-      ignoredAttributes.push(optionsPayload.ignore)
+      ignoredAttributes = ignoredAttributes.concat(optionsPayload.ignore)
     }
 
     const caseConverter = casing.getConverter(useHyphenated ? 'kebab-case' : 'camelCase')
@@ -63,7 +63,7 @@ module.exports = {
       context.report({
         node: node.key,
         loc: node.loc,
-        message: useHyphenated ? "Attribute '{{text}}' must be hyphenated." : "Attribute '{{text}}' cann't be hyphenated.",
+        message: useHyphenated ? "Attribute '{{text}}' must be hyphenated." : "Attribute '{{text}}' can't be hyphenated.",
         data: {
           text
         },

tests/lib/rules/attribute-hyphenation.js

@@ -45,8 +45,8 @@ ruleTester.run('attribute-hyphenation', rule, {
     },
     {
       filename: 'test.vue',
-      code: '<template><div data-id="foo" aria-test="bar" slot-scope="{ data }" custom-hypen="foo"><a onClick="" my-prop="prop"></a></div></template>',
-      options: ['never', { 'ignore': ['custom-hypen'] }]
+      code: '<template><custom data-id="foo" aria-test="bar" slot-scope="{ data }" custom-hyphen="foo" second-custom="bar"><a onClick="" my-prop="prop"></a></custom></template>',
+      options: ['never', { 'ignore': ['custom-hyphen', 'second-custom'] }]
     }
   ],
 
@@ -57,7 +57,7 @@ ruleTester.run('attribute-hyphenation', rule, {
       output: '<template><div><custom myProp="foo"></custom></div></template>',
       options: ['never'],
       errors: [{
-        message: "Attribute 'my-prop' cann't be hyphenated.",
+        message: "Attribute 'my-prop' can't be hyphenated.",
         type: 'VIdentifier',
         line: 1
       }]
@@ -79,7 +79,7 @@ ruleTester.run('attribute-hyphenation', rule, {
       output: '<template><div><custom :myProp="prop"></custom></div></template>',
       options: ['never'],
       errors: [{
-        message: "Attribute ':my-prop' cann't be hyphenated.",
+        message: "Attribute ':my-prop' can't be hyphenated.",
         type: 'VDirectiveKey',
         line: 1
       }]
@@ -101,7 +101,7 @@ ruleTester.run('attribute-hyphenation', rule, {
       output: '<template><div><custom v-bind:myProp="prop"></custom></div></template>',
       options: ['never'],
       errors: [{
-        message: "Attribute 'v-bind:my-prop' cann't be hyphenated.",
+        message: "Attribute 'v-bind:my-prop' can't be hyphenated.",
         type: 'VDirectiveKey',
         line: 1
       }]
@@ -116,6 +116,89 @@ ruleTester.run('attribute-hyphenation', rule, {
         type: 'VDirectiveKey',
         line: 1
       }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom v-bind:MyProp="prop"></custom></div></template>',
+      output: '<template><div><custom v-bind:my-prop="prop"></custom></div></template>',
+      options: ['always', { 'ignore': [] }],
+      errors: [{
+        message: "Attribute 'v-bind:MyProp' must be hyphenated.",
+        type: 'VDirectiveKey',
+        line: 1
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom v-bind:my-prop="prop" :second-prop="test"></custom></div></template>',
+      output: '<template><div><custom v-bind:my-prop="prop" :secondProp="test"></custom></div></template>',
+      options: ['never', { ignore: ['my-prop'] }],
+      errors: [{
+        message: "Attribute ':second-prop' can't be hyphenated.",
+        type: 'VDirectiveKey',
+        line: 1
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><custom v-bind:myProp="prop" :secondProp="test"></custom></div></template>',
+      output: '<template><div><custom v-bind:my-prop="prop" :secondProp="test"></custom></div></template>',
+      options: ['always', { ignore: ['secondProp'] }],
+      errors: [{
+        message: "Attribute 'v-bind:myProp' must be hyphenated.",
+        type: 'VDirectiveKey',
+        line: 1
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <custom data-id="foo" aria-test="bar" slot-scope="{ data }" custom-hyphen="foo" second-custom="baz" third-custom="bar">
+            <a onClick="" my-prop="prop"></a>
+          </custom>
+        </template>
+      `,
+      output: `
+        <template>
+          <custom data-id="foo" aria-test="bar" slot-scope="{ data }" custom-hyphen="foo" second-custom="baz" thirdCustom="bar">
+            <a onClick="" my-prop="prop"></a>
+          </custom>
+        </template>
+      `,
+      options: ['never', { 'ignore': ['custom-hyphen', 'second-custom'] }],
+      errors: [{
+        message: "Attribute 'third-custom' can't be hyphenated.",
+        type: 'VIdentifier',
+        line: 3
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <custom data-id="foo" aria-test="bar" slot-scope="{ data }" custom-hyphen="foo" second-custom="baz" thirdCustom="bar">
+            <a onClick="" my-prop="prop"></a>
+          </custom>
+        </template>
+      `,
+      output: `
+        <template>
+          <custom data-id="foo" aria-test="bar" slot-scope="{ data }" customHyphen="foo" secondCustom="baz" thirdCustom="bar">
+            <a onClick="" my-prop="prop"></a>
+          </custom>
+        </template>
+      `,
+      options: ['never'],
+      errors: [{
+        message: "Attribute 'custom-hyphen' can't be hyphenated.",
+        type: 'VIdentifier',
+        line: 3
+      }, {
+        message: "Attribute 'second-custom' can't be hyphenated.",
+        type: 'VIdentifier',
+        line: 3
+      }]
     }
   ]
 })