如何在带有编译元素的单元测试中访问 c​​ontrollerAs 命名空间? [英] How to access controllerAs namespace in unit test with compiled element?

问题描述

在这个小提琴 http://jsfiddle.net/FlavorScape/fp1kktt9/ 我尝试设置控制器上的属性，而不是 $scope 直接.在模板中(在生产中)我们只做 myAliasCtrl.somePropertyList 和 ng-repeat 工作.

In this fiddle http://jsfiddle.net/FlavorScape/fp1kktt9/ i try to set properties on the controller, not the $scope directly. In the template (in production) we just do myAliasCtrl.somePropertyList and the ng-repeat works.

但是，这在测试中不起作用.我不知道如何获取/分配控制器上的属性.

However, this does not work in testing. I don't know how to get/assign the property on the controller.

更新:我的测试环境中一定有一些奇怪的本地化问题，因为我确实让 ng-repeat 起作用了.请注意有两个子元素，即使该属性位于别名控制器上.http://jsfiddle.net/FlavorScape/2adn983y/2/

UPDATE: I must have had some weird localized issue in my testing environment, because i do get ng-repeat to work. notice how there's two child elements, even though the property is on the aliased controller. http://jsfiddle.net/FlavorScape/2adn983y/2/

但是，我的问题仍然是，我将如何获得对该编译控制器的引用来说，创建一个间谍?(或者只是获得对别名控制器的引用)?

however, my question still is, how would I get a reference to that compiled controller to say, create a spy? (Or just get the reference to the aliased controller)?

来源:

angular.module('myApp', [])
.directive('myTestDirective', function () {
    return {
        restrict: 'E',
        scope: {
            myBinding: '='
        },
        replace: true,
        template: '<div ng-if="isRendered">TEST<div ng-repeat="foo in myCtrl.fooList">{{foo}}</div></div>',
        controller: 'myTestController',
        controllerAs: 'myCtrl'
    };
})
.controller('myTestController', function($scope) {
    $scope.isRendered = true;
     // if i reference this, ng-repeat works
    $scope.fooList = ["boob","cat", "Tesla"];
});

describe('myTest directive:', function () {
    var scope, compile, validHTML;

    validHTML = '<div><my-test-directive my-binding="isRendered"></my-test-directive></div>'; //i

    beforeEach(module('myApp'));

    beforeEach(inject(function($compile, $rootScope){
        scope = $rootScope.$new();        
        scope.isRendered = true;

        compile = $compile;
    }));

    function create() {
        var elem, compiledElem;
        elem = angular.element(validHTML);
        compiledElem = compile(elem)(scope);
        scope.$digest();
        return compiledElem;    
    }

    it('should have a scope on root element', function () {  
        var el = create();

        // how to get the controller???
        el.scope().myCtrl.fooList =  ["monkey","apple","Dishwasher"];

        // notice it just has <!-- ng-repeat
        console.log( el );


        expect(el.text()).toContain('TEST');

    });
});

推荐答案

一切都按预期进行 :) 您只是试图访问错误的范围.

Everything works as expected :) You are just trying to access the wrong scope.

因为 ngIf 创建了一个新作用域，您应该访问该作用域(因为 isRendered 是在该子作用域上创建的:

Because ngIf creates a new scope, you should access that scope (because isRendered is created on that child scope:

expect(el.children().first().scope().isRendered).toBeTruthy();

<小时>

这是更新的小提琴.

更新:

您正在使用 controllerAs，基本上您将控制器的 this 绑定到范围属性.例如.controllerAs: 'myTestCtrl' 隐式结果为 $scope.myTestCtrl = this;(其中 this 是控制器实例.

You are using controllerAs, basically you get the controller's this bound to a scope property. E.g. controllerAs: 'myTestCtrl' implicitly results to $scope.myTestCtrl = this; (where this is the controller instance.

但是您再次尝试访问错误的元素.您需要包装 <div> 的第一个子元素，然后您需要它的隔离范围(不是正常范围):

But again you where trying to access the wrong element. You need the first child-element of the wrapping <div> and then you need its isolate scope (not normal scope):

var ctrl = el.children().first().isolateScope().myTestCtrl;

另一个更新的小提琴

这篇关于如何在带有编译元素的单元测试中访问 c​​ontrollerAs 命名空间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！