Angular2. How to unit test a component with dynamically created html - unit-testing

Question

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.
I have created this small test component which shows the problem
The component
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);
}
}
and the test
describe('test component', () => {
let fixture: ComponentFixture<TestComponent>;
let component: TestComponent;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [TestComponent],
});
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
});
it('add and remove divs', () => {
component.add('item1');
component.add('item2');
let content = fixture.debugElement.query( (elm: DebugElement) => { return elm.attributes['id'] === 'list'; });
expect(content.children.length).toBe(2);
component.add('item3');
expect(content.children.length).toBe(3); // <-- this works
component.remove(1);
fixture.detectChanges();
expect(content.children.length).toBe(2); // <-- this fails
});
});
When checking the browser, then of course the view only contains 'item1' and 'item3'
How can I force an update of the debug element ?
Edit:
I see the fixture contains the native element.
If I add this
let elm = <HTMLElement>fixture.elementRef.nativeElement;
console.log(elm.innerHTML);
Then I see the correct html
'<div id="list"><div>item1</div><div>item3</div></div>'
So maybe the solution is to iterate native elements instead of using the debugElement ?