honeymoose/angular-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(animations): properly support the query limit option value

Browse Source 
Closes #19232
This commit is contained in:
Matias Niemelä 2017-09-18 14:24:22 -07:00 committed by Victor Berchet
parent e889c68aff
commit b54368bf35
2 changed files with 82 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/animations/browser/src/dsl/animation_timeline_builder.ts
View File

@ -556,7 +556,11 @@ export class AnimationTimelineContext {
} }
if (selector.length > 0) { // if :self is only used then the selector is empty if (selector.length > 0) { // if :self is only used then the selector is empty
const multi = limit != 1; const multi = limit != 1;
results.push(...this._driver.query(this.element, selector, multi)); let elements = this._driver.query(this.element, selector, multi);
if (limit !== 0) {
elements = elements.slice(0, limit);
}
results.push(...elements);
} }
if (!optional && results.length == 0) { if (!optional && results.length == 0) {

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

@ -461,8 +461,8 @@ export function main() {
selector: 'ani-cmp', selector: 'ani-cmp',
template: ` template: `
<div [@myAnimation]="exp"> <div [@myAnimation]="exp">
<header></header> <header></header>
<footer></footer> <footer></footer>
</div> </div>
`, `,
animations: [ animations: [
@ -587,8 +587,8 @@ export function main() {
selector: 'ani-cmp', selector: 'ani-cmp',
template: ` template: `
<div [@myAnimation]="exp"> <div [@myAnimation]="exp">
<header></header> <header></header>
<footer></footer> <footer></footer>
</div> </div>
`, `,
animations: [ animations: [
@ -640,9 +640,9 @@ export function main() {
template: ` template: `
<div [@myAnimation]="exp"> <div [@myAnimation]="exp">
<div *ngFor="let item of items" class="item"> <div *ngFor="let item of items" class="item">
{{ item }} {{ item }}
</div> </div>
</div> </div>
`, `,
animations: [ animations: [
trigger( trigger(
@ -706,9 +706,9 @@ export function main() {
template: ` template: `
<div [@myAnimation]="exp"> <div [@myAnimation]="exp">
<div *ngFor="let item of items" class="item"> <div *ngFor="let item of items" class="item">
{{ item }} {{ item }}
</div> </div>
</div> </div>
`, `,
animations: [trigger( animations: [trigger(
'myAnimation', 'myAnimation',
@ -809,8 +809,8 @@ export function main() {
template: ` template: `
<div @myAnimation> <div @myAnimation>
<div *ngFor="let item of items" class="child"> <div *ngFor="let item of items" class="child">
{{ item }} {{ item }}
</div> </div>
</div> </div>
`, `,
animations: [trigger( animations: [trigger(
@ -923,8 +923,8 @@ export function main() {
template: ` template: `
<div [@myAnimation]="exp" class="parent"> <div [@myAnimation]="exp" class="parent">
<div *ngFor="let item of items" class="child"> <div *ngFor="let item of items" class="child">
{{ item }} {{ item }}
</div> </div>
</div> </div>
`, `,
animations: [trigger( animations: [trigger(
@ -1111,8 +1111,8 @@ export function main() {
template: ` template: `
<div [@myAnimation]="exp" class="parent"> <div [@myAnimation]="exp" class="parent">
<div *ngFor="let item of items" class="child"> <div *ngFor="let item of items" class="child">
{{ item }} {{ item }}
</div> </div>
</div> </div>
`, `,
animations: [trigger( animations: [trigger(
@ -1333,8 +1333,8 @@ export function main() {
template: ` template: `
<div [@myAnimation]="exp" class="parent"> <div [@myAnimation]="exp" class="parent">
<div *ngFor="let item of items" class="child"> <div *ngFor="let item of items" class="child">
{{ item }} {{ item }}
</div> </div>
</div> </div>
`, `,
animations: [trigger( animations: [trigger(
@ -1385,8 +1385,8 @@ export function main() {
template: ` template: `
<div [@myAnimation]="exp" class="parent"> <div [@myAnimation]="exp" class="parent">
<div *ngFor="let item of items" class="child"> <div *ngFor="let item of items" class="child">
{{ item }} {{ item }}
</div> </div>
</div> </div>
`, `,
animations: [trigger( animations: [trigger(
@ -1436,8 +1436,8 @@ export function main() {
template: ` template: `
<div [@one]="exp1" [@two]="exp2" class="parent"> <div [@one]="exp1" [@two]="exp2" class="parent">
<div *ngFor="let item of items" class="child"> <div *ngFor="let item of items" class="child">
{{ item }} {{ item }}
</div> </div>
</div> </div>
`, `,
animations: [ animations: [
@ -1519,8 +1519,8 @@ export function main() {
template: ` template: `
<div [@myAnimation]="exp" class="parent"> <div [@myAnimation]="exp" class="parent">
<div *ngFor="let item of items" class="child"> <div *ngFor="let item of items" class="child">
{{ item }} {{ item }}
</div> </div>
</div> </div>
`, `,
animations: [trigger( animations: [trigger(
@ -1569,8 +1569,8 @@ export function main() {
template: ` template: `
<div [@myAnimation]="exp" class="parent"> <div [@myAnimation]="exp" class="parent">
<div *ngFor="let item of items" class="child"> <div *ngFor="let item of items" class="child">
{{ item }} {{ item }}
</div> </div>
</div> </div>
`, `,
animations: [ animations: [
@ -1713,6 +1713,56 @@ export function main() {
expect(players[1].element.innerText.trim()).toEqual('5'); expect(players[1].element.innerText.trim()).toEqual('5');
expect(players[2].element.innerText.trim()).toEqual('6'); expect(players[2].element.innerText.trim()).toEqual('6');
}); });
describe('options.limit', () => {
it('should limit results when a limit value is passed into the query options', () => {
@Component({
selector: 'cmp',
template: `
<div [@myAnimation]="exp">
<div *ngFor="let item of items" class="item">
{{ item }}
</div>
</div>
`,
animations: [
trigger(
'myAnimation',
[
transition(
'* => go',
[
query(
'.item',
[
style({opacity: 0}),
animate('1s', style({opacity: 1})),
],
{limit: 2}),
]),
]),
]
})
class Cmp {
public exp: any;
public items: any[] = [];
}
TestBed.configureTestingModule({declarations: [Cmp]});
const fixture = TestBed.createComponent(Cmp);
const cmp = fixture.componentInstance;
cmp.items = ['a', 'b', 'c', 'd', 'e'];
fixture.detectChanges();
cmp.exp = 'go';
fixture.detectChanges();
const players = getLog() as any[];
expect(players.length).toEqual(2);
expect(players[0].element.innerText.trim()).toEqual('a');
expect(players[1].element.innerText.trim()).toEqual('b');
});
});
}); });
describe('sub triggers', () => { describe('sub triggers', () => {
@ -2314,7 +2364,7 @@ export function main() {
</div> </div>
</div> </div>
</section> </section>
</div> </div>
` `
}) })
class Cmp { class Cmp {