add more tests.

Author: mysticatea

lib/rules/html-self-closing-style.js

@@ -68,12 +68,15 @@ function getKind (node) {
 
 /**
  * Check whether the given element is empty or not.
- * This ignores whitespaces.
+ * This ignores whitespaces, doesn't ignore comments.
  * @param {VElement} node The element node to check.
  * @returns {boolean} `true` if the element is empty.
  */
-function isEmpty (node) {
-  return node.children.every(child => child.type === 'VText' && child.value.trim() === '')
+function isEmpty (node, sourceCode) {
+  const start = node.startTag.range[1]
+  const end = (node.endTag != null) ? node.endTag.range[0] : node.range[1]
+
+  return sourceCode.text.slice(start, end).trim() === ''
 }
 
 /**
@@ -83,14 +86,15 @@ function isEmpty (node) {
  * @returns {object} AST event handlers.
  */
 function create (context) {
+  const sourceCode = context.getSourceCode()
   const options = parseOptions(context.options[0])
 
   utils.registerTemplateBodyVisitor(context, {
     'VElement' (node) {
       const kind = getKind(node)
       const mode = options[kind]
 
-      if (mode === 'always' && !node.startTag.selfClosing && isEmpty(node)) {
+      if (mode === 'always' && !node.startTag.selfClosing && isEmpty(node, sourceCode)) {
         context.report({
           node,
           loc: node.loc,

tests/lib/rules/html-self-closing-style.js

@@ -57,11 +57,46 @@ tester.run('html-self-closing-style', rule, {
     '<template><img></template>',
     '<template><x-test/></template>',
     '<template><svg><path/></svg></template>',
-    '<template><math><mspace/></math></template>'
+    '<template><math><mspace/></math></template>',
 
-    // Other cases are in `invalid` tests.
+    // Don't error if there are comments in their content.
+    {
+      code: '<template><div><!-- comment --></div></template>',
+      output: null,
+      options: [{ html: { normal: 'always' }}]
+    }
+
+    // other cases are in `invalid` tests.
   ],
   invalid: [
+    // default
+    {
+      code: '<template><div/></template>',
+      output: '<template><div></div></template>',
+      errors: ['Disallow self-closing on HTML elements.']
+    },
+    {
+      code: '<template><img/></template>',
+      output: '<template><img></template>',
+      errors: ['Disallow self-closing on HTML void elements.']
+    },
+    {
+      code: '<template><x-test></x-test></template>',
+      output: '<template><x-test/></template>',
+      errors: ['Require self-closing on Vue.js custom components.']
+    },
+    {
+      code: '<template><svg><path></path></svg></template>',
+      output: '<template><svg><path/></svg></template>',
+      errors: ['Require self-closing on SVG elements.']
+    },
+    {
+      code: '<template><math><mspace></mspace></math></template>',
+      output: '<template><math><mspace/></math></template>',
+      errors: ['Require self-closing on MathML elements.']
+    },
+
+    // others
     {
       code: ALL_CODE,
       output: `<template>