@spinnaker/eslint-plugin 3.0.0

package/rules/migrate-to-mock-http-client.ts

@@ -0,0 +1,122 @@
+import type { Rule } from 'eslint';
+import type { FunctionExpression, ImportDeclaration, ImportSpecifier } from 'estree';
+
+import { getProgram } from '../utils/utils';
+
+const ruleModule: Rule.RuleModule = {
+  create(context) {
+    const text = (node) => context.getSourceCode().getText(node);
+
+    return {
+      CallExpression(node) {
+        /** it(() => {}) */
+        const isItBlock = node.callee.type === 'Identifier' && node.callee.name === 'it';
+
+        if (isItBlock) {
+          const itBlockText = text(node);
+          const testFunction = node.arguments[1] as FunctionExpression;
+
+          const doesFunctionIncludeHttpBackend = !!testFunction && itBlockText.includes('$httpBackend');
+
+          if (doesFunctionIncludeHttpBackend) {
+            const isFirstArgAFunction = ['FunctionExpression', 'ArrowFunctionExpression'].includes(testFunction.type);
+
+            if (isFirstArgAFunction) {
+              // Fix 1: make the test 'async'
+              if (testFunction.async !== true) {
+                return context.report({
+                  node,
+                  message: 'Migrate to MockHttpClient (step 1): make test function async',
+                  fix: (fixer) => fixer.insertTextBefore(testFunction, 'async '),
+                });
+              }
+
+              // Fix 2: Add a 'http' variable
+              if (
+                testFunction.body.type === 'BlockStatement' &&
+                !text(testFunction.body.body[0]).includes('mockHttpClient')
+              ) {
+                const program = getProgram(node);
+                const allImports = program.body.filter(
+                  (item) => item.type === 'ImportDeclaration',
+                ) as ImportDeclaration[];
+
+                const importSpecifiers = allImports
+                  .map((decl) => decl.specifiers as ImportSpecifier[])
+                  .reduce((acc, x) => acc.concat(x), []);
+
+                const mockHttpClientImport = importSpecifiers.find((specifier) => {
+                  return specifier.imported && specifier.imported.name === 'mockHttpClient';
+                });
+
+                return context.report({
+                  node,
+                  message: 'Migrate to MockHttpClient (step 2): Create a MockHttpClient named "http"',
+                  fix: (fixer) => {
+                    const insertHttp = fixer.insertTextBefore(
+                      testFunction.body.body[0],
+                      'const http = mockHttpClient();\n',
+                    );
+
+                    let insertImport = fixer.insertTextBeforeRange(
+                      [0, 0],
+                      `import { mockHttpClient } from 'core/api/mock/jasmine';\n`,
+                    );
+
+                    // Put after 'use strict'
+                    const sourcecode = text(program);
+                    const [preamble] = /^['"]use strict['"];?/.exec(sourcecode) || [];
+                    if (preamble) {
+                      const insertPos = preamble.length;
+                      insertImport = fixer.insertTextAfterRange(
+                        [insertPos, insertPos],
+                        `\nimport { mockHttpClient } from 'core/api/mock/jasmine';`,
+                      );
+                    }
+
+                    if (mockHttpClientImport) {
+                      return insertHttp;
+                    } else {
+                      return [insertHttp, insertImport];
+                    }
+                  },
+                });
+              }
+
+              // Fix 3:
+              // - replace "$httpBackend.when('GET'" with "$httpBackend.expectGET("
+              // - replace "$httpBackend.whenGET" with "$httpBackend.expectGET"
+              // - replace "$httpBackend" with "http"
+              return context.report({
+                node,
+                message: 'Migrate to MockHttpClient (step 3): replace $httpBackend with http',
+                fix: (fixer) => {
+                  const newItBlockText = itBlockText
+                    .replace(/(this\.)?\$httpBackend\.when(GET|POST|PUT|PATCH|DELETE)/g, '$httpBackend.expect$2')
+                    .replace(
+                      /(this\.)?\$httpBackend\.when\(['"](GET|POST|PUT|PATCH|DELETE)['"], /g,
+                      '$httpBackend.expect$2(',
+                    )
+                    .replace(/(this\.)?\$httpBackend/g, 'http')
+                    .replace(/http.flush/g, 'await http.flush')
+                    .replace(/await await /g, 'await ');
+
+                  return fixer.replaceText(node, newItBlockText);
+                },
+              });
+            }
+          }
+        }
+      },
+    };
+  },
+  meta: {
+    fixable: 'code',
+    type: 'problem',
+    docs: {
+      description: 'Do not import API',
+    },
+  },
+};
+
+export default ruleModule;

package/rules/ng-no-component-class.spec.ts

@@ -0,0 +1,45 @@
+import ruleTester from '../utils/ruleTester';
+import rule from './ng-no-component-class';
+
+ruleTester.run('ng-no-component-class', rule, {
+  valid: [
+    {
+      code: `
+        const angular = require('angular');
+        angular.module('foo', [])
+          .component('componentName', componentObject);
+
+        const componentObject = {
+          controller: function() {},
+          template: 'a template'
+        }
+      `,
+    },
+  ],
+
+  invalid: [
+    {
+      errors: [{ message: 'Use .component("foo", {}) instead of .component("foo", new FooComponentClass())' }],
+      code: `
+        import angular from 'angular';
+        angular.module('foo', [])
+          .component('componentName', new ComponentClass());
+
+        class ComponentClass {
+          controller = function() {};
+          template = 'a template';
+        }
+      `,
+      output: `
+        import angular from 'angular';
+        angular.module('foo', [])
+          .component('componentName', componentClass);
+
+        const componentClass = {
+  controller: function() {},
+  template: 'a template'
+};
+      `,
+    },
+  ],
+});

package/rules/ng-no-component-class.ts

@@ -0,0 +1,68 @@
+import type { Rule, Scope } from 'eslint';
+import camelCase from 'lodash/camelCase';
+
+const findParentNodeByType = (node: Rule.Node, type: string) =>
+  !node ? null : node.type === type ? node : findParentNodeByType(node.parent, type);
+
+/**
+ * Use object literal when declaring AngularJS components
+ * Do not use new ComponentClass()
+ *
+ * @version 0.1.0
+ * @category conventions
+ */
+import angularRule from '../utils/angular-rule/angular-rule';
+import { isNewExpression } from '../utils/utils';
+
+const useObjectLiteral = function (context: Rule.RuleContext) {
+  return {
+    'angular?component': function (callee, thisGuy) {
+      const node: Rule.Node = thisGuy.node;
+      const scope: Scope.Scope = thisGuy.scope;
+      if (isNewExpression(node)) {
+        const calleeName = 'name' in node.callee ? node.callee.name : undefined;
+        const fix = (fixer: Rule.RuleFixer) => {
+          const variable = scope.variables.find((x) => x.name === calleeName);
+          const classDef = variable.defs[0].node;
+          const name = classDef.id.name;
+          const camelCaseName = camelCase(name);
+          const rename = name !== camelCaseName;
+
+          const objProperties = classDef.body.body.map((node) => {
+            return node.key.name + ': ' + context.getSourceCode().getText(node.value);
+          });
+
+          const impls = (classDef.implements || []).map((impl) => context.getSourceCode().getText(impl));
+          const identifier = `const ${camelCaseName}${impls.length ? `: ${impls.join(' & ')}` : ''}`;
+          const objectLiteral = `${identifier} = {\n` + `  ${objProperties.join(',\n  ')}\n` + `};`;
+
+          const otherReferences = findParentNodeByType(classDef, 'Program').tokens.filter((token) => {
+            const ignores = [classDef.id.range[0], node.callee.range[0]];
+            return (
+              token.type === 'Identifier' && token.value === name && ignores.every((pos) => pos !== token.range[0])
+            );
+          });
+
+          const otherFixes = rename ? [] : otherReferences.map((id) => fixer.replaceText(id, camelCaseName));
+
+          return [fixer.replaceText(classDef, objectLiteral), fixer.replaceText(node, camelCaseName), ...otherFixes];
+        };
+
+        const message = 'Use .component("foo", {}) instead of .component("foo", new FooComponentClass())';
+        context.report({ fix, node, message });
+      }
+    },
+  };
+};
+
+const ruleModule: Rule.RuleModule = {
+  meta: {
+    type: 'problem',
+    fixable: 'code',
+    docs: {
+      description: 'Prefer .component("foo", {}) over .component("foo", new FooComponentClass())',
+    },
+  },
+  create: angularRule(useObjectLiteral),
+};
+export default ruleModule;

package/rules/ng-no-module-export.spec.ts

@@ -0,0 +1,26 @@
+import ruleTester from '../utils/ruleTester';
+import rule from './ng-no-module-export';
+
+ruleTester.run('ng-no-module-export', rule, {
+  valid: [
+    {
+      code: `
+        const angular = require('angular');
+        export const MODULE_NAME = 'foo';
+        angular.module(MODULE_NAME, [])
+          .component('componentName', {});
+      `,
+    },
+  ],
+
+  invalid: [
+    {
+      errors: [{ message: 'Prefer exporting the AngularJS module name instead of the entire module' }],
+      code: `
+        const angular = require('angular');
+        module.exports = angular.module('foo', [])
+          .component('componentName', {});
+      `,
+    },
+  ],
+});

package/rules/ng-no-module-export.ts

@@ -0,0 +1,117 @@
+/**
+ * Prefer exporting a module's NAME instead of the entire angular.module()
+ */
+
+import type { AST, Rule } from 'eslint';
+import type { AssignmentExpression, CallExpression, MemberExpression } from 'estree';
+import { isCallExpression, isIdentifier, isMemberExpression } from '../utils/utils';
+
+const rule = function (context: Rule.RuleContext) {
+  function getSuggestedVariableNameForFile() {
+    const filename = context.getFilename();
+    if (filename.includes('/packages/')) {
+      return filename
+        .replace(/^.*\/packages\//g, '')
+        .replace(/\/src\//g, '/')
+        .replace(/\.[\w]*$/g, '')
+        .replace(/[^\w_]/g, '_')
+        .toUpperCase();
+    }
+  }
+
+  return {
+    AssignmentExpression: function (node: AssignmentExpression) {
+      const left = node.left;
+      const right = node.right;
+      const isModuleExports = isModuleExportMemberExpression(left);
+      const moduleNameNode = getAngularModuleNameNode(right);
+      if (isModuleExports && moduleNameNode) {
+        const message = 'Prefer exporting the AngularJS module name instead of the entire module';
+        const variableName = getSuggestedVariableNameForFile();
+
+        const fix = (fixer: Rule.RuleFixer) => {
+          const assignmentRange = [left?.range[0], right?.range[0]] as AST.Range;
+          const exportModuleVariable = `export const ${variableName} = ${moduleNameNode.raw};\n`;
+          const exportNameVariable = `export const name = ${variableName}; // for backwards compatibility\n`;
+          return [
+            // Insert 'export const FOO = 'foo';
+            fixer.insertTextBefore(node, exportModuleVariable + exportNameVariable),
+            // Remove 'module.exports = '
+            fixer.replaceTextRange(assignmentRange, ''),
+            // Replace 'angular.module("foo"' with 'angular.module(FOO'
+            fixer.replaceText(moduleNameNode, variableName),
+          ];
+        };
+
+        if (variableName) {
+          context.report({ node, message, fix });
+        } else {
+          context.report({ node, message });
+        }
+      }
+    },
+  };
+};
+
+function isModuleExportMemberExpression(node) {
+  const object = node.object;
+  const property = node.property;
+  const isModuleExports = node.type === 'MemberExpression' && object.name === 'module' && property.name === 'exports';
+  const isBareExports = node.type === 'Identifier' && node.name === 'exports';
+  return isModuleExports || isBareExports;
+}
+
+function getAngularModuleNameNode(node) {
+  if (!isCallExpression(node)) return false;
+  const callee = node.callee as Rule.Node;
+
+  function angularModuleNameNode(callExpression: CallExpression) {
+    const isLiteral =
+      callExpression.arguments && callExpression.arguments[0] && callExpression.arguments[0].type === 'Literal';
+    return isLiteral ? callExpression.arguments[0] : undefined;
+  }
+
+  function isChainedCallExpression(_callee: Rule.Node): _callee is MemberExpression & Rule.NodeParentExtension {
+    if (isMemberExpression(_callee)) {
+      return _callee.object && _callee.object.type === 'CallExpression';
+    }
+  }
+
+  function isAngularModuleCall(_callee) {
+    if (isMemberExpression(_callee)) {
+      return (
+        _callee.object &&
+        _callee.object.type === 'Identifier' &&
+        _callee.object.name === 'angular' &&
+        _callee.property &&
+        'name' in _callee.property &&
+        _callee.property.name === 'module'
+      );
+    }
+  }
+
+  function isRawModuleCall(_callee) {
+    return isIdentifier(_callee) && _callee.name === 'module';
+  }
+
+  if (isChainedCallExpression(callee)) {
+    return getAngularModuleNameNode(callee.object);
+  } else if (isRawModuleCall(callee)) {
+    if (node.arguments && node.arguments[0] && node.arguments[0].type === 'Literal') return angularModuleNameNode(node);
+  } else if (isAngularModuleCall(callee)) {
+    return angularModuleNameNode(node);
+  }
+}
+
+const ruleModule: Rule.RuleModule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Instead of exporting the angular.module(), export the modules string identifier',
+    },
+    fixable: 'code',
+  },
+  create: rule,
+};
+
+export default ruleModule;

package/rules/ng-no-require-angularjs.spec.ts

@@ -0,0 +1,27 @@
+import ruleTester from '../utils/ruleTester';
+import rule from './ng-no-require-angularjs';
+
+ruleTester.run('ng-no-require-angularjs', rule, {
+  valid: [
+    {
+      code: `
+        import { module } from 'angular';
+        module('foo', []);
+      `,
+    },
+  ],
+
+  invalid: [
+    {
+      errors: [{ message: "Prefer module('foo', []) to angular.module('foo', [])" }],
+      code: `
+        import angular from 'angular';
+        angular.module('foo', []);
+      `,
+      output: `
+        import { module } from 'angular';
+        module('foo', []);
+      `,
+    },
+  ],
+});

package/rules/ng-no-require-angularjs.ts

@@ -0,0 +1,94 @@
+/**
+ * Prefer:
+ * import { module } from 'angular';
+ * module('mymodule', [])
+ *
+ * over:
+ * import * as angular from 'angular';
+ * angular.module('mymodule', [])
+ */
+import type { Rule, Scope } from 'eslint';
+import type { ImportDeclaration, MemberExpression } from 'estree';
+import { getProgram, isMemberExpression } from '../utils/utils';
+
+const rule = function (context: Rule.RuleContext) {
+  return {
+    'MemberExpression[object.name="angular"][property.name="module"]': function (
+      node: MemberExpression & Rule.NodeParentExtension,
+    ) {
+      const angularVar = findAngularVariable(node, context);
+      const angularImport = findAngularImportStatement(node);
+      // Double check that there is only a single use of 'angular' variable and that it's 'angular.module()')
+      if (angularImport && angularVar && angularVar.references.length === 1) {
+        const { parent } = angularVar.references[0].identifier as Rule.Node;
+        if (isMemberExpression(parent)) {
+          if (
+            'name' in parent.object &&
+            parent.object.name === 'angular' &&
+            'name' in parent.property &&
+            parent.property.name === 'module'
+          ) {
+            const message = "Prefer module('foo', []) to angular.module('foo', [])";
+            const fix = getFixForAngularModule(node, angularImport);
+            return context.report({ node, message, fix });
+          }
+        }
+      }
+    },
+  };
+};
+
+function findAngularVariable(_node, context): Scope.Variable {
+  const program = getProgram(_node);
+
+  const programScope = context.getSourceCode().scopeManager.acquire(program);
+  const moduleScope = programScope && programScope.childScopes.find((s) => s.type === 'module');
+  return moduleScope && moduleScope.variables.find((v) => v.name === 'angular');
+}
+
+function findAngularImportStatement(_node): ImportDeclaration {
+  let program = _node;
+  while (program && program.parent) {
+    program = program.parent;
+  }
+
+  return program.body.find((node) => {
+    return (
+      node.type === 'ImportDeclaration' &&
+      node.source &&
+      node.source.type === 'Literal' &&
+      node.source.value === 'angular'
+    );
+  }) as ImportDeclaration;
+}
+
+/*
+Given:
+angular.module('module', ['dep']);
+
+Rewrites to:
+import { module } from 'angular';
+
+module('module', ['dep']);
+ */
+function getFixForAngularModule(angularDotModuleNode: Rule.Node, importStatement: ImportDeclaration) {
+  return function (fixer: Rule.RuleFixer) {
+    return [
+      fixer.replaceText(angularDotModuleNode, 'module'),
+      fixer.replaceText(importStatement, `import { module } from 'angular';`),
+    ];
+  };
+}
+
+const ruleModule: Rule.RuleModule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: `Prefer import { module } from 'angular' over angular.module()`,
+    },
+    fixable: 'code',
+  },
+  create: rule,
+};
+
+export default ruleModule;

package/rules/ng-no-require-module-deps.spec.ts

@@ -0,0 +1,33 @@
+import ruleTester from '../utils/ruleTester';
+import rule from './ng-no-require-module-deps';
+
+ruleTester.run('ng-no-require-module-deps', rule, {
+  valid: [
+    {
+      code: `
+        import { module } from 'angular';
+        import FOO_MODULE from './foo';
+        module('foo', [FOO_MODULE]);
+      `,
+    },
+  ],
+
+  invalid: [
+    {
+      errors: [
+        {
+          message: 'Prefer \'import ANGULARJS_LIBRARY from "angularjs-library"\' over \'require("angularjs-library")\'',
+        },
+      ],
+      code: `
+        import angular from 'angular';
+        angular.module('foo', [ require('./foo') ]);
+      `,
+      output: `
+        import angular from 'angular';
+import __FOO from './foo';
+        angular.module('foo', [ __FOO ]);
+      `,
+    },
+  ],
+});