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

chore(test): move ng-style tests to TestComponentBuilder 

Part of #2354
This commit is contained in:
Julie Ralph 2015-06-26 16:16:19 -07:00
parent 66d0e4e656
commit ab3f2365fd
1 changed files with 64 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
modules/angular2/test/directives/ng_style_spec.ts
View File

@ -1,5 +1,6 @@
import {
AsyncTestCompleter,
TestComponentBuilder,
beforeEach,
beforeEachBindings,
ddescribe,
@ -17,7 +18,6 @@ import {StringMapWrapper} from 'angular2/src/facade/collection';
import {Component, View} from 'angular2/angular2';
import {TestBed} from 'angular2/src/test_lib/test_bed';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {NgStyle} from 'angular2/src/directives/ng_style';
@ -25,93 +25,111 @@ export function main() {
describe('binding to CSS styles', () => {
it('should add styles specified in an object literal',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [ng-style]="{'text-align': 'right'}"></div>`;
tb.createView(TestComponent, {html: template})
.then((view) => {
view.detectChanges();
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('right');
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
rootTC.detectChanges();
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
.toEqual('right');
async.done();
});
}));
it('should add and change styles specified in an object expression',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [ng-style]="expr"></div>`;
tb.createView(TestComponent, {html: template})
.then((view) => {
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
var expr: Map<string, any>;
view.context.expr = {'text-align': 'right'};
view.detectChanges();
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('right');
rootTC.componentInstance.expr = {'text-align': 'right'};
rootTC.detectChanges();
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
.toEqual('right');
expr = view.context.expr;
expr = rootTC.componentInstance.expr;
expr['text-align'] = 'left';
view.detectChanges();
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('left');
rootTC.detectChanges();
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
.toEqual('left');
async.done();
});
}));
it('should remove styles when deleting a key in an object expression',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [ng-style]="expr"></div>`;
tb.createView(TestComponent, {html: template})
.then((view) => {
view.context.expr = {'text-align': 'right'};
view.detectChanges();
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('right');
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
rootTC.componentInstance.expr = {'text-align': 'right'};
rootTC.detectChanges();
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
.toEqual('right');
StringMapWrapper.delete(view.context.expr, 'text-align');
view.detectChanges();
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('');
StringMapWrapper.delete(rootTC.componentInstance.expr, 'text-align');
rootTC.detectChanges();
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
.toEqual('');
async.done();
});
}));
it('should co-operate with the style attribute',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div style="font-size: 12px" [ng-style]="expr"></div>`;
tb.createView(TestComponent, {html: template})
.then((view) => {
view.context.expr = {'text-align': 'right'};
view.detectChanges();
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('right');
expect(DOM.getStyle(view.rootNodes[0], 'font-size')).toEqual('12px');
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
rootTC.componentInstance.expr = {'text-align': 'right'};
rootTC.detectChanges();
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
.toEqual('right');
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'font-size'))
.toEqual('12px');
StringMapWrapper.delete(view.context.expr, 'text-align');
view.detectChanges();
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('');
expect(DOM.getStyle(view.rootNodes[0], 'font-size')).toEqual('12px');
StringMapWrapper.delete(rootTC.componentInstance.expr, 'text-align');
rootTC.detectChanges();
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
.toEqual('');
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'font-size'))
.toEqual('12px');
async.done();
});
}));
it('should co-operate with the style.[styleName]="expr" special-case in the compiler',
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
var template = `<div [style.font-size.px]="12" [ng-style]="expr"></div>`;
tb.createView(TestComponent, {html: template})
.then((view) => {
view.context.expr = {'text-align': 'right'};
view.detectChanges();
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('right');
expect(DOM.getStyle(view.rootNodes[0], 'font-size')).toEqual('12px');
tcb.overrideTemplate(TestComponent, template)
.createAsync(TestComponent)
.then((rootTC) => {
rootTC.componentInstance.expr = {'text-align': 'right'};
rootTC.detectChanges();
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
.toEqual('right');
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'font-size'))
.toEqual('12px');
StringMapWrapper.delete(view.context.expr, 'text-align');
expect(DOM.getStyle(view.rootNodes[0], 'font-size')).toEqual('12px');
StringMapWrapper.delete(rootTC.componentInstance.expr, 'text-align');
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'font-size'))
.toEqual('12px');
view.detectChanges();
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('');
rootTC.detectChanges();
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
.toEqual('');
async.done();
});