Create no-jquery-selector rule

Author: nlfurniss

guides/rules/no-jquery-selector.md

@@ -0,0 +1,29 @@
+# No jQuery Selector
+
+**TL;DR** The intent of this rule is to identify using jQuery to select DOM elements as deprecated.
+
+# Examples
+
+```js
+// Deprecated
+export default Ember.Component({
+  getElement(selector) {
+    return this.$(selector);
+  },
+
+  click() {
+    this.$().focus();
+  }
+});
+
+// Vanilla JS
+export default Ember.Component({
+  getElement(selector) {
+    return this.element.querySelector(selector);
+  },
+
+  click() {
+    this.element.focus();
+  }
+});
+```

lib/rules/no-jquery-selector.js

@@ -0,0 +1,43 @@
+/**
+ * @fileOverview Disallow the use of jQuery selector.
+ */
+'use strict';
+
+const { get } = require('../utils/get');
+const componentElementMessage = 'The use of this.$() to get a component\'s element is deprecated. Use \'this.element\' instead';
+
+function getSelectorMessage(selector) {
+  return `The use of $(${selector}) to select an element is deprecated.`;
+}
+
+module.exports = {
+  docs: {
+    category: 'Best Practices',
+    recommended: true
+  },
+  meta: {
+    componentElementMessage,
+    getSelectorMessage
+  },
+  create(context) {
+    return {
+      CallExpression(node) {
+        const calleeName = get(node, 'callee.property.name');
+        const problemNode = node.callee;
+        const firstNodeArg = node.arguments && node.arguments[0];
+
+        if (calleeName === '$') {
+          let message;
+          if (firstNodeArg) {
+            // Get the arg's value if it's a string or name if it's a variable.
+            const argName = firstNodeArg.value || firstNodeArg.name;
+            message = getSelectorMessage(argName);
+          } else {
+            message = componentElementMessage;
+          }
+          context.report({ node: problemNode, message });
+        }
+      }
+    };
+  }
+};

tests/lib/rules/no-jquery-selector.js

@@ -0,0 +1,145 @@
+const rule = require('../../../lib/rules/no-jquery-selector');
+const RuleTester = require('eslint').RuleTester;
+const {
+  componentElementMessage,
+  getSelectorMessage
+} = rule.meta;
+const TEST_CLASS = '.some-class';
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 6,
+    sourceType: 'module'
+  }
+});
+
+ruleTester.run('no-jquery-selector', rule, {
+  valid: [
+    {
+      code: `
+        export default Ember.Component({
+          init() {
+            Ember.$.ajax();
+          }
+        });`
+    },
+    {
+      code: `
+        export default Ember.Component({
+          init() {
+            this.$.ajax();
+          }
+        });`
+    },
+    {
+      code: `
+        export default Ember.Component({
+          myFunc() {
+            return \`\${someProp}\`;
+          }
+        });`
+    }
+  ],
+  invalid: [
+    {
+      code: `
+        export default Ember.Component({
+          init() {
+            Ember.$('.some-class');
+          }
+        });`,
+      errors: [
+        { message: getSelectorMessage(TEST_CLASS) }
+      ]
+    },
+    {
+      code: `
+        export default Ember.Component({
+          init() {
+            this.$('.some-class');
+          }
+        });`,
+      errors: [
+        { message: getSelectorMessage(TEST_CLASS) }
+      ]
+    },
+    {
+      code: `
+        export default Ember.Component({
+          myFunc(selector) {
+            Ember.$(selector);
+          }
+        });`,
+      errors: [
+        { message: getSelectorMessage('selector') }
+      ]
+    },
+    {
+      code: `
+        export default Ember.Component({
+          myFunc(selector) {
+            this.$(selector);
+          }
+        });`,
+      errors: [
+        { message: getSelectorMessage('selector') }
+      ]
+    },
+    {
+      code: `
+        export default Ember.Component({
+          init() {
+            this.$();
+          }
+        });`,
+      errors: [{
+        message: componentElementMessage
+      }]
+    },
+    {
+      code: `
+        export default Ember.Component({
+          init() {
+            this.$().focus();
+          }
+        });`,
+      errors: [{
+        message: componentElementMessage
+      }]
+    },
+    {
+      code: `
+        export default Ember.Component({
+          init() {
+            Ember.$('.some-class').focus();
+          }
+        });`,
+      errors: [{
+        message: getSelectorMessage(TEST_CLASS)
+      }]
+    },
+    {
+      code: `
+        export default Ember.Component({
+          myFunc() {
+            const myVar = '.some-class';
+            this.$(myVar);
+          }
+        });`,
+      errors: [{
+        message: getSelectorMessage('myVar')
+      }]
+    },
+    {
+      code: `
+        export default Ember.Component({
+          myFunc() {
+            const myVar = '.some-class';
+            Ember.$(myVar);
+          }
+        });`,
+      errors: [{
+        message: getSelectorMessage('myVar')
+      }]
+    }
+  ]
+});