Skip to content

Commit 2f197cd

Browse files
devversionmmalerba
authored andcommitted
refactor: hammer migration should add "HammerModule" if needed (#17444)
The v9 HammerJS migration should add the `HammerModule` to the app module if needed. Additionally if HammerJS is not used in templates (or in general), we remove references to the "HammerModule". This scenario can happen if someone updates to v9 Angular while keeping Angular Material v8. In that case, the author will add the `HammerModule` to the app module and whenever the update to v9+ Angular Material is performed, the `HammerModule` is not needed anymore.. so we can remove it automatically.
1 parent d3512c0 commit 2f197cd

File tree

2 files changed

+217
-60
lines changed

2 files changed

+217
-60
lines changed

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

Lines changed: 82 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,41 @@ describe('v9 HammerJS removal', () => {
102102
export class TestModule {}`);
103103
});
104104

105+
it('should remove references to HammerModule', async () => {
106+
writeFile('/projects/cdk-testing/src/test.module.ts', dedent`
107+
import {NgModule} from '@angular/core';
108+
import {HAMMER_GESTURE_CONFIG, HammerModule} from '@angular/platform-browser'; // some comment
109+
import {GestureConfig} from '@angular/material/core';
110+
111+
@NgModule({
112+
providers: [
113+
{provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig},
114+
OtherProvider,
115+
],
116+
imports: [
117+
HammerModule,
118+
OtherModule
119+
],
120+
})
121+
export class TestModule {}
122+
`);
123+
124+
await runMigration();
125+
126+
expect(tree.readContent('/projects/cdk-testing/src/test.module.ts')).toContain(dedent`
127+
import {NgModule} from '@angular/core';
128+
129+
@NgModule({
130+
providers: [
131+
OtherProvider,
132+
],
133+
imports: [
134+
OtherModule
135+
],
136+
})
137+
export class TestModule {}`);
138+
});
139+
105140
it('should remove references to gesture config if imports are aliased', async () => {
106141
writeFile('/projects/cdk-testing/src/test.module.ts', dedent`
107142
import {NgModule} from '@angular/core';
@@ -318,14 +353,15 @@ describe('v9 HammerJS removal', () => {
318353

319354
writeFile('/projects/cdk-testing/src/test.module.ts', dedent`
320355
import {NgModule} from '@angular/core';
321-
import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
356+
import {HAMMER_GESTURE_CONFIG, HammerModule} from '@angular/platform-browser';
322357
import {GestureConfig} from '@angular/material/core';
323358
324359
@NgModule({
325360
providers: [
326361
{provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig},
327362
OtherProvider,
328-
]
363+
],
364+
imports: [HammerModule],
329365
})
330366
export class TestModule {}
331367
`);
@@ -340,7 +376,8 @@ describe('v9 HammerJS removal', () => {
340376
@NgModule({
341377
providers: [
342378
OtherProvider,
343-
]
379+
],
380+
imports: [],
344381
})
345382
export class TestModule {}`);
346383
});
@@ -507,7 +544,7 @@ describe('v9 HammerJS removal', () => {
507544
export class TestModule {}`);
508545
});
509546

510-
it('should add gesture config provider to app module', async () => {
547+
it('should set up Hammer gestures in app module', async () => {
511548
writeFile('/projects/cdk-testing/src/app/app.component.html', `
512549
<span (pinch)="onPinch($event)"></span>
513550
`);
@@ -517,7 +554,7 @@ describe('v9 HammerJS removal', () => {
517554
expect(tree.readContent('/projects/cdk-testing/src/main.ts')).toContain(`import 'hammerjs';`);
518555
expect(tree.exists('/projects/cdk-testing/src/gesture-config.ts')).toBe(true);
519556
expect(tree.readContent('/projects/cdk-testing/src/app/app.module.ts')).toContain(dedent`\
520-
import { BrowserModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
557+
import { BrowserModule, HammerModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
521558
import { NgModule } from '@angular/core';
522559
523560
import { AppComponent } from './app.component';
@@ -528,7 +565,8 @@ describe('v9 HammerJS removal', () => {
528565
AppComponent
529566
],
530567
imports: [
531-
BrowserModule
568+
BrowserModule,
569+
HammerModule
532570
],
533571
providers: [{ provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig }],
534572
bootstrap: [AppComponent]
@@ -565,7 +603,7 @@ describe('v9 HammerJS removal', () => {
565603
expect(tree.readContent('/projects/cdk-testing/src/main.ts')).toContain(`import 'hammerjs';`);
566604
expect(tree.exists('/projects/cdk-testing/src/gesture-config.ts')).toBe(true);
567605
expect(tree.readContent('/projects/cdk-testing/src/app/app.module.ts')).toContain(dedent`\
568-
import { BrowserModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
606+
import { BrowserModule, HammerModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
569607
import { NgModule } from '@angular/core';
570608
571609
import { AppComponent } from './app.component';
@@ -576,7 +614,8 @@ describe('v9 HammerJS removal', () => {
576614
AppComponent
577615
],
578616
imports: [
579-
BrowserModule
617+
BrowserModule,
618+
HammerModule
580619
],
581620
providers: [{ provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig }],
582621
bootstrap: [AppComponent]
@@ -610,7 +649,7 @@ describe('v9 HammerJS removal', () => {
610649
expect(tree.readContent('/projects/cdk-testing/src/main.ts')).toContain(`import 'hammerjs';`);
611650
expect(tree.exists('/projects/cdk-testing/src/gesture-config.ts')).toBe(true);
612651
expect(tree.readContent('/projects/cdk-testing/src/app/app.module.ts')).toContain(dedent`
613-
import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
652+
import { HAMMER_GESTURE_CONFIG, HammerModule } from '@angular/platform-browser';
614653
import {NgModule} from '@angular/core';
615654
import { GestureConfig } from "../gesture-config";
616655
@@ -621,6 +660,38 @@ describe('v9 HammerJS removal', () => {
621660
useClass: GestureConfig
622661
},
623662
],
663+
imports: [HammerModule],
664+
})
665+
export class AppModule {}`);
666+
});
667+
668+
it('should not add HammerModule multiple times if already provided', async () => {
669+
writeFile('/projects/cdk-testing/src/app/app.component.html', `
670+
<span (pinch)="onPinch($event)"></span>
671+
`);
672+
673+
writeFile('/projects/cdk-testing/src/app/app.module.ts', dedent`
674+
import {HammerModule as myHammerModule} from '@angular/platform-browser';
675+
import {NgModule} from '@angular/core';
676+
677+
@NgModule({
678+
imports: [myHammerModule],
679+
})
680+
export class AppModule {}
681+
`);
682+
683+
await runMigration();
684+
685+
expect(tree.readContent('/projects/cdk-testing/src/main.ts')).toContain(`import 'hammerjs';`);
686+
expect(tree.exists('/projects/cdk-testing/src/gesture-config.ts')).toBe(true);
687+
expect(tree.readContent('/projects/cdk-testing/src/app/app.module.ts')).toContain(dedent`
688+
import { HammerModule as myHammerModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
689+
import {NgModule} from '@angular/core';
690+
import { GestureConfig } from "../gesture-config";
691+
692+
@NgModule({
693+
imports: [myHammerModule],
694+
providers: [{ provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig }],
624695
})
625696
export class AppModule {}`);
626697
});
@@ -710,8 +781,8 @@ describe('v9 HammerJS removal', () => {
710781

711782
const {logOutput} = await runMigration();
712783

713-
expect(logOutput).toContain(
714-
`Material gesture config is used while a custom gesture config is set up`);
784+
expect(logOutput).toContain(`unable to perform the full migration for this target, but ` +
785+
`removed all references to the deprecated Angular Material gesture config.`);
715786
expect(tree.readContent('/projects/cdk-testing/src/main.ts')).toContain('hammerjs');
716787
expect(tree.readContent('/projects/cdk-testing/src/test.component.ts')).toContain(dedent`
717788
import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';

0 commit comments

Comments
 (0)