Question

我遇到了麻烦单元测试包装ng-grid组件的指令。

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

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

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

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

然而，我可能会想到如何测试这个指令。我写了一个简单的测试，断言第一行，第一行显示'Martoni'，但它失败了。使用ng-grid指令传递相同的测试。

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

Answer 1

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

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

如果查看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但是没有使用它的结果来编译，而你做了它在第二个。

指令内的单元测试指令

1 个答案: