@spinnaker/eslint-plugin 3.0.0

package/rules/import-from-presentation-not-core.ts

@@ -0,0 +1,106 @@
+import type { Rule } from 'eslint';
+import type { ImportDeclaration, ImportSpecifier } from 'estree';
+
+const migratedPresentationModules = ['Icon', 'IconNames', 'Illustration', 'IllustrationName'];
+
+const removeImportFromCore = (
+  context: Rule.RuleContext,
+  importSpecifierNode: ImportSpecifier & Rule.NodeParentExtension,
+  fixer: Rule.RuleFixer,
+) => {
+  const sourceCode = context.getSourceCode();
+  const fixes = [];
+
+  if ((importSpecifierNode.parent as ImportDeclaration).specifiers.length === 1) {
+    // The node is the only import specifier in the declaration, so remove the whole import
+    // declaration.
+    fixes.push(fixer.remove(importSpecifierNode.parent));
+  } else {
+    // Remove the import specifier.
+    fixes.push(fixer.remove(importSpecifierNode));
+    const isNextTokenComma = sourceCode.getTokenAfter(importSpecifierNode).value === ',';
+    if (isNextTokenComma) {
+      // Remove the trailing comma in the import specifier as well.
+      fixes.push(fixer.remove(sourceCode.getTokenAfter(importSpecifierNode)));
+    }
+  }
+
+  return fixes;
+};
+
+const addImportToPresentation = (
+  context: Rule.RuleContext,
+  importSpecifierNode: ImportSpecifier,
+  fixer: Rule.RuleFixer,
+) => {
+  const sourceCode = context.getSourceCode();
+  const fixes = [];
+
+  // Use the alias if it is available in the old import specifier.
+  const importSpecifierText =
+    importSpecifierNode.local.name === importSpecifierNode.imported.name
+      ? importSpecifierNode.imported.name
+      : `${importSpecifierNode.imported.name} as ${importSpecifierNode.local.name}`;
+
+  // Check if @spinnaker/presentation is already imported.
+  const spinnakerPresentationImport = sourceCode.ast.body.find(
+    (node) => node.type === 'ImportDeclaration' && node.source.value === '@spinnaker/presentation',
+  ) as ImportDeclaration;
+
+  if (spinnakerPresentationImport) {
+    // If @spinnaker/presentation is already imported, then append our import specifier to the last
+    // import specifier in this import declaration.
+    const lastSpecifier = spinnakerPresentationImport.specifiers[spinnakerPresentationImport.specifiers.length - 1];
+    fixes.push(fixer.insertTextAfter(lastSpecifier, `, ${importSpecifierText}`));
+  } else {
+    // If @spinnaker/presentation import is not available, then add one as the last import declaration
+    // along with our module's import specifier.
+    const importDeclarations = sourceCode.ast.body.filter((node) => node.type === 'ImportDeclaration');
+    const lastImportDeclaration = importDeclarations[importDeclarations.length - 1];
+
+    fixes.push(
+      fixer.insertTextAfter(lastImportDeclaration, `\nimport {${importSpecifierText}} from '@spinnaker/presentation';`),
+    );
+  }
+
+  return fixes;
+};
+
+const moveImportToPresentation = (
+  context: Rule.RuleContext,
+  node: ImportSpecifier & Rule.NodeParentExtension,
+  fixer: Rule.RuleFixer,
+) => [...removeImportFromCore(context, node, fixer), ...addImportToPresentation(context, node, fixer)];
+
+const rule = (context: Rule.RuleContext) => {
+  return {
+    ImportSpecifier(node: ImportSpecifier & Rule.NodeParentExtension) {
+      if (
+        migratedPresentationModules.includes(node.imported.name) &&
+        (node.parent as ImportDeclaration).source.value === '@spinnaker/core'
+      ) {
+        const message = `${node.imported.name} must be imported from @spinnaker/presentation`;
+        const fix = (fixer) => moveImportToPresentation(context, node, fixer);
+        context.report({
+          node,
+          message,
+          fix,
+        });
+      }
+    },
+  };
+};
+
+const ruleModule: Rule.RuleModule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: `Enforces import of presentation modules from @spinnaker/presentation`,
+    },
+    fixable: 'code',
+  },
+
+  create: rule,
+};
+
+export default ruleModule;

