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'语句，当它击中我现在我有很多第三方html进行测试时，这不是我想要的。最终的解决方案是决定模拟内部指令（应该在别处测试），并使用mock的html代替。

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

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

1 个答案: