mirror of
https://github.com/zhigang1992/angular.js.git
synced 2026-06-10 23:38:49 +08:00
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 ```
96 lines
3.4 KiB
JavaScript
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();
|
|
});
|
|
});
|
|
});
|