Angular 如何使用jasmine在角度组件中单击时触发ngClass更改

单击似乎没有被触发，并且在我尝试单击的按钮上没有将ngClass更改为活动

--

HTML:

{{button.displayTxt}}

组成部分：

export class AdmitOneBtnGroup {
    @Input() public btnDisplayText: string;
    @Input() public id: string;
    @Output() public clickEvent = new EventEmitter();
    @Input() public buttons: Array<ButtonGroupButton>; // Should be array of objects

    public onClick($event, btnIndx) {
        this.buttons.forEach((button, currentIndx) => {
            button.isActive = (currentIndx === btnIndx);
        });

        this.clickEvent.emit(btnIndx);
    }
};

export interface ButtonGroupButton {
    isActive: boolean,
    displayTxt: string,
}

导出类admitonebtgroup{
@Input（）公共btnDisplayText:string；
@Input（）公共id:string；
@Output（）public clickEvent=new EventEmitter（）；
@Input（）公共按钮：数组；//应该是对象数组
公共onClick（$event，btnIndx）{
this.buttons.forEach（（按钮，currentIndx）=>{
button.isActive=（currentIndx==btnIndx）；
});
this.clickEvent.emit（btnIndx）；
}
};
导出接口按钮组按钮{
isActive:布尔值，
displayTxt:string，
}

测试：

    let component: AdmitOneBtnGroup;
    let fixture: ComponentFixture<AdmitOneBtnGroup>;
    const testData: Array<ButtonGroupButton> = [
        {
            displayTxt: "abc",
            isActive: true,
        },
        {
            displayTxt: "def",
            isActive: false,
        },
        {
            displayTxt: "ghi",
            isActive: false,
        },
    ]

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [AdmitOneBtnGroup],
        }).compileComponents()
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(AdmitOneBtnGroup);
        component = fixture.componentInstance;
        component.buttons = testData;
        component.id = 'button-group'
        fixture.detectChanges();
    });


    it('#AdmitOneBtnGroupComponent button click should activate new button', async(() => {
        spyOn(component, 'onClick');

        const btn: HTMLElement = fixture.debugElement.nativeElement.querySelector('#btn-group-btn-1')
        const clickEvent = new Event('click');
        btn.dispatchEvent(clickEvent)
        fixture.detectChanges();

        fixture.whenStable().then(() => {
            expect(btn.getAttribute('class')).toContain("active");
        })
    }));

let组件：admitonebtgroup；
let夹具：组件夹具；
常量testData:数组=[
{
显示文本：“abc”，
是的，
},
{
displayTxt：“def”，
I：错，
},
{
displayTxt:“ghi”，
I：错，
},
]
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[AdmitOneBtnGroup]，
}).compileComponents（）
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（AdmitOneBtnGroup）；
组件=fixture.componentInstance；
component.buttons=testData；
component.id='按钮组'
fixture.detectChanges（）；
});
它（“#admitonebtgroupcomponent按钮单击应激活新按钮”，异步（（）=>{
spyOn（组件“onClick”）；
常量btn:HTMLElement=fixture.debugElement.nativeElement.querySelector（“#btn-group-btn-1”）
const clickEvent=新事件（“单击”）；
btn.dispatchEvent（点击事件）
fixture.detectChanges（）；
fixture.whenStable（）然后（（）=>{
expect（btn.getAttribute（'class'））.toContain（“活动”）；
})
}));

测试应该单击第二个按钮并将活动类添加到其中，但活动类仍保留在第一个按钮上

---

我在上面有一个事件，上面写着expect（component.onClick）.tohavebeencall（）；结果为真，因此我不确定单击是否没有被触发，或者只是ngClass没有被更改。

您正在监视将按钮的isActive属性设置为真的函数：

spyOn(component, 'onClick');

当您监视函数时，除非将.and.callThrough（）添加到spyOn函数的末尾，否则不会调用该函数。如果你除掉这个间谍，我希望它能起作用

或者，它可以是：

spyOn(component, 'onClick').and.callThrough();

…但我不知道你为什么要监视这个函数

spyOn(component, 'onClick').and.callThrough();