角2。如何使用动态创建的 html 对组件进行单元测试

Question

我创建了一个虚拟列表组件，我只在其中渲染可见线。创建单元测试时，我可以在添加元素的同时测试视图，但是当我删除或更改元素时，“fixture.debugElement”仍会返回先前的计数。

我创建了这个显示问题的小测试组件

组件

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

和测试

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

检查浏览器时，当然视图只包含'item1'和'item3'

如何强制更新调试元素？

编辑：我看到夹具包含本机元素。如果我添加这个

    let elm = <HTMLElement>fixture.elementRef.nativeElement;
    console.log(elm.innerHTML);

然后我看到了正确的 html

'<div id="list"><div>item1</div><div>item3</div></div>'

那么也许解决方案是迭代本​​机元素而不是使用 debugElement ？