feat(rules): add 'no-invalid-selectors' rule

Author: alecxe

README.md

@@ -59,6 +59,7 @@ Rule                         | Default Error Level | Auto-fixable | Options
 [no-repetitive-locators][]   | 1                   |              |
 [no-repetitive-selectors][]  | 1                   |              |
 [no-get-inner-outer-html][]  | 1                   |              |
+[no-invalid-selectors][]     | 1                   |              |
 [by-css-shortcut][]          | 0                   |              |
 
 For example, the `missing-perform` rule is enabled by default and will cause
@@ -103,6 +104,7 @@ See [configuring rules][] for more information.
 [no-get-inner-outer-html]: docs/rules/no-get-inner-outer-html.md
 [no-repetitive-selectors]: docs/rules/no-repetitive-selectors.md
 [no-angular-attributes]: docs/rules/no-angular-attributes.md
+[no-invalid-selectors]: docs/rules/no-invalid-selectors.md
 [configuring rules]: http://eslint.org/docs/user-guide/configuring#configuring-rules
 
 ## Recommended configuration

docs/rules/no-invalid-selectors.md

@@ -0,0 +1,39 @@
+# Prohibit creating invalid CSS selectors
+
+Ensure CSS selectors are syntactically correct.
+
+This rule works great when ESLint is tied up to your editor of choice to make checks on the fly.
+
+## Rule details
+
+This rule is almost entirely based on [`css-selector-parser`](https://github.com/mdevils/node-css-selector-parser) parsing abilities.
+
+Any use of the following patterns are considered errors:
+
+```js
+element(by.css("["));
+element.all(by.css(")"));
+$("[myattr=value");
+$$("myattr=value]");
+$("[class='ng-invalid]");
+$$("input:first-of-type(");
+$("input:first-of-type");
+element(by.id("id")).$$("input::first-type");
+element(by.id("id")).$("input::first-of--type()");
+```
+
+The following patterns are not errors:
+
+```js
+element(by.css(".myclass"));
+element.all(by.css(".myclass"));
+$(".myclass");
+$$(".myclass");
+$("[class='myclass']");
+$$("[class*='myclass']");
+$(".myclass.myotherclass");
+$$(".myotherclass.myclass");
+$("input[id^=test]");
+var s = "ng-scope";
+element(by.id("ng-isolate-scope"));
+```

index.js

@@ -24,6 +24,7 @@ var noRepetitiveLocators = require('./lib/rules/no-repetitive-locators')
 var noRepetitiveSelectors = require('./lib/rules/no-repetitive-selectors')
 var noGetInnerOuterHtml = require('./lib/rules/no-get-inner-outer-html')
 var noAngularAttributes = require('./lib/rules/no-angular-attributes')
+var noInvalidSelectors = require('./lib/rules/no-invalid-selectors')
 
 module.exports = {
   rules: {
@@ -50,14 +51,16 @@ module.exports = {
     'no-repetitive-selectors': noRepetitiveSelectors,
     'correct-chaining': correctChaining,
     'no-get-inner-outer-html': noGetInnerOuterHtml,
-    'no-angular-attributes': noAngularAttributes
+    'no-angular-attributes': noAngularAttributes,
+    'no-invalid-selectors': noInvalidSelectors
   },
   configs: {
     recommended: {
       rules: {
         'protractor/missing-perform': 2,
         'protractor/no-browser-pause': 2,
         'protractor/correct-chaining': 2,
+        'protractor/no-invalid-selectors': 2,
         'protractor/missing-wait-message': 1,
         'protractor/no-browser-sleep': 1,
         'protractor/no-by-xpath': 1,

lib/extract-attributes.js

@@ -22,7 +22,6 @@ module.exports = function (cssSelector) {
     var result = parser.parse(cssSelector)
   } catch (err) {
     // ignore parsing errors - we don't want it to fail miserably on a target machine during a ESLint run
-    console.log('Parsing CSS selector: "' + cssSelector + '". ' + err)
     return []
   }
 

lib/extract-class-names.js

@@ -30,7 +30,6 @@ module.exports = function (cssSelector) {
     var result = parser.parse(cssSelector)
   } catch (err) {
     // ignore parsing errors - we don't want it to fail miserably on a target machine during a ESLint run
-    console.log('Parsing CSS selector: "' + cssSelector + '". ' + err)
     return []
   }
 

lib/rules/no-invalid-selectors.js

@@ -0,0 +1,34 @@
+'use strict'
+
+/**
+ * @fileoverview Prohibit creating invalid CSS selectors
+ * @author Alexander Afanasyev
+ */
+var isCSSLocator = require('../find-css-locator')
+var parser = require('../get-css-parser')
+
+module.exports = {
+  meta: {
+    schema: []
+  },
+
+  create: function (context) {
+    return {
+      'CallExpression': function (node) {
+        if (node.arguments && node.arguments.length && node.arguments[0].hasOwnProperty('value')) {
+          if (isCSSLocator(node)) {
+            var cssSelector = node.arguments[0].value
+            try {
+              parser.parse(cssSelector)
+            } catch (err) {
+              context.report({
+                node: node,
+                message: 'Invalid CSS selector: "' + cssSelector + '"'
+              })
+            }
+          }
+        }
+      }
+    }
+  }
+}

test/rules/no-invalid-selectors.js

@@ -0,0 +1,125 @@
+'use strict'
+
+var rule = require('../../lib/rules/no-invalid-selectors')
+var RuleTester = require('eslint').RuleTester
+
+var eslintTester = new RuleTester()
+
+eslintTester.run('no-invalid-selectors', rule, {
+  valid: [
+    'element(by.css(".myclass"));',
+    'element.all(by.css(".myclass"));',
+    '$(".myclass");',
+    '$$(".myclass");',
+    '$("[class=\'myclass\']");',
+    '$$("[class*=\'myclass\']");',
+    '$(".myclass.myotherclass");',
+    '$$(".myotherclass.myclass");',
+    '$("input[id^=test]");',
+    'var s = "ng-scope";',
+    'element(by.id("ng-isolate-scope"));',
+    '$();',
+    '$$();',
+    'element(by.css());',
+    'element.all(by.css());'
+  ],
+
+  invalid: [
+    {
+      code: 'element(by.css("["));',
+      errors: [
+        {
+          message: 'Invalid CSS selector: "["'
+        }
+      ]
+    },
+    {
+      code: 'element.all(by.css(")"));',
+      errors: [
+        {
+          message: 'Invalid CSS selector: ")"'
+        }
+      ]
+    },
+    {
+      code: '$("[myattr=value");',
+      errors: [
+        {
+          message: 'Invalid CSS selector: "[myattr=value"'
+        }
+      ]
+    },
+    {
+      code: '$$("myattr=value]");',
+      errors: [
+        {
+          message: 'Invalid CSS selector: "myattr=value]"'
+        }
+      ]
+    },
+    {
+      code: '$$("[class=\'ng-invalid]")',
+      errors: [
+        {
+          message: 'Invalid CSS selector: "[class=\'ng-invalid]"'
+        }
+      ]
+    },
+    {
+      code: '$$("input:first-of-type(");',
+      errors: [
+        {
+          message: 'Invalid CSS selector: "input:first-of-type("'
+        }
+      ]
+    },
+    {
+      code: '$("&%div.answer");',
+      errors: [
+        {
+          message: 'Invalid CSS selector: "&%div.answer"'
+        }
+      ]
+    },
+    {
+      code: 'element(by.id("id")).$$(",");',
+      errors: [
+        {
+          message: 'Invalid CSS selector: ","'
+        }
+      ]
+    },
+    {
+      code: 'element(by.id("id")).$("first-of--type()");',
+      errors: [
+        {
+          message: 'Invalid CSS selector: "first-of--type()"'
+        }
+      ]
+    },
+    {
+      code: '$("input:first-of-type)(");',
+      errors: [
+        {
+          message: 'Invalid CSS selector: "input:first-of-type)("'
+        }
+      ]
+    },
+    {
+      code: '$("> input");',
+      errors: [
+        {
+          message: 'Invalid CSS selector: "> input"'
+        }
+      ]
+    },
+    {
+      code: '$("input:first-child,");',
+      errors: [
+        {
+          message: 'Invalid CSS selector: "input:first-child,"'
+        }
+      ]
+    }
+  ]
+})