Question

tldr：当使用$ timeout在Angular指令中实现这些动画时，如何进行量角器测试等待动画完成？

使用Protractor测试，我正在尝试验证Angular指令是否已成功显示其内容，但触发它需要几个步骤。该指令为其自身设置动画，直到它所在的Bootstrap手风琴组扩展后才会呈现其数据。

这是模板（它是编译为HTML的Jade，我为了说明目的而采用了一些复杂性）：

uib-accordion(close-others='oneAtATime')
        uib-accordion-group.featureGroup(ng-repeat='feature in results.features', is-open='featureHistogramVisibility[$index]')
            uib-accordion-heading {{feature.title}}
            histogram.featureSizeHistogram(histogram='feature.getHistogram()', is-visible='featureHistogramVisibility[$index]')

当is-visible属性变为true时（当展开手风琴组时），它使用$ timeout等待100毫秒手风琴动画完成，然后显示图表。这是指令中链接函数的相关部分：

scope.$watch('isVisible', function(newValue) {
          if(newValue && scope.chartConfig) {
            $timeout(function () {
              // timeout is necessary so that the chart is the proper size
              // after animations are finished
              displayChart(scope);
            }, 100);
          }
        });

$ timeout是必要的，因为没有它，图表的尺寸就会错误。当它最初在displayChart（）内部渲染时，它会自动将其尺寸调整到容器一次。如果在手风琴组扩展之前发生这种情况，则尺寸将不正确。

我的量角器测试的目标是验证指令从feature.getHistogram（）获取直方图属性中的一些数据并自行渲染。当它没有得到任何数据时，高度为零。当我在页面上直接使用这个指令（不包含在手风琴中）时，我确认高度和宽度都不为零。

这是我的Protractor测试中针对该指令的代码，当它直接在页面上时（不在手风琴中）：

var verifyNonZeroSize = function (element) {
  element.getSize().then(function (size) {
    expect(size.width).to.not.equal(0);
    expect(size.height).to.not.equal(0);
  });
};
// ...
element.all(by.css('.featureSizeThumbnailHistogram')).map(verifyNonZeroSize);

这是有效的，因为在这种情况下没有动画。

当我获得一个手风琴组并在Protractor测试中单击（）时，然后在指令内调用verifyNonZeroSize，它会立即获得大小并且无法验证。

两个问题：

在Protractor中是否有更惯用的方法来验证指令的属性是否为非空（我有大量的单元和集成测试，但是Protractor似乎是捕获模板中错误导致的问题的唯一方法）？
在量角器中，在验证高度和宽度之前，我如何点击某些东西并等待动画，包括指令中的$ timeout调用（我已经看到了处理CSS动画的其他SO答案，但没有使用$ timeout的动画）？

Answer 1

尝试使用Protractor的implicitlyWait。

browser.driver.manage().timeouts().implicitlyWait(150).then(function () {
  // expect code
});

如何让Protractor等待使用$ timeout的动画？

1 个答案: