Как вы запускаете изменение ngClass при нажатии на угловой компонент с жасмином - PullRequest
Новая
       23

Как вы запускаете изменение ngClass при нажатии на угловой компонент с жасмином

0 голосов
/ 12 апреля 2019

Похоже, что щелчок не сработал и он не меняет 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 (); получается так, что я не уверен, что щелчок не срабатывает или это просто ngClass, который не изменяется.

1 Ответ

1 голос
/ 12 апреля 2019

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

spyOn(component, 'onClick');

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

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

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

... но я не уверен, почему вы шпионите зафункция в первую очередь.

...