Skip to content

Commit

Permalink
fix(ng-update): do not copy gesture config if only standard HammerJS …
Browse files Browse the repository at this point in the history 
…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`.
  • Loading branch information
@devversion @jelbourn
devversion authored and jelbourn committed Nov 20, 2019
1 parent 7124382 commit b53e092
Show file tree
Hide file tree
Showing 3 changed files with 287 additions and 138 deletions.
109 changes: 96 additions & 13 deletions src/material/schematics/ng-update/test-cases/v9/misc/hammer-migration-v9.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -297,7 +297,7 @@ describe('v9 HammerJS removal', () => {
});
});

describe('hammerjs used', () => {
describe('hammerjs used programmatically', () => {
beforeEach(() => {
appendContent('/projects/cdk-testing/src/main.ts', `
import 'hammerjs';
Expand Down Expand Up @@ -335,7 +335,7 @@ describe('v9 HammerJS removal', () => {
await runMigration();

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

it('should not create gesture config if hammer is only used programmatically', async () => {
Expand Down Expand Up @@ -388,10 +388,93 @@ describe('v9 HammerJS removal', () => {
})
export class TestModule {}`);
});
});

describe('used in template with standard HammerJS events', () => {
beforeEach(() => {
appendContent('/projects/cdk-testing/src/main.ts', `
import 'hammerjs';
`);
});

it('should create gesture config file if used in template', async () => {
it('should not create gesture config file', async () => {
writeFile('/projects/cdk-testing/src/app/app.component.html', `
<span (longpress)="onPress()"></span>
<span (panstart)="onPanStart()"></span>
`);

await runMigration();

expect(tree.readContent('/projects/cdk-testing/src/main.ts')).toContain(`import 'hammerjs';`);
expect(tree.exists('/projects/cdk-testing/src/gesture-config.ts')).toBe(false);
});

it('should not setup custom gesture config provider in root module', async () => {
writeFile('/projects/cdk-testing/src/app/app.component.html', `
<span (panstart)="onPanStart()"></span>
`);

await runMigration();

expect(tree.readContent('/projects/cdk-testing/src/app/app.module.ts')).toContain(dedent`\
import { BrowserModule, HammerModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HammerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }`);
});

it('should remove references to the deprecated gesture config', async () => {
writeFile('/projects/cdk-testing/src/app/app.component.html', `
<span (panstart)="onPanStart()"></span>
`);

writeFile('/projects/cdk-testing/src/test.module.ts', 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 TestModule {}
`);

await runMigration();

expect(tree.readContent('/projects/cdk-testing/src/test.module.ts')).toContain(dedent`
import {NgModule} from '@angular/core';
@NgModule({
providers: []
})
export class TestModule {}`);
});
});

describe('used in template with custom Material gesture events', () => {
beforeEach(() => {
appendContent('/projects/cdk-testing/src/main.ts', `
import 'hammerjs';
`);
});

it('should create gesture config file', async () => {
writeFile('/projects/cdk-testing/src/app/app.component.html', `
<span (panstart)="onPanStart()">
<span (longpress)="onPress()"></span>
</span>
`);

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

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

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

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

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

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

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

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

await runMigration();

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

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

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

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

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

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

0 comments on commit b53e092

Please sign in to comment.