it('should invoke a transition based on a property change', () => {
const engine = makeEngine();
const trig = trigger('myTrigger', [
transition('* => *', [style({height: '0px'}), animate(1000, style({height: '100px'}))])
]);
registerTrigger(element, engine, trig);
setProperty(element, engine, 'myTrigger', 'value');
engine.flush();
expect(engine.players.length).toEqual(1);
const player = MockAnimationDriver.log.pop() as MockAnimationPlayer;
expect(player.keyframes).toEqual([
{height: '0px', offset: 0}, {height: '100px', offset: 1}
]);
});
it('should listen to the onStart operation for the animation', () => {
const engine = makeEngine();
const trig = trigger('myTrigger', [
transition('* => *', [style({height: '0px'}), animate(1000, style({height: '100px'}))])
]);
let count = 0;
registerTrigger(element, engine, trig);
listen(element, engine, 'myTrigger', 'start', () => count++);
setProperty(element, engine, 'myTrigger', 'value');
expect(count).toEqual(0);
engine.flush();
expect(count).toEqual(1);
});
() => {
const engine = makeEngine();
const trig = trigger('something', [
state('on', style({height: '100px'})), state('off', style({height: '0px'})),
transition('on => off', animate(9876))
]);
registerTrigger(element, engine, trig);
setProperty(element, engine, trig.name, 'on');
setProperty(element, engine, trig.name, 'off');
engine.flush();
expect(element.style.height).not.toEqual('0px');
engine.players[0].finish();
expect(element.style.height).toEqual('0px');
});
public static fadeInRight(delay = 500) {
return trigger('fadeInRight', [
transition(':enter', animate(delay, keyframes([
style({
opacity: 0,
'transform': 'translate3d(100%, 0, 0)',
offset: 0
}),
style({
opacity: 1,
'transform': 'translate3d(0, 0, 0)',
offset: 1
}),
]))),
]);
}
public static zoomIn(delay = 300) {
return trigger('zoomIn', [
transition(':enter', animate(delay, keyframes([
style({
opacity: 0,
'transform': 'scale3d(.3, .3, .3)',
offset: 0
}),
style({
opacity: 1,
'transform': 'scale3d(1, 1, 1)',
offset: .5
}),
])))
]);
}
it('should cleanup all inner state that\'s tied to an element once removed', () => {
const engine = makeEngine();
const trig = trigger('myTrigger', [
transition(':leave', [style({height: '0px'}), animate(1000, style({height: '100px'}))])
]);
registerTrigger(element, engine, trig);
setProperty(element, engine, 'myTrigger', 'value');
engine.flush();
expect(engine.elementContainsData(DEFAULT_NAMESPACE_ID, element)).toBeTruthy();
engine.removeNode(DEFAULT_NAMESPACE_ID, element, true);
engine.flush();
expect(engine.elementContainsData(DEFAULT_NAMESPACE_ID, element)).toBeTruthy();
});
it('should trigger a listener callback with an AnimationEvent argument', () => {
const engine = makeEngine();
registerTrigger(
element, engine, trigger('myTrigger', [
transition(
'* => *', [style({height: '0px'}), animate(1234, style({height: '100px'}))])
]));
// we do this so that the next transition has a starting value that isn't null
setProperty(element, engine, 'myTrigger', '123');
engine.flush();
let capture: AnimationEvent = null !;
listen(element, engine, 'myTrigger', 'start', e => capture = e);
listen(element, engine, 'myTrigger', 'done', e => capture = e);
setProperty(element, engine, 'myTrigger', '456');
engine.flush();
delete (capture as any)['_data'];
expect(capture).toEqual({
element,
triggerName: 'myTrigger',
phaseName: 'start',
fromState: '123',
toState: '456',
totalTime: 1234,
disabled: false
});
capture = null !;
const player = engine.players.pop() !;
player.finish();
delete (capture as any)['_data'];
expect(capture).toEqual({
element,
triggerName: 'myTrigger',
phaseName: 'done',
fromState: '123',
toState: '456',
totalTime: 1234,
disabled: false
});
});
it('should not queue an animation if the property value has not changed at all', () => {
const engine = makeEngine();
const trig = trigger('myTrigger', [
transition('* => *', [style({height: '0px'}), animate(1000, style({height: '100px'}))])
]);
registerTrigger(element, engine, trig);
engine.flush();
expect(engine.players.length).toEqual(0);
setProperty(element, engine, 'myTrigger', 'abc');
engine.flush();
expect(engine.players.length).toEqual(1);
setProperty(element, engine, 'myTrigger', 'abc');
engine.flush();
expect(engine.players.length).toEqual(1);
});
() => {
const engine = makeEngine(new SuffixNormalizer('-normalized'));
const trig = trigger('something', [
state('on', style({height: 100})), state('off', style({height: 0})),
transition('on => off', animate(9876))
]);
registerTrigger(element, engine, trig);
setProperty(element, engine, trig.name, 'on');
setProperty(element, engine, trig.name, 'off');
engine.flush();
const player = MockAnimationDriver.log.pop() as MockAnimationPlayer;
expect(player.keyframes).toEqual([
{'height-normalized': '100-normalized', offset: 0},
{'height-normalized': '0-normalized', offset: 1}
]);
});
() => {
const engine = makeEngine();
const trig = trigger('something', [
state('0', style({width: '0px'})), state('1', style({width: '100px'})),
transition('* => *', [animate(1000, style({height: '200px'}))])
]);
registerTrigger(element, engine, trig);
setProperty(element, engine, trig.name, '0');
setProperty(element, engine, trig.name, '1');
engine.flush();
const player = engine.players[0] !;
expect(element.style.width).not.toEqual('100px');
player.finish();
expect(element.style.height).not.toEqual('200px');
expect(element.style.width).toEqual('100px');
});
