diff --git a/demos/app/buttonssample.component.ts b/demos/app/buttonssample.component.ts index d13cb633460..938f1a6f166 100644 --- a/demos/app/buttonssample.component.ts +++ b/demos/app/buttonssample.component.ts @@ -10,11 +10,11 @@ import { ButtonModule } from "../../src/button/button";
- Raised + Raised

- Raised Custom + Raised Custom

@@ -26,7 +26,7 @@ import { ButtonModule } from "../../src/button/button";

- Disabled + Disabled

diff --git a/src/button/button.spec.ts b/src/button/button.spec.ts new file mode 100644 index 00000000000..a270c6114f9 --- /dev/null +++ b/src/button/button.spec.ts @@ -0,0 +1,73 @@ +import { + async, + TestBed, +} from '@angular/core/testing'; +import { Component, ViewChild } from '@angular/core'; +import { By } from '@angular/platform-browser'; +import { IgButton } from './button'; + + +describe('IgButton', function() { + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ + InitButton, + ButtonWithAttribs, + IgButton + ] + }) + .compileComponents(); + })); + + it('Initializes a button', () => { + let fixture = TestBed.createComponent(InitButton); + fixture.detectChanges(); + + expect(fixture.debugElement.query(By.css('span.ig-button--flat'))).toBeTruthy(); + expect(fixture.debugElement.query(By.css('i.material-icons'))).toBeTruthy(); + }); + + it("Button with properties", () => { + let fixture = TestBed.createComponent(ButtonWithAttribs); + fixture.detectChanges(); + + let button = fixture.debugElement.query(By.css('span')).nativeElement; + + expect(button).toBeTruthy(); + expect(button.classList.contains('ig-button--raised')).toBe(true); + expect(button.classList.contains('ig-button--disabled')).toBe(true); + + fixture.componentInstance.isDisabled = false; + fixture.detectChanges(); + + expect(button.classList.contains('ig-button--disabled')).toBe(false); + expect(button.style.color).toEqual('white'); + expect(button.style.background).toEqual('black'); + + fixture.componentInstance.foreground = 'yellow'; + fixture.componentInstance.background = 'green'; + fixture.detectChanges(); + + expect(button.style.color).toEqual('yellow'); + expect(button.style.background).toEqual('green'); + }); +}); + +@Component({ + template: + ` + add + ` +}) +class InitButton { +} + +@Component({ + template: + `Test` +}) +class ButtonWithAttribs { + isDisabled = true; + foreground = 'white'; + background = 'black'; +} diff --git a/src/button/button.ts b/src/button/button.ts index 716c0b4477b..4b9259a40eb 100644 --- a/src/button/button.ts +++ b/src/button/button.ts @@ -1,74 +1,41 @@ -import { Directive, ElementRef, HostListener, Input, Renderer, NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; +import { Directive, ElementRef, Input, Renderer, NgModule, OnInit } from '@angular/core'; @Directive({ selector: '[igButton]', - host: {'role': 'button'} + host: { + 'role': 'button' + } }) export class IgButton { private _type: string = 'flat'; private _cssClass: string = 'ig-button'; - private _el: ElementRef; - private _renderer: Renderer; private _color: string; private _backgroundColor: string; - constructor(private el: ElementRef, private renderer: Renderer) { - this._el = el; - this._renderer = renderer; - this._color = this._el.nativeElement.style.color; - this._backgroundColor = this._el.nativeElement.style.background; - } + constructor(private _el: ElementRef, private _renderer: Renderer) {} @Input('igButton') set type(value: string) { this._type = value || this._type; + this._renderer.setElementClass(this._el.nativeElement, `${this._cssClass}--${this._type}`, true); } @Input('igButtonColor') set color(value: string) { this._color = value || this._el.nativeElement.style.color; + this._renderer.setElementStyle(this._el.nativeElement, 'color', this._color); } @Input('igButtonBackground') set background (value: string) { this._backgroundColor = value || this._backgroundColor; + this._renderer.setElementStyle(this._el.nativeElement, 'background', this._backgroundColor); } - @Input() disabled: boolean; - - get type() { - return this._type; - } - - get color() { - return this._color; - } - - get backgroundColor() { - return this._backgroundColor; - } - - get isDisabled() { - return this.disabled !== undefined; - } - - set isDisabled(value: boolean) { - this.disabled = value; - } - - setButtonStyles(el: ElementRef, renderer: Renderer) { - renderer.setElementClass(el.nativeElement, `${this._cssClass}--${this._type}`, true); - renderer.setElementClass(el.nativeElement, `${this._cssClass}--disabled`, this.isDisabled); - renderer.setElementStyle(el.nativeElement, 'color', this._color); - renderer.setElementStyle(el.nativeElement, 'background', this._backgroundColor); - } - - ngAfterContentInit() { - this.setButtonStyles(this._el, this._renderer); + @Input() set disabled(val) { + this._renderer.setElementClass(this._el.nativeElement, `${this._cssClass}--disabled`, !!val); } } @NgModule({ declarations: [IgButton], - imports: [CommonModule], exports: [IgButton] }) export class ButtonModule {} \ No newline at end of file