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

问题描述

在此琴 http://jsfiddle.net/FlavorScape/fp1kktt9/ 我尝试设置控制器上的属性，而不是直接在$范围。在模板（生产），我们只是做myAlias​​Ctrl.somePropertyList和NG-重复的作品。

然而，这并不在测试工作。我不知道如何获得/分配控制器上的财产。

更新：
我必须有一些奇怪的问题，本地化在我的测试环境，因为我得到NG-重复工作。注意如何有两个子元素，即使属性是别名控制器。 http://jsfiddle.net/FlavorScape/2adn983y/2/

不过，我的问题仍然是，我将如何得到一个参考该编译器说，建立一个间谍？（或者只是得到参考别名控制器）？

下面是源：

  angular.module（'对myApp'，[]）
.directive（'myTestDirective'，函数（）{
    返回{
        限制：'E'，
        范围： {
            myBinding：'='
        }，
        更换：真实，
        模板：'＆LT; D​​IV NG-IF =isRendered＆GT;测试与LT; D​​IV NG重复=富在myCtrl.fooList＆GT; {{富}}＆LT; / DIV＆GT;＆LT; / DIV＆GT;，
        控制器：'myTestController'，
        controllerAs：myCtrl
    };
}）
.controller（'myTestController'，函数（$范围）{
    $ scope.isRendered =真;
     //如果我引用此，NG-重复作品
    $ scope.fooList = [布布，猫，特斯拉];
}）;描述（'MYTEST指令：'，函数（）{
    VAR范围，编译，validHTML;    validHTML ='＆LT; D​​IV＆GT;＆LT;我的测试，指示我结合=isRendered＆GT;＆LT; /我的试验指令＆GT;＆LT; / DIV＆GT;'; //一世    beforeEach（模块（'对myApp'））;    beforeEach（注（函数（$编译，$ rootScope）{
        范围= $ rootScope $新的（）。
        scope.isRendered = TRUE;        编译= $编译;
    }））;    函数来创建（）{
        VAR ELEM，compiledElem;
        ELEM = angular.element（validHTML）;
        compiledElem =编译（ELEM）（范围）;
        范围$摘要（）。
        返回compiledElem;
    }    它（'应该有根元素的范围'，函数（）{
        VAR EL =创建（）;        //如何获得控制器？
        el.scope（）myCtrl.fooList = [猴子，苹果，洗碗机]。        //注意它只是＆LT;！ - 纳克重复
        的console.log（EL）;
        期待（el.text（））toContain（TEST）。    }）;
}）;
 

解决方案

一切正常:)你只是试图访问错误的范围。

由于 ngIf 创建一个新的范围，你应该访问范围（因为 isRendered 是在那个小孩范围内创建

 预期（el.children（）第（）范围（）isRendered。）.toBeTruthy（）;
 

---

下面是在 更新小提琴

---

更新：

您正在使用 controllerAs ，基本上你得到的控制器的这个绑定到一个作用域属性。例如。 controllerAs：myTestCtrl隐含结果 $ scope.myTestCtrl =这一点; （其中此是控制器实例。

但同样你在哪里试图访问错误的元素。你需要包装的第一个子元素＆LT; D​​IV＆GT; ，然后你需要它的分离范围（不正常的范围内）：

  VAR CTRL = el.children（）第（）isolateScope（）myTestCtrl。;
 

另一个更新的小提琴

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.

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)?

Here's the source:

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.

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

---

Here is the updated fiddle.

---

UPDATE:

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.

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;

Another updated fiddle

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