Tips for creating a jasmine test scenario for a function executed within the ngOnInit lifecycle hook

Question

Tips for creating a jasmine test scenario for a function executed within the ngOnInit lifecycle hook

I am finding it challenging to create a successful test case for the code snippet below.

In my component.ts file

id = 123456;
data = [];
constructor(private serv: ApiService){}

ngOnInint(){
    getData(id);
}

getData(id){
   this.serv.getRequest(url+id).subscribe({
   (res){
        this.data = res;
   });
}

In my spec.ts file

describe('component', () =>{
    let component: DataComponent,
    let fixture: ComponentFixture<OpenCasesComponent>;
    let serv: ApiService;

    beforeEach(async () => {
        await TestBed.configureTestingModule({
            imports:[HttpClientTestingModule],
            declartions:[DataComponent],
            Providers: [ApiService]
        })
        .compileComponents();
    });

    beforeEach(() => {
        fixture = TestBed.CreateComponent(DataComponent);
        component = fixture.componentInstance;
        apiService = TestBed.inject(ApiService);
        fixture.detectChanges();
    });

    it('should make api call on load', fakeAsync(()=>{
        component.id = '123456';
        let fakeResponse = {
            name: 'John';
        }
        component.ngOnInit();
        fixture.detectChanges();
        
        spyOn(component, 'getData').withArgs('123456').and.callThrough();
        spyOn(apiService, 'getRequest')..and.returnValue(of(fakeResponse));
        fixture.detectChanges();
        tick();
        expect(component.getData).toHaveBeenCalled();
        expect(apiService.getRequest).toHaveBeenCalled();
        expect(component.data).toContain(fakeResponse);
    }));
}

A similar function call works with code somewhat alike. The only difference is that the function is triggered by a button click. I suspect I am not invoking the function here, if so How do I do it.

Can someone point out what I might be doing incorrectly?

javascript angular typescript jasmine karma-jasmine

Answer 1

Answer №1

One important thing to note is that the initial fixture.detectChanges() is when the ngOnInit function gets executed.

Let me guide you through the process with these comments:

import { of } from 'rxjs';
.....
describe('component', () =>{
    let component: DataComponent,
    let fixture: ComponentFixture<OpenCasesComponent>;
    // Change the type of this line to a spyObj
    let serv: jasmine.SpyObj<ApiService>;

    beforeEach(async () => {
        // Create a spy object to mock ApiService
        // The first string argument acts as an identifier in case of errors
        // The second array of strings contains public methods to mock
        serv = jasmine.createSpyObj<ApiService>('ApiService', ['getRequest']);
        await TestBed.configureTestingModule({
            // HttpClientTestingModule is no longer necessary
            // imports:[HttpClientTestingModule],
            // 'declarations' is misspelled here
            declarations:[DataComponent],
            // 'providers' should be lowercase here
            // Provide the mock we just created when the component requires ApiService
            providers: [{ provide: ApiService, useValue: serv }],
        })
        .compileComponents();
    });

    beforeEach(() => {
        fixture = TestBed.CreateComponent(DataComponent);
        component = fixture.componentInstance;
        apiService = TestBed.inject(ApiService);
        // The first fixture.detectChanges() call triggers the ngOnInit function
        // Ensure the API call works before it is made by providing fake data
        serv.getRequest.and.returnValue(of({ name: 'John' }));
        fixture.detectChanges();
    });

    it('should make api call on load', fakeAsync(()=>{
        component.id = '123456';
        let fakeResponse = {
            name: 'John';
        }
        // Spy before calling ngOnInit
        spyOn(component, 'getData').and.callThrough();
        
        component.ngOnInit();
        fixture.detectChanges();
       
        expect(component.getData).toHaveBeenCalled();
        expect(serv.getRequest).toHaveBeenCalled();
        expect(component.data).toContain(fakeResponse);
    }));
}

If you prefer not to make all those modifications, the following changes should be enough:

it('should make api call on load', fakeAsync(()=>{
        component.id = '123456';
        let fakeResponse = {
            name: 'John';
        }
        // Set your spies before calling ngOnInit !!
        // Try removing the 'withArgs' here
        spyOn(component, 'getData').and.callThrough();
        spyOn(apiService, 'getRequest').and.returnValue(of(fakeResponse));
        component.ngOnInit();
        fixture.detectChanges();
        
        fixture.detectChanges();
        tick();
        expect(component.getData).toHaveBeenCalled();
        expect(apiService.getRequest).toHaveBeenCalled();
        expect(component.data).toContain(fakeResponse);
    }));

Answer 2

One important thing to note is that the initial fixture.detectChanges() is when the ngOnInit function gets executed.

Let me guide you through the process with these comments:

import { of } from 'rxjs';
.....
describe('component', () =>{
    let component: DataComponent,
    let fixture: ComponentFixture<OpenCasesComponent>;
    // Change the type of this line to a spyObj
    let serv: jasmine.SpyObj<ApiService>;

    beforeEach(async () => {
        // Create a spy object to mock ApiService
        // The first string argument acts as an identifier in case of errors
        // The second array of strings contains public methods to mock
        serv = jasmine.createSpyObj<ApiService>('ApiService', ['getRequest']);
        await TestBed.configureTestingModule({
            // HttpClientTestingModule is no longer necessary
            // imports:[HttpClientTestingModule],
            // 'declarations' is misspelled here
            declarations:[DataComponent],
            // 'providers' should be lowercase here
            // Provide the mock we just created when the component requires ApiService
            providers: [{ provide: ApiService, useValue: serv }],
        })
        .compileComponents();
    });

    beforeEach(() => {
        fixture = TestBed.CreateComponent(DataComponent);
        component = fixture.componentInstance;
        apiService = TestBed.inject(ApiService);
        // The first fixture.detectChanges() call triggers the ngOnInit function
        // Ensure the API call works before it is made by providing fake data
        serv.getRequest.and.returnValue(of({ name: 'John' }));
        fixture.detectChanges();
    });

    it('should make api call on load', fakeAsync(()=>{
        component.id = '123456';
        let fakeResponse = {
            name: 'John';
        }
        // Spy before calling ngOnInit
        spyOn(component, 'getData').and.callThrough();
        
        component.ngOnInit();
        fixture.detectChanges();
       
        expect(component.getData).toHaveBeenCalled();
        expect(serv.getRequest).toHaveBeenCalled();
        expect(component.data).toContain(fakeResponse);
    }));
}

If you prefer not to make all those modifications, the following changes should be enough:

it('should make api call on load', fakeAsync(()=>{
        component.id = '123456';
        let fakeResponse = {
            name: 'John';
        }
        // Set your spies before calling ngOnInit !!
        // Try removing the 'withArgs' here
        spyOn(component, 'getData').and.callThrough();
        spyOn(apiService, 'getRequest').and.returnValue(of(fakeResponse));
        component.ngOnInit();
        fixture.detectChanges();
        
        fixture.detectChanges();
        tick();
        expect(component.getData).toHaveBeenCalled();
        expect(apiService.getRequest).toHaveBeenCalled();
        expect(component.data).toContain(fakeResponse);
    }));

Tips for creating a jasmine test scenario for a function executed within the ngOnInit lifecycle hook

Answer №1

Similar questions

Navigating a table while keeping headers in place at the top

jQuery Validation is not functioning correctly

Remove a comment from the page without needing to refresh the entire

Validating HTML forms using Javascript without displaying innerHTML feedback

Sending an associative array to Javascript via Ajax

Is your Typescript compilation running into a problem with jwt tokens?

Transferring Data between Rails and Angularjs using JSON

Getting the error message ""Cannot return null for non-nullable field" while trying to subscribe in NestJS using GraphQL"

What sets apart the states of the select tag from other input tags in Angular?

Types are not appearing in @types/node

Retrieving information from a function beyond the scope of Mongoose

Proper method for adding elements in d3.js

Is there a method to adjust the styling of my <header> once the page hits a specific #anchor point?

Ways to display an error notification alongside another message

Can you determine if a function is a generator function if .bind() has already been applied to it?

differences in opinion between JavaScript code and browser add-ons/extensions

Strategies for extracting data from a third-party website that utilizes JavaScript to set the value

Ways to make the input field appear invalid without the use of forms, causing the bottom outline to turn red when a specific condition is met

Error Occurs: 'PRM_MissingPanel' randomly in Ajax Update Panel

Ways to Deduct 10 Days from a Date using JavaScript