Question

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

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

组件

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

检查浏览器时，当然视图只包含＆＃39; item1＆＃39;和＆＃39; item3＆＃39;

如何强制更新调试元素？

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

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

然后我看到正确的html

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

所以解决方案可能是迭代原生元素而不是使用debugElement？

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

0 个答案: