diff --git a/projects/ngx-animated-counter-example/src/app/app.component.html b/projects/ngx-animated-counter-example/src/app/app.component.html index 1d4587c..704dce6 100644 --- a/projects/ngx-animated-counter-example/src/app/app.component.html +++ b/projects/ngx-animated-counter-example/src/app/app.component.html @@ -11,17 +11,8 @@

{{ title }}

-
- -
-
- -
-
- -
-
- +
+
diff --git a/projects/ngx-animated-counter-example/src/app/app.component.spec.ts b/projects/ngx-animated-counter-example/src/app/app.component.spec.ts index f9978c8..a9dc8e3 100644 --- a/projects/ngx-animated-counter-example/src/app/app.component.spec.ts +++ b/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); }); }); diff --git a/projects/ngx-animated-counter-example/src/app/app.component.ts b/projects/ngx-animated-counter-example/src/app/app.component.ts index 3a6e1b7..71c88c5 100644 --- a/projects/ngx-animated-counter-example/src/app/app.component.ts +++ b/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, + }, + ]; } diff --git a/projects/ngx-animated-counter/src/lib/ngx-animated-counter.component.spec.ts b/projects/ngx-animated-counter/src/lib/ngx-animated-counter.component.spec.ts index 2027b05..4100137 100644 --- a/projects/ngx-animated-counter/src/lib/ngx-animated-counter.component.spec.ts +++ b/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); + })); }); diff --git a/projects/ngx-animated-counter/src/lib/ngx-animated-counter.component.ts b/projects/ngx-animated-counter/src/lib/ngx-animated-counter.component.ts index 6703617..63d864f 100644 --- a/projects/ngx-animated-counter/src/lib/ngx-animated-counter.component.ts +++ b/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) ); }) )