refactor(animations): improve unit tests for stagger timing

improve the stagger timing unit tests added in angular#47208 by also checking that the duration and keyframes of the players are correct
dario-piotrowicz · Aug 22, 2022 · 8f8b2d6 · 8f8b2d6
1 parent a44b4bf
commit 8f8b2d6
Showing 1 changed file with 46 additions and 35 deletions.
diff --git a/packages/core/test/animation/animation_query_integration_spec.ts b/packages/core/test/animation/animation_query_integration_spec.ts
@@ -743,6 +743,9 @@ describe('animation query tests', function() {
     });
 
     it(`should handle params used in the stagger's timing argument`, () => {
+      const animationDuration = 500;
+      const staggerDelay = 1000;
+
       @Component({
           selector: 'ani-cmp',
           template: `
@@ -757,11 +760,11 @@ describe('animation query tests', function() {
               transition('* => go', [
                 query('.item', [
                   stagger('{{staggerDelay}}ms',[
-                    style({opacity: 0}), animate(1000, style({opacity: .5})),
-                    animate(500, style({opacity: 1}))
+                    style({ transform: 'scale(0)' }),
+                    animate(animationDuration, style({transform: 'scale(1)'}))
                   ])
                 ])
-              ], {params: { staggerDelay: '1111' }})
+              ], {params: { staggerDelay }})
             ])
           ]
         })
@@ -783,17 +786,23 @@ describe('animation query tests', function() {
       const players = getLog();
       expect(players.length).toEqual(5);
 
-      const [p1, p2, p3, p4, p5] = players;
-      expect(p1.delay).toEqual(0);
-      expect(p2.delay).toEqual(1111);
-      expect(p3.delay).toEqual(2222);
-      expect(p4.delay).toEqual(3333);
-      expect(p5.delay).toEqual(4444);
+      players.forEach((player, i) => {
+        expect(player.delay).toEqual(i * staggerDelay);
+        expect(player.duration).toEqual(animationDuration);
+        expect(player.keyframes).toEqual([
+          new Map<string, string|number>([['transform', 'scale(0)'], ['offset', 0]]),
+          new Map<string, string|number>([['transform', 'scale(1)'], ['offset', 1]])
+        ]);
+      });
     });
 
-    it(`should handle params used in the stagger's timing argument producing a negative value`,
-       () => {
-         @Component({
+    it(
+        `should handle params used in the stagger's timing argument producing a negative value`,
+        () => {
+          const animationDuration = 700;
+          const absoluteStaggerDelay = 500;
+
+          @Component({
           selector: 'ani-cmp',
           template: `
           <div [@myAnimation]="exp">
@@ -807,39 +816,41 @@ describe('animation query tests', function() {
               transition('* => go', [
                 query('.item', [
                   stagger('{{staggerDelay}}ms',[
-                    style({opacity: 0}), animate(1000, style({opacity: .5})),
-                    animate(500, style({opacity: 1}))
+                    style({opacity: 0}),
+                    animate(animationDuration, style({opacity: 1}))
                   ])
                 ])
-              ], {params: { staggerDelay: -1111 }})
+              ], {params: { staggerDelay: -absoluteStaggerDelay }})
             ])
           ]
         })
         class Cmp {
-           public exp: any;
-           public items: any[] = [0, 1, 2, 3, 4];
-         }
-
-         TestBed.configureTestingModule({declarations: [Cmp]});
+            public exp: any;
+            public items: any[] = [0, 1, 2, 3, 4];
+          }
 
-         const engine = TestBed.inject(ɵAnimationEngine);
-         const fixture = TestBed.createComponent(Cmp);
-         const cmp = fixture.componentInstance;
+          TestBed.configureTestingModule({declarations: [Cmp]});
 
-         cmp.exp = 'go';
-         fixture.detectChanges();
-         engine.flush();
+          const engine = TestBed.inject(ɵAnimationEngine);
+          const fixture = TestBed.createComponent(Cmp);
+          const cmp = fixture.componentInstance;
 
-         const players = getLog();
-         expect(players.length).toEqual(5);
+          cmp.exp = 'go';
+          fixture.detectChanges();
+          engine.flush();
 
-         const [p1, p2, p3, p4, p5] = players;
-         expect(p5.delay).toEqual(0);
-         expect(p4.delay).toEqual(1111);
-         expect(p3.delay).toEqual(2222);
-         expect(p2.delay).toEqual(3333);
-         expect(p1.delay).toEqual(4444);
-       });
+          const players = getLog();
+          expect(players.length).toEqual(5);
+
+          players.reverse().forEach((player, i) => {
+            expect(player.delay).toEqual(i * absoluteStaggerDelay);
+            expect(player.duration).toEqual(animationDuration);
+            expect(player.keyframes).toEqual([
+              new Map<string, string|number>([['opacity', '0'], ['offset', 0]]),
+              new Map<string, string|number>([['opacity', '1'], ['offset', 1]])
+            ]);
+          });
+        });
 
     it('should persist inner sub trigger styles once their animation is complete', () => {
       @Component({