fix(rules): improving 'valid-by-tagname' rule

Author: eLRuLL

docs/rules/valid-by-tagname.md

@@ -1,7 +1,13 @@
 # Prohibit use of invalid Tag Name value when using `by.tagName()` locator
 
-Ensure a valid Tag Name is being used with `by.tagName()` locator. [A valid Tag Name](https://www.w3.org/TR/html/syntax.html#tag-name) should only
-contain alphanumeric and cannot start with a number.
+Ensure a valid Tag Name is being used with `by.tagName()` locator. 
+The rule supports [HTML specifications]((https://www.w3.org/TR/html/syntax.html#tag-name)) and
+Angular's ability to create custom elements via directives. A Tag Name is considered valid when:
+ 
+ - It can contain alphanumeric characters.
+ - It can contain the dash`(-)` symbol.
+ - It cannot start with dash or a number.
+ - It cannot end with dash.
 
 This rule is very useful for notifying when an invalid Tag Name is being used. 
 It will also prevent unintentionally putting different types of locators instead of the actual Tag name.
@@ -18,6 +24,8 @@ element(by.tagName("multiple tagnames"));
 element(by.tagName('option[value="Test"]'));
 element(by.tagName(" div "));
 element(by.tagName("12345"));
+element(by.tagName("-"));
+element(by.tagName("customtag-"));
 ```
 
 The following patterns are not errors:
@@ -31,4 +39,5 @@ element(by.tagName("Area"));
 element(by.tagName("BlockQuote"));
 element(by.tagName("h1"));
 element(by.tagName("H1"));
+element(by.tagName("my-custom-tag"));
 ```

lib/rules/valid-by-tagname.js

@@ -5,7 +5,7 @@
  * @author Raul Gallegos
  */
 
-var isTagName = /^[A-Za-z][A-Za-z0-9]*$/
+var isTagName = /^[A-Za-z][A-Za-z0-9-]*$/
 
 module.exports = {
   meta: {
@@ -23,7 +23,7 @@ module.exports = {
 
         if (insideByTagName && argumentExists) {
           var tagName = node.arguments[0].value
-          if (!tagName.match(isTagName)) {
+          if (!tagName.match(isTagName) || tagName.endsWith('-')) {
             context.report({
               node: node,
               message: 'Invalid TagName value: "' + tagName + '"'

test/rules/valid-by-tagname.js

@@ -14,7 +14,8 @@ eslintTester.run('valid-by-tagname', rule, {
     'element(by.tagName("Area"));',
     'element(by.tagName("BlockQuote"));',
     'element(by.tagName("h1"));',
-    'element(by.tagName("H1"));'
+    'element(by.tagName("H1"));',
+    'element(by.tagName("my-custom-tag"));'
   ],
 
   invalid: [
@@ -59,6 +60,18 @@ eslintTester.run('valid-by-tagname', rule, {
       errors: [{
         message: 'Invalid TagName value: "12345"'
       }]
+    },
+    {
+      code: 'element(by.tagName("-"));',
+      errors: [{
+        message: 'Invalid TagName value: "-"'
+      }]
+    },
+    {
+      code: 'element(by.tagName("customtag-"));',
+      errors: [{
+        message: 'Invalid TagName value: "customtag-"'
+      }]
     }
   ]
 })