fix(update): support parenthesized directive metadata (#12314)

* Currently if the directive metadata is parenthesized, the upgrade tool will fail due to a runtime exception. We should properly handle that edge-case since the `ComponentWalker` is one of major parts for the upgrade tool and will persist in future releases.
* No longer fails if a `@Component` is being created without any metadata or a wrong number of arguments (rel: angular/angular@9a6f27c)

Author: devversion

src/lib/schematics/update/tslint/component-walker.ts

@@ -3,7 +3,7 @@
  */
 import {existsSync, readFileSync} from 'fs'
 import {dirname, join, resolve} from 'path';
-import {Fix, IOptions, RuleFailure, RuleWalker} from 'tslint';
+import {IOptions, RuleWalker} from 'tslint';
 import * as ts from 'typescript';
 import {getLiteralTextWithoutQuotes} from '../typescript/literal';
 import {createComponentFile, ExternalResource} from "./component-file";
@@ -41,7 +41,13 @@ export class ComponentWalker extends RuleWalker {
   }
 
   private _visitDirectiveCallExpression(callExpression: ts.CallExpression) {
-    const directiveMetadata = callExpression.arguments[0] as ts.ObjectLiteralExpression;
+    // If the call expressions does not have the correct amount of arguments, we can assume that
+    // this call expression is not related to Angular and just uses a similar decorator name.
+    if (callExpression.arguments.length !== 1) {
+      return;
+    }
+
+    const directiveMetadata = this._findMetadataFromExpression(callExpression.arguments[0]);
 
     if (!directiveMetadata) {
       return;
@@ -121,11 +127,20 @@ export class ComponentWalker extends RuleWalker {
     this.visitExternalStylesheet(stylesheetFile);
   }
 
-  /** Creates a TSLint rule failure for the given external resource. */
-  protected addExternalResourceFailure(file: ExternalResource, message: string, fix?: Fix) {
-    const ruleFailure = new RuleFailure(file, file.getStart(), file.getEnd(),
-        message, this.getRuleName(), fix);
+  /**
+   * Recursively searches for the metadata object literal expression inside of a directive call
+   * expression. Since expression calls can be nested through *parenthesized* expressions, we
+   * need to recursively visit and check every expression inside of a parenthesized expression.
+   *
+   * e.g. @Component((({myMetadataExpression}))) will return `myMetadataExpression`.
+   */
+  private _findMetadataFromExpression(node: ts.Expression): ts.ObjectLiteralExpression | null {
+    if (node.kind === ts.SyntaxKind.ObjectLiteralExpression) {
+      return node as ts.ObjectLiteralExpression;
+    } else if (node.kind === ts.SyntaxKind.ParenthesizedExpression) {
+      return this._findMetadataFromExpression((node as ts.ParenthesizedExpression).expression);
+    }
 
-    this.addFailure(ruleFailure);
+    return null;
   }
 }