TypeError: Kann Eigenschaft 'firstName' von undefined Unit Test nicht lesen AngularJS

Question

Ich bin fest, den Unit Test mit Karma zu machen, ich habe keine Idee, wie der Unit Test, weil es das erste Mal ist. Ich benutze AngularJS und der Komponententest ist Karma.

Das Ding ist das: Ich benutze einen Dienst, um den firstName, lastName und PhoneNumber des Kunden zu erhalten, um in meiner Form zu zeigen, und es funktioniert ohne irgendein Problem, ABER, wenn ich versuche, den Komponententest zu machen der Fehler ist immer:

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

addressForm.js

(function() { 
    'use strict'; 

    angular 
    .module('shopping.address') 
    .component('addressForm', { 
     controller: AddressFormController, 
     controllerAs: 'addressForm', 
     bindings: { 
     input: '<', 
     edit: '@', 
     type: '@', 
     hideSaveButton: '@', 
     }, 
     templateUrl: '/ng/address-form', 
    }); 

    AddressFormController.$inject = ['event', 'customer', 'resolveLocation', 'order']; 
    function AddressFormController(event, customer, resolveLocation, order) { 
    var viewModel = this; 
    viewModel.$onInit = onInit; 
    viewModel.input = viewModel.input || {}; 

    function onInit() { 
     loadCustomerProfile(); 
    } 

    function loadCustomerProfile() { 
     viewModel.input.firstName = order.customer.firstName; 
     viewModel.input.lastName = order.customer.lastName; 
     viewModel.input.phoneNumber = order.customer.phoneNumber; 

    } 
    } 
})(); 

Unit-Test: addressForm.spec.js:

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

    beforeEach(function() { 
    bard.appModule('shopping.address'); 
    bard.inject('$rootScope', '$componentController', '$q', 'resolveLocation', 'customer', 'event','order'); 

    scope = $rootScope.$new(); 
    component = $componentController('addressForm', { $scope: scope }); 
    }); 

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

// ----------- I HAVE PROBLEMS IN THIS PART !!!!!! 
    it('should load customer profile', function() { 
    var newFirstName = { 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.loadCustomerProfile(); 
    $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; 

    }); 

    // it('should load customer last name', function() { 
    // component.$onInit(); 
    // component.loadCustomerProfile().then(function() { 
    //  expect(component.lastName).to.deep.equal({ foo: 'bar' }); 
    //  expect(component.lastName).to.be.null; 
    // }); 
    // 
    // }); 
    // 
    // it('should load customer phone number', function() { 
    // component.$onInit(); 
    // component.loadCustomerProfile().then(function() { 
    //  expect(component.phoneNumber).to.deep.equal({ foo: 'bar' }); 
    //  expect(component.phoneNumber).to.be.null; 
    // }); 
    // 
    // }); 

}); 

Answer 1

Sie injizieren order in Ihrem Controller, so müssen Sie "Mock" out order für Ihr Gerät zu testen:

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); 
    }); 
}); 

Ich mag würde ein paar andere Themen hervorzuheben:

1. Ihr erster Test, der expect(scope.addressForm).to.be.equal(component); behauptet, wird nicht bestehen. AddressFormController ist der Name Ihres Controllers und ein Controller ist eine Eigenschaft für eine Komponente.

2. Ich bin mir nicht sicher, was bard bezieht sich auf in Ihrem Test und nicht sicher, ob appModule eine Eigenschaft auf Ihrer Barde Instanz ist. Hier ist ein Beispiel eines Komponententest von mir ein: https://gist.github.com/mcranston18/0ded29eca9a53efeb945736b0a053061

3. ich diese Ressource empfehlen wäre ein bisschen mehr über das Testen Komponentenregler zu lernen: http://www.codelord.net/2017/01/09/unit-testing-angular-components-with-%24componentcontroller/