gpt4 book ai didi

angularjs - ngAnimate 1.4.7 单元测试不调用动画函数

转载 作者:行者123 更新时间:2023-12-03 23:52:06 26 4
gpt4 key购买 nike

我一直在 this tutorial 工作并在谷歌上搜索过广告,但我似乎无法得到看似微不足道的内容 ngAnimate单元测试运行。

我有 ngAnimate在应用程序中运行良好。所有 Angular 核心库都是 1.4.7 版本。

模块

angular.module 'MyAnimation', [ 'ngAnimate' ]
.animation '.added-class', ->
addClass: (element, className, done) ->
console.log 'add class triggered'
element.css 'opacity', '0.5'
done()

测试
describe 'MyAnimation', ->
beforeEach -> module 'ngAnimate'
beforeEach -> module 'ngAnimateMock'
beforeEach -> module 'MyAnimation'

it 'animates', -> inject ($animate, $rootScope, $rootElement) ->
$animate.enabled(true)
divElement = angular.element '<div>my div</div>'

# Kick off initial digest loop in which no animations are run.
$rootScope.$digest()

# Trigger animation.
$animate.addClass divElement, 'added-class'
$rootScope.$digest()

# Tried this, doesn't seem to do anything.
# $animate.flush()

# Results in AssertionError: expected '' to equal '0.5'
expect(divElement.css('opacity')).to.eq '0.5'

我确定该模块已包含在测试中,但会触发 $animate.enter连我的 log 都不给我输出。

我已经尝试过与其他 $animate功能以及我无处可去。帮助?

最佳答案

在深入挖掘 Angular 的源代码后,罪魁祸首似乎是内部检查 areAnimationsAllowed Angular 使用它来确定是否提前中止动画。除其他外,它 检查动画节点是否是 $rootElement 的后代和文档正文。

您在这里有两个选择。

  • Plunker . 将要制作动画的节点附加到 $rootElement并附上$rootElement到正文 .后者是必要的,因为 ngMock实际上 stub $rootElement与一个分离的<div>节点保存在内存中。示例:

  • var element, body, root;
    beforeEach(module('ngAnimate', 'ngAnimateMock', 'MyAnimation'));
    beforeEach(inject(function ($animate, $document, $rootElement, $rootScope) {
    // enable animations globally
    $animate.enabled(true);

    // create a node to be animated and inject it into the DOM
    element = angular.element('<div></div>');
    root = $rootElement.append(element)[0];
    body = $document[0].body;
    body.appendChild(root);

    // trigger initial digest
    $rootScope.$digest();
    }));
    afterEach(function () {
    // clean up
    body.removeChild(root);
    });
  • Plunker .不要使用 $animate.addClass 测试您的动画, 而是 使用较低级别的 $$animateJs服务 . Angular 使用它 inside their own tests ,我假设绕过上述检查。示例:

  • it('should animate', inject(function ($animate, $$animateJs) {
    // trigger animation
    $$animateJs(element, 'addClass', {
    addClass: 'added-class'
    }).start();
    $animate.flush();
    }));

    如果您运行 Plunkers 并检查控制台,您应该会看到“addClass 触发”消息。我还添加了几个断言。

    这两种解决方案都是 hacky 和无证的,如果您的 addClass动画做一些异步的事情(我认为它会)。不幸的是,我找不到更好的方法来测试 JS 动画。过去我实际上忽略了覆盖范围内的动画代码,因为它很难测试。

    关于angularjs - ngAnimate 1.4.7 单元测试不调用动画函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33405666/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com