Skip to content

Commit ab3f236

Browse files
juliemrjuliemr
committed
chore(test): move ng-style tests to TestComponentBuilder
Part of angular#2354
1 parent 66d0e4e commit ab3f236

File tree

1 file changed

+67
-49
lines changed

1 file changed

+67
-49
lines changed

‎modules/angular2/test/directives/ng_style_spec.ts

Lines changed: 67 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {
22
AsyncTestCompleter,
3+
TestComponentBuilder,
34
beforeEach,
45
beforeEachBindings,
56
ddescribe,
@@ -17,101 +18,118 @@ import {StringMapWrapper} from 'angular2/src/facade/collection';
1718

1819
import {Component, View} from 'angular2/angular2';
1920

20-
import {TestBed} from 'angular2/src/test_lib/test_bed';
2121
import {DOM} from 'angular2/src/dom/dom_adapter';
2222
import {NgStyle} from 'angular2/src/directives/ng_style';
2323

2424
export function main() {
2525
describe('binding to CSS styles', () => {
2626

2727
it('should add styles specified in an object literal',
28-
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
28+
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
2929
var template = `<div [ng-style]="{'text-align': 'right'}"></div>`;
3030

31-
tb.createView(TestComponent, {html: template})
32-
.then((view) => {
33-
view.detectChanges();
34-
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('right');
31+
tcb.overrideTemplate(TestComponent, template)
32+
.createAsync(TestComponent)
33+
.then((rootTC) => {
34+
rootTC.detectChanges();
35+
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
36+
.toEqual('right');
3537

3638
async.done();
3739
});
3840
}));
3941

4042
it('should add and change styles specified in an object expression',
41-
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
43+
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
4244
var template = `<div [ng-style]="expr"></div>`;
4345

44-
tb.createView(TestComponent, {html: template})
45-
.then((view) => {
46+
tcb.overrideTemplate(TestComponent, template)
47+
.createAsync(TestComponent)
48+
.then((rootTC) => {
4649
var expr: Map<string, any>;
4750

48-
view.context.expr = {'text-align': 'right'};
49-
view.detectChanges();
50-
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('right');
51+
rootTC.componentInstance.expr = {'text-align': 'right'};
52+
rootTC.detectChanges();
53+
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
54+
.toEqual('right');
5155

52-
expr = view.context.expr;
56+
expr = rootTC.componentInstance.expr;
5357
expr['text-align'] = 'left';
54-
view.detectChanges();
55-
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('left');
58+
rootTC.detectChanges();
59+
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
60+
.toEqual('left');
5661

5762
async.done();
5863
});
5964
}));
6065

6166
it('should remove styles when deleting a key in an object expression',
62-
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
67+
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
6368
var template = `<div [ng-style]="expr"></div>`;
6469

65-
tb.createView(TestComponent, {html: template})
66-
.then((view) => {
67-
view.context.expr = {'text-align': 'right'};
68-
view.detectChanges();
69-
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('right');
70+
tcb.overrideTemplate(TestComponent, template)
71+
.createAsync(TestComponent)
72+
.then((rootTC) => {
73+
rootTC.componentInstance.expr = {'text-align': 'right'};
74+
rootTC.detectChanges();
75+
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
76+
.toEqual('right');
7077

71-
StringMapWrapper.delete(view.context.expr, 'text-align');
72-
view.detectChanges();
73-
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('');
78+
StringMapWrapper.delete(rootTC.componentInstance.expr, 'text-align');
79+
rootTC.detectChanges();
80+
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
81+
.toEqual('');
7482

7583
async.done();
7684
});
7785
}));
7886

7987
it('should co-operate with the style attribute',
80-
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
88+
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
8189
var template = `<div style="font-size: 12px" [ng-style]="expr"></div>`;
8290

83-
tb.createView(TestComponent, {html: template})
84-
.then((view) => {
85-
view.context.expr = {'text-align': 'right'};
86-
view.detectChanges();
87-
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('right');
88-
expect(DOM.getStyle(view.rootNodes[0], 'font-size')).toEqual('12px');
89-
90-
StringMapWrapper.delete(view.context.expr, 'text-align');
91-
view.detectChanges();
92-
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('');
93-
expect(DOM.getStyle(view.rootNodes[0], 'font-size')).toEqual('12px');
91+
tcb.overrideTemplate(TestComponent, template)
92+
.createAsync(TestComponent)
93+
.then((rootTC) => {
94+
rootTC.componentInstance.expr = {'text-align': 'right'};
95+
rootTC.detectChanges();
96+
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
97+
.toEqual('right');
98+
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'font-size'))
99+
.toEqual('12px');
100+
101+
StringMapWrapper.delete(rootTC.componentInstance.expr, 'text-align');
102+
rootTC.detectChanges();
103+
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
104+
.toEqual('');
105+
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'font-size'))
106+
.toEqual('12px');
94107

95108
async.done();
96109
});
97110
}));
98111

99112
it('should co-operate with the style.[styleName]="expr" special-case in the compiler',
100-
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
113+
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
101114
var template = `<div [style.font-size.px]="12" [ng-style]="expr"></div>`;
102115

103-
tb.createView(TestComponent, {html: template})
104-
.then((view) => {
105-
view.context.expr = {'text-align': 'right'};
106-
view.detectChanges();
107-
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('right');
108-
expect(DOM.getStyle(view.rootNodes[0], 'font-size')).toEqual('12px');
109-
110-
StringMapWrapper.delete(view.context.expr, 'text-align');
111-
expect(DOM.getStyle(view.rootNodes[0], 'font-size')).toEqual('12px');
112-
113-
view.detectChanges();
114-
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('');
116+
tcb.overrideTemplate(TestComponent, template)
117+
.createAsync(TestComponent)
118+
.then((rootTC) => {
119+
rootTC.componentInstance.expr = {'text-align': 'right'};
120+
rootTC.detectChanges();
121+
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
122+
.toEqual('right');
123+
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'font-size'))
124+
.toEqual('12px');
125+
126+
StringMapWrapper.delete(rootTC.componentInstance.expr, 'text-align');
127+
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'font-size'))
128+
.toEqual('12px');
129+
130+
rootTC.detectChanges();
131+
expect(DOM.getStyle(rootTC.componentViewChildren[0].nativeElement, 'text-align'))
132+
.toEqual('');
115133

116134
async.done();
117135
});

0 commit comments

Comments
 (0)