22880eae16
This change contains conditionally attached classes which provide human readable (debug) level information for `LView`, `LContainer` and other internal data structures. These data structures are stored internally as array which makes it very difficult during debugging to reason about the current state of the system. Patching the array with extra property does change the array's hidden class' but it does not change the cost of access, therefore this patching should not have significant if any impact in `ngDevMode` mode. (see: https://jsperf.com/array-vs-monkey-patch-array) So instead of seeing: ``` Array(30) [Object, 659, null, …] ``` ``` LViewDebug { views: [...], flags: {attached: true, ...} nodes: [ {html: '<div id="123">', ..., nodes: [ {html: '<span>', ..., nodes: null} ]} ] } ``` PR Close #28945
42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright Google Inc. All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://angular.io/license
|
|
*/
|
|
|
|
import {RenderFlags, defineComponent, elementEnd, elementStart, text} from '@angular/core/src/render3';
|
|
import {getLContext} from '@angular/core/src/render3/context_discovery';
|
|
import {LViewDebug, toDebug} from '@angular/core/src/render3/debug';
|
|
|
|
import {ComponentFixture} from './render_util';
|
|
|
|
describe('Debug Representation', () => {
|
|
it('should generate a human readable version', () => {
|
|
class MyComponent {
|
|
static ngComponentDef = defineComponent({
|
|
type: MyComponent,
|
|
selectors: [['my-comp']],
|
|
vars: 0,
|
|
consts: 2,
|
|
factory: () => new MyComponent(),
|
|
template: function(rf: RenderFlags, ctx: MyComponent) {
|
|
if (rf == RenderFlags.Create) {
|
|
elementStart(0, 'div', ['id', '123']);
|
|
text(1, 'Hello World');
|
|
elementEnd();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
const fixture = new ComponentFixture(MyComponent);
|
|
const hostView = toDebug(getLContext(fixture.component) !.lView);
|
|
expect(hostView.host).toEqual(null);
|
|
const myCompView = hostView.childViews[0] as LViewDebug;
|
|
expect(myCompView.host).toEqual('<div host="mark"><div id="123">Hello World</div></div>');
|
|
expect(myCompView.nodes ![0].html).toEqual('<div id="123">');
|
|
expect(myCompView.nodes ![0].nodes ![0].html).toEqual('Hello World');
|
|
});
|
|
}); |