test(button): update karma and e2e tests for the new color input

src/components/button/button.ts

@@ -96,15 +96,32 @@ import { isTrueProperty } from '../../util/util';
   encapsulation: ViewEncapsulation.None,
 })
 export class Button {
-  private _role: string = 'button'; // bar-button
+  /** @internal */
-  private _mt: boolean = false; // menutoggle
+  _role: string = 'button'; // bar-button
-  private _size: string = null; // large/small/default
+
-  private _style: string = 'default'; // outline/clear/solid
+  /** @internal */
-  private _shape: string = null; // round/fab
+  _mt: boolean = false; // menutoggle
-  private _display: string = null; // block/full
+
-  private _color: string = null; // primary/secondary
+  /** @internal */
-  private _disabled: boolean = false; // disabled
+  _size: string = null; // large/small/default
-  private _init: boolean;
+
+  /** @internal */
+  _style: string = 'default'; // outline/clear/solid
+
+  /** @internal */
+  _shape: string = null; // round/fab
+
+  /** @internal */
+  _display: string = null; // block/full
+
+  /** @internal */
+  _color: string = null; // primary/secondary
+
+  /** @internal */
+  _disabled: boolean = false; // disabled
+
+  /** @internal */
+  _init: boolean;
 
   /**
    * @input {string} Large button.
@@ -190,14 +207,15 @@ export class Button {
     if (type === '_style') {
       this._setColor(this._color, isTrueProperty(attrValue));
     }
-    this._setClass(this[type], false);
+    this._setClass((<any>this)[type], false);
     if (isTrueProperty(attrValue)) {
-      this[type] = attrName;
+      (<any>this)[type] = attrName;
       this._setClass(attrName, true);
+
     } else {
       // Special handling for '_style' which defaults to 'default'.
-      this[type] = (type === '_style' ? 'default' : null);
+      (<any>this)[type] = (type === '_style' ? 'default' : null);
-      this._setClass(this[type], true);
+      this._setClass((<any>this)[type], true);
     }
   }
 
@@ -271,9 +289,9 @@ export class Button {
   }
 
   /**
-   * @private
+   * @internal
    */
-  private _assignCss(assignCssClass: boolean) {
+  _assignCss(assignCssClass: boolean) {
     let role = this._role;
     if (role) {
       this._renderer.setElementClass(this._elementRef.nativeElement, role, assignCssClass); // button

src/components/button/test/button.spec.ts

@@ -1,21 +1,19 @@
 import { Button, Config } from '../../../../src';
 
+
 export function run() {
 
   describe('button', () => {
 
-    it('should ignore certain attributes', () => {
-      let b = mockButton(['_ngcontent', 'button']);
-      b._assignCss(true);
-      expect(hasClass(b, 'button')).toEqual(true);
-      expect(hasClass(b, 'button-_ngcontent')).toEqual(false);
-      expect(hasClass(b, 'button-button')).toEqual(false);
-    });
-
     it('should set a different button role', () => {
-      let b = mockButton(['outline', 'small', 'full', 'primary']);
+      let b = mockButton();
+      b.outline = true;
+      b.small = true;
+      b.full = true;
+      b.color = 'primary';
       b.setRole('bar-button');
       b._assignCss(true);
+
       expect(hasClass(b, 'bar-button-outline')).toEqual(true);
       expect(hasClass(b, 'bar-button-small')).toEqual(true);
       expect(hasClass(b, 'bar-button-full')).toEqual(true);
@@ -28,7 +26,12 @@ export function run() {
     });
 
     it('should remove button color attributes and add different role', () => {
-      let b = mockButton(['outline', 'small', 'full', 'primary']);
+      let b = mockButton();
+      b.outline = true;
+      b.small = true;
+      b.full = true;
+      b.color = 'primary';
+
       b._assignCss(true);
       expect(hasClass(b, 'button-outline')).toEqual(true);
       expect(hasClass(b, 'button-small')).toEqual(true);
@@ -43,7 +46,12 @@ export function run() {
     });
 
     it('should read button color attributes with styles', () => {
-      let b = mockButton(['outline', 'small', 'full', 'primary']);
+      let b = mockButton();
+      b.outline = true;
+      b.small = true;
+      b.full = true;
+      b.color = 'primary';
+
       b._assignCss(true);
       expect(hasClass(b, 'button')).toEqual(true);
       expect(hasClass(b, 'button-outline')).toEqual(true);
@@ -51,25 +59,37 @@ export function run() {
       expect(hasClass(b, 'button-full')).toEqual(true);
       expect(hasClass(b, 'button-outline-primary')).toEqual(true);
 
-      b = mockButton(['clear', 'primary', 'secondary']);
+      b = mockButton();
+      b.clear = true;
+      b.color = 'primary';
+      b.color = 'secondary';
+
       b._assignCss(true);
       expect(hasClass(b, 'button')).toEqual(true);
       expect(hasClass(b, 'button-clear')).toEqual(true);
-      expect(hasClass(b, 'button-clear-primary')).toEqual(true);
+      expect(hasClass(b, 'button-clear-primary')).toEqual(false);
       expect(hasClass(b, 'button-clear-secondary')).toEqual(true);
 
-      b = mockButton(['solid', 'primary', 'secondary']);
+      b = mockButton();
+      b.solid = true;
+      b.color = 'primary';
+      b.color = 'secondary';
+
       b._assignCss(true);
       expect(hasClass(b, 'button')).toEqual(true);
       expect(hasClass(b, 'button-solid')).toEqual(true);
-      expect(hasClass(b, 'button-primary')).toEqual(true);
+      expect(hasClass(b, 'button-primary')).toEqual(false);
       expect(hasClass(b, 'button-secondary')).toEqual(true);
 
-      b = mockButton(['solid', 'primary', 'secondary']);
+      b = mockButton();
+      b.solid = true;
+      b.color = 'primary';
+      b.color = 'secondary';
+
       b.setRole('bar-button');
       b._assignCss(true);
       expect(hasClass(b, 'bar-button-solid')).toEqual(true);
-      expect(hasClass(b, 'bar-button-solid-primary')).toEqual(true);
+      expect(hasClass(b, 'bar-button-solid-primary')).toEqual(false);
       expect(hasClass(b, 'bar-button-solid-secondary')).toEqual(true);
     });
 
@@ -79,7 +99,9 @@ export function run() {
       expect(hasClass(b, 'button')).toEqual(true);
       expect(hasClass(b, 'button-default')).toEqual(true);
 
-      b = mockButton(['clear']);
+      b = mockButton();
+      b.clear = true;
+
       b._assignCss(true);
       expect(hasClass(b, 'button')).toEqual(true);
       expect(hasClass(b, 'button-default')).toEqual(false);
@@ -87,77 +109,98 @@ export function run() {
     });
 
     it('should read button color attributes', () => {
-      let b = mockButton(['primary']);
+      let b = mockButton();
+      b.color = 'primary';
       b._assignCss(true);
       expect(hasClass(b, 'button-primary')).toEqual(true);
 
-      b = mockButton(['primary', 'secondary']);
+      b = mockButton();
+      b.color = 'primary';
+      b.color = 'secondary';
       b._assignCss(true);
-      expect(hasClass(b, 'button-primary')).toEqual(true);
+      expect(hasClass(b, 'button-primary')).toEqual(false);
       expect(hasClass(b, 'button-secondary')).toEqual(true);
     });
 
     it('should read button style attributes', () => {
-      let b = mockButton(['clear']);
+      let b = mockButton();
+      b.clear = true;
       b._assignCss(true);
       expect(hasClass(b, 'button-clear')).toEqual(true);
 
-      b = mockButton(['outline']);
+      b = mockButton();
+      b.outline = true;
       b._assignCss(true);
       expect(hasClass(b, 'button-outline')).toEqual(true);
 
-      b = mockButton(['solid']);
+      b = mockButton();
+      b.solid = true;
       b._assignCss(true);
       expect(hasClass(b, 'button-solid')).toEqual(true);
 
-      b = mockButton(['clear', 'outline', 'small', 'full']);
+      b = mockButton();
+      b.clear = true;
+      b.outline = true;
+      b.small = true;
+      b.full = true;
       b._assignCss(true);
       expect(hasClass(b, 'button-clear')).toEqual(false);
       expect(hasClass(b, 'button-outline')).toEqual(true);
       expect(hasClass(b, 'button-small')).toEqual(true);
       expect(hasClass(b, 'button-full')).toEqual(true);
 
-      b = mockButton(['outline']);
+      b = mockButton();
+      b.outline = true;
       b.setRole('bar-button');
       b._assignCss(true);
       expect(hasClass(b, 'bar-button-outline')).toEqual(true);
     });
 
     it('should read button shape attributes', () => {
-      let b = mockButton(['round']);
+      let b = mockButton();
+      b.round = true;
       b._assignCss(true);
       expect(hasClass(b, 'button-round')).toEqual(true);
 
-      b = mockButton(['fab']);
+      b = mockButton();
+      b.fab = true;
       b._assignCss(true);
       expect(hasClass(b, 'button-fab')).toEqual(true);
     });
 
     it('should read button display attributes', () => {
-      let b = mockButton(['block']);
+      let b = mockButton();
+      b.block = true;
       b._assignCss(true);
       expect(hasClass(b, 'button-block')).toEqual(true);
 
-      b = mockButton(['full']);
+      b = mockButton();
+      b.full = true;
       b._assignCss(true);
       expect(hasClass(b, 'button-full')).toEqual(true);
 
-      b = mockButton(['block', 'full']);
+      b = mockButton();
+      b.block = true;
+      b.full = true;
       b._assignCss(true);
       expect(hasClass(b, 'button-block')).toEqual(false);
       expect(hasClass(b, 'button-full')).toEqual(true);
     });
 
     it('should read button size attributes', () => {
-      let b = mockButton(['small']);
+      let b = mockButton();
+      b.small = true;
       b._assignCss(true);
       expect(hasClass(b, 'button-small')).toEqual(true);
 
-      b = mockButton(['large']);
+      b = mockButton();
+      b.large = true;
       b._assignCss(true);
       expect(hasClass(b, 'button-large')).toEqual(true);
 
-      b = mockButton(['large', 'small']);
+      b = mockButton();
+      b.large = true;
+      b.small = true;
       b._assignCss(true);
       expect(hasClass(b, 'button-large')).toEqual(false);
       expect(hasClass(b, 'button-small')).toEqual(true);
@@ -173,7 +216,7 @@ export function run() {
       let config = new Config({
         hoverCSS: false
       });
-      let b = mockButton(null, config);
+      let b = mockButton(config);
 
       expect(hasClass(b, 'disable-hover')).toEqual(true);
     });
@@ -182,36 +225,31 @@ export function run() {
       let b = mockButton();
       expect(b._role).toEqual('button');
       expect(b._size).toEqual(null);
-      expect(b._colors.length).toEqual(0);
+      expect(b._color).toEqual(null);
       expect(b._style).toEqual('default');
       expect(b._display).toEqual(null);
     });
 
     it('should add alert-button css class', () => {
-      let b = mockButton(null, null, 'alert-button');
+      let b = mockButton(null, 'alert-button');
       b._assignCss(true);
       expect(hasClass(b, 'alert-button')).toEqual(true);
     });
 
   });
 
-  function mockButton(attrs?, config?, ionButton?) {
+  function mockButton(config?, ionButton?) {
     config = config || new Config();
     ionButton = ionButton || '';
     let elementRef = {
       nativeElement: document.createElement('button')
     };
-    if (attrs) {
-      for (let i = 0; i < attrs.length; i++) {
-        elementRef.nativeElement.setAttribute(attrs[i], '');
-      }
-    }
     let renderer: any = {
       setElementClass: function(nativeElement, className, shouldAdd) {
         nativeElement.classList[shouldAdd ? 'add' : 'remove'](className);
       }
     };
-    let b = new Button(null, ionButton, config, elementRef, renderer, null);
+    let b = new Button(null, ionButton, config, elementRef, renderer);
     b._init = true;
     return b;
   }

src/components/item/test/text/main.html

@@ -37,7 +37,7 @@
   </ion-item>
 
   <ion-item text-wrap>
-    <h3>H3 Title Text</h3>
+    <h3 color="primary">H3 Title Text</h3>
     <p>Paragraph line 1</p>
     <p color="secondary">Paragraph line 2 secondary</p>
   </ion-item>