@ -0,0 +1,82 @@
|
||||
import {
|
||||
AsyncTestCompleter,
|
||||
beforeEach,
|
||||
ddescribe,
|
||||
xdescribe,
|
||||
describe,
|
||||
expect,
|
||||
iit,
|
||||
inject,
|
||||
it,
|
||||
xit,
|
||||
beforeEachProviders
|
||||
} from '@angular/core/testing/testing_internal';
|
||||
|
||||
import {trigger, style, animate, group, sequence, transition, AnimationMetadata} from '@angular/core';
|
||||
|
||||
import {AnimationCompiler, CompiledAnimation} from '../../src/animation/animation_compiler';
|
||||
import {
|
||||
CompileTemplateMetadata,
|
||||
CompileDirectiveMetadata,
|
||||
CompileTypeMetadata
|
||||
} from '../../src/compile_metadata';
|
||||
|
||||
import {CompileMetadataResolver} from '../../src/metadata_resolver';
|
||||
|
||||
export function main() {
|
||||
describe('RuntimeAnimationCompiler', () => {
|
||||
var resolver;
|
||||
beforeEach(inject([CompileMetadataResolver], (res: CompileMetadataResolver) => {
|
||||
resolver = res;
|
||||
}));
|
||||
|
||||
var compiler = new AnimationCompiler();
|
||||
|
||||
var compileAnimations = (component: CompileDirectiveMetadata): CompiledAnimation => {
|
||||
return compiler.compileComponent(component)[0];
|
||||
};
|
||||
|
||||
var compile = (seq: AnimationMetadata) => {
|
||||
var entry = trigger('myAnimation', [
|
||||
transition('state1 => state2', seq)
|
||||
]);
|
||||
|
||||
var compiledAnimationEntry = resolver.getAnimationEntryMetadata(entry);
|
||||
var component = CompileDirectiveMetadata.create({
|
||||
type: new CompileTypeMetadata({
|
||||
name: 'something'
|
||||
}),
|
||||
template: new CompileTemplateMetadata({
|
||||
animations: [compiledAnimationEntry]
|
||||
})
|
||||
});
|
||||
|
||||
return compileAnimations(component);
|
||||
};
|
||||
|
||||
it('should throw an exception containing all the inner animation parser errors', () => {
|
||||
var animation = sequence([
|
||||
style({"color": "red"}),
|
||||
animate(1000, style({"font-size": "100px"})),
|
||||
style({"color": "blue"}),
|
||||
animate(1000, style(":missing_state")),
|
||||
style({"color": "gold"}),
|
||||
animate(1000, style("broken_state"))
|
||||
]);
|
||||
|
||||
var capturedErrorMessage: string;
|
||||
try {
|
||||
compile(animation);
|
||||
} catch (e) {
|
||||
capturedErrorMessage = e.message;
|
||||
}
|
||||
|
||||
expect(capturedErrorMessage)
|
||||
.toMatchPattern(
|
||||
/Unable to apply styles due to missing a state: "missing_state"/g);
|
||||
|
||||
expect(capturedErrorMessage)
|
||||
.toMatchPattern(/Animation states via styles must be prefixed with a ":"/);
|
||||
});
|
||||
});
|
||||
}
|
@ -0,0 +1,469 @@
|
||||
import {
|
||||
AsyncTestCompleter,
|
||||
beforeEach,
|
||||
ddescribe,
|
||||
xdescribe,
|
||||
describe,
|
||||
expect,
|
||||
iit,
|
||||
inject,
|
||||
it,
|
||||
xit,
|
||||
beforeEachProviders
|
||||
} from '@angular/core/testing/testing_internal';
|
||||
|
||||
import {parseAnimationEntry} from '../../src/animation/animation_parser';
|
||||
|
||||
import {CompileMetadataResolver} from '../../src/metadata_resolver';
|
||||
|
||||
import {
|
||||
style,
|
||||
animate,
|
||||
group,
|
||||
sequence,
|
||||
trigger,
|
||||
keyframes,
|
||||
transition,
|
||||
state,
|
||||
AnimationMetadata,
|
||||
AnimationWithStepsMetadata,
|
||||
AnimationStyleMetadata,
|
||||
AnimationAnimateMetadata,
|
||||
AnimationGroupMetadata,
|
||||
AnimationSequenceMetadata
|
||||
} from '@angular/core';
|
||||
|
||||
import {
|
||||
AnimationAst,
|
||||
AnimationStateTransitionAst,
|
||||
AnimationEntryAst,
|
||||
AnimationKeyframeAst,
|
||||
AnimationStylesAst,
|
||||
AnimationSequenceAst,
|
||||
AnimationGroupAst,
|
||||
AnimationStepAst
|
||||
} from '../../src/animation/animation_ast';
|
||||
|
||||
import {FILL_STYLE_FLAG, AnimationStyleUtil} from '../../core_private';
|
||||
|
||||
import {StringMapWrapper} from '../../src/facade/collection';
|
||||
|
||||
export function main() {
|
||||
describe('parseAnimationEntry', () => {
|
||||
var combineStyles = (styles: AnimationStylesAst): {[key: string]: string | number} => {
|
||||
var flatStyles: {[key: string]: string | number} = {};
|
||||
styles.styles.forEach(entry => StringMapWrapper.forEach(entry, (val, prop) => { flatStyles[prop] = val; }));
|
||||
return flatStyles;
|
||||
};
|
||||
|
||||
var collectKeyframeStyles = (keyframe: AnimationKeyframeAst): {[key: string]: string | number} => {
|
||||
return combineStyles(keyframe.styles);
|
||||
};
|
||||
|
||||
var collectStepStyles = (step: AnimationStepAst): Array<{[key: string]: string | number}> => {
|
||||
var keyframes = step.keyframes;
|
||||
var styles = [];
|
||||
if (step.startingStyles.styles.length > 0) {
|
||||
styles.push(combineStyles(step.startingStyles));
|
||||
}
|
||||
keyframes.forEach(keyframe => styles.push(collectKeyframeStyles(keyframe)));
|
||||
return styles;
|
||||
};
|
||||
|
||||
var resolver;
|
||||
beforeEach(inject([CompileMetadataResolver], (res: CompileMetadataResolver) => {
|
||||
resolver = res;
|
||||
}));
|
||||
|
||||
var parseAnimation = (data: AnimationMetadata[]) => {
|
||||
var entry = trigger('myAnimation', [
|
||||
transition('state1 => state2', sequence(data))
|
||||
]);
|
||||
var compiledAnimationEntry = resolver.getAnimationEntryMetadata(entry);
|
||||
return parseAnimationEntry(compiledAnimationEntry);
|
||||
};
|
||||
|
||||
var getAnimationAstFromEntryAst = (ast: AnimationEntryAst) => {
|
||||
return ast.stateTransitions[0].animation;
|
||||
}
|
||||
|
||||
var parseAnimationAst = (data: AnimationMetadata[]) => {
|
||||
return getAnimationAstFromEntryAst(parseAnimation(data).ast);
|
||||
};
|
||||
|
||||
var parseAnimationAndGetErrors = (data: AnimationMetadata[]) => parseAnimation(data).errors;
|
||||
|
||||
it('should merge repeated style steps into a single style ast step entry', () => {
|
||||
var ast = parseAnimationAst([
|
||||
style({"color": 'black'}),
|
||||
style({"background": 'red'}),
|
||||
style({"opacity": 0}),
|
||||
animate(1000, style({"color": 'white', "background": 'black', "opacity": 1}))
|
||||
]);
|
||||
|
||||
expect(ast.steps.length).toEqual(1);
|
||||
|
||||
var step = <AnimationStepAst>ast.steps[0];
|
||||
expect(step.startingStyles.styles[0])
|
||||
.toEqual({"color": 'black', "background": 'red', "opacity": 0});
|
||||
|
||||
expect(step.keyframes[0].styles.styles[0])
|
||||
.toEqual({"color": 'black', "background": 'red', "opacity": 0});
|
||||
|
||||
expect(step.keyframes[1].styles.styles[0])
|
||||
.toEqual({"color": 'white', "background": 'black', "opacity": 1});
|
||||
});
|
||||
|
||||
it('should animate only the styles requested within an animation step', () => {
|
||||
var ast = parseAnimationAst([
|
||||
style({"color": 'black', "background": 'blue'}),
|
||||
animate(1000, style({"background": 'orange'}))
|
||||
]);
|
||||
|
||||
expect(ast.steps.length).toEqual(1);
|
||||
|
||||
var animateStep = <AnimationStepAst>ast.steps[0];
|
||||
var fromKeyframe = animateStep.keyframes[0].styles.styles[0];
|
||||
var toKeyframe = animateStep.keyframes[1].styles.styles[0];
|
||||
expect(fromKeyframe).toEqual({"background": 'blue'});
|
||||
expect(toKeyframe).toEqual({"background": 'orange'});
|
||||
});
|
||||
|
||||
it('should populate the starting and duration times propertly', () => {
|
||||
var ast = parseAnimationAst([
|
||||
style({"color": 'black', "opacity": 1}),
|
||||
animate(1000, style({"color": 'red'})),
|
||||
animate(4000, style({"color": 'yellow'})),
|
||||
sequence([animate(1000, style({"color": 'blue'})), animate(1000, style({"color": 'grey'}))]),
|
||||
group([animate(500, style({"color": 'pink'})), animate(1000, style({"opacity": '0.5'}))]),
|
||||
animate(300, style({"color": 'black'})),
|
||||
]);
|
||||
|
||||
expect(ast.steps.length).toEqual(5);
|
||||
|
||||
var step1 = <AnimationStepAst>ast.steps[0];
|
||||
expect(step1.playTime).toEqual(1000);
|
||||
expect(step1.startTime).toEqual(0);
|
||||
|
||||
var step2 = <AnimationStepAst>ast.steps[1];
|
||||
expect(step2.playTime).toEqual(4000);
|
||||
expect(step2.startTime).toEqual(1000);
|
||||
|
||||
var seq = <AnimationSequenceAst>ast.steps[2];
|
||||
expect(seq.playTime).toEqual(2000);
|
||||
expect(seq.startTime).toEqual(5000);
|
||||
|
||||
var step4 = <AnimationStepAst>seq.steps[0];
|
||||
expect(step4.playTime).toEqual(1000);
|
||||
expect(step4.startTime).toEqual(5000);
|
||||
|
||||
var step5 = <AnimationStepAst>seq.steps[1];
|
||||
expect(step5.playTime).toEqual(1000);
|
||||
expect(step5.startTime).toEqual(6000);
|
||||
|
||||
var grp = <AnimationGroupAst>ast.steps[3];
|
||||
expect(grp.playTime).toEqual(1000);
|
||||
expect(grp.startTime).toEqual(7000);
|
||||
|
||||
var step6 = <AnimationStepAst>grp.steps[0];
|
||||
expect(step6.playTime).toEqual(500);
|
||||
expect(step6.startTime).toEqual(7000);
|
||||
|
||||
var step7 = <AnimationStepAst>grp.steps[1];
|
||||
expect(step7.playTime).toEqual(1000);
|
||||
expect(step7.startTime).toEqual(7000);
|
||||
|
||||
var step8 = <AnimationStepAst>ast.steps[4];
|
||||
expect(step8.playTime).toEqual(300);
|
||||
expect(step8.startTime).toEqual(8000);
|
||||
});
|
||||
|
||||
it('should apply the correct animate() styles when parallel animations are active and use the same properties',
|
||||
() => {
|
||||
var details = parseAnimation([
|
||||
style({"opacity": 0, "color": 'red'}),
|
||||
group([
|
||||
sequence([
|
||||
animate(2000, style({"color": "black"})),
|
||||
animate(2000, style({"opacity": 0.5})),
|
||||
]),
|
||||
sequence([animate(2000, style({"opacity": 0.8})), animate(2000, style({"color": "blue"}))])
|
||||
])
|
||||
]);
|
||||
|
||||
var errors = details.errors;
|
||||
expect(errors.length).toEqual(0);
|
||||
|
||||
var ast = <AnimationSequenceAst>getAnimationAstFromEntryAst(details.ast);
|
||||
var g1 = <AnimationGroupAst>ast.steps[1];
|
||||
|
||||
var sq1 = <AnimationSequenceAst>g1.steps[0];
|
||||
var sq2 = <AnimationSequenceAst>g1.steps[1];
|
||||
|
||||
var sq1a1 = <AnimationStepAst>sq1.steps[0];
|
||||
expect(collectStepStyles(sq1a1)).toEqual([{"color": 'red'}, {"color": 'black'}]);
|
||||
|
||||
var sq1a2 = <AnimationStepAst>sq1.steps[1];
|
||||
expect(collectStepStyles(sq1a2)).toEqual([{"opacity": 0.8}, {"opacity": 0.5}]);
|
||||
|
||||
var sq2a1 = <AnimationStepAst>sq2.steps[0];
|
||||
expect(collectStepStyles(sq2a1)).toEqual([{"opacity": 0}, {"opacity": 0.8}]);
|
||||
|
||||
var sq2a2 = <AnimationStepAst>sq2.steps[1];
|
||||
expect(collectStepStyles(sq2a2)).toEqual([{"color": "black"}, {"color": "blue"}]);
|
||||
});
|
||||
|
||||
it('should throw errors when animations animate a CSS property at the same time', () => {
|
||||
var animation1 = parseAnimation([
|
||||
style({"opacity": 0}),
|
||||
group([animate(1000, style({"opacity": 1})), animate(2000, style({"opacity": 0.5}))])
|
||||
]);
|
||||
|
||||
var errors1 = animation1.errors;
|
||||
expect(errors1.length).toEqual(1);
|
||||
expect(errors1[0].msg)
|
||||
.toContainError(
|
||||
'The animated CSS property "opacity" unexpectedly changes between steps "0ms" and "2000ms" at "1000ms"');
|
||||
|
||||
var animation2 = parseAnimation([
|
||||
style({"color": "red"}),
|
||||
group([
|
||||
animate(5000, style({"color": "blue"})),
|
||||
animate(2500, style({"color": "black"}))
|
||||
])
|
||||
]);
|
||||
|
||||
var errors2 = animation2.errors;
|
||||
expect(errors2.length).toEqual(1);
|
||||
expect(errors2[0].msg)
|
||||
.toContainError(
|
||||
'The animated CSS property "color" unexpectedly changes between steps "0ms" and "5000ms" at "2500ms"');
|
||||
});
|
||||
|
||||
it('should return an error when an animation style contains an invalid timing value', () => {
|
||||
var errors = parseAnimationAndGetErrors(
|
||||
[style({"opacity": 0}), animate('one second', style({"opacity": 1}))]);
|
||||
expect(errors[0].msg).toContainError(`The provided timing value "one second" is invalid.`);
|
||||
});
|
||||
|
||||
it('should collect and return any errors collected when parsing the metadata', () => {
|
||||
var errors = parseAnimationAndGetErrors([
|
||||
style({"opacity": 0}),
|
||||
animate('one second', style({"opacity": 1})),
|
||||
style({"opacity": 0}),
|
||||
animate('one second', null),
|
||||
style({"background": 'red'})
|
||||
]);
|
||||
expect(errors.length).toBeGreaterThan(1);
|
||||
});
|
||||
|
||||
it('should normalize a series of keyframe styles into a list of offset steps', () => {
|
||||
var ast = parseAnimationAst([
|
||||
animate(1000, keyframes([
|
||||
style({"width": 0}),
|
||||
style({"width": 25}),
|
||||
style({"width": 50}),
|
||||
style({"width": 75})
|
||||
]))
|
||||
]);
|
||||
|
||||
var step = <AnimationStepAst>ast.steps[0];
|
||||
expect(step.keyframes.length).toEqual(4);
|
||||
|
||||
expect(step.keyframes[0].offset).toEqual(0);
|
||||
expect(step.keyframes[1].offset).toMatchPattern(/^0\.33/);
|
||||
expect(step.keyframes[2].offset).toMatchPattern(/^0\.66/);
|
||||
expect(step.keyframes[3].offset).toEqual(1);
|
||||
});
|
||||
|
||||
it('should use an existing collection of offset steps if provided', () => {
|
||||
var ast = parseAnimationAst([
|
||||
animate(1000, keyframes([
|
||||
style({"height": 0, "offset": 0}),
|
||||
style({"height": 25, "offset": 0.6}),
|
||||
style({"height": 50, "offset": 0.7}),
|
||||
style({"height": 75, "offset": 1})
|
||||
]))
|
||||
]);
|
||||
|
||||
var step = <AnimationStepAst>ast.steps[0];
|
||||
expect(step.keyframes.length).toEqual(4);
|
||||
|
||||
expect(step.keyframes[0].offset).toEqual(0);
|
||||
expect(step.keyframes[1].offset).toEqual(0.6);
|
||||
expect(step.keyframes[2].offset).toEqual(0.7);
|
||||
expect(step.keyframes[3].offset).toEqual(1);
|
||||
});
|
||||
|
||||
it('should sort the provided collection of steps that contain offsets', () => {
|
||||
var ast = parseAnimationAst([
|
||||
animate(1000, keyframes([
|
||||
style({"opacity": 0, "offset": 0.9}),
|
||||
style({"opacity": .25, "offset": 0}),
|
||||
style({"opacity": .50, "offset": 1}),
|
||||
style({"opacity": .75, "offset": 0.91})
|
||||
]))
|
||||
]);
|
||||
|
||||
var step = <AnimationStepAst>ast.steps[0];
|
||||
expect(step.keyframes.length).toEqual(4);
|
||||
|
||||
expect(step.keyframes[0].offset).toEqual(0);
|
||||
expect(step.keyframes[0].styles.styles[0]['opacity']).toEqual(.25);
|
||||
|
||||
expect(step.keyframes[1].offset).toEqual(0.9);
|
||||
expect(step.keyframes[1].styles.styles[0]['opacity']).toEqual(0);
|
||||
|
||||
expect(step.keyframes[2].offset).toEqual(0.91);
|
||||
expect(step.keyframes[2].styles.styles[0]['opacity']).toEqual(.75);
|
||||
|
||||
expect(step.keyframes[3].offset).toEqual(1);
|
||||
expect(step.keyframes[3].styles.styles[0]['opacity']).toEqual(.50);
|
||||
});
|
||||
|
||||
it('should throw an error if a partial amount of keyframes contain an offset', () => {
|
||||
var errors = parseAnimationAndGetErrors([
|
||||
animate(1000, keyframes([
|
||||
style({"z-index": 0, "offset": 0}),
|
||||
style({"z-index": 1}),
|
||||
style({"z-index": 2, "offset": 1})
|
||||
]))
|
||||
]);
|
||||
|
||||
expect(errors.length).toEqual(1);
|
||||
var error = errors[0];
|
||||
|
||||
expect(error.msg).toMatchPattern(/Not all style\(\) entries contain an offset/);
|
||||
});
|
||||
|
||||
it('should use an existing style used earlier in the animation sequence if not defined in the first keyframe', () => {
|
||||
var ast = parseAnimationAst([
|
||||
animate(1000, keyframes([
|
||||
style({"color": "red"}),
|
||||
style({"background": "blue", "color": "white"})
|
||||
]))
|
||||
]);
|
||||
|
||||
var keyframesStep = <AnimationStepAst>ast.steps[0];
|
||||
var kf1 = keyframesStep.keyframes[0];
|
||||
var kf2 = keyframesStep.keyframes[1];
|
||||
|
||||
expect(AnimationStyleUtil.flattenStyles(kf1.styles.styles)).toEqual({
|
||||
"color": "red",
|
||||
"background": FILL_STYLE_FLAG
|
||||
});
|
||||
});
|
||||
|
||||
it('should copy over any missing styles to the final keyframe if not already defined', () => {
|
||||
var ast = parseAnimationAst([
|
||||
animate(1000, keyframes([
|
||||
style({"color": "white", "border-color":"white"}),
|
||||
style({"color": "red", "background": "blue"}),
|
||||
style({"background": "blue" })
|
||||
]))
|
||||
]);
|
||||
|
||||
var keyframesStep = <AnimationStepAst>ast.steps[0];
|
||||
var kf1 = keyframesStep.keyframes[0];
|
||||
var kf2 = keyframesStep.keyframes[1];
|
||||
var kf3 = keyframesStep.keyframes[2];
|
||||
|
||||
expect(AnimationStyleUtil.flattenStyles(kf3.styles.styles)).toEqual({
|
||||
"background": "blue",
|
||||
"color": "red",
|
||||
"border-color": "white"
|
||||
});
|
||||
});
|
||||
|
||||
it('should create an initial keyframe if not detected and place all keyframes styles there', () => {
|
||||
var ast = parseAnimationAst([
|
||||
animate(1000, keyframes([
|
||||
style({"color": "white", "background": "black", "offset": 0.5}),
|
||||
style({"color": "orange", "background": "red", "font-size": "100px", "offset": 1})
|
||||
]))
|
||||
]);
|
||||
|
||||
var keyframesStep = <AnimationStepAst>ast.steps[0];
|
||||
expect(keyframesStep.keyframes.length).toEqual(3);
|
||||
var kf1 = keyframesStep.keyframes[0];
|
||||
var kf2 = keyframesStep.keyframes[1];
|
||||
var kf3 = keyframesStep.keyframes[2];
|
||||
|
||||
expect(kf1.offset).toEqual(0);
|
||||
expect(AnimationStyleUtil.flattenStyles(kf1.styles.styles)).toEqual({
|
||||
"font-size": FILL_STYLE_FLAG,
|
||||
"background": FILL_STYLE_FLAG,
|
||||
"color": FILL_STYLE_FLAG
|
||||
});
|
||||
});
|
||||
|
||||
it('should create an destination keyframe if not detected and place all keyframes styles there', () => {
|
||||
var ast = parseAnimationAst([
|
||||
animate(1000, keyframes([
|
||||
style({"color": "white", "background": "black", "transform": "rotate(360deg)", "offset": 0}),
|
||||
style({"color": "orange", "background": "red", "font-size": "100px", "offset": 0.5})
|
||||
]))
|
||||
]);
|
||||
|
||||
var keyframesStep = <AnimationStepAst>ast.steps[0];
|
||||
expect(keyframesStep.keyframes.length).toEqual(3);
|
||||
var kf1 = keyframesStep.keyframes[0];
|
||||
var kf2 = keyframesStep.keyframes[1];
|
||||
var kf3 = keyframesStep.keyframes[2];
|
||||
|
||||
expect(kf3.offset).toEqual(1);
|
||||
expect(AnimationStyleUtil.flattenStyles(kf3.styles.styles)).toEqual({
|
||||
"color": "orange",
|
||||
"background": "red",
|
||||
"transform": "rotate(360deg)",
|
||||
"font-size": "100px"
|
||||
});
|
||||
});
|
||||
|
||||
describe('easing / duration / delay', () => {
|
||||
it('should parse simple string-based values', () => {
|
||||
var ast = parseAnimationAst([
|
||||
animate("1s .5s ease-out", style({ "opacity": 1 }))
|
||||
]);
|
||||
|
||||
var step = <AnimationStepAst>ast.steps[0];
|
||||
expect(step.duration).toEqual(1000);
|
||||
expect(step.delay).toEqual(500);
|
||||
expect(step.easing).toEqual("ease-out");
|
||||
});
|
||||
|
||||
it('should parse a numeric duration value', () => {
|
||||
var ast = parseAnimationAst([
|
||||
animate(666, style({ "opacity": 1 }))
|
||||
]);
|
||||
|
||||
var step = <AnimationStepAst>ast.steps[0];
|
||||
expect(step.duration).toEqual(666);
|
||||
expect(step.delay).toEqual(0);
|
||||
expect(step.easing).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should parse an easing value without a delay', () => {
|
||||
var ast = parseAnimationAst([
|
||||
animate("5s linear", style({ "opacity": 1 }))
|
||||
]);
|
||||
|
||||
var step = <AnimationStepAst>ast.steps[0];
|
||||
expect(step.duration).toEqual(5000);
|
||||
expect(step.delay).toEqual(0);
|
||||
expect(step.easing).toEqual("linear");
|
||||
});
|
||||
|
||||
it('should parse a complex easing value', () => {
|
||||
var ast = parseAnimationAst([
|
||||
animate("30ms cubic-bezier(0, 0,0, .69)", style({ "opacity": 1 }))
|
||||
]);
|
||||
|
||||
var step = <AnimationStepAst>ast.steps[0];
|
||||
expect(step.duration).toEqual(30);
|
||||
expect(step.delay).toEqual(0);
|
||||
expect(step.easing).toEqual("cubic-bezier(0, 0,0, .69)");
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
@ -18,14 +18,21 @@ import {
|
||||
CompileQueryMetadata,
|
||||
CompileIdentifierMetadata,
|
||||
CompileFactoryMetadata,
|
||||
CompileTokenMetadata
|
||||
CompileTokenMetadata,
|
||||
CompileAnimationEntryMetadata,
|
||||
CompileAnimationStyleMetadata,
|
||||
CompileAnimationAnimateMetadata,
|
||||
CompileAnimationSequenceMetadata,
|
||||
CompileAnimationStateTransitionMetadata,
|
||||
CompileAnimationKeyframesSequenceMetadata,
|
||||
CompileAnimationGroupMetadata
|
||||
} from '@angular/compiler/src/compile_metadata';
|
||||
import {ViewEncapsulation} from '@angular/core/src/metadata/view';
|
||||
import {ChangeDetectionStrategy} from '@angular/core/src/change_detection';
|
||||
import {LifecycleHooks} from '@angular/core/src/metadata/lifecycle_hooks';
|
||||
|
||||
export function main() {
|
||||
describe('CompileMetadata', () => {
|
||||
describe('CompileMetadata', () => {
|
||||
var fullTypeMeta: CompileTypeMetadata;
|
||||
var fullTemplateMeta: CompileTemplateMetadata;
|
||||
var fullDirectiveMeta: CompileDirectiveMetadata;
|
||||
@ -60,6 +67,17 @@ export function main() {
|
||||
templateUrl: 'someTemplateUrl',
|
||||
styles: ['someStyle'],
|
||||
styleUrls: ['someStyleUrl'],
|
||||
animations: [
|
||||
new CompileAnimationEntryMetadata('animation', [
|
||||
new CompileAnimationStateTransitionMetadata('* => *',
|
||||
new CompileAnimationSequenceMetadata([
|
||||
new CompileAnimationStyleMetadata(0, [{ 'opacity': 0 }]),
|
||||
new CompileAnimationAnimateMetadata(1000,
|
||||
new CompileAnimationStyleMetadata(0, [{ 'opacity': 1 }]))
|
||||
])
|
||||
)
|
||||
])
|
||||
],
|
||||
ngContentSelectors: ['*']
|
||||
});
|
||||
fullDirectiveMeta = CompileDirectiveMetadata.create({
|
||||
@ -169,5 +187,98 @@ export function main() {
|
||||
expect(CompileTemplateMetadata.fromJson(empty.toJson())).toEqual(empty);
|
||||
});
|
||||
});
|
||||
|
||||
describe('CompileAnimationStyleMetadata', () => {
|
||||
it('should serialize with full data', () => {
|
||||
let full = new CompileAnimationStyleMetadata(0, [{ "opacity": 0, "color": "red" }]);
|
||||
expect(CompileAnimationStyleMetadata.fromJson(full.toJson())).toEqual(full);
|
||||
});
|
||||
|
||||
it('should serialize with no data', () => {
|
||||
let empty = new CompileAnimationStyleMetadata(0, []);
|
||||
expect(CompileAnimationStyleMetadata.fromJson(empty.toJson())).toEqual(empty);
|
||||
});
|
||||
});
|
||||
|
||||
describe('CompileAnimationAnimateMetadata', () => {
|
||||
it('should serialize with full data', () => {
|
||||
let full = new CompileAnimationAnimateMetadata("1s linear",
|
||||
new CompileAnimationStyleMetadata(0, [{ "opacity": 0.5, "color": "blue" }]))
|
||||
expect(CompileAnimationAnimateMetadata.fromJson(full.toJson())).toEqual(full);
|
||||
});
|
||||
|
||||
it('should serialize with no data', () => {
|
||||
let empty = new CompileAnimationAnimateMetadata();
|
||||
expect(CompileAnimationAnimateMetadata.fromJson(empty.toJson())).toEqual(empty);
|
||||
});
|
||||
});
|
||||
|
||||
describe('CompileAnimationSequenceMetadata', () => {
|
||||
it('should serialize with full data', () => {
|
||||
let full = new CompileAnimationSequenceMetadata([
|
||||
new CompileAnimationStyleMetadata(0, [{ "opacity": 0.5, "width": 100 }]),
|
||||
new CompileAnimationAnimateMetadata(1000,
|
||||
new CompileAnimationStyleMetadata(0, [{ "opacity": 1, "width": 0 }]))
|
||||
]);
|
||||
expect(CompileAnimationSequenceMetadata.fromJson(full.toJson())).toEqual(full);
|
||||
});
|
||||
|
||||
it('should serialize with no data', () => {
|
||||
let empty = new CompileAnimationSequenceMetadata();
|
||||
expect(CompileAnimationSequenceMetadata.fromJson(empty.toJson())).toEqual(empty);
|
||||
});
|
||||
});
|
||||
|
||||
describe('CompileAnimationGroupMetadata', () => {
|
||||
it('should serialize with full data', () => {
|
||||
let full = new CompileAnimationGroupMetadata([
|
||||
new CompileAnimationStyleMetadata(0, [{ "width": 100, "border": "1px solid red" }]),
|
||||
new CompileAnimationAnimateMetadata(1000,
|
||||
new CompileAnimationStyleMetadata(0, [{ "width": 900, "border": "10px solid blue" }]))
|
||||
]);
|
||||
expect(CompileAnimationGroupMetadata.fromJson(full.toJson())).toEqual(full);
|
||||
});
|
||||
|
||||
it('should serialize with no data', () => {
|
||||
let empty = new CompileAnimationGroupMetadata();
|
||||
expect(CompileAnimationGroupMetadata.fromJson(empty.toJson())).toEqual(empty);
|
||||
});
|
||||
});
|
||||
|
||||
describe('CompileAnimationKeyframesSequenceMetadata', () => {
|
||||
it('should serialize with full data', () => {
|
||||
let full = new CompileAnimationKeyframesSequenceMetadata([
|
||||
new CompileAnimationStyleMetadata(0, [{ "width": 0 }]),
|
||||
new CompileAnimationStyleMetadata(0.5, [{ "width": 100 }]),
|
||||
new CompileAnimationStyleMetadata(1, [{ "width": 200 }]),
|
||||
]);
|
||||
expect(CompileAnimationKeyframesSequenceMetadata.fromJson(full.toJson())).toEqual(full);
|
||||
});
|
||||
|
||||
it('should serialize with no data', () => {
|
||||
let empty = new CompileAnimationKeyframesSequenceMetadata();
|
||||
expect(CompileAnimationKeyframesSequenceMetadata.fromJson(empty.toJson())).toEqual(empty);
|
||||
});
|
||||
});
|
||||
|
||||
describe('CompileAnimationEntryMetadata', () => {
|
||||
it('should serialize with full data', () => {
|
||||
let full = new CompileAnimationEntryMetadata('name', [
|
||||
new CompileAnimationStateTransitionMetadata('key => value',
|
||||
new CompileAnimationSequenceMetadata([
|
||||
new CompileAnimationStyleMetadata(0, [{ "color": "red" }]),
|
||||
new CompileAnimationAnimateMetadata(1000,
|
||||
new CompileAnimationStyleMetadata(0, [{ "color": "blue" }]))
|
||||
])
|
||||
)
|
||||
]);
|
||||
expect(CompileAnimationEntryMetadata.fromJson(full.toJson())).toEqual(full);
|
||||
});
|
||||
|
||||
it('should serialize with no data', () => {
|
||||
let empty = new CompileAnimationEntryMetadata();
|
||||
expect(CompileAnimationEntryMetadata.fromJson(empty.toJson())).toEqual(empty);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
@ -252,6 +252,13 @@ export function main() {
|
||||
]);
|
||||
});
|
||||
|
||||
it('should parse bound properties via animate- and not report them as attributes', () => {
|
||||
expect(humanizeTplAst(parse('<div animate-something="value2">', [])))
|
||||
.toEqual([
|
||||
[ElementAst, 'div'],
|
||||
[BoundElementPropertyAst, PropertyBindingType.Animation, 'something', 'value2', null]
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('events', () => {
|
||||
|
@ -30,7 +30,6 @@ export function main() {
|
||||
var view = viewResolver.resolve(SomeComponent);
|
||||
expect(view.template).toEqual('overridden template');
|
||||
expect(isBlank(view.directives)).toBe(true);
|
||||
|
||||
});
|
||||
|
||||
it('should not allow overriding a view after it has been resolved', () => {
|
||||
|
Reference in New Issue
Block a user