Jest snapshots: classes in animations should autoexpand.

common/changes/@uifabric/jest-serializer-merge-styles/fix-serializing-keyframes_2018-04-23-03-59.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/jest-serializer-merge-styles",
+      "comment": "Updating how keyframe classes are serialized in results.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/jest-serializer-merge-styles",
+  "email": "[email protected]"
+}

common/changes/@uifabric/merge-styles/fix-serializing-keyframes_2018-04-23-03-59.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/merge-styles",
+      "comment": "Updating how keyframe classes are cached to aid with jest snapshot testing.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/merge-styles",
+  "email": "[email protected]"
+}

common/changes/office-ui-fabric-react/fix-serializing-keyframes_2018-04-23-03-59.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Updating a snapshot test.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/jest-serializer-merge-styles/src/index.test.tsx

@@ -1,5 +1,7 @@
 import { print, test } from './index';
-import { Stylesheet, InjectionMode, mergeStyles } from '@uifabric/merge-styles';
+import { Stylesheet, InjectionMode, mergeStyles, keyframes } from '@uifabric/merge-styles';
+
+const indent = (val: string): string => '    ' + val;
 
 const _stylesheet: Stylesheet = Stylesheet.getInstance();
 _stylesheet.setConfig({ injectionMode: InjectionMode.none });
@@ -24,7 +26,6 @@ describe('print', () => {
 
   it('can format, sort, and indent the class names', () => {
 
-    const indent = (val: string): string => '    ' + val;
     const classNames = mergeStyles(
       'ms-GlobalClassName',
       {
@@ -57,4 +58,29 @@ describe('print', () => {
     ].join('\n'));
   });
 
+  it('can expand animation class names', () => {
+    const fadeInClassName = keyframes({
+      from: { opacity: 0 },
+      to: { opacity: 1 }
+    });
+
+    const className = mergeStyles({
+      animationName: fadeInClassName
+    });
+
+    expect(
+      print(
+        className,
+        () => '',
+        indent
+      )
+    ).toEqual([
+      '',
+      '',
+      indent('{'),
+      indent('  animation-name: keyframes from{opacity:0;}to{opacity:1;};'),
+      indent('}'),
+    ].join('\n'));
+  });
+
 });

packages/jest-serializer-merge-styles/src/index.ts

@@ -40,6 +40,7 @@ export function test(val: string): boolean {
 
 function _serializeRules(rules: string[], indent: (val: string) => string): string {
   const ruleStrings: string[] = [];
+  const stylesheet = Stylesheet.getInstance();
 
   for (let i = 0; i < rules.length; i += 2) {
     const selector = rules[i];
@@ -50,7 +51,21 @@ function _serializeRules(rules: string[], indent: (val: string) => string): stri
 
       insertedRules.split(';').sort().forEach((rule: string) => {
         if (rule) {
-          ruleStrings.push(indent('  ' + rule.replace(':', ': ') + ';'));
+          const [name, value] = rule.split(':');
+          const valueParts = value.split(' ');
+          let result: string[] = [];
+
+          for (const part of valueParts) {
+            const ruleSet = stylesheet.insertedRulesFromClassName(part);
+
+            if (ruleSet) {
+              result = result.concat(ruleSet);
+            } else {
+              result.push(part);
+            }
+          }
+
+          ruleStrings.push(indent(`  ${name}: ${result.join(' ')};`));
         }
       });
 

packages/merge-styles/src/keyframes.ts

@@ -21,7 +21,12 @@ export function keyframes(timeline: { [key: string]: {} }): string {
 
   stylesheet.insertRule(`@keyframes ${name}{${rules}}`);
 
-  // If needed later, we would add vendor prefixes here.
+  stylesheet.cacheClassName(
+    name,
+    rules,
+    [],
+    ['keyframes', rules]
+  );
 
   return name;
 }

packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap

@@ -302,7 +302,7 @@ exports[`ActivityItem renders compact with animation correctly 1`] = `
         align-items: center;
         animation-duration: .5s;
         animation-iteration-count: 1;
-        animation-name: css-93;
+        animation-name: keyframes from{opacity:0;}to{opacity:1;};
         box-sizing: border-box;
         color: #666666;
         display: flex;
@@ -351,7 +351,7 @@ exports[`ActivityItem renders compact with animation correctly 1`] = `
           {
             animation-duration: .8s;
             animation-iteration-count: 1;
-            animation-name: css-92;
+            animation-name: keyframes 0%{border-color:#0078d4;border-width:0px;width:4px;height:4px;}14.2%{opacity:1;border-width:4px;}35.7%{opacity:1;}71.4%{border-width:0;width:28px;height:28px;opacity:0;border-color:#71afe5;}100%{};
             border-radius: 225px;
             border-style: solid;
             height: 0px;
@@ -493,7 +493,7 @@ exports[`ActivityItem renders compact with animation correctly 1`] = `
         {
           animation-duration: .5s;
           animation-iteration-count: 1;
-          animation-name: css-94;
+          animation-name: keyframes from{transform:translateX(-10px);}to{transform:translateX(0);};
           flex: 1;
           overflow-x: hidden;
           padding-bottom: 0;