package/rules/import-relative-within-subpackage.spec.ts

@@ -0,0 +1,50 @@
+import '../utils/import-aliases.mock';
+import ruleTester from '../utils/ruleTester';
+import rule from './import-relative-within-subpackage';
+
+ruleTester.run('import-relative-within-subpackage', rule, {
+  valid: [
+    {
+      filename: '/root/spinnaker/deck/packages/amazon/package/amazon_source_file.ts',
+      code: `import { Anything } from '../subpackage/foo';`,
+    },
+    {
+      filename: '/root/spinnaker/deck/packages/amazon/src/package/amazon_source_file.ts',
+      code: `import { Anything } from '../subpackage/foo';`,
+    },
+  ],
+
+  invalid: [
+    {
+      filename: '/root/spinnaker/deck/packages/core/subpackage/core_source_file.ts',
+      code: `import { Anything } from 'core/subpackage/foo';`,
+      output: `import { Anything } from './foo';`,
+      errors: [
+        'Do not use an alias to import from core/subpackage from code inside core/subpackage. Instead, use a relative import',
+      ],
+    },
+    {
+      filename: '/root/spinnaker/deck/packages/core/subpackage/core_source_file.ts',
+      code: `import { Anything } from 'core/subpackage/foo/bar';`,
+      output: `import { Anything } from './foo/bar';`,
+      errors: [
+        'Do not use an alias to import from core/subpackage from code inside core/subpackage. Instead, use a relative import',
+      ],
+    },
+    {
+      filename: '/root/spinnaker/deck/packages/core/subpackage/nest/core_source_file.ts',
+      code: `import { Anything } from 'core/subpackage/foo/bar';`,
+      output: `import { Anything } from '../foo/bar';`,
+      errors: [
+        'Do not use an alias to import from core/subpackage from code inside core/subpackage. Instead, use a relative import',
+      ],
+    },
+    {
+      filename: '/root/spinnaker/deck/packages/core/subpackage/nest/core_source_file.ts',
+      code: `import { Anything } from 'core/subpackage';`,
+      errors: [
+        'Do not use an alias to import from core/subpackage from code inside core/subpackage. Instead, use a relative import',
+      ],
+    },
+  ],
+});

package/rules/import-relative-within-subpackage.ts

@@ -0,0 +1,71 @@
+import type { Rule } from 'eslint';
+import type { ImportDeclaration } from 'estree';
+import path from 'path';
+
+import { getAliasImport, getAllSpinnakerPackages, getSourceFileDetails } from '../utils/import-aliases';
+
+/**
+ * A group of rules that enforce spinnaker ES6 import alias conventions.
+ *
+ * Source code in a package (i.e., `core/presentation` should not import from the same subpackage using an alias
+ * `core/presentation`.
+ * Instead, it should import relatively `../../path/file`
+ *
+ * @version 0.1.0
+ * @category conventions
+ */
+const rule = function (context: Rule.RuleContext) {
+  const sourceFile = context.getFilename();
+  const { modulesPath, ownPackage, ownSubPackage, filePath } = getSourceFileDetails(sourceFile);
+  if (!ownPackage) {
+    return {};
+  }
+  const allSpinnakerPackages = getAllSpinnakerPackages(modulesPath);
+
+  return {
+    ImportDeclaration: function (node: ImportDeclaration & Rule.NodeParentExtension) {
+      if (node.source.type !== 'Literal' || !node.source.value) {
+        return;
+      }
+
+      const importString = node.source.value as string;
+      const aliasImport = getAliasImport(allSpinnakerPackages, importString);
+      if (!aliasImport || aliasImport.pkg !== ownPackage || aliasImport.subPkg !== ownSubPackage) {
+        return;
+      }
+
+      const { pkg, subPkg, importPath } = aliasImport;
+
+      const message =
+        `Do not use an alias to import from ${pkg}/${subPkg} from code inside ${pkg}/${subPkg}.` +
+        ` Instead, use a relative import`;
+
+      const fix = (fixer: Rule.RuleFixer) => {
+        const relativeDir = path.relative(path.dirname(filePath), path.dirname(importPath)) || '.';
+        let newPath = path.join(relativeDir, path.basename(importPath));
+        newPath = newPath.match(/^\.?\.\//) ? newPath : './' + newPath;
+        return fixer.replaceText(node.source, `'${newPath}'`);
+      };
+
+      if (aliasImport.importPath === aliasImport.subPkg) {
+        // Do not try to fix: import from 'alias/subpkg'
+        context.report({ node, message });
+      } else {
+        // Do try to fix: import from 'alias/subpkg/nestedimport'
+        context.report({ fix, node, message });
+      }
+    },
+  };
+};
+
+const importAliasesRule: Rule.RuleModule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: `Enforces spinnaker ES6 import conventions for package aliases`,
+    },
+    fixable: 'code',
+  },
+  create: rule,
+};
+export default importAliasesRule;

