mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-24 06:22:45 +08:00
test(button): update karma and e2e tests for the new color input
This commit is contained in:
@ -96,15 +96,32 @@ import { isTrueProperty } from '../../util/util';
|
|||||||
encapsulation: ViewEncapsulation.None,
|
encapsulation: ViewEncapsulation.None,
|
||||||
})
|
})
|
||||||
export class Button {
|
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.
|
* @input {string} Large button.
|
||||||
@ -190,14 +207,15 @@ export class Button {
|
|||||||
if (type === '_style') {
|
if (type === '_style') {
|
||||||
this._setColor(this._color, isTrueProperty(attrValue));
|
this._setColor(this._color, isTrueProperty(attrValue));
|
||||||
}
|
}
|
||||||
this._setClass(this[type], false);
|
this._setClass((<any>this)[type], false);
|
||||||
if (isTrueProperty(attrValue)) {
|
if (isTrueProperty(attrValue)) {
|
||||||
this[type] = attrName;
|
(<any>this)[type] = attrName;
|
||||||
this._setClass(attrName, true);
|
this._setClass(attrName, true);
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
// Special handling for '_style' which defaults to 'default'.
|
// 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;
|
let role = this._role;
|
||||||
if (role) {
|
if (role) {
|
||||||
this._renderer.setElementClass(this._elementRef.nativeElement, role, assignCssClass); // button
|
this._renderer.setElementClass(this._elementRef.nativeElement, role, assignCssClass); // button
|
||||||
|
@ -1,21 +1,19 @@
|
|||||||
import { Button, Config } from '../../../../src';
|
import { Button, Config } from '../../../../src';
|
||||||
|
|
||||||
|
|
||||||
export function run() {
|
export function run() {
|
||||||
|
|
||||||
describe('button', () => {
|
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', () => {
|
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.setRole('bar-button');
|
||||||
b._assignCss(true);
|
b._assignCss(true);
|
||||||
|
|
||||||
expect(hasClass(b, 'bar-button-outline')).toEqual(true);
|
expect(hasClass(b, 'bar-button-outline')).toEqual(true);
|
||||||
expect(hasClass(b, 'bar-button-small')).toEqual(true);
|
expect(hasClass(b, 'bar-button-small')).toEqual(true);
|
||||||
expect(hasClass(b, 'bar-button-full')).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', () => {
|
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);
|
b._assignCss(true);
|
||||||
expect(hasClass(b, 'button-outline')).toEqual(true);
|
expect(hasClass(b, 'button-outline')).toEqual(true);
|
||||||
expect(hasClass(b, 'button-small')).toEqual(true);
|
expect(hasClass(b, 'button-small')).toEqual(true);
|
||||||
@ -43,7 +46,12 @@ export function run() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
it('should read button color attributes with styles', () => {
|
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);
|
b._assignCss(true);
|
||||||
expect(hasClass(b, 'button')).toEqual(true);
|
expect(hasClass(b, 'button')).toEqual(true);
|
||||||
expect(hasClass(b, 'button-outline')).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-full')).toEqual(true);
|
||||||
expect(hasClass(b, 'button-outline-primary')).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);
|
b._assignCss(true);
|
||||||
expect(hasClass(b, 'button')).toEqual(true);
|
expect(hasClass(b, 'button')).toEqual(true);
|
||||||
expect(hasClass(b, 'button-clear')).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);
|
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);
|
b._assignCss(true);
|
||||||
expect(hasClass(b, 'button')).toEqual(true);
|
expect(hasClass(b, 'button')).toEqual(true);
|
||||||
expect(hasClass(b, 'button-solid')).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);
|
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.setRole('bar-button');
|
||||||
b._assignCss(true);
|
b._assignCss(true);
|
||||||
expect(hasClass(b, 'bar-button-solid')).toEqual(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);
|
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')).toEqual(true);
|
||||||
expect(hasClass(b, 'button-default')).toEqual(true);
|
expect(hasClass(b, 'button-default')).toEqual(true);
|
||||||
|
|
||||||
b = mockButton(['clear']);
|
b = mockButton();
|
||||||
|
b.clear = true;
|
||||||
|
|
||||||
b._assignCss(true);
|
b._assignCss(true);
|
||||||
expect(hasClass(b, 'button')).toEqual(true);
|
expect(hasClass(b, 'button')).toEqual(true);
|
||||||
expect(hasClass(b, 'button-default')).toEqual(false);
|
expect(hasClass(b, 'button-default')).toEqual(false);
|
||||||
@ -87,77 +109,98 @@ export function run() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
it('should read button color attributes', () => {
|
it('should read button color attributes', () => {
|
||||||
let b = mockButton(['primary']);
|
let b = mockButton();
|
||||||
|
b.color = 'primary';
|
||||||
b._assignCss(true);
|
b._assignCss(true);
|
||||||
expect(hasClass(b, 'button-primary')).toEqual(true);
|
expect(hasClass(b, 'button-primary')).toEqual(true);
|
||||||
|
|
||||||
b = mockButton(['primary', 'secondary']);
|
b = mockButton();
|
||||||
|
b.color = 'primary';
|
||||||
|
b.color = 'secondary';
|
||||||
b._assignCss(true);
|
b._assignCss(true);
|
||||||
expect(hasClass(b, 'button-primary')).toEqual(true);
|
expect(hasClass(b, 'button-primary')).toEqual(false);
|
||||||
expect(hasClass(b, 'button-secondary')).toEqual(true);
|
expect(hasClass(b, 'button-secondary')).toEqual(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should read button style attributes', () => {
|
it('should read button style attributes', () => {
|
||||||
let b = mockButton(['clear']);
|
let b = mockButton();
|
||||||
|
b.clear = true;
|
||||||
b._assignCss(true);
|
b._assignCss(true);
|
||||||
expect(hasClass(b, 'button-clear')).toEqual(true);
|
expect(hasClass(b, 'button-clear')).toEqual(true);
|
||||||
|
|
||||||
b = mockButton(['outline']);
|
b = mockButton();
|
||||||
|
b.outline = true;
|
||||||
b._assignCss(true);
|
b._assignCss(true);
|
||||||
expect(hasClass(b, 'button-outline')).toEqual(true);
|
expect(hasClass(b, 'button-outline')).toEqual(true);
|
||||||
|
|
||||||
b = mockButton(['solid']);
|
b = mockButton();
|
||||||
|
b.solid = true;
|
||||||
b._assignCss(true);
|
b._assignCss(true);
|
||||||
expect(hasClass(b, 'button-solid')).toEqual(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);
|
b._assignCss(true);
|
||||||
expect(hasClass(b, 'button-clear')).toEqual(false);
|
expect(hasClass(b, 'button-clear')).toEqual(false);
|
||||||
expect(hasClass(b, 'button-outline')).toEqual(true);
|
expect(hasClass(b, 'button-outline')).toEqual(true);
|
||||||
expect(hasClass(b, 'button-small')).toEqual(true);
|
expect(hasClass(b, 'button-small')).toEqual(true);
|
||||||
expect(hasClass(b, 'button-full')).toEqual(true);
|
expect(hasClass(b, 'button-full')).toEqual(true);
|
||||||
|
|
||||||
b = mockButton(['outline']);
|
b = mockButton();
|
||||||
|
b.outline = true;
|
||||||
b.setRole('bar-button');
|
b.setRole('bar-button');
|
||||||
b._assignCss(true);
|
b._assignCss(true);
|
||||||
expect(hasClass(b, 'bar-button-outline')).toEqual(true);
|
expect(hasClass(b, 'bar-button-outline')).toEqual(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should read button shape attributes', () => {
|
it('should read button shape attributes', () => {
|
||||||
let b = mockButton(['round']);
|
let b = mockButton();
|
||||||
|
b.round = true;
|
||||||
b._assignCss(true);
|
b._assignCss(true);
|
||||||
expect(hasClass(b, 'button-round')).toEqual(true);
|
expect(hasClass(b, 'button-round')).toEqual(true);
|
||||||
|
|
||||||
b = mockButton(['fab']);
|
b = mockButton();
|
||||||
|
b.fab = true;
|
||||||
b._assignCss(true);
|
b._assignCss(true);
|
||||||
expect(hasClass(b, 'button-fab')).toEqual(true);
|
expect(hasClass(b, 'button-fab')).toEqual(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should read button display attributes', () => {
|
it('should read button display attributes', () => {
|
||||||
let b = mockButton(['block']);
|
let b = mockButton();
|
||||||
|
b.block = true;
|
||||||
b._assignCss(true);
|
b._assignCss(true);
|
||||||
expect(hasClass(b, 'button-block')).toEqual(true);
|
expect(hasClass(b, 'button-block')).toEqual(true);
|
||||||
|
|
||||||
b = mockButton(['full']);
|
b = mockButton();
|
||||||
|
b.full = true;
|
||||||
b._assignCss(true);
|
b._assignCss(true);
|
||||||
expect(hasClass(b, 'button-full')).toEqual(true);
|
expect(hasClass(b, 'button-full')).toEqual(true);
|
||||||
|
|
||||||
b = mockButton(['block', 'full']);
|
b = mockButton();
|
||||||
|
b.block = true;
|
||||||
|
b.full = true;
|
||||||
b._assignCss(true);
|
b._assignCss(true);
|
||||||
expect(hasClass(b, 'button-block')).toEqual(false);
|
expect(hasClass(b, 'button-block')).toEqual(false);
|
||||||
expect(hasClass(b, 'button-full')).toEqual(true);
|
expect(hasClass(b, 'button-full')).toEqual(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should read button size attributes', () => {
|
it('should read button size attributes', () => {
|
||||||
let b = mockButton(['small']);
|
let b = mockButton();
|
||||||
|
b.small = true;
|
||||||
b._assignCss(true);
|
b._assignCss(true);
|
||||||
expect(hasClass(b, 'button-small')).toEqual(true);
|
expect(hasClass(b, 'button-small')).toEqual(true);
|
||||||
|
|
||||||
b = mockButton(['large']);
|
b = mockButton();
|
||||||
|
b.large = true;
|
||||||
b._assignCss(true);
|
b._assignCss(true);
|
||||||
expect(hasClass(b, 'button-large')).toEqual(true);
|
expect(hasClass(b, 'button-large')).toEqual(true);
|
||||||
|
|
||||||
b = mockButton(['large', 'small']);
|
b = mockButton();
|
||||||
|
b.large = true;
|
||||||
|
b.small = true;
|
||||||
b._assignCss(true);
|
b._assignCss(true);
|
||||||
expect(hasClass(b, 'button-large')).toEqual(false);
|
expect(hasClass(b, 'button-large')).toEqual(false);
|
||||||
expect(hasClass(b, 'button-small')).toEqual(true);
|
expect(hasClass(b, 'button-small')).toEqual(true);
|
||||||
@ -173,7 +216,7 @@ export function run() {
|
|||||||
let config = new Config({
|
let config = new Config({
|
||||||
hoverCSS: false
|
hoverCSS: false
|
||||||
});
|
});
|
||||||
let b = mockButton(null, config);
|
let b = mockButton(config);
|
||||||
|
|
||||||
expect(hasClass(b, 'disable-hover')).toEqual(true);
|
expect(hasClass(b, 'disable-hover')).toEqual(true);
|
||||||
});
|
});
|
||||||
@ -182,36 +225,31 @@ export function run() {
|
|||||||
let b = mockButton();
|
let b = mockButton();
|
||||||
expect(b._role).toEqual('button');
|
expect(b._role).toEqual('button');
|
||||||
expect(b._size).toEqual(null);
|
expect(b._size).toEqual(null);
|
||||||
expect(b._colors.length).toEqual(0);
|
expect(b._color).toEqual(null);
|
||||||
expect(b._style).toEqual('default');
|
expect(b._style).toEqual('default');
|
||||||
expect(b._display).toEqual(null);
|
expect(b._display).toEqual(null);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should add alert-button css class', () => {
|
it('should add alert-button css class', () => {
|
||||||
let b = mockButton(null, null, 'alert-button');
|
let b = mockButton(null, 'alert-button');
|
||||||
b._assignCss(true);
|
b._assignCss(true);
|
||||||
expect(hasClass(b, 'alert-button')).toEqual(true);
|
expect(hasClass(b, 'alert-button')).toEqual(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
function mockButton(attrs?, config?, ionButton?) {
|
function mockButton(config?, ionButton?) {
|
||||||
config = config || new Config();
|
config = config || new Config();
|
||||||
ionButton = ionButton || '';
|
ionButton = ionButton || '';
|
||||||
let elementRef = {
|
let elementRef = {
|
||||||
nativeElement: document.createElement('button')
|
nativeElement: document.createElement('button')
|
||||||
};
|
};
|
||||||
if (attrs) {
|
|
||||||
for (let i = 0; i < attrs.length; i++) {
|
|
||||||
elementRef.nativeElement.setAttribute(attrs[i], '');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let renderer: any = {
|
let renderer: any = {
|
||||||
setElementClass: function(nativeElement, className, shouldAdd) {
|
setElementClass: function(nativeElement, className, shouldAdd) {
|
||||||
nativeElement.classList[shouldAdd ? 'add' : 'remove'](className);
|
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;
|
b._init = true;
|
||||||
return b;
|
return b;
|
||||||
}
|
}
|
||||||
|
@ -37,7 +37,7 @@
|
|||||||
</ion-item>
|
</ion-item>
|
||||||
|
|
||||||
<ion-item text-wrap>
|
<ion-item text-wrap>
|
||||||
<h3>H3 Title Text</h3>
|
<h3 color="primary">H3 Title Text</h3>
|
||||||
<p>Paragraph line 1</p>
|
<p>Paragraph line 1</p>
|
||||||
<p color="secondary">Paragraph line 2 secondary</p>
|
<p color="secondary">Paragraph line 2 secondary</p>
|
||||||
</ion-item>
|
</ion-item>
|
||||||
|
Reference in New Issue
Block a user