fix(ng-update): hammer v9 migration should not unnecessarily set up gestures (#17713)

* fix(ng-update): hammer v9 migration should not unnecessarily set up gestures

We currently do not properly handle the scenario where a project
uses a custom gesture config with event names matching the ones
provided by the deprecated Angular Material gesture config.

Prior to this commit, the migration would set up the Material
gesture config next to the custom one. This is incorrect, and
we should do nothing since a gesture config is already configured.

Though, if we detect that there are manual references to the
Angular Material gesture config, the detection is ambiguous
and the migration should warn that the developer should manually
remove the references to the deprecated Material gesture config.

Also improves messaging for the migration, adds a description
of the expected migration behavior into the migration rule and
adds safety checks for `ts.Symbol#declaration` (should never
be undefined according to typing, but for odd reasons it can be
undefined, and we do not want to throw accidentally).

* Fix comment wording

* fixup! Fix comment wording

Address feedback

Author: devversion

src/cdk/schematics/update-tool/utils/imports.ts

@@ -19,7 +19,7 @@ export function getImportOfIdentifier(typeChecker: ts.TypeChecker, node: ts.Iden
     null {
   const symbol = typeChecker.getSymbolAtLocation(node);
 
-  if (!symbol || !symbol.declarations.length) {
+  if (!symbol || !symbol.declarations || !symbol.declarations.length) {
     return null;
   }
 

src/material/schematics/ng-update/test-cases/v9/hammer-migration-v9.spec.ts

@@ -59,9 +59,12 @@ describe('v9 HammerJS removal', () => {
         import 'hammerjs';
       `);
 
-      await runMigration();
+      const {logOutput} = await runMigration();
 
       expect(tree.readContent('/projects/cdk-testing/src/main.ts')).not.toContain('hammerjs');
+      expect(logOutput).toContain(
+        'General notice: The HammerJS v9 migration for Angular components is not able to ' +
+        'migrate tests. Please manually clean up tests in your project if they rely on HammerJS.');
     });
 
     it('should remove empty named import to load hammerjs', async () => {
@@ -310,9 +313,13 @@ describe('v9 HammerJS removal', () => {
         }
       `);
 
-      await runMigration();
+      const {logOutput} = await runMigration();
 
       expect(tree.readContent('/projects/cdk-testing/src/main.ts')).toContain(`import 'hammerjs';`);
+      expect(logOutput).toContain(
+        'General notice: The HammerJS v9 migration for Angular components is not able to ' +
+        'migrate tests. Please manually clean up tests in your project if they rely on the ' +
+        'deprecated Angular Material gesture config.');
     });
 
     it('should ignore global reference to Hammer if not resolved to known types', async () => {
@@ -741,70 +748,180 @@ describe('v9 HammerJS removal', () => {
       .toBe('0.0.0');
   });
 
-  it('should not remove hammerjs if no usage could be detected but custom gesture config is set up',
-     async () => {
-       appendContent('/projects/cdk-testing/src/main.ts', `
-         import 'hammerjs';
-       `);
-
-       writeFile('/projects/cdk-testing/src/test.component.ts', dedent`
-         import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
-         import {NgModule} from '@angular/core';
-         import {CustomGestureConfig} from "../gesture-config";
-
-         @NgModule({
-           providers: [
-             {
-               provide: HAMMER_GESTURE_CONFIG,
-               useClass: CustomGestureConfig
-             },
-           ],
-         })
-         export class TestModule {}
-       `);
-
-       writeFile('/projects/cdk-testing/src/sub.component.ts', dedent`
-         import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
-         import {NgModule} from '@angular/core';
-         import {GestureConfig} from '@angular/material/core';
-
-         @NgModule({
-           providers: [
-             {
-               provide: HAMMER_GESTURE_CONFIG,
-               useClass: GestureConfig
-             },
-           ],
-         })
-         export class SubModule {}
-       `);
-
-       const {logOutput} = await runMigration();
-
-       expect(logOutput).toContain(`unable to perform the full migration for this target, but ` +
-         `removed all references to the deprecated Angular Material gesture config.`);
-       expect(tree.readContent('/projects/cdk-testing/src/main.ts')).toContain('hammerjs');
-       expect(tree.readContent('/projects/cdk-testing/src/test.component.ts')).toContain(dedent`
-         import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
-         import {NgModule} from '@angular/core';
-         import {CustomGestureConfig} from "../gesture-config";
-
-         @NgModule({
-           providers: [
-             {
-               provide: HAMMER_GESTURE_CONFIG,
-               useClass: CustomGestureConfig
-             },
-           ],
-         })
-         export class TestModule {}`);
-       expect(tree.readContent('/projects/cdk-testing/src/sub.component.ts')).toContain(dedent`
-         import {NgModule} from '@angular/core';
-
-         @NgModule({
-           providers: [
-           ],
-         })
-         export class SubModule {}`);
-     });
+  describe('with custom gesture config', () => {
+    beforeEach(() => {
+      addPackageToPackageJson(tree, 'hammerjs', '0.0.0');
+      appendContent('/projects/cdk-testing/src/main.ts', `import 'hammerjs';`);
+    });
+
+    it('should not setup copied gesture config if hammer is used in template', async () => {
+      writeFile('/projects/cdk-testing/src/test.component.ts', dedent`
+        import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
+        import {NgModule} from '@angular/core';
+        import {CustomGestureConfig} from "../gesture-config";
+
+        @NgModule({
+          providers: [
+            {
+              provide: HAMMER_GESTURE_CONFIG,
+              useClass: CustomGestureConfig
+            },
+          ],
+        })
+        export class TestModule {}
+      `);
+
+      writeFile('/projects/cdk-testing/src/app/app.component.html', `
+        <span (longpress)="onPress()"></span>
+      `);
+
+      await runMigration();
+
+      expect(tree.exists('/projects/cdk-testing/src/gesture-config.ts')).toBe(false);
+      expect(tree.readContent('/projects/cdk-testing/src/main.ts')).toContain('hammerjs');
+      expect(runner.tasks.some(t => t.name === 'node-package')).toBe(false);
+      expect(tree.readContent('/projects/cdk-testing/src/test.component.ts')).toContain(dedent`
+        import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
+        import {NgModule} from '@angular/core';
+        import {CustomGestureConfig} from "../gesture-config";
+
+        @NgModule({
+          providers: [
+            {
+              provide: HAMMER_GESTURE_CONFIG,
+              useClass: CustomGestureConfig
+            },
+          ],
+        })
+        export class TestModule {}`);
+    });
+
+    it('should warn if hammer is used in template and references to Material gesture config ' +
+      'were detected', async () => {
+        writeFile('/projects/cdk-testing/src/test.component.ts', dedent`
+          import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
+          import {NgModule} from '@angular/core';
+          import {CustomGestureConfig} from "../gesture-config";
+
+          @NgModule({
+            providers: [
+              {
+                provide: HAMMER_GESTURE_CONFIG,
+                useClass: CustomGestureConfig
+              },
+            ],
+          })
+          export class TestModule {}
+        `);
+
+        const subModuleFileContent = dedent`
+          import {NgModule} from '@angular/core';
+          import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
+          import {GestureConfig} from '@angular/material/core';
+
+          @NgModule({
+            providers: [
+              {
+                provide: HAMMER_GESTURE_CONFIG,
+                useClass: GestureConfig
+              },
+            ],
+          })
+          export class SubModule {}
+        `;
+
+        writeFile('/projects/cdk-testing/src/sub.module.ts', subModuleFileContent);
+        writeFile('/projects/cdk-testing/src/app/app.component.html', `
+          <span (longpress)="onPress()"></span>
+        `);
+
+        const {logOutput} = await runMigration();
+
+      expect(logOutput).toContain(
+        'This target cannot be migrated completely. Please manually remove references ' +
+        'to the deprecated Angular Material gesture config.');
+      expect(runner.tasks.some(t => t.name === 'node-package')).toBe(false);
+      expect(tree.readContent('/projects/cdk-testing/src/main.ts')).toContain('hammerjs');
+        expect(tree.readContent('/projects/cdk-testing/src/test.component.ts')).toContain(dedent`
+          import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
+          import {NgModule} from '@angular/core';
+          import {CustomGestureConfig} from "../gesture-config";
+
+          @NgModule({
+            providers: [
+              {
+                provide: HAMMER_GESTURE_CONFIG,
+                useClass: CustomGestureConfig
+              },
+            ],
+          })
+          export class TestModule {}`);
+        expect(tree.readContent('/projects/cdk-testing/src/sub.module.ts'))
+            .toBe(subModuleFileContent);
+      });
+
+    it('should not remove hammerjs if no usage could be detected', async () => {
+      writeFile('/projects/cdk-testing/src/test.component.ts', dedent`
+        import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
+        import {NgModule} from '@angular/core';
+        import {CustomGestureConfig} from "../gesture-config";
+
+        @NgModule({
+          providers: [
+            {
+              provide: HAMMER_GESTURE_CONFIG,
+              useClass: CustomGestureConfig
+            },
+          ],
+        })
+        export class TestModule {}
+      `);
+
+      writeFile('/projects/cdk-testing/src/sub.component.ts', dedent`
+        import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
+        import {NgModule} from '@angular/core';
+        import {GestureConfig} from '@angular/material/core';
+
+        @NgModule({
+          providers: [
+            {
+              provide: HAMMER_GESTURE_CONFIG,
+              useClass: GestureConfig
+            },
+          ],
+        })
+        export class SubModule {}
+      `);
+
+      const {logOutput} = await runMigration();
+
+      expect(logOutput).toContain(
+        'This target cannot be migrated completely, but all references to the ' +
+        'deprecated Angular Material gesture have been removed.');
+      expect(runner.tasks.some(t => t.name === 'node-package')).toBe(false);
+      expect(tree.readContent('/projects/cdk-testing/src/main.ts')).toContain('hammerjs');
+      expect(tree.readContent('/projects/cdk-testing/src/test.component.ts')).toContain(dedent`
+        import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
+        import {NgModule} from '@angular/core';
+        import {CustomGestureConfig} from "../gesture-config";
+
+        @NgModule({
+          providers: [
+            {
+              provide: HAMMER_GESTURE_CONFIG,
+              useClass: CustomGestureConfig
+            },
+          ],
+        })
+        export class TestModule {}`);
+      expect(tree.readContent('/projects/cdk-testing/src/sub.component.ts')).toContain(dedent`
+        import {NgModule} from '@angular/core';
+
+        @NgModule({
+          providers: [
+          ],
+        })
+        export class SubModule {}`);
+    });
+  });
 });