package/rules/import-sort.spec.ts

@@ -0,0 +1,85 @@
+import ruleTester from '../utils/ruleTester';
+import rule from './import-sort';
+
+ruleTester.run('import-sort', rule, {
+  valid: [
+    {
+      code: `
+import angular from 'angular';
+import 'jquery';
+import React, { useCallback, useState } from 'react';
+import * as Select from 'react-select';
+
+import { LabeledValueList as LabeledValueL, SomeThingElse } from '@spinnaker/core';
+
+import Bar from './bar';
+import Baz from '../../../test/baz';
+
+import 'bootstrap.less';
+import './styles.less';
+      `,
+    },
+  ],
+  invalid: [
+    {
+      code: "import React, {useState, useCallback} from 'react';",
+      output: "import React, { useCallback, useState } from 'react';",
+      errors: ['Sort the import statements'],
+    },
+    {
+      code: `
+import React, {useState, useCallback} from 'react';
+import angular from 'angular';
+import * as Select from 'react-select';
+      `,
+      output: `
+import angular from 'angular';
+import React, { useCallback, useState } from 'react';
+import * as Select from 'react-select';
+      `,
+      errors: ['Sort the import statements'],
+    },
+    {
+      code: `
+import React  from 'react';
+
+const {useState, useCallback} = React;
+
+import { Application } from 'core/application';
+import Bar from "./bar";
+import angular from 'angular';
+// Some comment about react-select
+import * as Select from 'react-select';
+import {
+  LabeledValueList as LabeledValueL,
+  SomeThingElse,
+} from "@spinnaker/core";
+import './styles.less';
+import Baz from "../../../test/baz";
+
+import 'jquery';
+import 'bootstrap.less';
+      `,
+      // For some strange reason eslint fixer writes additional newline characters
+      output: `
+import angular from 'angular';
+import 'jquery';
+import React from 'react';
+// Some comment about react-select
+import * as Select from 'react-select';
+
+import { LabeledValueList as LabeledValueL, SomeThingElse } from '@spinnaker/core';
+import { Application } from 'core/application';
+
+import Bar from './bar';
+import Baz from '../../../test/baz';
+
+import 'bootstrap.less';
+import './styles.less';
+
+const {useState, useCallback} = React;
+      `,
+      errors: ['Sort the import statements'],
+    },
+  ],
+});

package/rules/import-sort.ts

