我如何测试angularJS运行jQuery动画

Question

我一直试图让我的头脑围绕AngularJS中的动画。任何人都可以告诉我为什么以下测试失败以及如何让它通过？测试中的高度和宽度保持不变，尽管在浏览器中工作正常..

var app = angular.module('glqcAnimations', []);

app.animation(".mutate", function () {
    return {
        addClass: function (element, className) {
            element.animate({
                width: "500px",
                height: "500px"
            }, "fast");
        }
    };
});

describe("animation tests", function() {

  var $compile, scope, $rootScope, $animate;

  beforeEach(module('mock.animate'));

  beforeEach(inject(function(_$compile_, _$rootScope_, _$animate_, _$timeout_, _$document_) {
    $compile = _$compile_;
    $rootScope = _$rootScope_;
    scope = $rootScope.$new();
    $animate = _$animate_;
    $timeout = _$timeout_;
  }))

  it("should change the width and height of an element", function() {
    var element = angular.element('<div style="height:100px;width:100px"></div>');
    $compile(element)(scope);
    expect(element.css("height")).toBe("100px"); // Pass
    expect(element.css("width")).toBe("100px"); // Pass

    $animate.addClass(element, "mutate");
    $rootScope.$digest();
    $animate.flushNext('addClass');
    $timeout.flush(1000);
    expect(element.css("height")).toBe("500px"); // Fail expected 100px to be 500px
    expect(element.css("width")).toBe("500px"); // Fail expected 100px to be 500px

  });
});