Блог

Щелчок, похоже, не запускается и не меняет ngClass на активный на кнопке, которую я пытаюсь нажать.

—

HTML:

 <div class='btn-group' role='group' aria-label="">
    <button type='button'
    id='btn-group-btn-{{i}}'
    *ngFor="let button of buttons; index as i"
    (click)="onClick($event, i)"
    [ngClass]="{'active': button.isActive}"
    class='btn btn-default btn-primary'>
        {{button.displayTxt}}
    </button>
</div>
  

Компонент:

 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,
}
  

Тест:

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

Тест должен включать нажатие второй кнопки и добавление к ней активного класса, но активный класс остается на первой кнопке..

У меня есть событие выше, в котором указано ожидание (component.onClick).toHaveBeenCalled(); выдает true, поэтому я не уверен, не запускается ли щелчок или это просто ngClass, который не изменяется.

Вы следите за функцией, которая устанавливает свойство кнопки isActive в true здесь:

 spyOn(component, 'onClick');
  

Когда вы следите за функцией, она не вызывается, если вы не добавите .и.callThrough() в конец функции spyOn. Если вы удалите шпиона, я бы ожидал, что он сработает.

В качестве альтернативы, это может быть:

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

…но я не уверен, почему вы вообще следите за функцией.