fix(animations): always fire start and done callbacks in order for noop animations (#20570)

PR Close #20570

packages/animations/src/players/animation_player.ts

@@ -62,8 +62,8 @@ export class NoopAnimationPlayer implements AnimationPlayer {
   init(): void {}
   play(): void {
     if (!this.hasStarted()) {
-      this.triggerMicrotask();
       this._onStart();
+      this.triggerMicrotask();
     }
     this._started = true;
   }

packages/animations/test/animation_player_spec.ts

@@ -6,9 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {fakeAsync} from '@angular/core/testing';
-
 import {flushMicrotasks} from '../../core/testing/src/fake_async';
 import {NoopAnimationPlayer} from '../src/players/animation_player';
+import {scheduleMicroTask} from '../src/util';
 
 export function main() {
   describe('NoopAnimationPlayer', function() {
@@ -61,6 +61,21 @@ export function main() {
          player.finish();
          expect(log).toEqual(['started', 'done']);
 
+         flushMicrotasks();
+         expect(log).toEqual(['started', 'done']);
+       }));
+
+    it('should fire off start callbacks before triggering the finish callback', fakeAsync(() => {
+         const log: string[] = [];
+
+         const player = new NoopAnimationPlayer();
+         player.onStart(() => { scheduleMicroTask(() => log.push('started')); });
+         player.onDone(() => log.push('done'));
+         expect(log).toEqual([]);
+
+         player.play();
+         expect(log).toEqual([]);
+
          flushMicrotasks();
          expect(log).toEqual(['started', 'done']);
        }));

packages/core/test/animation/animation_integration_spec.ts

@@ -80,6 +80,38 @@ export function main() {
            flushMicrotasks();
            expect(cmp.status).toEqual('done');
          }));
+
+      it('should always run .start callbacks before .done callbacks even for noop animations',
+         fakeAsync(() => {
+           @Component({
+             selector: 'cmp',
+             template: `
+                <div [@myAnimation]="exp" (@myAnimation.start)="cb('start')" (@myAnimation.done)="cb('done')"></div>
+          `,
+             animations: [
+               trigger(
+                   'myAnimation',
+                   [
+                     transition('* => go', []),
+                   ]),
+             ]
+           })
+           class Cmp {
+             exp: any = false;
+             log: string[] = [];
+             cb(status: string) { this.log.push(status); }
+           }
+
+           TestBed.configureTestingModule({declarations: [Cmp]});
+           const fixture = TestBed.createComponent(Cmp);
+           const cmp = fixture.componentInstance;
+           cmp.exp = 'go';
+           fixture.detectChanges();
+           expect(cmp.log).toEqual([]);
+
+           flushMicrotasks();
+           expect(cmp.log).toEqual(['start', 'done']);
+         }));
     });
 
     describe('component fixture integration', () => {