Angular2测试-未检测到更改

Question

我正在尝试检查布尔值切换时是否显示下拉列表。 布尔值是组件的输入

@Component({
    selector: 'dropdown',
    directives: [NgClass],
    template: `
        <div [ngClass]="{open: open}">
        </div>
    `,
})

export class DropdownComponent {
    @Input('open') open: boolean = false;
}

和测试

it('should open', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    return tcb.createAsync(DropdownComponent)
    .then(fixture => {
        let el = fixture.nativeElement;
        let comp: DropdownComponent = fixture.componentInstance;

        expect(el.className).toEqual('');

        comp.open = true;
        fixture.detectChanges();
        expect(el.className).toEqual('open')
    });
}));

我猜测当布尔值是@Input时必须执行其他操作吗？

Answer 1

您正在<div [ngClass]="{open: open}">上设置类open ，但要检查DropdownComponent 。 不一样

这样的事情应该做你想要的

var div = fixture.nativeElement.querySelector('div');
expect(div.className).toEqual('open');

要么

var div = fixture.debugElement.query(By.css('div'));  
expect(div.className).toEqual('open');

另请参阅如何在Angular 2单元测试中触发ngModel模型更新？ 举个例子