Javascript 使用Karma Jasmine的Angular 1.5组件单元测试失败_Javascript_Angularjs_Unit Testing_Karma Jasmine

Javascript 使用Karma Jasmine的Angular 1.5组件单元测试失败

javascript angularjs unit-testing

Javascript 使用Karma Jasmine的Angular 1.5组件单元测试失败,javascript,angularjs,unit-testing,karma-jasmine,Javascript,Angularjs,Unit Testing,Karma Jasmine,我第一次尝试用Karma Jasmine对一个角度组件进行单元测试我的index.html看起来像： <body ng-app="heroApp">  <div ng-controller="MainCtrl as ctrl"> <b>Hero</b><br> <hero-detail hero="ctrl.hero">&

我第一次尝试用Karma Jasmine对一个角度组件进行单元测试

我的

index.html

看起来像：

<body ng-app="heroApp">
  <!-- components match only elements -->
<div ng-controller="MainCtrl as ctrl">
  <b>Hero</b><br>
  <hero-detail hero="ctrl.hero"></hero-detail>
</div>
</body>
</html>

(function(angular) {
  'use strict';
    angular.module('heroApp', []).controller('MainCtrl', function MainCtrl() {
        this.hero = {
            name: 'Miles Bronson'
        };
    });
})(window.angular);

(function(angular){
    'use strict';

    function HeroDetailController(){

    }

    angular.module('heroApp').component('heroDetail',{
        template:'<span>Name: {{$ctrl.hero.name}}</span>',
        controller:HeroDetailController,
        bindings:{
            hero: '='
        }
    });

})(window.angular);

describe('Component:heroDetailComponent',function(){
    beforeEach(function(){
        module('heroApp');
    });

    var element,
        scope;
    beforeEach(inject(function($rootScope,$compile){
        scope = $rootScope.$new();
        scope.outside = "Miles Bronson";
        element = angular.element('<hero-detail hero="{{outside}}"></hero-detail>');
        element = $compile(element)(scope);
        scope.$apply();
    }));

    it('should render the text',function(){
        var span = angular.find('span');
        expect(span.text()).toBe('Name: Miles Bronson')
    });

});

而组件

herodeil.js

如下所示：

<body ng-app="heroApp">
  <!-- components match only elements -->
<div ng-controller="MainCtrl as ctrl">
  <b>Hero</b><br>
  <hero-detail hero="ctrl.hero"></hero-detail>
</div>
</body>
</html>

(function(angular) {
  'use strict';
    angular.module('heroApp', []).controller('MainCtrl', function MainCtrl() {
        this.hero = {
            name: 'Miles Bronson'
        };
    });
})(window.angular);

(function(angular){
    'use strict';

    function HeroDetailController(){

    }

    angular.module('heroApp').component('heroDetail',{
        template:'<span>Name: {{$ctrl.hero.name}}</span>',
        controller:HeroDetailController,
        bindings:{
            hero: '='
        }
    });

})(window.angular);

describe('Component:heroDetailComponent',function(){
    beforeEach(function(){
        module('heroApp');
    });

    var element,
        scope;
    beforeEach(inject(function($rootScope,$compile){
        scope = $rootScope.$new();
        scope.outside = "Miles Bronson";
        element = angular.element('<hero-detail hero="{{outside}}"></hero-detail>');
        element = $compile(element)(scope);
        scope.$apply();
    }));

    it('should render the text',function(){
        var span = angular.find('span');
        expect(span.text()).toBe('Name: Miles Bronson')
    });

});

我做错了什么？请帮忙

另外，我在这里声明了一个

外部

变量，并对其进行了测试

如何从控制器获取变量并测试它而不在本地声明它？

它应该是

外部的，而不是{{outside}
。我不明白你的第二个问题<代码>外部
必须来自某个地方。它应该是外部
，而不是{{outside}
。我不明白你的第二个问题<代码>外部

必须来自某个地方。