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