feat(debug): collect styles and classes for the DebugElement

This commit is contained in:
Matias Niemelä 2016-06-01 16:57:12 -07:00
parent 35ea02fb81
commit 155b88213c
4 changed files with 55 additions and 1 deletions

View File

@ -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;
}

View File

@ -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);
}

View File

@ -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)

View File

@ -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',