it('should not coalesque text nodes', () => {
var el1 = el('<div>a</div>');
var el2 = el('<div>b</div>');
DOM.appendChild(el2, DOM.firstChild(el1));
expect(DOM.childNodes(el2).length).toBe(2);
var el2Clone = DOM.clone(el2);
expect(DOM.childNodes(el2Clone).length).toBe(2);
});
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 select by attr name only once if the value is from the DOM', () => {
matcher.addSelectables(s1 = CssSelector.parse('[some-decor]'), 1);
var elementSelector = new CssSelector();
var element = el('<div attr></div>');
var empty = DOM.getAttribute(element, 'attr');
elementSelector.addAttribute('some-decor', empty);
matcher.match(elementSelector, selectableCollector);
expect(matched).toEqual([s1[0], 1]);
});
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 support duration and delay defined in CSS', inject([AnimationBuilder], (animate) => {
var animateCss = animate.css();
var element =
el(`<div style="${DOM.getAnimationPrefix()}transition: 0.5s ease 250ms;"></div>`);
var runner = animateCss.start(element);
runner.flush();
if (DOM.supportsAnimation()) {
expect(runner.computedDelay).toBe(250);
expect(runner.computedDuration).toBe(500);
} else {
expect(runner.computedDelay).toEqual(0);
expect(runner.computedDuration).toEqual(0);
}
}));
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();
if (DOM.supportsAnimation()) {
expect(runner.computedDelay).toBe(100);
expect(runner.computedDuration).toBe(200);
} else {
expect(runner.computedDelay).toBe(0);
expect(runner.computedDuration).toBe(0);
}
}));
it('should clone correctly', () => {
var el1 = el('<div x="y">a<span>b</span></div>');
var clone = DOM.clone(el1);
expect(clone).not.toBe(el1);
DOM.setAttribute(clone, 'test', '1');
expect(stringifyElement(clone)).toEqual('<div test="1" x="y">a<span>b</span></div>');
expect(DOM.getAttribute(el1, 'test')).toBeFalsy();
var cNodes = DOM.childNodes(clone);
var firstChild = cNodes[0];
var secondChild = cNodes[1];
expect(DOM.parentElement(firstChild)).toBe(clone);
expect(DOM.nextSibling(firstChild)).toBe(secondChild);
expect(DOM.isTextNode(firstChild)).toBe(true);
expect(DOM.parentElement(secondChild)).toBe(clone);
expect(DOM.nextSibling(secondChild)).toBeFalsy();
expect(DOM.isElementNode(secondChild)).toBe(true);
});
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();
if (DOM.supportsAnimation()) {
expect(callback).not.toHaveBeenCalled();
runner.handleAnimationCompleted();
expect(callback).toHaveBeenCalled();
} else {
expect(callback).toHaveBeenCalled();
}
}));