0

我正在尝试测试一个 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 元素“工具栏”，而不是为了测试而尝试创建外部 HTML 模板。

我正在尝试在每个之前创建 div“工具栏”并模拟“CodeConceptToolbarController”控制器

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 插件

4

1 回答 1

0

两个问题：

  1. 根据https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById，“getElementById 不会搜索不在文档中的元素。” $compile 不会将元素插入 DOM - 它只是设置适当的绑定（并做一些智能的事情，比如处理模板字符串中的嵌套指令）。您的 getElementById 将无法找到匹配项。您需要将元素插入到 DOM 的某处。

  2. getElementById 返回一个原始的 HTML DOM 元素。要从中获取 Angular 范围，文档要求将其包装在 angular.element() 中：

    var element = document.getElementById(id);
angular.element(element).scope()...

这种模式将提供围绕元素的 Angular 包装器来完成其余的魔法。它全部基于 jqLit​​e，它不是 jQuery，但确实遵循许多相同的模式。对于那些习惯使用 jQuery 的人来说，把它想象成编写$(element).

于 2014-12-07T00:20:31.330 回答