TypeError: Cannot read property 'length' of undefined AngularJS Karma

Question

I am a little stuck in the unit test, for the function hasAddress() but it seems that it doesn't work, and I think I don't have an idea how to do the angularjs unit test with Karma but I don't understand how to solve this part and I'm not sure what I'm wrong, can anyone help me ??

The error is:

HeadlessChrome 0.0.0 (Mac OS X 10.12.6) directionFormulation component should load customer customerData FAILED
        TypeError: Cannot read property 'lexngth' of undefined
            at hasAddresses (app/Resources/assets/workplace/js/directionFormulation.js:9:4128)
            at directionFormulationController.onInit [as $onInit] (app/Resources/assets/workplace/js/directionFormulation.js:9:2344)
            at Context.<anonymous> (app/Resources/assets/workplace/js/test/specs/directionFormulation.spec.js:241:15)
HeadlessChrome 0.0.0 (Mac OS X 10.12.6) directionFormulation component should be checking if has addresses FAILED
        TypeError: Cannot read property 'length' of undefined
            at directionFormulationController.hasAddresses (app/Resources/assets/workplace/js/directionFormulation.js:9:4128)
            at Context.<anonymous> (app/Resources/assets/workplace/js/test/specs/directionFormulation.spec.js:261:22)

directionFormulation.js

    function customerData() {
      return customer.loadCustomerData().then(function (customerData) {
        this.customerDataCustomer = customerData;

        this.input.firstName = this.customerDataCustomer.firstName;
        this.input.lastName = this.customerDataCustomer.lastName;
        this.input.phoneNumber = this.customerDataCustomer.phoneNumber;
      });
    }

the unit test directionFormulation.spec.js

 it('should load customer customerData', function () {
    component.$onInit();
    component.customerData();
    // component.loadCustomerData().then(function () {
    //   expect(component.input.firstName).to.be.equal(customer.customerData.firstName);
    //   expect(component.input.lastName).to.be.equal(customer.customerData.lastName);
    //   expect(component.input.phoneNumber).to.be.equal(customer.customerData.phoneNumber);
    // });
    sinon.stub(customer, 'loadCustomerData').returns($q.when({firstName: 'John', lastName: 'Smith', phoneNumber:'55551234'}));
    component.loadRegions().then(function () {
      expect(customer.customerData.firstName).to.exist;
      expect(customer.customerData.lastName).to.exist;
      expect(customer.customerData.phoneNumber).to.exist;
      expect(customer.customerData.firstName).to.be.equals('John');
      expect(customer.customerData.lastName).to.be.equals('Smith');
      expect(customer.customerData.phoneNumber).to.be.equals('55551234');
    });
  });
});

Answer 1

You have a couple of issues:

Your customer object does not have addresses yet:

customer = {
  profile: {
    firstName: 'John',
    lastName: 'Smith',
    phoneNumber: '55551234',
  },
  // no addresses!
};

so (customer.addresses).length fails in the first expect when you call hasAddresses():

expect(component.hasAddresses()).to.be.false;

Maybe your hasAddresses function should look like:

function hasAddresses() {
  return customer.addresses && customer.addresses.length;
}

After this in the following expect you should still have issues, because you're creating addresses as an object:

customer.addresses = { 1: { id: 1 } };

It should probably be an array:

customer.addresses = [{ id: 1 }];