Javascript TypeError:无法读取属性'；名字'；未定义单元测试AngularJS的定义

我坚持用Karma做单元测试，我不知道如何做单元测试，因为这是我的第一次。我使用的是AngularJS，单元测试是Karma

事情是这样的：我使用服务获取客户的名字、姓氏和电话号码以显示在我的表单中，它可以正常工作，但当我尝试进行单元测试时，错误总是这样：

directionFormulation component should load customer profile FAILED
        TypeError: Cannot read property 'firstName' of undefined

directionFormulation.js

  function directionFormulationController(event, customer, resolveLocation, order) {
    this.$onInit = onInit;
    this.input = this.input || {};

    function onInit() {
      loadCustomerData();
    }

    function loadCustomerData() {
      this.input.firstName = order.customer.firstName;
      this.input.lastName = order.customer.lastName;
      this.input.phoneNumber = order.customer.phoneNumber;

    }
  }
})();

单元测试：directionFormulation.spec.js：

  it('should load customer data', function () {
    var emptyFirstName = { firstName: 'something'};

    component.$onInit();
    order.customer.firstName = { firstName: 'Something'};
    order.customer.lastName = { lastName: 'Something' };
    order.customer.phoneNumber = { phoneNumber: 55555555};
    // component.input = {
    //   firstName: 'something',
    //   lastName: 'something',
    //   phoneNumber: 55555555
    // };

    component.loadCustomerData();
    $rootScope.$apply();
    component.input.firstName = newFirstName;

    expect(component.input.firstName).to.be.equal({firstName: 'something'});
    expect(component.input.lastName).to.be.not.empty;
    expect(component.input.phoneNumber).to.be.null;

  });
});

---

您正在将

order

注入控制器，因此您需要为单元测试“模拟”出

order

：

describe('addressForm component', function () {
  var component;
  var scope;
  var order;

  beforeEach(function () {
    bard.appModule('shopping.address');
    bard.inject('$rootScope', '$componentController', '$q', 'resolveLocation', 'customer', 'event','order');
    order = {
      customer: {
        firstName: 'Joe',
        lastName: 'Smith',
        phoneNumber: '416-555-1234'
      }
    };
    scope = $rootScope.$new();
    component = $componentController('addressForm', { 
      $scope: scope,
      order: order
    });
  });

  it('should be attached to the scope', function () {
    expect(scope.addressForm).to.be.equal(component);
  });

  it('should load customer profile', function () {
    component.$onInit();
    component.loadCustomerProfile();

    expect(component.input.firstName).to.be.equal(order.customer.firstName);
    expect(component.input.lastName).to.be.equal(order.customer.lastName);
    expect(component.input.phoneNumber).to.be.equal(order.customer.phoneNumber);
  });
});

我想强调几个其他问题：

您的第一个测试断言

expect（scope.addressForm）.to.be.equal（组件）不会通过
AddressFormController
是控制器的名称，控制器是组件的属性

我不确定

bard

在您的测试中指的是什么，也不确定

appModule

是否是您的bard实例上的属性。以下是我的组件测试设置示例：

我建议您使用此资源了解更多有关测试组件控制器的信息：

---

您正在将

order

注入控制器，因此您需要为单元测试“模拟”出

order

：

describe('addressForm component', function () {
  var component;
  var scope;
  var order;

  beforeEach(function () {
    bard.appModule('shopping.address');
    bard.inject('$rootScope', '$componentController', '$q', 'resolveLocation', 'customer', 'event','order');
    order = {
      customer: {
        firstName: 'Joe',
        lastName: 'Smith',
        phoneNumber: '416-555-1234'
      }
    };
    scope = $rootScope.$new();
    component = $componentController('addressForm', { 
      $scope: scope,
      order: order
    });
  });

  it('should be attached to the scope', function () {
    expect(scope.addressForm).to.be.equal(component);
  });

  it('should load customer profile', function () {
    component.$onInit();
    component.loadCustomerProfile();

    expect(component.input.firstName).to.be.equal(order.customer.firstName);
    expect(component.input.lastName).to.be.equal(order.customer.lastName);
    expect(component.input.phoneNumber).to.be.equal(order.customer.phoneNumber);
  });
});

我想强调几个其他问题：

您的第一个测试断言

expect（scope.addressForm）.to.be.equal（组件）不会通过
AddressFormController
是控制器的名称，控制器是组件的属性

我不确定

bard

在您的测试中指的是什么，也不确定

appModule

是否是您的bard实例上的属性。以下是我的组件测试设置示例：

我建议您使用此资源了解更多有关测试组件控制器的信息：

---

请阅读-总结是，这不是一个理想的方式来解决志愿者，可能会适得其反获得答案。请不要将此添加到您的问题中。哦，我很抱歉，但我将提前回答未来的问题，对不起：（@AnubisVolga你为什么要更改代码2次？代码已经回滚了一次，因为它与McTranston18的aswer无关。请阅读-总结是，这不是一种向志愿者致辞的理想方式，可能会对获得答案产生反作用。请不要将此添加到你的问题中。哦，我很抱歉抱歉，但我会提前回答未来的问题，抱歉：（@AnubisVolga为什么您更改了2次代码？它已经回滚了一次，因为它与McTranston18的aswer无关