add snapshots for Emotion

packages/fluentui/react-northstar-emotion-renderer/jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  ...require('@uifabric/build/jest'),
+  name: 'react-northstar-emotion-renderer',
+  moduleNameMapper: require('lerna-alias').jest({
+    directory: require('@uifabric/build/monorepo/findGitRoot')(),
+  }),
+};

packages/fluentui/react-northstar-emotion-renderer/package.json

@@ -40,7 +40,9 @@
     "build": "gulp bundle:package:no-umd",
     "clean": "gulp bundle:package:clean",
     "lint": "eslint --ext .js,.ts,.tsx .",
-    "lint:fix": "yarn lint --fix"
+    "lint:fix": "yarn lint --fix",
+    "test": "gulp test",
+    "test:watch": "gulp test:watch"
   },
   "sideEffects": false,
   "types": "dist/es/index.d.ts"

packages/fluentui/react-northstar-emotion-renderer/test/__snapshots__/emotionRenderer-test.ts.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`emotionRenderer animations are not applied if animations are disabled 1`] = ``;
+
+exports[`emotionRenderer array returned by keyframe results in CSS fallback values 1`] = `
+;.fui-m7zzi0 {-webkit-animation-name: animation-avzz4x; animation-name: animation-avzz4x;}@-webkit-keyframes animation-avzz4x { 
+  0% {color: yellow;} 
+  100% {color: yellow;} 
+}@keyframes animation-avzz4x { 
+  0% {color: yellow;} 
+  100% {color: yellow;} 
+}
+`;
+
+exports[`emotionRenderer basic styles are rendered 1`] = `;.fui-tokvmb {color: red;}`;
+
+exports[`emotionRenderer keyframe colors are rendered 1`] = `
+;.fui-nb4c5h {-webkit-animation-name: animation-xikfch; animation-name: animation-xikfch; -webkit-animation-duration: 5s; animation-duration: 5s;}@-webkit-keyframes animation-xikfch { 
+  from {color: red;} 
+  to {color: blue;} 
+}@keyframes animation-xikfch { 
+  from {color: red;} 
+  to {color: blue;} 
+}
+`;
+
+exports[`emotionRenderer marginLeft is rendered into marginRight due to RTL 1`] = `;.rfui-1y6ic72 {margin-right: 10px;}`;

packages/fluentui/react-northstar-emotion-renderer/test/emotionRenderer-test.ts

@@ -0,0 +1,139 @@
+import { createEmotionRenderer } from '@fluentui/react-northstar-emotion-renderer';
+import { RendererParam } from '@fluentui/react-northstar-styles-renderer';
+import { ICSSInJSStyle } from '@fluentui/styles';
+
+expect.addSnapshotSerializer({
+  test(value) {
+    return value?.nodeName === '#document';
+  },
+  print(value: Document) {
+    function reduceRules(sheet: CSSStyleSheet | undefined) {
+      return Array.from(sheet?.cssRules || []).reduce<string>((acc, rule) => {
+        return `${acc}${rule.cssText}`;
+      }, '');
+    }
+
+    return Array.from(value.head.childNodes)
+      .map((node: HTMLStyleElement) => reduceRules((node?.sheet as unknown) as CSSStyleSheet))
+      .join(';');
+  },
+});
+
+const defaultRendererParam: RendererParam = {
+  direction: 'ltr',
+  disableAnimations: false,
+  displayName: 'Test',
+  sanitizeCss: false,
+};
+
+describe('emotionRenderer', () => {
+  beforeEach(() => {
+    document.head.innerHTML = 'u';
+  });
+
+  test('basic styles are rendered', () => {
+    createEmotionRenderer().renderRule({ color: 'red' }, defaultRendererParam);
+    expect(document).toMatchSnapshot();
+  });
+
+  // TODO: find out an issue with snapshots
+  //
+  // test('CSS fallback values are rendered', () => {
+  //   createEmotionRenderer().renderRule({ display: ['grid', 'ms-grid'] as any }, defaultRendererParam);
+  //   expect(document).toMatchSnapshot();
+  // });
+
+  test('keyframe colors are rendered', () => {
+    const styles: ICSSInJSStyle = {
+      animationName: {
+        keyframe: ({ fromColor, toColor }) => ({
+          from: {
+            color: fromColor,
+          },
+          to: {
+            color: toColor,
+          },
+        }),
+        params: {
+          fromColor: 'red',
+          toColor: 'blue',
+        },
+      },
+      animationDuration: '5s',
+    };
+
+    createEmotionRenderer().renderRule(styles, defaultRendererParam);
+    expect(document).toMatchSnapshot();
+  });
+
+  test('array returned by keyframe results in CSS fallback values', () => {
+    const styles: ICSSInJSStyle = {
+      animationName: {
+        keyframe: ({ steps }) => {
+          const obj = {};
+          steps.forEach((step: string) => {
+            (obj as any)[step] = { color: ['blue', 'red', 'yellow'] };
+          });
+          return obj;
+        },
+        params: { steps: ['0%', '100%'] },
+      },
+    };
+
+    createEmotionRenderer().renderRule(styles, defaultRendererParam);
+    expect(document).toMatchSnapshot();
+  });
+
+  test('animations are not applied if animations are disabled', () => {
+    const styles: ICSSInJSStyle = {
+      animationName: {
+        keyframe: {
+          from: {
+            transform: 'rotate(0deg)',
+          },
+          to: {
+            transform: 'rotate(360deg)',
+          },
+        },
+      },
+    };
+
+    createEmotionRenderer().renderRule(styles, { ...defaultRendererParam, disableAnimations: true });
+    expect(document).toMatchSnapshot();
+  });
+
+  test('marginLeft is rendered into marginRight due to RTL', () => {
+    createEmotionRenderer().renderRule({ marginLeft: '10px' }, { ...defaultRendererParam, direction: 'rtl' });
+    expect(document).toMatchSnapshot();
+  });
+
+  // TODO: Find a way to fix no-flip :(
+  //
+  // test('marginLeft is rendered into marginLeft due to RTL with `noFlip`', () => {
+  //   createEmotionRenderer().renderRule(
+  //     { marginLeft: '10px /* @noflip */' },
+  //     { ...defaultRendererParam, direction: 'rtl' },
+  //   );
+  //   expect(document).toMatchSnapshot();
+  // });
+
+  test('prefixes required styles', () => {
+    createEmotionRenderer().renderRule(
+      {
+        cursor: 'zoom-in',
+        display: 'flex',
+        filter: 'blur(5px)',
+        height: 'min-content',
+        position: 'sticky',
+        transition: 'width 2s, height 2s, background-color 2s, transform 2s',
+
+        ':hover': {
+          backgroundImage: 'image-set("cat.png" 1x, "cat-2x.png" 2x)',
+          display: 'inline-flex',
+          height: 'fit-content',
+        },
+      },
+      defaultRendererParam,
+    );
+  });
+});