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

有关示例，另请参阅 How do I trigger a ngModel model update in an Angular 2 unit test?。