Prepare example tests for no-side-effects-in-computed-properties rule,

Move component detection logic to utils

Author: michalsnik

lib/rules/no-side-effects-in-computed-properties.js

@@ -2,43 +2,28 @@
  * @fileoverview Don't introduce side effects in computed properties
  * @author Michał Sajnóg
  */
-"use strict";
+'use strict'
 
-//------------------------------------------------------------------------------
+const utils = require('../utils')
+
+function create (context) {
+  return utils.executeOnVueComponent(context, (properties) => {
+  })
+}
+
+// ------------------------------------------------------------------------------
 // Rule Definition
-//------------------------------------------------------------------------------
+// ------------------------------------------------------------------------------
 
 module.exports = {
-    meta: {
-        docs: {
-            description: "Don't introduce side effects in computed properties",
-            category: "Fill me in",
-            recommended: false
-        },
-        fixable: null,  // or "code" or "whitespace"
-        schema: [
-            // fill in your schema
-        ]
+  create,
+  meta: {
+    docs: {
+      description: 'Don\'t introduce side effects in computed properties',
+      category: 'Best Practices',
+      recommended: false
     },
-
-    create: function(context) {
-
-        // variables should be defined here
-
-        //----------------------------------------------------------------------
-        // Helpers
-        //----------------------------------------------------------------------
-
-        // any helper functions should go here or else delete this section
-
-        //----------------------------------------------------------------------
-        // Public
-        //----------------------------------------------------------------------
-
-        return {
-
-            // give me methods
-
-        };
-    }
-};
+    fixable: null,
+    schema: []
+  }
+}

lib/rules/order-in-components.js

@@ -4,6 +4,8 @@
  */
 'use strict'
 
+const utils = require('../utils')
+
 const defaultOrder = [
   ['name', 'delimiters', 'functional', 'model'],
   ['components', 'directives', 'filters'],
@@ -36,38 +38,6 @@ const groups = {
   ]
 }
 
