测试包装在另一个指令中的 ui-grid

Question

我正在尝试创建一个指令，允许我为 ui-grid 设置某些配置并向其添加一些功能。我有一些基本的工作，但问题是茉莉花测试让我很难过。

JS 代码如下所示：

angular.module('myGridDirective', ['ui.grid'])

.directive('myGrid', function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'templates/my-grid.html'
    };
});

模板如下所示：

<div><div id="test-id" class="gridStyle" ui-grid="gridOptions"></div></div>

测试看起来像这样：

describe('my grid directive', function() {
    var $compile, 
        $rootScope;

    beforeEach(module('myGridDirective'));

    beforeEach(module('templates/my-grid.html'));

    beforeEach(function() {
        inject(function(_$compile_, _$rootScope_) {
            $compile = _$compile_;
            $rootScope = _$rootScope_;
        });
    });

    it('Replaces the element with an ui-grid directive element', function() {
        var element = $compile("<my-grid></my-grid>")($rootScope);

        $rootScope.$digest();

        expect(element.html()).toEqual('<div id="test-id" class="gridStyle" ui-grid="gridOptions"></div>');
    });
});

问题是，虽然指令有效（即在我的 html 文件中的任何地方使用 <my-grid></my-grid> 有效），但测试失败。我收到错误消息：

TypeError: $scope.uiGrid is undefined in .../angular-ui-grid/ui-grid.js (line 2879)

ui-grid.js中的相关行是（第一行是2879）：

if (angular.isString($scope.uiGrid.data)) {
        dataWatchCollectionDereg = $scope.$parent.$watchCollection($scope.uiGrid.data, dataWatchFunction);
      }
      else {
        dataWatchCollectionDereg = $scope.$parent.$watchCollection(function() { return $scope.uiGrid.data; }, dataWatchFunction);
      }

问题是，如果我用空数组替换指令模块创建中的 ['ui.grid'] 数组，测试就会通过。唯一的问题是，如果我这样做，我必须在使用该指令的任何地方包含 'ui.grid'，否则该指令将停止工作，这是我无法做到的。

我已经尝试过包含，但这似乎没有帮助，更不用说该指令本身是有效的，所以仅仅为了测试而必须这样做似乎不合逻辑。

有什么想法吗？

Answer 1

好的，我找到了解决方案。

一开始找到了一个解决办法，就是：

用一些数据初始化 gridOptions 变量，以便构建 ui-网格

但是，一旦我让它工作，我就尝试添加 'expect' 语句，当我突然想到现在我有很多第 3 方 html 需要测试时，这不是什么我想。最终的解决方案是决定模拟内部指令（应该在其他地方测试），并改用模拟的 html。

由于ngMock不支持指令，我找到了this great article explaining how to mock directives using $compileProvider，完全解决了我的问题。

测试包装在另一个指令中的 ui-grid

Testing ui-grid wrapped in another directive

unit-testing

jasmine

angularjs

angular-ui

angularjs-directive