Skip to content

Commit b53e092

Browse files
devversionjelbourn
authored andcommitted
fix(ng-update): do not copy gesture config if only standard HammerJS events are used (#17753)
Currently the HammerJS v9 migration always copies the gesture config if HammerJS events are used. This is not necessary for projects where only _standard_ HammerJS events are used. These events are provided by the default hammer gesture config that comes with the `HammerModule`.
1 parent 7124382 commit b53e092

File tree

3 files changed

+287
-138
lines changed

3 files changed

+287
-138
lines changed

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

Lines changed: 96 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -297,7 +297,7 @@ describe('v9 HammerJS removal', () => {
297297
});
298298
});
299299

300-
describe('hammerjs used', () => {
300+
describe('hammerjs used programmatically', () => {
301301
beforeEach(() => {
302302
appendContent('/projects/cdk-testing/src/main.ts', `
303303
import 'hammerjs';
@@ -335,7 +335,7 @@ describe('v9 HammerJS removal', () => {
335335
await runMigration();
336336

337337
expect(tree.readContent('/projects/cdk-testing/src/main.ts'))
338-
.not.toContain(`import 'hammerjs';`);
338+
.not.toContain(`import 'hammerjs';`);
339339
});
340340

341341
it('should not create gesture config if hammer is only used programmatically', async () => {
@@ -388,10 +388,93 @@ describe('v9 HammerJS removal', () => {
388388
})
389389
export class TestModule {}`);
390390
});
391+
});
392+
393+
describe('used in template with standard HammerJS events', () => {
394+
beforeEach(() => {
395+
appendContent('/projects/cdk-testing/src/main.ts', `
396+
import 'hammerjs';
397+
`);
398+
});
391399

392-
it('should create gesture config file if used in template', async () => {
400+
it('should not create gesture config file', async () => {
393401
writeFile('/projects/cdk-testing/src/app/app.component.html', `
394-
<span (longpress)="onPress()"></span>
402+
<span (panstart)="onPanStart()"></span>
403+
`);
404+
405+
await runMigration();
406+
407+
expect(tree.readContent('/projects/cdk-testing/src/main.ts')).toContain(`import 'hammerjs';`);
408+
expect(tree.exists('/projects/cdk-testing/src/gesture-config.ts')).toBe(false);
409+
});
410+
411+
it('should not setup custom gesture config provider in root module', async () => {
412+
writeFile('/projects/cdk-testing/src/app/app.component.html', `
413+
<span (panstart)="onPanStart()"></span>
414+
`);
415+
416+
await runMigration();
417+
418+
expect(tree.readContent('/projects/cdk-testing/src/app/app.module.ts')).toContain(dedent`\
419+
import { BrowserModule, HammerModule } from '@angular/platform-browser';
420+
import { NgModule } from '@angular/core';
421+
422+
import { AppComponent } from './app.component';
423+
424+
@NgModule({
425+
declarations: [
426+
AppComponent
427+
],
428+
imports: [
429+
BrowserModule,
430+
HammerModule
431+
],
432+
providers: [],
433+
bootstrap: [AppComponent]
434+
})
435+
export class AppModule { }`);
436+
});
437+
438+
it('should remove references to the deprecated gesture config', async () => {
439+
writeFile('/projects/cdk-testing/src/app/app.component.html', `
440+
<span (panstart)="onPanStart()"></span>
441+
`);
442+
443+
writeFile('/projects/cdk-testing/src/test.module.ts', dedent`
444+
import {NgModule} from '@angular/core';
445+
import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
446+
import {GestureConfig} from '@angular/material/core';
447+
448+
@NgModule({
449+
providers: [{provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig}]
450+
})
451+
export class TestModule {}
452+
`);
453+
454+
await runMigration();
455+
456+
expect(tree.readContent('/projects/cdk-testing/src/test.module.ts')).toContain(dedent`
457+
import {NgModule} from '@angular/core';
458+
459+
@NgModule({
460+
providers: []
461+
})
462+
export class TestModule {}`);
463+
});
464+
});
465+
466+
describe('used in template with custom Material gesture events', () => {
467+
beforeEach(() => {
468+
appendContent('/projects/cdk-testing/src/main.ts', `
469+
import 'hammerjs';
470+
`);
471+
});
472+
473+
it('should create gesture config file', async () => {
474+
writeFile('/projects/cdk-testing/src/app/app.component.html', `
475+
<span (panstart)="onPanStart()">
476+
<span (longpress)="onPress()"></span>
477+
</span>
395478
`);
396479

397480
await runMigration();
@@ -441,7 +524,7 @@ describe('v9 HammerJS removal', () => {
441524

442525
it('should create gesture config file if used in template and programmatically', async () => {
443526
writeFile('/projects/cdk-testing/src/app/app.component.html', `
444-
<span (rotatemove)="onRotate($event)"></span>
527+
<span (slide)="onSlide($event)"></span>
445528
`);
446529

447530
writeFile('/projects/cdk-testing/src/app/hammer.ts', `
@@ -478,7 +561,7 @@ describe('v9 HammerJS removal', () => {
478561

479562
it('should rewrite references to gesture config', async () => {
480563
writeFile('/projects/cdk-testing/src/app/app.component.html', `
481-
<span (panstart)="onPanStart()"></span>
564+
<span (slidestart)="onSlideStart()"></span>
482565
`);
483566

484567
writeFile('/projects/cdk-testing/src/nested/test.module.ts', dedent`
@@ -515,7 +598,7 @@ describe('v9 HammerJS removal', () => {
515598

516599
it('should rewrite references to gesture config without causing conflicts', async () => {
517600
writeFile('/projects/cdk-testing/src/app/app.component.html', `
518-
<span (panstart)="onPanStart()"></span>
601+
<span (slideend)="onSlideEnd()"></span>
519602
`);
520603

521604
writeFile('/projects/cdk-testing/src/test.module.ts', dedent`
@@ -553,15 +636,15 @@ describe('v9 HammerJS removal', () => {
553636

554637
it('should set up Hammer gestures in app module', async () => {
555638
writeFile('/projects/cdk-testing/src/app/app.component.html', `
556-
<span (pinch)="onPinch($event)"></span>
639+
<span (longpress)="onLongPress($event)"></span>
557640
`);
558641

559642
await runMigration();
560643

561644
expect(tree.readContent('/projects/cdk-testing/src/main.ts')).toContain(`import 'hammerjs';`);
562645
expect(tree.exists('/projects/cdk-testing/src/gesture-config.ts')).toBe(true);
563646
expect(tree.readContent('/projects/cdk-testing/src/app/app.module.ts')).toContain(dedent`\
564-
import { BrowserModule, HammerModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
647+
import { BrowserModule, HAMMER_GESTURE_CONFIG, HammerModule } from '@angular/platform-browser';
565648
import { NgModule } from '@angular/core';
566649
567650
import { AppComponent } from './app.component';
@@ -584,7 +667,7 @@ describe('v9 HammerJS removal', () => {
584667
it('should add gesture config provider to app module if module is referenced through ' +
585668
're-exports in bootstrap', async () => {
586669
writeFile('/projects/cdk-testing/src/app/app.component.html', `
587-
<span (pinch)="onPinch($event)"></span>
670+
<span (slide)="onSlide($event)"></span>
588671
`);
589672

590673
writeFile('/projects/cdk-testing/src/main.ts', `
@@ -610,7 +693,7 @@ describe('v9 HammerJS removal', () => {
610693
expect(tree.readContent('/projects/cdk-testing/src/main.ts')).toContain(`import 'hammerjs';`);
611694
expect(tree.exists('/projects/cdk-testing/src/gesture-config.ts')).toBe(true);
612695
expect(tree.readContent('/projects/cdk-testing/src/app/app.module.ts')).toContain(dedent`\
613-
import { BrowserModule, HammerModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
696+
import { BrowserModule, HAMMER_GESTURE_CONFIG, HammerModule } from '@angular/platform-browser';
614697
import { NgModule } from '@angular/core';
615698
616699
import { AppComponent } from './app.component';
@@ -632,7 +715,7 @@ describe('v9 HammerJS removal', () => {
632715

633716
it('should not add gesture config provider multiple times if already provided', async () => {
634717
writeFile('/projects/cdk-testing/src/app/app.component.html', `
635-
<span (pinch)="onPinch($event)"></span>
718+
<span (slide)="onSlide($event)"></span>
636719
`);
637720

638721
writeFile('/projects/cdk-testing/src/app/app.module.ts', dedent`
@@ -674,7 +757,7 @@ describe('v9 HammerJS removal', () => {
674757

675758
it('should not add HammerModule multiple times if already provided', async () => {
676759
writeFile('/projects/cdk-testing/src/app/app.component.html', `
677-
<span (pinch)="onPinch($event)"></span>
760+
<span (slide)="onSlide($event)"></span>
678761
`);
679762

680763
writeFile('/projects/cdk-testing/src/app/app.module.ts', dedent`

0 commit comments

Comments
 (0)