From ec524feaca2d0dbdd5b65b1e519c976b7db3632b Mon Sep 17 00:00:00 2001 From: Yuriy Musienko Date: Wed, 14 Dec 2016 16:32:50 +0200 Subject: [PATCH] feat(progressbar): add config file for progressbar component * feat(karma config for saucelabs testing) * revert changes * feat(progressbar): add config file for progressbar component --- src/progressbar/index.ts | 1 + src/progressbar/progress.directive.ts | 14 ++------------ src/progressbar/progressbar.component.ts | 5 +++++ src/progressbar/progressbar.config.ts | 7 +++++++ src/progressbar/progressbar.module.ts | 3 ++- src/spec/progressbar.component.spec.ts | 8 ++++---- 6 files changed, 21 insertions(+), 17 deletions(-) create mode 100644 src/progressbar/progressbar.config.ts diff --git a/src/progressbar/index.ts b/src/progressbar/index.ts index 4272ea4123..121b630098 100644 --- a/src/progressbar/index.ts +++ b/src/progressbar/index.ts @@ -2,3 +2,4 @@ export { BarComponent } from './bar.component'; export { ProgressDirective } from './progress.directive'; export { ProgressbarComponent } from './progressbar.component'; export { ProgressbarModule } from './progressbar.module'; +export { ProgressbarConfig } from './progressbar.config'; diff --git a/src/progressbar/progress.directive.ts b/src/progressbar/progress.directive.ts index ab5a1d2bb8..f1ce450b40 100644 --- a/src/progressbar/progress.directive.ts +++ b/src/progressbar/progress.directive.ts @@ -1,16 +1,11 @@ -import { Directive, HostBinding, Input, OnInit } from '@angular/core'; +import { Directive, HostBinding, Input } from '@angular/core'; import { BarComponent } from './bar.component'; -const progressConfig = { - animate: true, - max: 100 -}; - // todo: progress element conflict with bootstrap.css // todo: need hack: replace host element with div @Directive({selector: 'bs-progress, [progress]'}) -export class ProgressDirective implements OnInit { +export class ProgressDirective { @Input() public animate:boolean; @HostBinding('attr.max') @@ -32,11 +27,6 @@ export class ProgressDirective implements OnInit { protected _max:number; - public ngOnInit():void { - this.animate = this.animate !== false; - this.max = typeof this.max === 'number' ? this.max : progressConfig.max; - } - public addBar(bar:BarComponent):void { if (!this.animate) { bar.transition = 'none'; diff --git a/src/progressbar/progressbar.component.ts b/src/progressbar/progressbar.component.ts index 4ae3b104f8..71ab388be7 100644 --- a/src/progressbar/progressbar.component.ts +++ b/src/progressbar/progressbar.component.ts @@ -1,4 +1,5 @@ import { Component, Input } from '@angular/core'; +import { ProgressbarConfig } from './progressbar.config'; @Component({ selector: 'progressbar', @@ -15,4 +16,8 @@ export class ProgressbarComponent { @Input() public max:number; @Input() public type:string; @Input() public value:number; + + public constructor(config: ProgressbarConfig) { + Object.assign(this, config); + } } diff --git a/src/progressbar/progressbar.config.ts b/src/progressbar/progressbar.config.ts new file mode 100644 index 0000000000..eabdc985cb --- /dev/null +++ b/src/progressbar/progressbar.config.ts @@ -0,0 +1,7 @@ +import { Injectable } from '@angular/core'; + +Injectable(); +export class ProgressbarConfig { + public animate: Boolean = true; + public max: number = 100; +} diff --git a/src/progressbar/progressbar.module.ts b/src/progressbar/progressbar.module.ts index f67246e965..908da18c30 100644 --- a/src/progressbar/progressbar.module.ts +++ b/src/progressbar/progressbar.module.ts @@ -4,6 +4,7 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; import { BarComponent } from './bar.component'; import { ProgressDirective } from './progress.directive'; import { ProgressbarComponent } from './progressbar.component'; +import { ProgressbarConfig } from './progressbar.config'; @NgModule({ imports: [CommonModule], @@ -12,6 +13,6 @@ import { ProgressbarComponent } from './progressbar.component'; }) export class ProgressbarModule { public static forRoot(): ModuleWithProviders { - return {ngModule: ProgressbarModule, providers: []}; + return {ngModule: ProgressbarModule, providers: [ProgressbarConfig]}; } } diff --git a/src/spec/progressbar.component.spec.ts b/src/spec/progressbar.component.spec.ts index 89ace43193..dc8a3d8223 100644 --- a/src/spec/progressbar.component.spec.ts +++ b/src/spec/progressbar.component.spec.ts @@ -10,7 +10,7 @@ describe('Component: Progress Bar', () => { it('should work correctly with default values', () => { const tpl = ``; - TestBed.configureTestingModule({declarations: [TestProgressbarComponent], imports: [ProgressbarModule]}); + TestBed.configureTestingModule({declarations: [TestProgressbarComponent], imports: [ProgressbarModule.forRoot()]}); TestBed.overrideComponent(TestProgressbarComponent, {set: {template: tpl}}); fixture = TestBed.createComponent(TestProgressbarComponent); element = fixture.nativeElement; @@ -22,7 +22,7 @@ describe('Component: Progress Bar', () => { it('checking appropriate styles after setting up of type', () => { const tpl = ``; - TestBed.configureTestingModule({declarations: [TestProgressbarComponent], imports: [ProgressbarModule]}); + TestBed.configureTestingModule({declarations: [TestProgressbarComponent], imports: [ProgressbarModule.forRoot()]}); TestBed.overrideComponent(TestProgressbarComponent, {set: {template: tpl}}); fixture = TestBed.createComponent(TestProgressbarComponent); element = fixture.nativeElement; @@ -33,7 +33,7 @@ describe('Component: Progress Bar', () => { it('checking of correct calculation of percent value(bar length)', () => { const tpl = ``; - TestBed.configureTestingModule({declarations: [TestProgressbarComponent], imports: [ProgressbarModule]}); + TestBed.configureTestingModule({declarations: [TestProgressbarComponent], imports: [ProgressbarModule.forRoot()]}); TestBed.overrideComponent(TestProgressbarComponent, {set: {template: tpl}}); fixture = TestBed.createComponent(TestProgressbarComponent); element = fixture.nativeElement; @@ -62,7 +62,7 @@ describe('Component: Progress Bar', () => { `; - TestBed.configureTestingModule({declarations: [TestProgressbarComponent], imports: [ProgressbarModule]}); + TestBed.configureTestingModule({declarations: [TestProgressbarComponent], imports: [ProgressbarModule.forRoot()]}); TestBed.overrideComponent(TestProgressbarComponent, {set: {template: tpl}}); fixture = TestBed.createComponent(TestProgressbarComponent); let context = fixture.debugElement.componentInstance;