Files
angular.js/test/ng/animateSpec.js
Matias Niemelä bf0f5502b1 feat($animate): use promises instead of callbacks for animations
The $animate service (both the service inside of ng and ngAnimate) now
makes use of promises instead of callback functions.

BREAKING CHANGE

Both the API for the cancallation method and the done callback for
$animate animations is different. Instead of using a callback function
for each of the $animate animation methods, a promise is used instead.

```js
//before
$animate.enter(element, container, null, callbackFn);

//after
$animate.enter(element, container).then(callbackFn);
```

The animation can now be cancelled via `$animate.cancel(promise)`.

```js
//before
var cancelFn = $animate.enter(element, container);
cancelFn(); //cancels the animation

//after
var promise = $animate.enter(element, container);
$animate.cancel(promise); //cancels the animation
```
2014-08-26 11:44:25 -04:00

96 lines
3.4 KiB
JavaScript

'use strict';
describe("$animate", function() {
describe("without animation", function() {
var element, $rootElement;
beforeEach(module(function() {
return function($compile, _$rootElement_, $rootScope) {
element = $compile('<div></div>')($rootScope);
$rootElement = _$rootElement_;
};
}));
it("should add element at the start of enter animation", inject(function($animate, $compile, $rootScope) {
var child = $compile('<div></div>')($rootScope);
expect(element.contents().length).toBe(0);
$animate.enter(child, element);
expect(element.contents().length).toBe(1);
}));
it("should enter the element to the start of the parent container",
inject(function($animate, $compile, $rootScope) {
for(var i = 0; i < 5; i++) {
element.append(jqLite('<div> ' + i + '</div>'));
}
var child = jqLite('<div>first</div>');
$animate.enter(child, element);
expect(element.text()).toEqual('first 0 1 2 3 4');
}));
it("should remove the element at the end of leave animation", inject(function($animate, $compile, $rootScope) {
var child = $compile('<div></div>')($rootScope);
element.append(child);
expect(element.contents().length).toBe(1);
$animate.leave(child);
expect(element.contents().length).toBe(0);
}));
it("should reorder the move animation", inject(function($animate, $compile, $rootScope) {
var child1 = $compile('<div>1</div>')($rootScope);
var child2 = $compile('<div>2</div>')($rootScope);
element.append(child1);
element.append(child2);
expect(element.text()).toBe('12');
$animate.move(child1, element, child2);
expect(element.text()).toBe('21');
}));
it("should still perform DOM operations even if animations are disabled", inject(function($animate) {
$animate.enabled(false);
expect(element).toBeShown();
$animate.addClass(element, 'ng-hide');
expect(element).toBeHidden();
}));
it("should run each method and return a promise", inject(function($animate, $document) {
var element = jqLite('<div></div>');
var move = jqLite('<div></div>');
var parent = jqLite($document[0].body);
parent.append(move);
expect($animate.enter(element, parent)).toBeAPromise();
expect($animate.move(element, move)).toBeAPromise();
expect($animate.addClass(element, 'on')).toBeAPromise();
expect($animate.removeClass(element, 'off')).toBeAPromise();
expect($animate.setClass(element, 'on', 'off')).toBeAPromise();
expect($animate.leave(element)).toBeAPromise();
}));
it("should add and remove classes on SVG elements", inject(function($animate) {
if (!window.SVGElement) return;
var svg = jqLite('<svg><rect></rect></svg>');
var rect = svg.children();
$animate.enabled(false);
expect(rect).toBeShown();
$animate.addClass(rect, 'ng-hide');
expect(rect).toBeHidden();
$animate.removeClass(rect, 'ng-hide');
expect(rect).not.toBeHidden();
}));
it("should throw error on wrong selector", function() {
module(function($animateProvider) {
expect(function() {
$animateProvider.register('abc', null);
}).toThrowMinErr("$animate", "notcsel", "Expecting class selector starting with '.' got 'abc'.");
});
inject();
});
});
});