Angular2. How to unit test a component with dynamically created html
<p>I have created a virtual list component, where I only render the visible lines.
When creating unit tests, I can test the view while adding elements, but when I remove or change elements then the 'fixture.debugElement' still returns the previous count. </p>

<p>I have created this small test component which shows the problem</p>

<p>The component</p>

<pre><code>class TestComponent {
    @ViewChild('view') view: ElementRef;
    constructor(public ngRenderer: Renderer) {
    }
    public add(text: string): void {
        let parentelm = this.view.nativeElement;
        let element = this.ngRenderer.createElement(parentelm, 'div');
        this.ngRenderer.setText(element, text);
    }
    public remove(index: number): void {
        let elm: HTMLElement = this.view.nativeElement;
        let child = elm.children[index];
        elm.removeChild(child);
    }
}
</code></pre>

<p>and the test</p>

<pre><code>describe('test component', () =&gt; {
    let fixture: ComponentFixture&lt;TestComponent&gt;;
    let component: TestComponent;

    beforeEach(() =&gt; {
        TestBed.configureTestingModule({
            declarations: [TestComponent],
        });
        fixture = TestBed.createComponent(TestComponent);
        component = fixture.componentInstance;
    });
    it('add and remove divs', () =&gt; {
        component.add('item1');
        component.add('item2');
        let content = fixture.debugElement.query( (elm: DebugElement) =&gt; { return elm.attributes['id'] === 'list'; });
        expect(content.children.length).toBe(2);
        component.add('item3');
        expect(content.children.length).toBe(3); // &lt;-- this works
        component.remove(1);
        fixture.detectChanges();
        expect(content.children.length).toBe(2); // &lt;-- this fails
    });
});
</code></pre>

<p>When checking the browser, then of course the view only contains 'item1' and 'item3'</p>

<p>How can I force an update of the debug element ?</p>

<p>Edit:
I see the fixture contains the native element. 
If I add this </p>

<pre><code>    let elm = &lt;HTMLElement&gt;fixture.elementRef.nativeElement;
    console.log(elm.innerHTML);
</code></pre>

<p>Then I see the correct html</p>

<pre><code>'&lt;div id="list"&gt;&lt;div&gt;item1&lt;/div&gt;&lt;div&gt;item3&lt;/div&gt;&lt;/div&gt;'
</code></pre>

<p>So maybe the solution is to iterate native elements instead of using the debugElement ?</p>