@@ -0,0 +1,280 @@
+import type { Rule } from 'eslint';
+import type { ImportDeclaration, ImportDefaultSpecifier, ImportNamespaceSpecifier, ImportSpecifier } from 'estree';
+
+const CSS_IMPORT = /\.(css|less|scss|sass)$/;
+const MODULE_PATH_REGEX = /[./]*(.*)$/;
+const SPINNAKER_MODULE_PREFIX = /^(core|docker|amazon|titus|google|kubernetes|ecs|huaweicloud|appengine|oracle|cloudfoundry|azure|tencentcloud)\/.*/;
+/**
+ * Function supplied to an array's sort method that works on the path and module name skipping ., .. and /
+ */
+const relativeModuleSort = (a, b) => {
+  const aSource = MODULE_PATH_REGEX.exec(a.source.value)[1];
+  const bSource = MODULE_PATH_REGEX.exec(b.source.value)[1];
+
+  return aSource > bSource ? 1 : aSource === bSource ? 0 : -1;
+};
+
+/**
+ * Partitions the import specifiers in the given import declaration node based on the import type.
+ * i.e ImportDefaultSpecifier, ImportNamespaceSpecifier and ImportSpecifier
+ *
+ *  For example, `import * as React, {useState, useCallback} from 'react';` the following will be returned
+ *  {
+ *    namespaceSpecifier: <node for `* as React`> ,
+ *    importSpecifier: [<node for `useState`>, <node for `useCallback`>]
+ *  }
+ */
+const partitionImportSpecifiers = (importDeclaration: ImportDeclaration) => {
+  if (importDeclaration.specifiers.length === 0) {
+    return {
+      defaultSpecifier: null,
+      namespaceSpecifier: null,
+      importSpecifiers: null,
+    };
+  }
+
+  const defaultSpecifier = importDeclaration.specifiers.find(
+    (specifier) => specifier.type === 'ImportDefaultSpecifier',
+  ) as ImportDefaultSpecifier;
+  const namespaceSpecifier = importDeclaration.specifiers.find(
+    (specifier) => specifier.type === 'ImportNamespaceSpecifier',
+  ) as ImportNamespaceSpecifier;
+  const importSpecifiers = importDeclaration.specifiers.filter(
+    (specifier) => specifier.type === 'ImportSpecifier',
+  ) as ImportSpecifier[];
+
+  return { defaultSpecifier, namespaceSpecifier, importSpecifiers };
+};
+
+/**
+ * Sorts the import specifiers for the given import declaration node in the following order.
+ *    1. Default Specifier (i.e `React` in `import React, {useState} from 'react'`)
+ *    2. Namespace Specifier (i.e `* as React` in `import * as React, {useState} from 'react'`)
+ *    3. Import Specifier (i.e `useState, useCallback` in `import * as React, {useState, useCallback} from 'react'`)
+ */
+const sortImportSpecifiers = (importDeclaration: ImportDeclaration) => {
+  const { defaultSpecifier, namespaceSpecifier, importSpecifiers } = partitionImportSpecifiers(importDeclaration);
+  if (!importSpecifiers) {
+    return importDeclaration;
+  }
+
+  importSpecifiers.sort((a, b) => a.imported.name.localeCompare(b.imported.name));
+
+  importDeclaration.specifiers = [defaultSpecifier, namespaceSpecifier, ...importSpecifiers].filter(
+    (specifier) => !!specifier,
+  );
+
+  return importDeclaration;
+};
+
+/**
+ * Returns the text representation of the given import specifier node.
+ */
+const printImportSpecifier = (importSpecifier) => {
+  switch (importSpecifier.type) {
+    case 'ImportDefaultSpecifier':
+      return importSpecifier.local.name;
+    case 'ImportNamespaceSpecifier':
+      return `* as ${importSpecifier.local.name}`;
+    case 'ImportSpecifier':
+      return importSpecifier.local.name !== importSpecifier.imported.name
+        ? `${importSpecifier.imported.name} as ${importSpecifier.local.name}`
+        : importSpecifier.imported.name;
+  }
+};
+
+/**
+ * Returns the text representation of the given import declaration node.
+ *
+ * NOTE: The built-in `context.getSourceCode().getText(node)` can also return the text representation of a node, but it
+ * preserves the original positions of the import specifiers within the import declaration.
+ */
+const printImportDeclaration = (context, importDeclaration) => {
+  const source = importDeclaration.source.value;
+  const partitionedImportSpecifiers = partitionImportSpecifiers(importDeclaration);
+
+  const importSpecifiersText = Object.entries(partitionedImportSpecifiers).reduce(
+    (importSpecifiersText, [type, importSpecifiers]) => {
+      if (importSpecifiers == null || (Array.isArray(importSpecifiers) && importSpecifiers.length === 0)) {
+        return importSpecifiersText;
+      }
+
+      importSpecifiersText = importSpecifiersText !== '' ? `${importSpecifiersText}, ` : importSpecifiersText;
+
+      if (type === 'importSpecifiers') {
+        // There could be more than one specifier for type `ImportSpecifier`, so join them together.
+        const combinedImportSpecifiersText = (importSpecifiers as ImportSpecifier[])
+          .map(printImportSpecifier)
+          .join(', ');
+        importSpecifiersText = `${importSpecifiersText}{ ${combinedImportSpecifiersText} }`;
+      } else {
+        // There could only be one import specifier for other types i.e `ImportDefaultSpecifier` and
+        // `ImportNamespaceSpecifier`.
+        importSpecifiersText = `${importSpecifiersText}${printImportSpecifier(importSpecifiers)}`;
+      }
+
+      return importSpecifiersText;
+    },
+    '',
+  );
+
+  // Try to preserve the preceding comments for each import declaration.
+  const sourceCode = context.getSourceCode();
+  const isFirstImport = source === sourceCode.ast.body.filter((s) => s.type === 'ImportDeclaration')[0].source.value;
+  let prefix = '';
+  if (!isFirstImport) {
+    // Don't re-write the preceding comments of the first node since they may not be specific to the import statement.
+    const comments = sourceCode
+      .getCommentsBefore(importDeclaration)
+      .map((comment) => sourceCode.getText(comment))
+      .join('\n');
+
+    prefix = comments ? `${comments}\n` : '';
+  }
+
+  return importSpecifiersText !== ''
+    ? `${prefix}import ${importSpecifiersText} from '${source}';`
+    : `${prefix}import '${source}';`;
+};
+
+/**
+ * Returns a custom textual representation of import declarations which will be used to verify if they are already
+ * sorted. For example
+ *
+ *   `import React, {useState, useCallback} from 'react';\nimport angular from 'angular';`
+ *    will be written as
+ *   `react: React, useState, useCallback\nangular: angular`
+ */
+const getText = (importDeclarations) => {
+  return importDeclarations.reduce((output, importDeclaration) => {
+    const specifiersText = (importDeclaration.specifiers || []).map((s) => s.local.name).join(',');
+    return `${output}\n${importDeclaration.source.value}: ${specifiersText}`;
+  }, '');
+};
+
+/**
+ * Returns all non `ImportDeclaration` nodes that appear between the first and last `ImportDeclaration` nodes.
+ */
+const getAllNonImportDeclarationNodes = (body) => {
+  const importDeclarations = body.filter((node) => node.type === 'ImportDeclaration');
+  const startIndex = body.findIndex((node) => node.type === 'ImportDeclaration');
+  const lastIndex = body.findIndex((node) => node == importDeclarations[importDeclarations.length - 1]);
+
+  const nonImportDeclarationNodes = [];
+  for (let i = startIndex; i <= lastIndex; i++) {
+    if (body[i].type !== 'ImportDeclaration') {
+      nonImportDeclarationNodes.push(body[i]);
+    }
+  }
+
+  return nonImportDeclarationNodes;
+};
+
+/**
+ * Ensures the import declarations (along with their import specifiers) are sorted based on the following category
+ * and alphabetically within each category.
+ *  1. import npm package
+ *  2. import @spinnaker package
+ *  3. import modules using relative path
+ *  4. import css modules
+ *
+ *  NOTE: `ImportDeclaration` refers to the entire import statement. i.e `import foo from './foo';`. `ImportSpecifier`
+ *  refers to the members that are imported from the module. i.e `foo` in `import foo from './foo';`
+ */
+const ruleModule: Rule.RuleModule = {
+  create(context) {
+    return {
+      Program(program) {
+        const importDeclarations = program.body.filter(
+          (node) => node.type === 'ImportDeclaration',
+        ) as ImportDeclaration[];
+
+        if (!importDeclarations.length) {
+          return;
+        }
+        // Nodes between first and last `ImportDeclarationNodes` that aren't of type `ImportDeclaration`. These nodes
+        // must be re-written at the end of the import declarations.
+        const nonImportDeclarationNodes = getAllNonImportDeclarationNodes(program.body);
+        const start = importDeclarations[0].range[0];
+        const end = importDeclarations[importDeclarations.length - 1].range[1];
+        const originalTextOfImportDeclarations = getText(importDeclarations);
+
+        // Partition the import declarations into four groups `package`, `spinnaker`, `relativeModule`, `css` so that
+        // import declarations within each partition can be sorted alphabetically and written back in the expected
+        // partition order.
+        const partitions = importDeclarations.reduce(
+          (partitions, declarationNode) => {
+            const value = declarationNode.source.value as string;
+            if (CSS_IMPORT.test(value)) {
+              partitions.css.push(declarationNode);
+            } else if (value.startsWith('@spinnaker')) {
+              partitions.spinnaker.push(declarationNode);
+            } else if (value.startsWith('.')) {
+              partitions.relativeModule.push(declarationNode);
+            } else if (SPINNAKER_MODULE_PREFIX.test(value)) {
+              partitions.spinnaker.push(declarationNode);
+            } else {
+              partitions.package.push(declarationNode);
+            }
+            return partitions;
+          },
+          {
+            package: [],
+            spinnaker: [],
+            relativeModule: [],
+            css: [],
+          },
+        );
+
+        const sortedImportedDeclarations = Object.values(partitions).map((importDeclarations) =>
+          importDeclarations
+            // Sort import specifiers within each import declaration
+            .map(sortImportSpecifiers)
+            // Now sort all import declarations alphabetically within each partition
+            .sort(relativeModuleSort),
+        );
+        const sortedTextOfImportDeclarations = getText(sortedImportedDeclarations.flat());
+
+        if (originalTextOfImportDeclarations === sortedTextOfImportDeclarations) {
+          return;
+        }
+
+        const importDeclarationsText = sortedImportedDeclarations
+          .filter((declarationList) => declarationList.length > 0)
+          .map((importDeclarations) =>
+            // Print the code from sorted import declarations for each partition
+            importDeclarations
+              .map((importDeclaration) => printImportDeclaration(context, importDeclaration))
+              .join('\n'),
+          )
+          // Combine sorted declarations from each partition
+          .join('\n\n');
+
+        const sourceCode = context.getSourceCode();
+        const nonImportDeclarationsText =
+          nonImportDeclarationNodes.length > 0
+            ? nonImportDeclarationNodes.map((node) => sourceCode.getText(node)).join('\n')
+            : null;
+
+        const fixedText = nonImportDeclarationsText
+          ? `${importDeclarationsText}\n\n${nonImportDeclarationsText}`
+          : importDeclarationsText;
+
+        context.report({
+          fix: (fixer) => fixer.replaceTextRange([start, end], fixedText),
+          message: 'Sort the import statements',
+          node: importDeclarations[0],
+        });
+      },
+    };
+  },
+  meta: {
+    fixable: 'code',
+    type: 'problem',
+    docs: {
+      description: 'Sort the import statements',
+    },
+  },
+};
+
+export default ruleModule;

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

