From e4b7f61e96598e44907215509db3561b67bc2707 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 18 Jun 2020 15:46:04 +0200 Subject: [PATCH] add snapshots for Emotion --- .../jest.config.js | 7 + .../package.json | 4 +- .../emotionRenderer-test.ts.snap | 27 ++++ .../test/emotionRenderer-test.ts | 139 ++++++++++++++++++ 4 files changed, 176 insertions(+), 1 deletion(-) create mode 100644 packages/fluentui/react-northstar-emotion-renderer/jest.config.js create mode 100644 packages/fluentui/react-northstar-emotion-renderer/test/__snapshots__/emotionRenderer-test.ts.snap create mode 100644 packages/fluentui/react-northstar-emotion-renderer/test/emotionRenderer-test.ts diff --git a/packages/fluentui/react-northstar-emotion-renderer/jest.config.js b/packages/fluentui/react-northstar-emotion-renderer/jest.config.js new file mode 100644 index 00000000000000..5a79abb5ccb2b4 --- /dev/null +++ b/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')(), + }), +}; diff --git a/packages/fluentui/react-northstar-emotion-renderer/package.json b/packages/fluentui/react-northstar-emotion-renderer/package.json index 865077d0370201..a23d60e8e67e6e 100644 --- a/packages/fluentui/react-northstar-emotion-renderer/package.json +++ b/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" diff --git a/packages/fluentui/react-northstar-emotion-renderer/test/__snapshots__/emotionRenderer-test.ts.snap b/packages/fluentui/react-northstar-emotion-renderer/test/__snapshots__/emotionRenderer-test.ts.snap new file mode 100644 index 00000000000000..6bdb86c0d4cb5d --- /dev/null +++ b/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;}`; diff --git a/packages/fluentui/react-northstar-emotion-renderer/test/emotionRenderer-test.ts b/packages/fluentui/react-northstar-emotion-renderer/test/emotionRenderer-test.ts new file mode 100644 index 00000000000000..466a2c964b8c37 --- /dev/null +++ b/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((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, + ); + }); +});