127 lines
4.4 KiB
TypeScript
127 lines
4.4 KiB
TypeScript
import {
|
|
AsyncTestCompleter,
|
|
beforeEach,
|
|
beforeEachBindings,
|
|
ddescribe,
|
|
xdescribe,
|
|
describe,
|
|
el,
|
|
expect,
|
|
iit,
|
|
inject,
|
|
it,
|
|
xit,
|
|
} from 'angular2/test_lib';
|
|
|
|
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';
|
|
|
|
export function main() {
|
|
describe('binding to CSS styles', () => {
|
|
|
|
it('should add styles specified in an object literal',
|
|
inject([TestBed, AsyncTestCompleter], (tb: TestBed, 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');
|
|
|
|
async.done();
|
|
});
|
|
}));
|
|
|
|
it('should add and change styles specified in an object expression',
|
|
inject([TestBed, AsyncTestCompleter], (tb: TestBed, async) => {
|
|
var template = `<div [ng-style]="expr"></div>`;
|
|
|
|
tb.createView(TestComponent, {html: template})
|
|
.then((view) => {
|
|
var expr: Map<string, any>;
|
|
|
|
view.context.expr = {'text-align': 'right'};
|
|
view.detectChanges();
|
|
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('right');
|
|
|
|
expr = view.context.expr;
|
|
expr['text-align'] = 'left';
|
|
view.detectChanges();
|
|
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('left');
|
|
|
|
async.done();
|
|
});
|
|
}));
|
|
|
|
it('should remove styles when deleting a key in an object expression',
|
|
inject([TestBed, AsyncTestCompleter], (tb: TestBed, 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');
|
|
|
|
StringMapWrapper.delete(view.context.expr, 'text-align');
|
|
view.detectChanges();
|
|
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('');
|
|
|
|
async.done();
|
|
});
|
|
}));
|
|
|
|
it('should co-operate with the style attribute',
|
|
inject([TestBed, AsyncTestCompleter], (tb: TestBed, 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');
|
|
|
|
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');
|
|
|
|
async.done();
|
|
});
|
|
}));
|
|
|
|
it('should co-operate with the style.[styleName]="expr" special-case in the compiler',
|
|
inject([TestBed, AsyncTestCompleter], (tb: TestBed, 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');
|
|
|
|
StringMapWrapper.delete(view.context.expr, 'text-align');
|
|
expect(DOM.getStyle(view.rootNodes[0], 'font-size')).toEqual('12px');
|
|
|
|
view.detectChanges();
|
|
expect(DOM.getStyle(view.rootNodes[0], 'text-align')).toEqual('');
|
|
|
|
async.done();
|
|
});
|
|
}));
|
|
})
|
|
}
|
|
|
|
@Component({selector: 'test-cmp'})
|
|
@View({directives: [NgStyle]})
|
|
class TestComponent {
|
|
expr;
|
|
}
|