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

fix(animations): ensure :animating queries collect previous animation elements properly

Browse Source
This commit is contained in:
Matias Niemelä
2017-07-06 10:39:22 -07:00
committed by Jason Aden
parent f85b543cc1
commit 3203639d7d
2 changed files with 122 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,7 +39,7 @@ export function main() {
});
describe('query()', () => {
it('should be able to query all animation triggers via `@*`', () => {
it('should be able to query all elements that contain animation triggers via @*', () => {
@Component({
selector: 'ani-cmp',
template: `
@ -56,30 +56,40 @@ export function main() {
'parent',
[
transition(
'* => *',
'* => go',
[
query(
'@*:animating',
'@*',
[
animate(1000, style({background: 'red'})),
style({ backgroundColor: 'blue' }),
animate(1000, style({backgroundColor: 'red'})),
]),
]),
]),
trigger(
'a',
[
transition('* => *', []),
transition('* => 1', [
animate(1000, style({ opacity: 0 }))
]),
]),
trigger(
'b',
[
transition('* => *', []),
transition('* => 1', [
animate(1000, style({ opacity: 0 })),
query('.b-inner', [
animate(1000, style({ opacity: 0 }))
]),
]),
]),
trigger(
'c',
[
transition('* => *', []),
])
transition('* => 1', [
animate(1000, style({ opacity: 0 }))
]),
]),
]
})
class Cmp {
@ -90,23 +100,117 @@ export function main() {
TestBed.configureTestingModule({declarations: [Cmp]});
const engine = TestBed.get(ɵAnimationEngine);
const fixture = TestBed.createComponent(Cmp);
const cmp = fixture.componentInstance;
cmp.exp0 = 1;
cmp.exp0 = 'go';
fixture.detectChanges();
let players = getLog();
expect(players.length).toEqual(3); // a,b,c
resetLog();
const [p1, p2, p3] = players;
expect(p1.element.classList.contains('a')).toBeTruthy();
expect(p2.element.classList.contains('b')).toBeTruthy();
expect(p3.element.classList.contains('c')).toBeTruthy();
});
it('should be able to query currently animating elements via :animating', () => {
@Component({
selector: 'ani-cmp',
template: `
<div [@parent]="exp0">
<div class="a" [@a]="exp1"></div>
<div class="b" [@b]="exp2">
<div class="b-inner"></div>
</div>
<div class="c" [@c]="exp3"></div>
</div>
`,
animations: [
trigger(
'parent',
[
transition(
'* => go',
[
query(
':animating',
[
style({ backgroundColor: 'blue' }),
animate(1000, style({backgroundColor: 'red'})),
]),
]),
]),
trigger(
'a',
[
transition('* => 1', [
animate(1000, style({ opacity: 0 }))
]),
]),
trigger(
'b',
[
transition('* => 1', [
animate(1000, style({ opacity: 0 })),
query('.b-inner', [
animate(1000, style({ opacity: 0 }))
]),
]),
]),
trigger(
'c',
[
transition('* => 1', [
animate(1000, style({ opacity: 0 }))
]),
]),
]
})
class Cmp {
public exp0: any;
public exp1: any;
public exp2: any;
public exp3: any;
}
TestBed.configureTestingModule({declarations: [Cmp]});
const fixture = TestBed.createComponent(Cmp);
const cmp = fixture.componentInstance;
cmp.exp0 = '';
cmp.exp1 = 1;
cmp.exp2 = 1;
// note that exp3 is skipped here
fixture.detectChanges();
engine.flush();
const players = getLog();
let players = getLog();
expect(players.length).toEqual(3); // a,b,b-inner and not c
resetLog();
cmp.exp0 = 'go';
fixture.detectChanges();
const expectedKeyframes = [
{backgroundColor: 'blue', offset: 0},
{backgroundColor: 'red', offset: 1},
];
players = getLog();
expect(players.length).toEqual(3);
const [p1, p2, p3] = players;
expect(p1.element.classList.contains('a')).toBeTruthy();
expect(p1.keyframes).toEqual(expectedKeyframes);
expect(p2.element.classList.contains('b')).toBeTruthy();
expect(p3.element.classList.contains('c')).toBeTruthy();
expect(p2.keyframes).toEqual(expectedKeyframes);
expect(p3.element.classList.contains('b-inner')).toBeTruthy();
expect(p3.keyframes).toEqual(expectedKeyframes);
});
it('should be able to query triggers directly by name', () => {