feat(core): introduce support for animations

Closes #8734

modules/@angular/compiler/test/compile_metadata_spec.ts

@@ -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);
+      });
+    });
   });
 }