Merge pull request #69 from eLRuLL/valid-by-tagname

feat(rules): add 'valid-by-tagname' rule
alecxe · Jan 23, 2017 · c07be24 · c07be24
2 parents 34368a7 + ab1f9ce
commit c07be24
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -61,6 +61,7 @@ There are various types of rules implemented in the plugin. Here is a rough cate
 * [no-repetitive-locators][]: Discourage repeating locators
 * [no-repetitive-selectors][]: Discourage repeating parts of CSS selectors
 * [valid-by-id][]: Prohibit use of invalid ID value when using `by.id()` locator
+* [valid-by-tagname][]: Prohibit use of invalid Html Tag Name value when using `by.tagName()` locator
 
 #### Style Guide Recommendations and Best Practices
 
@@ -113,6 +114,7 @@ Rule                         | Default Error Level | Auto-fixable | Options
 [no-get-inner-outer-html][]  | 1                   |              |
 [use-count-method][]         | 1                   |              |
 [valid-by-id][]              | 1                   |              |
+[valid-by-tagname][]         | 1                   |              |
 [use-promise-all][]          | 0 (Turned off)      |              |
 [by-css-shortcut][]          | 0                   |              |
 [no-browser-driver][]        | 0                   |              |
@@ -166,6 +168,7 @@ See [configuring rules][] for more information.
 [use-count-method]: docs/rules/use-count-method.md
 [no-browser-driver]: docs/rules/no-browser-driver.md
 [valid-by-id]: docs/rules/valid-by-id.md
+[valid-by-tagname]: docs/rules/valid-by-tagname.md
 [configuring rules]: http://eslint.org/docs/user-guide/configuring#configuring-rules
 
 ## Recommended configuration

diff --git a/docs/rules/valid-by-tagname.md b/docs/rules/valid-by-tagname.md
@@ -0,0 +1,34 @@
+# 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.
+
+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.
+
+## Rule details
+
+Any use of the following patterns are considered errors when using `by.tagName`:
+
+```js
+element(by.tagName("_customTagName"));
+element(by.tagName("div.classname"));
+element(by.tagName("blockquote:"));
+element(by.tagName("multiple tagnames"));
+element(by.tagName('option[value="Test"]'));
+element(by.tagName(" div "));
+element(by.tagName("12345"));
+```
+
+The following patterns are not errors:
+
+```js
+element(by.tagName("a"));
+element(by.tagName("b"));
+element(by.tagName("i"));
+element(by.tagName("A"));
+element(by.tagName("Area"));
+element(by.tagName("BlockQuote"));
+element(by.tagName("h1"));
+element(by.tagName("H1"));
+```
diff --git a/index.js b/index.js
@@ -32,6 +32,7 @@ var noCompoundClasses = require('./lib/rules/no-compound-classes')
 var useCountMethod = require('./lib/rules/use-count-method')
 var noBrowserDriver = require('./lib/rules/no-browser-driver')
 var validById = require('./lib/rules/valid-by-id')
+var validByTagName = require('./lib/rules/valid-by-tagname')
 
 module.exports = {
   rules: {
@@ -66,7 +67,8 @@ module.exports = {
     'no-compound-classes': noCompoundClasses,
     'use-count-method': useCountMethod,
     'no-browser-driver': noBrowserDriver,
-    'valid-by-id': validById
+    'valid-by-id': validById,
+    'valid-by-tagname': validByTagName
   },
   configs: {
     recommended: {
@@ -100,6 +102,7 @@ module.exports = {
         'protractor/no-angular-attributes': 1,
         'protractor/use-count-method': 1,
         'protractor/valid-by-id': 1,
+        'protractor/valid-by-tagname': 1,
         'protractor/use-promise-all': 0,
         'protractor/by-css-shortcut': 0,
         'protractor/no-browser-driver': 0

diff --git a/lib/rules/valid-by-tagname.js b/lib/rules/valid-by-tagname.js
@@ -0,0 +1,36 @@
+'use strict'
+
+/**
+ * @fileoverview Ensure tag name is valid when using `by.tagName()` locator.
+ * @author Raul Gallegos
+ */
+
+var isTagName = /^[A-Za-z][A-Za-z0-9]*$/
+
+module.exports = {
+  meta: {
+    schema: []
+  },
+
+  create: function (context) {
+    return {
+      'CallExpression': function (node) {
+        var object = node.callee.object
+        var property = node.callee.property
+
+        var insideByTagName = object && property && object.name === 'by' && property.name === 'tagName'
+        var argumentExists = node.arguments && node.arguments.length && node.arguments[0].value
+
+        if (insideByTagName && argumentExists) {
+          var tagName = node.arguments[0].value
+          if (!tagName.match(isTagName)) {
+            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
@@ -0,0 +1,64 @@
+'use strict'
+
+var rule = require('../../lib/rules/valid-by-tagname')
+var RuleTester = require('eslint').RuleTester
+
+var eslintTester = new RuleTester()
+
+eslintTester.run('valid-by-tagname', rule, {
+  valid: [
+    'element(by.tagName("a"));',
+    'element(by.tagName("b"));',
+    'element(by.tagName("i"));',
+    'element(by.tagName("A"));',
+    'element(by.tagName("Area"));',
+    'element(by.tagName("BlockQuote"));',
+    'element(by.tagName("h1"));',
+    'element(by.tagName("H1"));'
+  ],
+
+  invalid: [
+    {
+      code: 'element(by.tagName("_customTagName"));',
+      errors: [{
+        message: 'Invalid TagName value: "_customTagName"'
+      }]
+    },
+    {
+      code: 'element(by.tagName("div.classname"));',
+      errors: [{
+        message: 'Invalid TagName value: "div.classname"'
+      }]
+    },
+    {
+      code: 'element(by.tagName("blockquote:"));',
+      errors: [{
+        message: 'Invalid TagName value: "blockquote:"'
+      }]
+    },
+    {
+      code: 'element(by.tagName("multiple tagnames"));',
+      errors: [{
+        message: 'Invalid TagName value: "multiple tagnames"'
+      }]
+    },
+    {
+      code: 'element(by.tagName(\'option[value="Test"]\'));',
+      errors: [{
+        message: 'Invalid TagName value: "option[value="Test"]"'
+      }]
+    },
+    {
+      code: 'element(by.tagName(" div "));',
+      errors: [{
+        message: 'Invalid TagName value: " div "'
+      }]
+    },
+    {
+      code: 'element(by.tagName("12345"));',
+      errors: [{
+        message: 'Invalid TagName value: "12345"'
+      }]
+    }
+  ]
+})