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

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() 中获取了 histogram 属性中的一些数据并自行渲染。当它没有得到任何数据时，高度为零。当我直接在页面上使用此指令时（不包含在手风琴中），我验证高度和宽度不为零。

这是我的 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);

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

当我在量角器测试中获得一个手风琴组并单击（）它，然后在其中的指令上调用 verifyNonZeroSize 时，它​​会立即获取大小并且验证失败。

两个问题：

• Protractor 中是否有更惯用的方法来验证指令的属性是否为非空（我有大量的单元和集成测试，但 Protractor 似乎是捕获由模板中的错误引起的问题的唯一方法)？
• 在量角器中，如何在验证高度和宽度之前单击某些内容并等待动画，包括指令中的 $timeout 调用（我见过其他处理 CSS 动画的 SO 答案，但不是使用 $timeout 的动画)？

Answer 1

尝试通过 Protractor 使用implicitlyWait。

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