(fix)rules: improve 'valid-by-tagname' validation logic

alecxe · Jan 23, 2017 · 8910c63 · 8910c63
2 parents c1f4f77 + 0a79c27
commit 8910c63
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/docs/rules/valid-by-tagname.md b/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"));
 ```
diff --git a/lib/rules/valid-by-tagname.js b/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 + '"'

diff --git a/test/rules/valid-by-tagname.js b/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-"'
+      }]
     }
   ]
 })