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)
);
})
)