Question

我正在尝试测试一个javascript文件，其中包含一个控制器和一些与之交互的HTML DOM元素。

受测试的课程是：

function BaseConceptMenu(options) {
 var baseConceptMenu = new BaseMenu(options);

   //Public function -->Method under Test
   function showCodeConceptToolbar() {
    var scope = angular.element('#toolbar').scope();
    scope.$apply(function() {
        scope.toolbarController.show(baseConceptMenu.someObject);
    });
}

我正在尝试模拟控制器并创建HTML DOM元素＆＃34; toolbar＆＃34;在不试图创建外部HTML模板的情况下，只是为了测试。

我正在尝试创建div＆＃34;工具栏＆＃34;在每个人面前并嘲笑＆＃34; CodeConceptToolbarController＆＃34;控制器

beforeEach(inject(function ($rootScope, $compile) {
      elm = document.createElement('div');
      elm.id = 'toolbar';

        scope = $rootScope.$new();
        createController = function() {
            return $controller('CodeConceptToolbarController', {
                $scope: scope
            });
        };
        $compile(elm)(scope);
        scope.$digest();
    }));

但是，当我尝试按以下方式测试时

it('Test Code ConeptToolbarContoller', function() {
//   var toolbar = angular.element('#toolbar');

    document.getElementById("toolbar").scope().toolbarController = createController();
   //As of now,not doing any-idepth testing
   //Just a base test call
    var menu = new BaseConceptMenu({});
    expect(menu.show()).toBe(true);
});

我收到此错误

 TypeError: Cannot read property 'scope' of null

有人能提供测试方法吗？或者有更好的方法来测试这个吗？目前我正在使用Maven-jasmine插件

Answer 1

两个问题：

根据https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById，＆＃34; getElementById不会搜索文档中没有的元素。＆＃34; $ compile不会将元素插入到DOM中 - 它只是设置了适当的绑定（并且可以处理模板字符串中的嵌套指令等智能操作）。您的getElementById将无法找到匹配项。您需要将元素插入DOM中的某个位置。
getElementById返回原始HTML DOM元素。为了从中获取Angular范围，docs要求将它包装在angular.element（）：
中
```
var element = document.getElementById(id);
angular.element(element).scope()...
```

这个模式将在元素周围提供Angular包装来完成其余的魔法。它全部基于jqLite，它不是jQuery，但确实遵循了很多相同的模式。对于那些习惯于jQuery的人来说，可以把它想象成$(element)。

无法在angularjs中获得控制器的范围

1 个答案: