fix: count down with increment and last emitted value (#27)

added tests for new cases, refactored example app and test to render params variations with *ngFor

Author: XVR-dev

projects/ngx-animated-counter-example/src/app/app.component.html

@@ -11,17 +11,8 @@ <h1>
           {{ title }}
         </a>
       </h1>
-      <div class="row">
-        <ngx-animated-counter [params]="params0"></ngx-animated-counter>
-      </div>
-      <div class="row">
-        <ngx-animated-counter [params]="params1"></ngx-animated-counter>
-      </div>
-      <div class="row">
-        <ngx-animated-counter [params]="params2"></ngx-animated-counter>
-      </div>
-      <div class="row">
-        <ngx-animated-counter [params]="params3"></ngx-animated-counter>
+      <div class="row" *ngFor="let params of paramsVariations">
+        <ngx-animated-counter [params]="params"></ngx-animated-counter>
       </div>
     </div>
   </div>

projects/ngx-animated-counter-example/src/app/app.component.spec.ts

@@ -26,8 +26,10 @@ describe('AppComponent', () => {
     expect(component.title).toEqual('@bugsplat/ngx-animated-counter');
   });
 
-  it('should render 4 ngx-animated-counters', () => {
+  it('should render ngx-animated-counter for each params variation', () => {
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelectorAll('ngx-animated-counter').length).toEqual(4);
+    fixture.detectChanges(); // run *ngFor
+    const renderedCounters = compiled.querySelectorAll('ngx-animated-counter');
+    expect(renderedCounters.length).toEqual(component.paramsVariations.length);
   });
 });

projects/ngx-animated-counter-example/src/app/app.component.ts

@@ -8,26 +8,33 @@ import { NgxAnimatedCounterParams } from '@bugsplat/ngx-animated-counter';
 })
 export class AppComponent {
   public readonly title: string = '@bugsplat/ngx-animated-counter';
-
-  public params0: NgxAnimatedCounterParams = {
-    start: 0,
-    end: 100,
-    interval: 100,
-  };
-  public params1: NgxAnimatedCounterParams = {
-    start: 1000,
-    end: 10000,
-    interval: 10,
-  };
-  public params2: NgxAnimatedCounterParams = {
-    start: 100,
-    end: 0,
-    interval: 100,
-  };
-  public params3: NgxAnimatedCounterParams = {
-    start: 0,
-    end: 123123123123,
-    interval: 10,
-    increment: 123123,
-  };
+  public readonly paramsVariations: NgxAnimatedCounterParams[] = [
+    {
+      start: 0,
+      end: 100,
+      interval: 100,
+    },
+    {
+      start: 1000,
+      end: 10000,
+      interval: 10,
+    },
+    {
+      start: 100,
+      end: 0,
+      interval: 100,
+    },
+    {
+      start: 0,
+      end: 123123123123,
+      interval: 10,
+      increment: 123123,
+    },
+    {
+      start: 100,
+      end: 96,
+      interval: 3000,
+      increment: 3,
+    },
+  ];
 }

projects/ngx-animated-counter/src/lib/ngx-animated-counter.component.spec.ts

@@ -42,7 +42,7 @@ describe('NgxAnimatedCounter', () => {
     expect(component.current).toEqual(end);
   }));
 
-  it('should count by increment if provided', fakeAsync(() => {
+  it('should count up by increment if provided', fakeAsync(() => {
     const interval = 10;
     const start = 0;
     const end = 1000;
@@ -63,7 +63,7 @@ describe('NgxAnimatedCounter', () => {
     expect(result).toEqual(increment);
   }));
 
-  it('should count by 1 if increment not provided', fakeAsync(() => {
+  it('should count up by 1 if increment not provided', fakeAsync(() => {
     const interval = 10;
     const start = 0;
     const end = 1000;
@@ -81,4 +81,80 @@ describe('NgxAnimatedCounter', () => {
 
     expect(result).toEqual(1);
   }));
+
+  it('should count down by increment if provided', fakeAsync(() => {
+    const interval = 10;
+    const start = 1000;
+    const end = 0;
+    const increment = 25;
+    const totalTime = interval * (start - end);
+
+    component.params = {
+      start,
+      end,
+      interval,
+      increment,
+    };
+
+    tick(0);
+    const result = component.current;
+    tick(totalTime);
+
+    expect(result).toEqual(start - increment);
+  }));
+
+  it('should count down by 1 if increment not provided', fakeAsync(() => {
+    const interval = 10;
+    const start = 1000;
+    const end = 0;
+    const totalTime = interval * (start - end);
+
+    component.params = {
+      start,
+      end,
+      interval,
+    };
+
+    tick(0);
+    const result = component.current;
+    tick(totalTime);
+
+    expect(result).toEqual(start - 1);
+  }));
+
+  it('should finish counting up with end value when value delta is not divisible by increment', fakeAsync(() => {
+    const interval = 10;
+    const start = 90;
+    const end = 100;
+    const increment = 7;
+    const totalTime = interval * (end - start);
+
+    component.params = {
+      start,
+      end,
+      interval,
+      increment,
+    };
+
+    tick(totalTime);
+    expect(component.current).toEqual(end);
+  }));
+
+  it('should finish counting down with end value when value delta is not divisible by increment', fakeAsync(() => {
+    const interval = 10;
+    const start = 100;
+    const end = 90;
+    const increment = 7;
+    const totalTime = interval * (start - end);
+
+    component.params = {
+      start,
+      end,
+      interval,
+      increment,
+    };
+
+    tick(totalTime);
+    expect(component.current).toEqual(end);
+  }));
 });

projects/ngx-animated-counter/src/lib/ngx-animated-counter.component.ts

@@ -1,6 +1,13 @@
 import { Component, Input, OnDestroy } from '@angular/core';
 import { Subscription, timer, Subject } from 'rxjs';
-import { mapTo, scan, startWith, switchMap, takeWhile } from 'rxjs/operators';
+import {
+  endWith,
+  mapTo,
+  scan,
+  startWith,
+  switchMap,
+  takeWhile,
+} from 'rxjs/operators';
 import { NgxAnimatedCounterParams } from './ngx-animated-counter-params';
 
 @Component({
@@ -23,12 +30,12 @@ export class NgxAnimatedCounterComponent implements OnDestroy {
             startWith(this.current),
             scan((acc: number, curr: number) => {
               if (value.increment) {
-                return acc + value.increment;
+                return acc + value.increment * curr;
               }
-
               return acc + curr;
             }),
-            takeWhile(this.isApproachingRange(end, this.current))
+            takeWhile(this.isApproachingRange(end, this.current)),
+            endWith(value.end)
           );
         })
       )