-function isComponentFile (node, path) {
-  const isVueFile = path.endsWith('.vue') || path.endsWith('.jsx')
-  return isVueFile && node.declaration.type === 'ObjectExpression'
-}
-
-function isVueComponent (node) {
-  const callee = node.callee
-
-  const isFullVueComponent = node.type === 'CallExpression' &&
-    callee.type === 'MemberExpression' &&
-    callee.object.type === 'Identifier' &&
-    callee.object.name === 'Vue' &&
-    callee.property.type === 'Identifier' &&
-    callee.property.name === 'component' &&
-    node.arguments.length &&
-    node.arguments.slice(-1)[0].type === 'ObjectExpression'
-
-  const isDestructedVueComponent = callee.type === 'Identifier' &&
-    callee.name === 'component'
-
-  return isFullVueComponent || isDestructedVueComponent
-}
-
-function isVueInstance (node) {
-  const callee = node.callee
-  return node.type === 'NewExpression' &&
-    callee.type === 'Identifier' &&
-    callee.name === 'Vue' &&
-    node.arguments.length &&
-    node.arguments[0].type === 'ObjectExpression'
-}
-
 function getOrderMap (order) {
   const orderMap = new Map()
 
@@ -106,28 +76,13 @@ function checkOrder (propertiesNodes, orderMap, context) {
 function create (context) {
   const options = context.options[0] || {}
   const order = options.order || defaultOrder
-  const filePath = context.getFilename()
 
   const extendedOrder = order.map(property => groups[property] || property)
   const orderMap = getOrderMap(extendedOrder)
 
-  return {
-    ExportDefaultDeclaration (node) {
-      // export default {} in .vue || .jsx
-      if (!isComponentFile(node, filePath)) return
-      checkOrder(node.declaration.properties, orderMap, context)
-    },
-    CallExpression (node) {
-      // Vue.component('xxx', {}) || component('xxx', {})
-      if (!isVueComponent(node)) return
-      checkOrder(node.arguments.slice(-1)[0].properties, orderMap, context)
-    },
-    NewExpression (node) {
-      // new Vue({})
-      if (!isVueInstance(node)) return
-      checkOrder(node.arguments[0].properties, orderMap, context)
-    }
-  }
+  return utils.executeOnVueComponent(context, (properties) => {
+    checkOrder(properties, orderMap, context)
+  })
 }
 
 // ------------------------------------------------------------------------------

lib/utils/index.js

@@ -241,5 +241,82 @@ module.exports = {
     assert(typeof name === 'string')
 
     return VOID_ELEMENT_NAMES.has(name.toLowerCase())
+  },
+
+    /**
+     * Check whether the given node is a Vue component based
+     * on the filename and default export type
+     * export default {} in .vue || .jsx
+     * @param {ASTNode} node Node to check
+     * @param {string} path File name with extension
+     * @returns {boolean}
+     */
+  isVueComponentFile (node, path) {
+    const isVueFile = path.endsWith('.vue') || path.endsWith('.jsx')
+    return isVueFile &&
+      node.type === 'ExportDefaultDeclaration' &&
+      node.declaration.type === 'ObjectExpression'
+  },
+
+    /**
+     * Check whether given node is Vue component
+     * Vue.component('xxx', {}) || component('xxx', {})
+     * @param {ASTNode} node Node to check
+     * @returns {boolean}
+     */
+  isVueComponent (node) {
+    const callee = node.callee
+
+    const isFullVueComponent = node.type === 'CallExpression' &&
+      callee.type === 'MemberExpression' &&
+      callee.object.type === 'Identifier' &&
+      callee.object.name === 'Vue' &&
+      callee.property.type === 'Identifier' &&
+      callee.property.name === 'component' &&
+      node.arguments.length &&
+      node.arguments.slice(-1)[0].type === 'ObjectExpression'
+
+    const isDestructedVueComponent = callee.type === 'Identifier' &&
+      callee.name === 'component'
+
+    return isFullVueComponent || isDestructedVueComponent
+  },
+
+    /**
+     * Check whether given node is new Vue instance
+     * new Vue({})
+     * @param {ASTNode} node Node to check
+     * @returns {boolean}
+     */
+  isVueInstance (node) {
+    const callee = node.callee
+    return node.type === 'NewExpression' &&
+      callee.type === 'Identifier' &&
+      callee.name === 'Vue' &&
+      node.arguments.length &&
+      node.arguments[0].type === 'ObjectExpression'
+  },
+
+  executeOnVueComponent (context, cb) {
+    const filePath = context.getFilename()
+    const _this = this
+
+    return {
+      ExportDefaultDeclaration (node) {
+        // export default {} in .vue || .jsx
+        if (!_this.isVueComponentFile(node, filePath)) return
+        cb(node.declaration.properties)
+      },
+      CallExpression (node) {
+        // Vue.component('xxx', {}) || component('xxx', {})
+        if (!_this.isVueComponent(node)) return
+        cb(node.arguments.slice(-1)[0].properties)
+      },
+      NewExpression (node) {
+        // new Vue({})
+        if (!_this.isVueInstance(node)) return
+        cb(node.arguments[0].properties)
+      }
+    }
   }
 }

tests/lib/rules/no-side-effects-in-computed-properties.js

@@ -2,36 +2,141 @@
  * @fileoverview Don't introduce side effects in computed properties
  * @author Michał Sajnóg
  */
-"use strict";
+'use strict'
 
-//------------------------------------------------------------------------------
+// ------------------------------------------------------------------------------
 // Requirements
-//------------------------------------------------------------------------------
+// ------------------------------------------------------------------------------
 
-var rule = require("../../../lib/rules/no-side-effects-in-computed-properties"),
+const rule = require('../../../lib/rules/no-side-effects-in-computed-properties')
+const { RuleTester } = require('eslint')
 
-    RuleTester = require("eslint").RuleTester;
+const parserOptions = {
+  ecmaVersion: 6,
+  sourceType: 'module',
+  ecmaFeatures: { experimentalObjectRestSpread: true }
+}
 
-
-//------------------------------------------------------------------------------
+// ------------------------------------------------------------------------------
 // Tests
-//------------------------------------------------------------------------------
-
-var ruleTester = new RuleTester();
-ruleTester.run("no-side-effects-in-computed-properties", rule, {
-
-    valid: [
+// ------------------------------------------------------------------------------
 
-        // give me some code that won't trigger a warning
-    ],
-
-    invalid: [
-        {
-            code: "",
-            errors: [{
-                message: "Fill me in.",
-                type: "Me too"
-            }]
+const ruleTester = new RuleTester()
+ruleTester.run('no-side-effects-in-computed-properties', rule, {
+  valid: [
+    {
+      code: `Vue.component('test', {
+        computed: {
+          test1() {
+            return this.firstName + ' ' + this.lastName
+          },
+          test2() {
+            return this.something.slice(0).reverse()
+          },
+          test3() {
+            const example = this.something * 2
+            return example + 'test'
+          },
+          test4() {
+            return {
+              ...this.something,
+              test: 'example'
+            }
+          },
+          test5: {
+            get() {
+              return this.firstName + ' ' + this.lastName
+            },
+            set(newValue) {
+              const names = newValue.split(' ')
+              this.firstName = names[0]
+              this.lastName = names[names.length - 1]
+            }
+          },
+          test6: {
+            get() {
+              return this.something.slice(0).reverse()
+            }
+          },
+          test7: {
+            get() {
+              const example = this.something * 2
+              return example + 'test'
+            }
+          },
+          test8: {
+            get() {
+              return {
+                ...this.something,
+                test: 'example'
+              }
+            }
+          }
+        }
+      })`,
+      parserOptions
+    }
+  ],
+  invalid: [
+    {
+      code: `Vue.component('test', {
+        computed: {
+          test1() {
+            this.firstName = 'lorem'
+            return this.firstName + ' ' + this.lastName
+          },
+          test2() {
+            return this.something.reverse()
+          },
+          test3() {
+            const test = this.another.something.push('example')
+            return 'something'
+          },
+          test4: {
+            get() {
+              this.firstName = 'lorem'
+              return this.firstName + ' ' + this.lastName
+            }
+          },
+          test5: {
+            get() {
+              return this.something.reverse()
+            }
+          },
+          test6: {
+            get() {
+              const test = this.another.something.push('example')
+              return 'something'
+            },
+            set(newValue) {
+              this.something = newValue
+            }
+          },
         }
-    ]
-});
+      })`,
+      parserOptions,
+      errors: [{
+        line: 4,
+        message: 'Unexpected side effect in "test1" computed property'
+      }, {
+        line: 8,
+        message: 'Unexpected side effect in "test2" computed property'
+      }, {
+        line: 11,
+        message: 'Unexpected side effect in "test3" computed property'
+      }, {
+        line: 15,
+        message: 'Unexpected side effect in "test4" computed property'
+      }, {
+        line: 21,
+        message: 'Unexpected side effect in "test5" computed property'
+      }, {
+        line: 26,
+        message: 'Unexpected side effect in "test6" computed property'
+      }, {
+        line: 31,
+        message: 'Unexpected side effect in "test7" computed property'
+      }]
+    }
+  ]
+})