cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(animations): always fire inner trigger callbacks even if blocked by parent animations (#19753)

Browse Source 
Closes #19100

PR Close #19753
This commit is contained in:
Matias Niemelä
2017-10-16 15:21:10 -07:00
committed by Jason Aden
parent 1adbcda12e
commit d47b2a6f70
7 changed files with 228 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
packages/core/test/animation/animation_query_integration_spec.ts
View File

@ -409,39 +409,39 @@ export function main() {
const fixture = TestBed.createComponent(Cmp);
const cmp = fixture.componentInstance;
cmp.exp0 = 0;
cmp.exp1 = 0;
cmp.exp2 = 0;
cmp.exp3 = 0;
cmp.exp4 = 0;
cmp.exp5 = 0;
fixture.detectChanges();
engine.flush();
cmp.exp0 = 0;
fixture.detectChanges();
let players = engine.players;
cancelAllPlayers(players);
cmp.exp0 = 1;
cmp.exp2 = 1;
cmp.exp4 = 1;
fixture.detectChanges();
engine.flush();
cmp.exp0 = 1;
fixture.detectChanges();
players = engine.players;
cancelAllPlayers(players);
expect(players.length).toEqual(3);
cmp.exp0 = 2;
cmp.exp1 = 2;
cmp.exp2 = 2;
cmp.exp3 = 2;
cmp.exp4 = 2;
cmp.exp5 = 2;
fixture.detectChanges();
engine.flush();
cmp.exp0 = 2;
fixture.detectChanges();
players = engine.players;
cancelAllPlayers(players);
@ -449,7 +449,6 @@ export function main() {
cmp.exp0 = 3;
fixture.detectChanges();
engine.flush();
players = engine.players;
cancelAllPlayers(players);
@ -2288,19 +2287,15 @@ export function main() {
}
TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
const engine = TestBed.get(ɵAnimationEngine);
const fixture = TestBed.createComponent(ParentCmp);
const cmp = fixture.componentInstance;
fixture.detectChanges();
engine.flush();
const childCmp = cmp.childElm;
cmp.exp = false;
fixture.detectChanges();
engine.flush();
flushMicrotasks();
expect(cmp.childEvent.toState).toEqual('void');
@ -2728,6 +2723,106 @@ export function main() {
expect(engine.players[0].getRealPlayer()).toBe(players[1]);
});
it('should fire and synchronize the start/done callbacks on sub triggers even if they are not allowed to animate within the animation',
fakeAsync(() => {
@Component({
selector: 'parent-cmp',
animations: [
trigger(
'parent',
[
transition(
'* => go',
[
style({height: '0px'}),
animate(1000, style({height: '100px'})),
]),
]),
],
template: `
<div *ngIf="!remove"
[@parent]="exp"
(@parent.start)="track($event)"
(@parent.done)="track($event)">
<child-cmp #child></child-cmp>
</div>
`
})
class ParentCmp {
@ViewChild('child') public childCmp: any;
public exp: any;
public log: string[] = [];
public remove = false;
track(event: any) { this.log.push(`${event.triggerName}-${event.phaseName}`); }
}
@Component({
selector: 'child-cmp',
animations: [
trigger(
'child',
[
transition(
'* => go',
[
style({width: '0px'}),
animate(1000, style({width: '100px'})),
]),
]),
],
template: `
<div [@child]="exp"
(@child.start)="track($event)"
(@child.done)="track($event)"></div>
`
})
class ChildCmp {
public exp: any;
public log: string[] = [];
track(event: any) { this.log.push(`${event.triggerName}-${event.phaseName}`); }
}
TestBed.configureTestingModule({declarations: [ParentCmp, ChildCmp]});
const engine = TestBed.get(ɵAnimationEngine);
const fixture = TestBed.createComponent(ParentCmp);
fixture.detectChanges();
flushMicrotasks();
const cmp = fixture.componentInstance;
const child = cmp.childCmp;
expect(cmp.log).toEqual(['parent-start', 'parent-done']);
expect(child.log).toEqual(['child-start', 'child-done']);
cmp.log = [];
child.log = [];
cmp.exp = 'go';
cmp.childCmp.exp = 'go';
fixture.detectChanges();
flushMicrotasks();
expect(cmp.log).toEqual(['parent-start']);
expect(child.log).toEqual(['child-start']);
const players = engine.players;
expect(players.length).toEqual(1);
players[0].finish();
expect(cmp.log).toEqual(['parent-start', 'parent-done']);
expect(child.log).toEqual(['child-start', 'child-done']);
cmp.log = [];
child.log = [];
cmp.remove = true;
fixture.detectChanges();
flushMicrotasks();
expect(cmp.log).toEqual(['parent-start', 'parent-done']);
expect(child.log).toEqual(['child-start', 'child-done']);
}));
it('should stretch the starting keyframe of a child animation queries are issued by the parent',
() => {
@Component({