@@ -0,0 +1,78 @@
+import ruleTester from '../utils/ruleTester';
+import rule from './migrate-to-mock-http-client';
+
+ruleTester.run('migrate-to-mock-http-client', rule, {
+  valid: [
+    {
+      code: 'it(() => { const http = mockHttpClient(); })',
+    },
+  ],
+  invalid: [
+    {
+      code: `it('does things', () => { $httpBackend.flush() })`,
+      output: `it('does things', async () => { $httpBackend.flush() })`,
+      errors: ['Migrate to MockHttpClient (step 1): make test function async'],
+    },
+
+    // Step 1 make async
+    {
+      code: `
+describe('foo bar', () => {
+  it('does things', () => {
+    $httpBackend.flush()
+  })
+})`,
+      output: `
+describe('foo bar', () => {
+  it('does things', async () => {
+    $httpBackend.flush()
+  })
+})`,
+      errors: ['Migrate to MockHttpClient (step 1): make test function async'],
+    },
+
+    // Step 2 create mock
+    {
+      code: `
+describe('foo bar', () => {
+  it('does things', async () => {
+    $httpBackend.flush()
+  })
+})`,
+      output: `import { mockHttpClient } from 'core/api/mock/jasmine';
+
+describe('foo bar', () => {
+  it('does things', async () => {
+    const http = mockHttpClient();
+$httpBackend.flush()
+  })
+})`,
+      errors: ['Migrate to MockHttpClient (step 2): Create a MockHttpClient named "http"'],
+    },
+
+    // Step 3 change variables
+    {
+      code: `
+import { mockHttpClient } from 'core/api/mock/jasmine';
+describe('foo bar', () => {
+  it('does things', async () => {
+    const http = mockHttpClient();
+    $httpBackend.expectGET('/foo/bar').respond(200, { bar: 15 });
+    service.fetchBars();
+    $httpBackend.flush()
+  })
+})`,
+      output: `
+import { mockHttpClient } from 'core/api/mock/jasmine';
+describe('foo bar', () => {
+  it('does things', async () => {
+    const http = mockHttpClient();
+    http.expectGET('/foo/bar').respond(200, { bar: 15 });
+    service.fetchBars();
+    await http.flush()
+  })
+})`,
+      errors: ['Migrate to MockHttpClient (step 3): replace $httpBackend with http'],
+    },
+  ],
+});