feat(debug): collect styles and classes for the DebugElement
This commit is contained in:
parent
35ea02fb81
commit
155b88213c
|
@ -56,6 +56,8 @@ export class DebugElement extends DebugNode {
|
|||
name: string;
|
||||
properties: {[key: string]: any};
|
||||
attributes: {[key: string]: string};
|
||||
classes: {[key: string]: boolean};
|
||||
styles: {[key: string]: string};
|
||||
childNodes: DebugNode[];
|
||||
nativeElement: any;
|
||||
|
||||
|
@ -63,6 +65,8 @@ export class DebugElement extends DebugNode {
|
|||
super(nativeNode, parent, _debugInfo);
|
||||
this.properties = {};
|
||||
this.attributes = {};
|
||||
this.classes = {};
|
||||
this.styles = {};
|
||||
this.childNodes = [];
|
||||
this.nativeElement = nativeNode;
|
||||
}
|
||||
|
|
|
@ -9,6 +9,8 @@ import {
|
|||
removeDebugNodeFromIndex
|
||||
} from './debug_node';
|
||||
|
||||
import {StringMapWrapper} from '../../src/facade/collection';
|
||||
|
||||
import {AnimationKeyframe} from '../animation/animation_keyframe';
|
||||
import {AnimationStyles} from '../animation/animation_styles';
|
||||
import {AnimationPlayer} from '../animation/animation_player';
|
||||
|
@ -125,14 +127,29 @@ export class DebugDomRenderer implements Renderer {
|
|||
}
|
||||
|
||||
setElementClass(renderElement: any, className: string, isAdd: boolean) {
|
||||
var debugEl = getDebugNode(renderElement);
|
||||
if (isPresent(debugEl) && debugEl instanceof DebugElement) {
|
||||
debugEl.classes[className] = isAdd;
|
||||
}
|
||||
this._delegate.setElementClass(renderElement, className, isAdd);
|
||||
}
|
||||
|
||||
setElementStyles(renderElement: any, styles: {[key: string]: string}) {
|
||||
var debugEl = getDebugNode(renderElement);
|
||||
if (isPresent(debugEl) && debugEl instanceof DebugElement) {
|
||||
var elStyles = debugEl.styles;
|
||||
StringMapWrapper.forEach(styles, (value, prop) => {
|
||||
elStyles[prop] = value;
|
||||
});
|
||||
}
|
||||
this._delegate.setElementStyles(renderElement, styles);
|
||||
}
|
||||
|
||||
setElementStyle(renderElement: any, styleName: string, styleValue: string) {
|
||||
var debugEl = getDebugNode(renderElement);
|
||||
if (isPresent(debugEl) && debugEl instanceof DebugElement) {
|
||||
debugEl.styles[styleName] = styleValue;
|
||||
}
|
||||
this._delegate.setElementStyle(renderElement, styleName, styleValue);
|
||||
}
|
||||
|
||||
|
|
|
@ -175,11 +175,19 @@ class BankAccount {
|
|||
@Component({
|
||||
selector: 'test-app',
|
||||
template: `
|
||||
<bank-account bank="RBC" account="4747"></bank-account>
|
||||
<bank-account bank="RBC"
|
||||
account="4747"
|
||||
[style.width.px]="width"
|
||||
[style.color]="color"
|
||||
[class.closed]="isClosed"
|
||||
[class.open]="!isClosed"></bank-account>
|
||||
`,
|
||||
directives: [BankAccount]
|
||||
})
|
||||
class TestApp {
|
||||
width = 200;
|
||||
color = 'red';
|
||||
isClosed = true;
|
||||
}
|
||||
|
||||
export function main() {
|
||||
|
@ -285,6 +293,30 @@ export function main() {
|
|||
});
|
||||
}));
|
||||
|
||||
it('should list element classes',
|
||||
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
|
||||
tcb.createAsync(TestApp).then((fixture) => {
|
||||
fixture.detectChanges();
|
||||
var bankElem = fixture.debugElement.children[0];
|
||||
|
||||
expect(bankElem.classes['closed']).toBe(true);
|
||||
expect(bankElem.classes['open']).toBe(false);
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should list element styles',
|
||||
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
|
||||
tcb.createAsync(TestApp).then((fixture) => {
|
||||
fixture.detectChanges();
|
||||
var bankElem = fixture.debugElement.children[0];
|
||||
|
||||
expect(bankElem.styles['width']).toEqual('200px');
|
||||
expect(bankElem.styles['color']).toEqual('red');
|
||||
async.done();
|
||||
});
|
||||
}));
|
||||
|
||||
it('should query child elements by css',
|
||||
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
|
||||
tcb.createAsync(ParentComp)
|
||||
|
|
|
@ -171,6 +171,7 @@ const CORE = [
|
|||
'DebugElement.attributes:{[key:string]:string}',
|
||||
'DebugElement.childNodes:DebugNode[]',
|
||||
'DebugElement.children:DebugElement[]',
|
||||
'DebugElement.classes:{[key:string]:boolean}',
|
||||
'DebugElement.constructor(nativeNode:any, parent:any, _debugInfo:RenderDebugInfo)',
|
||||
'DebugElement.insertChildrenAfter(child:DebugNode, newChildren:DebugNode[]):any',
|
||||
'DebugElement.name:string',
|
||||
|
|
Loading…
Reference in New Issue