feat(progress-bar): add transitionend output for value animation (#12409)

Author: glouischandra

src/demo-app/progress-bar/progress-bar-demo.html

@@ -8,19 +8,24 @@ <h1>Determinate</h1>
 
 <div class="demo-progress-bar-controls">
   <span>Value: {{determinateProgressValue}}</span>
+  <br/>
+  <span>Last animation complete value: {{determinateAnimationEndValue}}</span>
   <button mat-raised-button (click)="stepDeterminateProgressVal(10)">Increase</button>
   <button mat-raised-button (click)="stepDeterminateProgressVal(-10)">Decrease</button>
 </div>
 
 <div class="demo-progress-bar-container">
-  <mat-progress-bar mode="determinate" [value]="determinateProgressValue" [color]="color">
+  <mat-progress-bar mode="determinate" [value]="determinateProgressValue" [color]="color"
+                    (animationEnd)="determinateAnimationEndValue = $event.value">
   </mat-progress-bar>
 </div>
 
 <h1>Buffer</h1>
 
 <div class="demo-progress-bar-controls">
   <span>Value: {{bufferProgressValue}}</span>
+  <br/>
+  <span>Last animation complete value: {{bufferAnimationEndValue}}</span>
   <button mat-raised-button (click)="stepBufferProgressVal(10)">Increase</button>
   <button mat-raised-button (click)="stepBufferProgressVal(-10)">Decrease</button>
   <span class="demo-progress-bar-spacer"></span>
@@ -31,7 +36,8 @@ <h1>Buffer</h1>
 
 <div class="demo-progress-bar-container">
   <mat-progress-bar [value]="bufferProgressValue" [bufferValue]="bufferBufferValue" mode="buffer"
-                   [color]="color"></mat-progress-bar>
+                   [color]="color" (animationEnd)="bufferAnimationEndValue = $event.value">
+  </mat-progress-bar>
 </div>
 
 <h1>Indeterminate</h1>

src/demo-app/progress-bar/progress-bar-demo.ts

@@ -20,6 +20,8 @@ import {Component} from '@angular/core';
 export class ProgressBarDemo {
   color: string = 'primary';
   determinateProgressValue: number = 30;
+  determinateAnimationEndValue: number;
+  bufferAnimationEndValue: number;
   bufferProgressValue: number = 30;
   bufferBufferValue: number = 40;
 

src/lib/progress-bar/progress-bar.html

@@ -11,5 +11,5 @@
   <rect [attr.fill]="_rectangleFillValue" width="100%" height="100%"/>
 </svg>
 <div class="mat-progress-bar-buffer mat-progress-bar-element" [ngStyle]="_bufferTransform()"></div>
-<div class="mat-progress-bar-primary mat-progress-bar-fill mat-progress-bar-element" [ngStyle]="_primaryTransform()"></div>
+<div class="mat-progress-bar-primary mat-progress-bar-fill mat-progress-bar-element" [ngStyle]="_primaryTransform()" #primaryValueBar></div>
 <div class="mat-progress-bar-secondary mat-progress-bar-fill mat-progress-bar-element"></div>

src/lib/progress-bar/progress-bar.spec.ts

@@ -1,15 +1,19 @@
-import {TestBed, ComponentFixture} from '@angular/core/testing';
-import {Component, Type} from '@angular/core';
+import {TestBed, async, ComponentFixture} from '@angular/core/testing';
+import {Component, DebugElement, Type} from '@angular/core';
 import {By} from '@angular/platform-browser';
+import {dispatchFakeEvent} from '@angular/cdk/testing';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MatProgressBarModule, MAT_PROGRESS_BAR_LOCATION} from './index';
+import {MatProgressBar} from './progress-bar';
 
 
 describe('MatProgressBar', () => {
   let fakePath = '/fake-path';
 
-  function createComponent<T>(componentType: Type<T>): ComponentFixture<T> {
+  function createComponent<T>(componentType: Type<T>,
+                              imports?: Array<Type<{}>>): ComponentFixture<T> {
     TestBed.configureTestingModule({
-      imports: [MatProgressBarModule],
+      imports: imports || [MatProgressBarModule],
       declarations: [componentType],
       providers: [{
         provide: MAT_PROGRESS_BAR_LOCATION,
@@ -20,119 +24,210 @@ describe('MatProgressBar', () => {
     return TestBed.createComponent<T>(componentType);
   }
 
-  describe('basic progress-bar', () => {
-    it('should apply a mode of "determinate" if no mode is provided.', () => {
-      const fixture = createComponent(BasicProgressBar);
-      fixture.detectChanges();
+  describe('with animation', () => {
+    describe('basic progress-bar', () => {
+      it('should apply a mode of "determinate" if no mode is provided.', () => {
+        const fixture = createComponent(BasicProgressBar);
+        fixture.detectChanges();
+        const progressElement = fixture.debugElement.query(By.css('mat-progress-bar'));
+        expect(progressElement.componentInstance.mode).toBe('determinate');
+      });
 
-      const progressElement = fixture.debugElement.query(By.css('mat-progress-bar'));
-      expect(progressElement.componentInstance.mode).toBe('determinate');
-    });
+      it('should define default values for value and bufferValue attributes', () => {
+        const fixture = createComponent(BasicProgressBar);
+        fixture.detectChanges();
+        const progressElement = fixture.debugElement.query(By.css('mat-progress-bar'));
+        expect(progressElement.componentInstance.value).toBe(0);
+        expect(progressElement.componentInstance.bufferValue).toBe(0);
+      });
 
-    it('should define default values for value and bufferValue attributes', () => {
-      const fixture = createComponent(BasicProgressBar);
-      fixture.detectChanges();
+      it('should clamp value and bufferValue between 0 and 100', () => {
+        const fixture = createComponent(BasicProgressBar);
+        fixture.detectChanges();
 
-      const progressElement = fixture.debugElement.query(By.css('mat-progress-bar'));
-      expect(progressElement.componentInstance.value).toBe(0);
-      expect(progressElement.componentInstance.bufferValue).toBe(0);
-    });
+        const progressElement = fixture.debugElement.query(By.css('mat-progress-bar'));
+        const progressComponent = progressElement.componentInstance;
 
-    it('should clamp value and bufferValue between 0 and 100', () => {
-      const fixture = createComponent(BasicProgressBar);
-      fixture.detectChanges();
+        progressComponent.value = 50;
+        expect(progressComponent.value).toBe(50);
 
-      const progressElement = fixture.debugElement.query(By.css('mat-progress-bar'));
-      const progressComponent = progressElement.componentInstance;
+        progressComponent.value = 999;
+        expect(progressComponent.value).toBe(100);
 
-      progressComponent.value = 50;
-      expect(progressComponent.value).toBe(50);
+        progressComponent.value = -10;
+        expect(progressComponent.value).toBe(0);
 
-      progressComponent.value = 999;
-      expect(progressComponent.value).toBe(100);
+        progressComponent.bufferValue = -29;
+        expect(progressComponent.bufferValue).toBe(0);
 
-      progressComponent.value = -10;
-      expect(progressComponent.value).toBe(0);
+        progressComponent.bufferValue = 9;
+        expect(progressComponent.bufferValue).toBe(9);
 
-      progressComponent.bufferValue = -29;
-      expect(progressComponent.bufferValue).toBe(0);
+        progressComponent.bufferValue = 1320;
+        expect(progressComponent.bufferValue).toBe(100);
+      });
 
-      progressComponent.bufferValue = 9;
-      expect(progressComponent.bufferValue).toBe(9);
+      it('should return the transform attribute for bufferValue and mode', () => {
+        const fixture = createComponent(BasicProgressBar);
+        fixture.detectChanges();
 
-      progressComponent.bufferValue = 1320;
-      expect(progressComponent.bufferValue).toBe(100);
-    });
+        const progressElement = fixture.debugElement.query(By.css('mat-progress-bar'));
+        const progressComponent = progressElement.componentInstance;
 
-    it('should return the transform attribute for bufferValue and mode', () => {
-      const fixture = createComponent(BasicProgressBar);
-      fixture.detectChanges();
+        expect(progressComponent._primaryTransform()).toEqual({transform: 'scaleX(0)'});
+        expect(progressComponent._bufferTransform()).toBe(undefined);
 
-      const progressElement = fixture.debugElement.query(By.css('mat-progress-bar'));
-      const progressComponent = progressElement.componentInstance;
+        progressComponent.value = 40;
+        expect(progressComponent._primaryTransform()).toEqual({transform: 'scaleX(0.4)'});
+        expect(progressComponent._bufferTransform()).toBe(undefined);
 
-      expect(progressComponent._primaryTransform()).toEqual({transform: 'scaleX(0)'});
-      expect(progressComponent._bufferTransform()).toBe(undefined);
+        progressComponent.value = 35;
+        progressComponent.bufferValue = 55;
+        expect(progressComponent._primaryTransform()).toEqual({transform: 'scaleX(0.35)'});
+        expect(progressComponent._bufferTransform()).toBe(undefined);
 
-      progressComponent.value = 40;
-      expect(progressComponent._primaryTransform()).toEqual({transform: 'scaleX(0.4)'});
-      expect(progressComponent._bufferTransform()).toBe(undefined);
+        progressComponent.mode = 'buffer';
+        expect(progressComponent._primaryTransform()).toEqual({transform: 'scaleX(0.35)'});
+        expect(progressComponent._bufferTransform()).toEqual({transform: 'scaleX(0.55)'});
+
+
+        progressComponent.value = 60;
+        progressComponent.bufferValue = 60;
+        expect(progressComponent._primaryTransform()).toEqual({transform: 'scaleX(0.6)'});
+        expect(progressComponent._bufferTransform()).toEqual({transform: 'scaleX(0.6)'});
+      });
+
+      it('should prefix SVG references with the current path', () => {
+        const fixture = createComponent(BasicProgressBar);
+        fixture.detectChanges();
 
-      progressComponent.value = 35;
-      progressComponent.bufferValue = 55;
-      expect(progressComponent._primaryTransform()).toEqual({transform: 'scaleX(0.35)'});
-      expect(progressComponent._bufferTransform()).toBe(undefined);
+        const rect = fixture.debugElement.query(By.css('rect')).nativeElement;
+        expect(rect.getAttribute('fill')).toMatch(/^url\(['"]?\/fake-path#.*['"]?\)$/);
+      });
 
-      progressComponent.mode = 'buffer';
-      expect(progressComponent._primaryTransform()).toEqual({transform: 'scaleX(0.35)'});
-      expect(progressComponent._bufferTransform()).toEqual({transform: 'scaleX(0.55)'});
+      it('should account for location hash when prefixing the SVG references', () => {
+        fakePath = '/fake-path#anchor';
 
+        const fixture = createComponent(BasicProgressBar);
+        fixture.detectChanges();
 
-      progressComponent.value = 60;
-      progressComponent.bufferValue = 60;
-      expect(progressComponent._primaryTransform()).toEqual({transform: 'scaleX(0.6)'});
-      expect(progressComponent._bufferTransform()).toEqual({transform: 'scaleX(0.6)'});
+        const rect = fixture.debugElement.query(By.css('rect')).nativeElement;
+        expect(rect.getAttribute('fill')).not.toContain('#anchor#');
+      });
+
+      it('should not be able to tab into the underlying SVG element', () => {
+        const fixture = createComponent(BasicProgressBar);
+        fixture.detectChanges();
+
+        const svg = fixture.debugElement.query(By.css('svg')).nativeElement;
+        expect(svg.getAttribute('focusable')).toBe('false');
+      });
     });
 
-    it('should prefix SVG references with the current path', () => {
-      const fixture = createComponent(BasicProgressBar);
-      fixture.detectChanges();
+    describe('animation trigger on determinate setting', () => {
+      let fixture: ComponentFixture<BasicProgressBar>;
+      let progressComponent: MatProgressBar;
+      let primaryValueBar: DebugElement;
+
+      beforeEach(() => {
+        fixture = createComponent(BasicProgressBar);
+
+        const progressElement = fixture.debugElement.query(By.css('mat-progress-bar'));
+        progressComponent = progressElement.componentInstance;
+        primaryValueBar = progressElement.query(By.css('.mat-progress-bar-primary'));
+      });
 
-      const rect = fixture.debugElement.query(By.css('rect')).nativeElement;
-      expect(rect.getAttribute('fill')).toMatch(/^url\(['"]?\/fake-path#.*['"]?\)$/);
+      it('should trigger output event on primary value bar animation end', () => {
+        fixture.detectChanges();
+        spyOn(progressComponent.animationEnd, 'next');
+
+        progressComponent.value = 40;
+        expect(progressComponent.animationEnd.next).not.toHaveBeenCalled();
+
+        // On animation end, output should be emitted.
+        dispatchFakeEvent(primaryValueBar.nativeElement, 'transitionend');
+        expect(progressComponent.animationEnd.next).toHaveBeenCalledWith({ value: 40 });
+      });
     });
 
-    it('should account for location hash when prefixing the SVG references', () => {
-      fakePath = '/fake-path#anchor';
+    describe('animation trigger on buffer setting', () => {
+      let fixture: ComponentFixture<BufferProgressBar>;
+      let progressComponent: MatProgressBar;
+      let primaryValueBar: DebugElement;
 
-      const fixture = createComponent(BasicProgressBar);
-      fixture.detectChanges();
+      beforeEach(() => {
+        fixture = createComponent(BufferProgressBar);
+
+        const progressElement = fixture.debugElement.query(By.css('mat-progress-bar'));
+        progressComponent = progressElement.componentInstance;
+        primaryValueBar = progressElement.query(By.css('.mat-progress-bar-primary'));
+      });
+
+      it('should bind on transitionend eventListener on primaryBarValue', () => {
+        spyOn(primaryValueBar.nativeElement, 'addEventListener');
+        fixture.detectChanges();
+
+        expect(primaryValueBar.nativeElement.addEventListener).toHaveBeenCalled();
+        expect(primaryValueBar.nativeElement.addEventListener
+               .calls.mostRecent().args[0]).toBe('transitionend');
+      });
+
+      it('should trigger output event on primary value bar animation end', () => {
+        fixture.detectChanges();
+        spyOn(progressComponent.animationEnd, 'next');
+
+        progressComponent.value = 40;
+        expect(progressComponent.animationEnd.next).not.toHaveBeenCalled();
+
+        // On animation end, output should be emitted.
+        dispatchFakeEvent(primaryValueBar.nativeElement, 'transitionend');
+        expect(progressComponent.animationEnd.next).toHaveBeenCalledWith({ value: 40 });
+      });
+
+      it('should trigger output event with value not bufferValue', () => {
+        fixture.detectChanges();
+        spyOn(progressComponent.animationEnd, 'next');
 
-      const rect = fixture.debugElement.query(By.css('rect')).nativeElement;
-      expect(rect.getAttribute('fill')).not.toContain('#anchor#');
+        progressComponent.value = 40;
+        progressComponent.bufferValue = 70;
+        expect(progressComponent.animationEnd.next).not.toHaveBeenCalled();
+
+        // On animation end, output should be emitted.
+        dispatchFakeEvent(primaryValueBar.nativeElement, 'transitionend');
+        expect(progressComponent.animationEnd.next).toHaveBeenCalledWith({ value: 40 });
+      });
     });
+  });
+
+  describe('With NoopAnimations', () => {
+    let progressComponent: MatProgressBar;
+    let primaryValueBar: DebugElement;
+    let fixture: ComponentFixture<BasicProgressBar>;
+
+    beforeEach(async(() => {
+      fixture = createComponent(BasicProgressBar, [MatProgressBarModule, NoopAnimationsModule]);
+      const progressElement = fixture.debugElement.query(By.css('mat-progress-bar'));
+      progressComponent = progressElement.componentInstance;
+      primaryValueBar = progressElement.query(By.css('.mat-progress-bar-primary'));
+    }));
 
-    it('should not be able to tab into the underlying SVG element', () => {
-      const fixture = createComponent(BasicProgressBar);
+    it('should not bind transition end listener', () => {
+      spyOn(primaryValueBar.nativeElement, 'addEventListener');
       fixture.detectChanges();
 
-      const svg = fixture.debugElement.query(By.css('svg')).nativeElement;
-      expect(svg.getAttribute('focusable')).toBe('false');
+      expect(primaryValueBar.nativeElement.addEventListener).not.toHaveBeenCalled();
     });
-  });
 
-  describe('buffer progress-bar', () => {
-    it('should not modify the mode if a valid mode is provided.', () => {
-      const fixture = createComponent(BufferProgressBar);
+    it('should trigger the animationEnd output on value set', () => {
       fixture.detectChanges();
+      spyOn(progressComponent.animationEnd, 'next');
 
-      const progressElement = fixture.debugElement.query(By.css('mat-progress-bar'));
-      expect(progressElement.componentInstance.mode).toBe('buffer');
+      progressComponent.value = 40;
+      expect(progressComponent.animationEnd.next).toHaveBeenCalledWith({ value: 40 });
     });
   });
 });
 
-
 @Component({template: '<mat-progress-bar></mat-progress-bar>'})
 class BasicProgressBar { }