I'm trying to unit test a function inside a ponent, this function is called from ngOnInit based on an inital condition:

ngOnInit() {
    if (this.list.length === 0) {
        return this.loadData();
    }

    return this.isLoading = false;
}

// I'm calling here because it could also be called from button on the UI
loadData() {
    this.apiService.apiGet().subscribe((response) => {
        // handle data
        return this.isLoading = false;
    }, (error) => {
        // handle error
        return this.isLoading = false;
    })
}

But I'm not able to test it unless I call the function manually on the tests. This is my test code:

// THIS CODE WORKS
it('should be false after calling loadData()', async(() => {
    ponent.loadData();
    fixture.detectChanges();

    fixture.whenStable().then(() => {
        expect(ponent.isLoading).toBeFalsy();
    });
}));

// THIS CODE DOESN'T work
it('should be false after calling loadData()', async(() => {
    spyOn(ponent,'loadData').and.returnValue({code:'success'});
    fixture.detectChanges();

    fixture.whenStable().then(() => {
        expect(ponent.isLoading).toBeFalsy();
    });
}));

Also this is the piece of code I'm using to mock the apiGet function:

apiGet() {
    return Observable.of({ data: 'success' });
}

However I know the ngOnInit is being executed and the function is being called because this test pass:

it('should be called if list array is empty', () => {
    spyOn(ponent,'loadData').and.returnValue({code:'success'});
    fixture.detectChanges();

    expect(ponent.loadData).toHaveBeenCalled();
});

What am I doing wrong? Why the test failling doesn't get to the ending promise?

I'm trying to unit test a function inside a ponent, this function is called from ngOnInit based on an inital condition:

ngOnInit() {
    if (this.list.length === 0) {
        return this.loadData();
    }

    return this.isLoading = false;
}

// I'm calling here because it could also be called from button on the UI
loadData() {
    this.apiService.apiGet().subscribe((response) => {
        // handle data
        return this.isLoading = false;
    }, (error) => {
        // handle error
        return this.isLoading = false;
    })
}

But I'm not able to test it unless I call the function manually on the tests. This is my test code:

// THIS CODE WORKS
it('should be false after calling loadData()', async(() => {
    ponent.loadData();
    fixture.detectChanges();

    fixture.whenStable().then(() => {
        expect(ponent.isLoading).toBeFalsy();
    });
}));

// THIS CODE DOESN'T work
it('should be false after calling loadData()', async(() => {
    spyOn(ponent,'loadData').and.returnValue({code:'success'});
    fixture.detectChanges();

    fixture.whenStable().then(() => {
        expect(ponent.isLoading).toBeFalsy();
    });
}));

Also this is the piece of code I'm using to mock the apiGet function:

apiGet() {
    return Observable.of({ data: 'success' });
}

However I know the ngOnInit is being executed and the function is being called because this test pass:

it('should be called if list array is empty', () => {
    spyOn(ponent,'loadData').and.returnValue({code:'success'});
    fixture.detectChanges();

    expect(ponent.loadData).toHaveBeenCalled();
});

What am I doing wrong? Why the test failling doesn't get to the ending promise?

• javascript
• angular
• unit-testing

1 Answer 1

This mocked method doesn't set isLoading, while it returns a value which is irrelevant here:

spyOn(ponent,'loadData').and.returnValue({code:'success'});

So its behaviour clearly differs from the real method. If this means that this makes this expectation false, then that's it:

expect(ponent.isLoading).toBeFalsy();

The proper way to test this is to test this in several isolated specs, line by line:

// ngOnInit test
spyOn(ponent, 'loadData');
this.list.length = 0;
fixture.detectChanges();
expect(ponent.loadData).toHaveBeenCalled();
expect(ponent.isLoading).toBe(true);

// ngOnInit test
spyOn(ponent, 'loadData');
this.list.length = 1;
fixture.detectChanges();
expect(ponent.loadData).not.toHaveBeenCalled();
expect(ponent.isLoading).toBe(false);

// loadData test
const apiServiceMock = {
  apiGet: jasmine.createSpy().and.returnValue(Observable.of(...))
};
this.apiService = apiServiceMock; // or mock via DI
spyOn(ponent, 'loadData').andCallThrough();
fixture.detectChanges();
// OR
// ponent.loadData()
expect(ponent.loadData).toHaveBeenCalled();
expect(apiServiceMock.apiGet).toHaveBeenCalled()
expect(ponent.isLoading).toBe(false);

// loadData test
const apiServiceMock = {
  apiGet: jasmine.createSpy().and.returnValue(Observable.throw(...))
};
// the rest is same

// loadData test
const apiServiceMock = {
  apiGet: jasmine.createSpy().and.returnValue(Observable.empty())
};
fixture.detectChanges();
expect(ponent.loadData).toHaveBeenCalled();
expect(apiServiceMock.apiGet).toHaveBeenCalled()
expect(ponent.isLoading).toBe(true);