From e8ebb63ca573015a4af98c4680608b3ea0db2aca Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Tue, 14 Aug 2018 16:44:29 +0900
Subject: [PATCH 1/2] fixed #554

---
 lib/rules/html-self-closing.js |   6 +-
 tests/lib/autofix.js           | 113 +++++++++++++++++++++++++++++++++
 2 files changed, 118 insertions(+), 1 deletion(-)
 create mode 100644 tests/lib/autofix.js

diff --git a/lib/rules/html-self-closing.js b/lib/rules/html-self-closing.js
index 165273f4e..28d168a9a 100644
--- a/lib/rules/html-self-closing.js
+++ b/lib/rules/html-self-closing.js
@@ -165,7 +165,11 @@ module.exports = {
               if (elementType === ELEMENT_TYPE.VOID) {
                 return fixer.replaceText(close, '>')
               }
-              return fixer.replaceText(close, `></${node.rawName}>`)
+              // If only `close` is targeted for replacement, it conflicts with `component-name-in-template-casing`,
+              // so replace the entire element.
+              // return fixer.replaceText(close, `></${node.rawName}>`)
+              const elementPart = sourceCode.text.slice(node.range[0], close.range[0])
+              return fixer.replaceText(node, elementPart + `></${node.rawName}>`)
             }
           })
         }
diff --git a/tests/lib/autofix.js b/tests/lib/autofix.js
new file mode 100644
index 000000000..6aff5cf2f
--- /dev/null
+++ b/tests/lib/autofix.js
@@ -0,0 +1,113 @@
+/**
+ * @author Yosuke Ota <https://github.com/ota-meshi>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const Linter = require('eslint').Linter
+const chai = require('chai')
+
+const rules = require('../..').rules
+
+const assert = chai.assert
+
+const baseConfig = {
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true
+    }
+  }
+}
+
+describe('Complex autofix test cases', () => {
+  const linter = new Linter()
+  for (const key of Object.keys(rules)) {
+    const ruleId = `vue/${key}`
+    linter.defineRule(ruleId, rules[key])
+  }
+
+  // https://github.com/vuejs/eslint-plugin-vue/issues/554
+  describe('Autofix of `html-self-closing` and `component-name-in-template-casing` should not conflict.', () => {
+    const kebabConfig = Object.assign({}, baseConfig, { 'rules': {
+      'vue/html-self-closing': ['error', {
+        'html': {
+          'component': 'never'
+        }
+      }],
+      'vue/component-name-in-template-casing': ['error', 'kebab-case']
+    }})
+    const pascalConfig = Object.assign({}, baseConfig, { 'rules': {
+      'vue/html-self-closing': ['error', {
+        'html': {
+          'component': 'never'
+        }
+      }],
+      'vue/component-name-in-template-casing': ['error']
+    }})
+    it('The kebab-case should be as expected.', () => {
+      const code = `
+      <template>
+        <VueComponent />
+      </template>`
+      const output = `
+      <template>
+        <vue-component ></vue-component>
+      </template>`
+
+      assert.equal(
+        linter.verifyAndFix(code, kebabConfig, 'test.vue').output,
+        output
+      )
+    })
+    it('Even if set kebab-case, the output should be as expected.', () => {
+      const code = `
+      <template>
+        <vue-component />
+      </template>`
+      const output = `
+      <template>
+        <VueComponent ></VueComponent>
+      </template>`
+
+      assert.equal(
+        linter.verifyAndFix(code, pascalConfig, 'test.vue').output,
+        output
+      )
+    })
+    it('Even if set PascalCase, the output should be as expected.', () => {
+      const code = `
+      <template>
+        <vue-component />
+      </template>`
+      const output = `
+      <template>
+        <VueComponent ></VueComponent>
+      </template>`
+
+      assert.equal(
+        linter.verifyAndFix(code, pascalConfig, 'test.vue').output,
+        output
+      )
+    })
+    it('Even if element have an attributes, the output should be as expected.', () => {
+      const code = `
+      <template>
+        <vue-component attr
+          id="item1" />
+      </template>`
+      const output = `
+      <template>
+        <VueComponent attr
+          id="item1" ></VueComponent>
+      </template>`
+
+      assert.equal(
+        linter.verifyAndFix(code, pascalConfig, 'test.vue').output,
+        output
+      )
+    })
+  })
+})

From f619046017d68cf093a312843f2b17642242ac10 Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Tue, 14 Aug 2018 17:23:07 +0900
Subject: [PATCH 2/2] Deleted useless test case.

---
 tests/lib/autofix.js | 17 +----------------
 1 file changed, 1 insertion(+), 16 deletions(-)

diff --git a/tests/lib/autofix.js b/tests/lib/autofix.js
index 6aff5cf2f..7d1b9604d 100644
--- a/tests/lib/autofix.js
+++ b/tests/lib/autofix.js
@@ -47,7 +47,7 @@ describe('Complex autofix test cases', () => {
       }],
       'vue/component-name-in-template-casing': ['error']
     }})
-    it('The kebab-case should be as expected.', () => {
+    it('Even if set kebab-case, the output should be as expected.', () => {
       const code = `
       <template>
         <VueComponent />
@@ -62,21 +62,6 @@ describe('Complex autofix test cases', () => {
         output
       )
     })
-    it('Even if set kebab-case, the output should be as expected.', () => {
-      const code = `
-      <template>
-        <vue-component />
-      </template>`
-      const output = `
-      <template>
-        <VueComponent ></VueComponent>
-      </template>`
-
-      assert.equal(
-        linter.verifyAndFix(code, pascalConfig, 'test.vue').output,
-        output
-      )
-    })
     it('Even if set PascalCase, the output should be as expected.', () => {
       const code = `
       <template>