3

我在对包含 ng-grid 组件的指令进行单元测试时遇到了麻烦。

我写了这个显示问题的punkler：http ://plnkr.co/edit/HlB8Bt9M2TzsyM6XaDso?p=preview

我知道很多代码，但我不能减少更多。

基本上，有一个 custom-grid 指令可以包装来自 angular-ui 的 ng-grid 组件。我制定了这个指令，因为我的应用程序中有很多网格，我不会复制网格的配置。

显示在测试结果顶部的网格使用此指令。所以，你可以看到它工作正常:)

但是，我可能想念如何测试这个指令。我写了一个简单的测试，断言第一行，第一列显示'Martoni'，但它失败了。使用 ng-grid 指令的相同测试通过。

知道我的测试代码有什么问题吗？

4

1 回答 1

2

http://plnkr.co/edit/WwTyuQXNklL7CnjOxsB2?p=preview

在递归调用指令（或至少嵌套）之前，我遇到了问题，特别是当它们使用$compile服务时（ng-repeat尤其是 's）。我确信那里有一个错误，但我没有花时间找到一个孤立的案例。无论如何，我认为您发现的是某种错误，但有一个简单的解决方法。

如果您查看 ngGrid 的源代码，您会发现只有在宽度足够大时才会添加列。当我在您的第二个示例w中进行处理时是否定的，这导致addCol从未被调用。

var w = col.width + colwidths;
if (col.pinned) {
    addCol(col);
    var newLeft = i > 0 ? (scrollLeft + totalLeft) : scrollLeft;
    domUtilityService.setColLeft(col, newLeft, self);
    totalLeft += col.width;
} else {
    if (w >= scrollLeft) {
        if (colwidths <= scrollLeft + self.rootDim.outerWidth) {
            addCol(col);
        }
    }
}
colwidths += col.width;

这使我相信您的元素的高度/宽度为 0，这可能是因为它们在进行单元测试时实际上并不在文档中。

所以为了解决它，我在你之前添加了以下内容compile(elm)($scope);

angular.element('body').append(elm);

然后清理：

afterEach(function () {
    angular.element(elm).remove();
});

我不知道这是否是故意的，但是您在第一个单元测试中调用$new()了$rootScope但没有使用该结果进行编译，而您在第二个中进行了。

于 2013-08-26T03:57:05.893 回答