Getting error - Failed: Cannot read property 'click' of null

Question

Hi I am working on angular2. I am writing unit test case for delete operation. In real time I am making API call to delete user. To unit test i have created json objecr array and I am making required operations. Below is my code for delete operation.

 it('should', async(() => {
        spyOn(component, 'deleteUser');
        let button = fixture.debugElement.nativeElement.querySelector('deleteUser');
        button.click();
        fixture.whenStable().then(() => {
            expect(component.deleteUser).toHaveBeenCalled();
        })
        alert(1);
    }));

Below is my service.

  deleteUserEndpoint(userid: string) {
        var deleteUserUserOnboard = { result: true };
        return Observable.of(deleteUserUserOnboard);
    }

Below is my html code.

 <a class="btn btn-link btn-xs" href="javascript:;" id="deleteUser" (click)="deleteUser(row)"><i class="fa fa-trash-o" aria-hidden="true"></i> {{'users.management.Delete' | translate}}</a>

I have below error.

Failed: Cannot read property 'click' of null

I am newbie to unit testing. Can someone tell me what would be the expected behavior? Also may I know am I doing something wrong here? Any help would be appreciated. Thank you.

Paritosh · Accepted Answer · 2018-03-28 05:33:01Z

1

Its not able to get button object in button.click() , as per your error text.
I think providing deleteUser button's ID (#deleteUser instead of deleteUser) would help you get it.

fixture.debugElement.nativeElement.querySelector('#deleteUser')

answered Mar 28, 2018 at 5:33

Paritosh

11.7k5 gold badges64 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Niranjan Over a year ago

Thank you. After adding # in the beginning error fixed. But i am started to get Expected spy on deleteUser to be 'true'. this error. May I know what would be I am missing here?

Paritosh Over a year ago

not getting it. Could you please rephrase? what's there in deleteUser function?

Niranjan Over a year ago

After expect i have added expect(component.deleteUser).toBe('true');. I removed it now. It is working fine now.

Collectives™ on Stack Overflow

Getting error - Failed: Cannot read property 'click' of null

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related