CODEWITHSUNDEEP
javascriptangularjasmine
Edon
Edon

Reputation: 1216

testing a service call in jasmine

I am trying to write a unit-test for a function that calls a service. But am running into the error: TypeError: undefined is not a constructor

What I am trying to test is a service call that, on success, sets the value of the variable 'cards'.

I've created the appropriate mock for the service (CardService), which you can see in the spec file below

test.component.spec.ts

class MockCardService extends CardService {
    constructor() {
        super(null); // null is the http in service's constructor
    }
    getCardDetails(): any {
        return Observable.of([{ 0: 'card1' }, { 1: 'card2' }]);
    }
}

describe('MyComponent', () => {
    let component: MyComponent;
    let mockCardService: MockCardService;
    beforeEach(() => {
        mockCardService = new MockCardService();
        component = new MyComponent(
            mockCardService // add the mock service that runs before each test
        );
    });

// The failing test :(
it('should set the card variable to the value returned by the service', () => {

    spyOn(mockCardService, 'getCardDetails').and.callThrough();

    // Act
    component.ngOnInit();
    component.updateCards(); // call the function I am testing

    // Assert
    expect(component.cards).toConTainText('Card1');
});

And the component file with the function I'm testing:

export class MyComponent implements OnInit {
    public cards: CardModel[] = [];
    constructor(
        private cardService: CardService,
    ) {
    }

    ngOnInit() {
        this.updateCards(); // call the update card service
    }

    updateCards(): void {
        this.cardService.getCardDetails().subscribe(
            (cardsDetails) => {
                this.cards = cardsDetails;
            },
            (err) => {
                // todo: error handling
                console.log(err);
            }
        );
    }
}

Whenever this test runs I recieve the error:

TypeError: undefined is not a constructor (evaluating 'Observable_1.Observable.of([{ 0: 'card1' }, { 1: 'card2' }])') (line 22) getCardDetails updateCards ngOnInit

And I can't figure out what I'm doing wrong, why 'getCardDetals.subscribe' is undefined. The MockCardService class I provided doesn't appear to be working for some reason.

(note that this.cardService.getCardDetails() is defined, if I log it out in the component itself )

Any help would be very much appreciated.

Upvotes: 0

Views: 2383

Answers (2)

Edon
Edon

Reputation: 1216

Author here:

I'm still not sure what is going wrong. But I was able to fix this by changing class MockCardService extends CardService { to just let MockCardService, and using that variable throughout. Good luck to anyone who runs into this!

Upvotes: 1

bc1105
bc1105

Reputation: 1270

MockCardService.getCardDetails() should return an Observable, so you can run subscribe in the component.

Upvotes: 0

Related Questions