How do you trigger ngClass change on click in an angular component with jasmine

Question

The click doesn't seem to be triggered and isn't changing the ngClass to active on the button I'm trying to click.

--

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>

Component:

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

Test:

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

The test should be clicking the second button and adding the active class to it, but the active class is remaining on the first button..

I have an event above that says expect(component.onClick).toHaveBeenCalled(); comes out true so I'm not sure if the click isnt being triggered or if its just the ngClass that isn't being changed.

Austin Austin · Accepted Answer · 2019-04-12T20:24:54

You're spying on the function that sets the button's property of isActive to true here:

spyOn(component, 'onClick');

When you spy on a function, it isn't called unless you add .and.callThrough() to the end of the spyOn function. If you remove the spy, I would expect it to work.

Alternatively, it could be:

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

...but I'm not sure why you're spying on the function in the first place.

How do you trigger ngClass change on click in an angular component with jasmine

1 Answers