Jasmine angular unit test ‘Cannot read ‘property’ of undefined

Question

887.45K viewsSeptember 10, 2022angularjs javascript karma-jasmine karma-mocha unit-testing

2

Umair Sarfraz September 7, 2022 0 Comments

I have just started learning angular unit testing. However, this test on a function with http call fails. I have pin pointed the problem but however I am not being able to fix it. I know it’s some simple issue

Controller

//Get data from URL
vm.getJson = function() {
    var url = 'https://www.reddit.com/r/worldnews/new.json',
        count = 0;
    $http.get(url).success(function(response) {
        console.log(response);
        for (var i = 0; i < response.data.children.length; i++) {
            vm.data.push(response.data.children[i].data);
            count++;
            if (count === response.data.children.length) {
                vm.numberOfPages();
            }
        }

        vm.result = true;

    }).error(function(err) {
        console.log(err);
    });

};

The response I am getting is:

Spec

 //Testing the getJson function
describe('vm.getJson()', function() {

   it('It should return dummy Data as response and vm.result to be truthy', function() {

    var dummyData = {name: 'Umair'};
    $httpBackend.whenRoute('GET','https://www.reddit.com/r/worldnews/new.json').respond(200, dummyData);

    MainCtrl.getJson(); 

    $httpBackend.flush();

    expect(MainCtrl.result).toBeTruthy();


}); });

I don’t get any errors and the test passes if I remove the loop from the controller function. The error I am getting is:

Cannot read ‘Children’ of undefined. From the image I have attached with the response data, children is the array.

4 Answers

score 0 · Answer 1 · 2022-09-08T06:24:43+00:00

You should define undefined variables in component scope:

 beforeEach(async () => {
    fixture = TestBed.createComponent(ExportWizardComponent);
    component = fixture.componentInstance;
    // DEFINE VALUES FOR VARIABLES
    component.patientInfo =  Constants.PROJECT_WIZARD_INFO;
    component.wizardMove = of(null);

    fixture.detectChanges();
  });

  it('should create', async () => {
    expect(component).toBeTruthy();
  });

score 2 · Answer 2 · 2022-09-08T06:08:06+00:00

When your test is run, $httpBackend actually intercepts the $http.get call and assign dummyData to the response as you indicated in

$httpBackend.whenRoute('GET','https://www.reddit.com/r/worldnews/new.json').respond(200, dummyData);

This mocking behavior allows your unit tests to be completed quickly without being reliant on reddit being reachable from your test machine. So in your controller, response.data = {name: 'Umair'} and that object has no child named children.

To fix this, for dummyData, try mimicking the real data a bit more.

score 0 · Answer 3 · 2022-09-08T04:59:52+00:00

You dummyData is not an array, I suppose this could fix the issue, please try with below test

//Testing the getJson function
describe('vm.getJson()', function() {

    it('It should return dummy Data as response and vm.result to be truthy', function() {

        var dummyData = [{ data: 'Umair' }];
        $httpBackend
            .when('GET', 'https://www.reddit.com/r/worldnews/new.json')
            .respond(.respond(
                function() {
                    return [200, dummyData, {}];
                }););

        MainCtrl.getJson();

        $httpBackend.flush();

        expect(MainCtrl.result).toBeTruthy();

    });
});

score 1 · Answer 4 · 2022-09-08T04:04:01+00:00

You’re returning an object with a property name in your test and you’re then trying to access the property data which is undefined.

You should simulate a real response object in your tests, e.g.:

var dummyData = {
  data: {
    children: [ 
    { data: 'foo'}
    ]
  }
};