120 lines
4.7 KiB
TypeScript
120 lines
4.7 KiB
TypeScript
import {el, describe, it, expect, inject, SpyObject} from 'angular2/test_lib';
|
|
import {AnimationBuilder} from 'angular2/src/animate/animation_builder';
|
|
|
|
export function main() {
|
|
describe("AnimationBuilder", () => {
|
|
|
|
it('should have data object', inject([AnimationBuilder], animate => {
|
|
var animateCss = animate.css();
|
|
expect(animateCss.data).toBeDefined();
|
|
}));
|
|
|
|
it('should allow you to add classes', inject([AnimationBuilder], animate => {
|
|
var animateCss = animate.css();
|
|
animateCss.addClass('some-class');
|
|
expect(animateCss.data.classesToAdd).toEqual(['some-class']);
|
|
animateCss.addClass('another-class');
|
|
expect(animateCss.data.classesToAdd).toEqual(['some-class', 'another-class']);
|
|
}));
|
|
|
|
it('should allow you to add temporary classes', inject([AnimationBuilder], animate => {
|
|
var animateCss = animate.css();
|
|
animateCss.addAnimationClass('some-class');
|
|
expect(animateCss.data.animationClasses).toEqual(['some-class']);
|
|
animateCss.addAnimationClass('another-class');
|
|
expect(animateCss.data.animationClasses).toEqual(['some-class', 'another-class']);
|
|
}));
|
|
|
|
it('should allow you to remove classes', inject([AnimationBuilder], animate => {
|
|
var animateCss = animate.css();
|
|
animateCss.removeClass('some-class');
|
|
expect(animateCss.data.classesToRemove).toEqual(['some-class']);
|
|
animateCss.removeClass('another-class');
|
|
expect(animateCss.data.classesToRemove).toEqual(['some-class', 'another-class']);
|
|
}));
|
|
|
|
it('should support chaining', inject([AnimationBuilder], animate => {
|
|
var animateCss = animate.css()
|
|
.addClass('added-class')
|
|
.removeClass('removed-class')
|
|
.addAnimationClass('temp-class')
|
|
.addClass('another-added-class');
|
|
expect(animateCss.data.classesToAdd).toEqual(['added-class', 'another-added-class']);
|
|
expect(animateCss.data.classesToRemove).toEqual(['removed-class']);
|
|
expect(animateCss.data.animationClasses).toEqual(['temp-class']);
|
|
}));
|
|
|
|
it('should support duration and delay', inject([AnimationBuilder], (animate) => {
|
|
var animateCss = animate.css();
|
|
animateCss.setDelay(100).setDuration(200);
|
|
expect(animateCss.data.duration).toBe(200);
|
|
expect(animateCss.data.delay).toBe(100);
|
|
|
|
var element = el('<div></div>');
|
|
var runner = animateCss.start(element);
|
|
runner.flush();
|
|
|
|
expect(runner.computedDelay).toBe(100);
|
|
expect(runner.computedDuration).toBe(200);
|
|
}));
|
|
|
|
it('should support from styles', inject([AnimationBuilder], animate => {
|
|
var animateCss = animate.css();
|
|
animateCss.setFromStyles({'backgroundColor': 'blue'});
|
|
expect(animateCss.data.fromStyles).toBeDefined();
|
|
|
|
var element = el('<div></div>');
|
|
animateCss.start(element);
|
|
|
|
expect(element.style.getPropertyValue('background-color')).toEqual('blue');
|
|
}));
|
|
|
|
it('should support duration and delay defined in CSS', inject([AnimationBuilder], (animate) => {
|
|
var animateCss = animate.css();
|
|
var element = el('<div style="transition: 0.5s ease 250ms;"></div>');
|
|
var runner = animateCss.start(element);
|
|
runner.flush();
|
|
|
|
expect(runner.computedDuration).toEqual(500);
|
|
expect(runner.computedDelay).toEqual(250);
|
|
}));
|
|
|
|
it('should add classes', inject([AnimationBuilder], (animate) => {
|
|
var animateCss = animate.css().addClass('one').addClass('two');
|
|
var element = el('<div></div>');
|
|
var runner = animateCss.start(element);
|
|
|
|
expect(element).not.toHaveCssClass('one');
|
|
expect(element).not.toHaveCssClass('two');
|
|
|
|
runner.flush();
|
|
|
|
expect(element).toHaveCssClass('one');
|
|
expect(element).toHaveCssClass('two');
|
|
}));
|
|
|
|
it('should call `onComplete` method after animations have finished',
|
|
inject([AnimationBuilder], (animate) => {
|
|
var spyObject = new SpyObject();
|
|
var callback = spyObject.spy('animationFinished');
|
|
var runner = animate.css()
|
|
.addClass('one')
|
|
.addClass('two')
|
|
.setDuration(100)
|
|
.start(el('<div></div>'))
|
|
.onComplete(callback);
|
|
|
|
expect(callback).not.toHaveBeenCalled();
|
|
|
|
runner.flush();
|
|
|
|
expect(callback).not.toHaveBeenCalled();
|
|
|
|
runner.handleAnimationCompleted();
|
|
|
|
expect(callback).toHaveBeenCalled();
|
|
}));
|
|
|
|
});
|
|
}
|