iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(NgStyleSpec): simplify NgStyle tests (#10519)

This commit is contained in:
Pawel Kozlowski 2016-08-05 18:28:08 +02:00 committed by Alex Rickabaugh
parent 63b82cd730
commit 797cb5ae7b
1 changed files with 27 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
modules/@angular/common/test/directives/ng_style_spec.ts
View File

@ -7,15 +7,16 @@
*/ */
import {AsyncTestCompleter, beforeEach, beforeEachProviders, ddescribe, xdescribe, describe, expect, iit, inject, it, xit,} from '@angular/core/testing/testing_internal'; import {AsyncTestCompleter, beforeEach, beforeEachProviders, ddescribe, xdescribe, describe, expect, iit, inject, it, xit,} from '@angular/core/testing/testing_internal';
import {TestComponentBuilder} from '@angular/core/testing'; import {TestComponentBuilder, ComponentFixture} from '@angular/core/testing';
import {StringMapWrapper} from '../../src/facade/collection';
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
import {NgStyle} from '@angular/common/src/directives/ng_style'; import {NgStyle} from '@angular/common/src/directives/ng_style';
function expectNativeEl(fixture: ComponentFixture<any>) {
return <any>expect(fixture.debugElement.children[0].nativeElement);
}
export function main() { export function main() {
describe('binding to CSS styles', () => { describe('binding to CSS styles', () => {
@ -29,9 +30,7 @@ export function main() {
.createAsync(TestComponent) .createAsync(TestComponent)
.then((fixture) => { .then((fixture) => {
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getStyle( expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('40px');
async.done(); async.done();
}); });
@ -50,16 +49,12 @@ export function main() {
fixture.debugElement.componentInstance.expr = {'max-width': '40px'}; fixture.debugElement.componentInstance.expr = {'max-width': '40px'};
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getStyle( expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('40px');
expr = fixture.debugElement.componentInstance.expr; expr = fixture.debugElement.componentInstance.expr;
(expr as any)['max-width'] = '30%'; (expr as any)['max-width'] = '30%';
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getStyle( expectNativeEl(fixture).toHaveCssStyle({'max-width': '30%'});
fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('30%');
async.done(); async.done();
}); });
@ -77,15 +72,11 @@ export function main() {
fixture.debugElement.componentInstance.expr = '40'; fixture.debugElement.componentInstance.expr = '40';
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getStyle( expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('40px');
fixture.debugElement.componentInstance.expr = null; fixture.debugElement.componentInstance.expr = null;
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getStyle( expectNativeEl(fixture).not.toHaveCssStyle('max-width');
fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('');
async.done(); async.done();
}); });
@ -103,15 +94,11 @@ export function main() {
fixture.debugElement.componentInstance.expr = {'max-width.px': '40'}; fixture.debugElement.componentInstance.expr = {'max-width.px': '40'};
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getStyle( expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('40px');
fixture.debugElement.componentInstance.expr = {'max-width.em': '40'}; fixture.debugElement.componentInstance.expr = {'max-width.em': '40'};
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getStyle( expectNativeEl(fixture).toHaveCssStyle({'max-width': '40em'});
fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('40em');
async.done(); async.done();
}); });
@ -134,9 +121,7 @@ export function main() {
}; };
fixture.detectChanges(); fixture.detectChanges();
let el = fixture.debugElement.children[0].nativeElement; expectNativeEl(fixture).toHaveCssStyle({'height': '10px', 'width': '10px'});
expect(getDOM().getStyle(el, 'height')).toEqual('10px');
expect(getDOM().getStyle(el, 'width')).toEqual('10px');
fixture.debugElement.componentInstance.expr = { fixture.debugElement.componentInstance.expr = {
// width, height order is important here // width, height order is important here
@ -145,8 +130,7 @@ export function main() {
}; };
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getStyle(el, 'height')).toEqual('5px'); expectNativeEl(fixture).toHaveCssStyle({'height': '5px', 'width': '5px'});
expect(getDOM().getStyle(el, 'width')).toEqual('5px');
async.done(); async.done();
}); });
@ -163,16 +147,11 @@ export function main() {
.then((fixture) => { .then((fixture) => {
fixture.debugElement.componentInstance.expr = {'max-width': '40px'}; fixture.debugElement.componentInstance.expr = {'max-width': '40px'};
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getStyle( expectNativeEl(fixture).toHaveCssStyle({'max-width': '40px'});
fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('40px');
StringMapWrapper.delete( delete fixture.debugElement.componentInstance.expr['max-width'];
fixture.debugElement.componentInstance.expr, 'max-width');
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getStyle( expectNativeEl(fixture).not.toHaveCssStyle('max-width');
fixture.debugElement.children[0].nativeElement, 'max-width'))
.toEqual('');
async.done(); async.done();
}); });
@ -189,22 +168,13 @@ export function main() {
.then((fixture) => { .then((fixture) => {
fixture.debugElement.componentInstance.expr = {'max-width': '40px'}; fixture.debugElement.componentInstance.expr = {'max-width': '40px'};
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getStyle( expectNativeEl(fixture).toHaveCssStyle(
fixture.debugElement.children[0].nativeElement, 'max-width')) {'max-width': '40px', 'font-size': '12px'});
.toEqual('40px');
expect(getDOM().getStyle(
fixture.debugElement.children[0].nativeElement, 'font-size'))
.toEqual('12px');
StringMapWrapper.delete( delete fixture.debugElement.componentInstance.expr['max-width'];
fixture.debugElement.componentInstance.expr, 'max-width');
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getStyle( expectNativeEl(fixture).not.toHaveCssStyle('max-width');
fixture.debugElement.children[0].nativeElement, 'max-width')) expectNativeEl(fixture).toHaveCssStyle({'font-size': '12px'});
.toEqual('');
expect(getDOM().getStyle(
fixture.debugElement.children[0].nativeElement, 'font-size'))
.toEqual('12px');
async.done(); async.done();
}); });
@ -221,23 +191,13 @@ export function main() {
.then((fixture) => { .then((fixture) => {
fixture.debugElement.componentInstance.expr = {'max-width': '40px'}; fixture.debugElement.componentInstance.expr = {'max-width': '40px'};
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getStyle( expectNativeEl(fixture).toHaveCssStyle(
fixture.debugElement.children[0].nativeElement, 'max-width')) {'max-width': '40px', 'font-size': '12px'});
.toEqual('40px');
expect(getDOM().getStyle(
fixture.debugElement.children[0].nativeElement, 'font-size'))
.toEqual('12px');
StringMapWrapper.delete(
fixture.debugElement.componentInstance.expr, 'max-width');
expect(getDOM().getStyle(
fixture.debugElement.children[0].nativeElement, 'font-size'))
.toEqual('12px');
delete fixture.debugElement.componentInstance.expr['max-width'];
fixture.detectChanges(); fixture.detectChanges();
expect(getDOM().getStyle( expectNativeEl(fixture).not.toHaveCssStyle('max-width');
fixture.debugElement.children[0].nativeElement, 'max-width')) expectNativeEl(fixture).toHaveCssStyle({'font-size': '12px'});
.toEqual('');
async.done(); async.done();
}); });