javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Brandy Carney
2016-08-23 18:34:55 -04:00
parent 55a0257dbc
commit 8c1662d5e9
3 changed files with 120 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/button/button.ts
View File

@ -96,15 +96,32 @@ import { isTrueProperty } from '../../util/util';
encapsulation: ViewEncapsulation.None,
})
export class Button {
private _role: string = 'button'; // bar-button
private _mt: boolean = false; // menutoggle
private _size: string = null; // large/small/default
private _style: string = 'default'; // outline/clear/solid
private _shape: string = null; // round/fab
private _display: string = null; // block/full
private _color: string = null; // primary/secondary
private _disabled: boolean = false; // disabled
private _init: boolean;
/** @internal */
_role: string = 'button'; // bar-button
/** @internal */
_mt: boolean = false; // menutoggle
/** @internal */
_size: string = null; // large/small/default
/** @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.
@ -189,15 +206,16 @@ export class Button {
_attr(type: string, attrName: string, attrValue: boolean) {
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);
this._setClass(this[type], true);
(<any>this)[type] = (type === '_style' ? 'default' : null);
this._setClass((<any>this)[type], true);
}
}
@ -271,12 +289,12 @@ 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
this._renderer.setElementClass(this._elementRef.nativeElement, role, assignCssClass); // button
this._setClass('menutoggle', this._mt); // menutoggle
@ -287,7 +305,7 @@ export class Button {
this._setColor(this._color, assignCssClass); // button-secondary, bar-button-secondary
}
}
/**
* @internal
*/
@ -316,5 +334,5 @@ export class Button {
this._renderer.setElementClass(this._elementRef.nativeElement, `${className}-${color}`, isAdd);
}
}
}
}
}

126
src/components/button/test/button.spec.ts
View File

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

2
src/components/item/test/text/main.html
View File

@ -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>