jest-emotion - npm Package Compare versions

Comparing version 10.0.17 to 10.0.25

CHANGELOG.md

 # jest-emotion
 
+## 10.0.25
+
+### Patch Changes
+
+- [`858c6e70`](https://github.com/emotion-js/emotion/commit/858c6e70e2aa83d159dba00af16f1e34a6d93fd0) [#1648](https://github.com/emotion-js/emotion/pull/1648) Thanks [@ajs139](https://github.com/ajs139)! - Improve support for Enzyme's shallow rendering.
+
 ## 10.0.17
@@ -4,0 +10,0 @@

dist/jest-emotion.browser.cjs.js

@@ -39,3 +39,2 @@ 'use strict';
 }
-
 var RULE_TYPES = {
@@ -64,11 +63,19 @@ media: 'media',
 
-function getClassNamesFromEnzyme(selectors, node) {
-  // We need to dive if we have selected a styled child from a shallow render
-  var actualComponent = shouldDive(node) ? node.dive() : node; // Find the first node with a className prop
+function findNodeWithClassName(node) {
+  // Find the first node with a className prop
+  var found = node.findWhere(isTagWithClassName);
+  return found.length ? found.first() : null;
+}
 
-  var components = actualComponent.findWhere(isTagWithClassName);
-  var classes = components.length && components.first().prop('className');
-  return getClassNames(selectors, classes);
+function getClassNameProp(node) {
+  return node && node.prop('className') || '';
 }
 
+function getClassNamesFromEnzyme(selectors, node) {
+  // We need to dive in to get the className if we have a styled element from a shallow render
+  var isShallow = shouldDive(node);
+  var nodeWithClassName = findNodeWithClassName(isShallow ? node.dive().dive() : node);
+  return getClassNames(selectors, getClassNameProp(nodeWithClassName));
+}
+
 function getClassNamesFromCheerio(selectors, node) {
@@ -404,7 +411,23 @@ var classes = node.attr('class');
 
+function hasIntersection(left, right) {
+  return left.some(function (value) {
+    return right.includes(value);
+  });
+}
+
+function isShallowEnzymeElement(element, classNames) {
+  var delimiter = ' ';
+  var childClassNames = flatMap(element.children || [], function (_ref3) {
+    var _ref3$props = _ref3.props,
+        props = _ref3$props === void 0 ? {} : _ref3$props;
+    return (props.className || '').split(delimiter);
+  }).filter(Boolean);
+  return !hasIntersection(classNames, childClassNames);
+}
+
 function createSerializer(_temp) {
-  var _ref3 = _temp === void 0 ? {} : _temp,
-      classNameReplacer = _ref3.classNameReplacer,
-      _ref3$DOMElements = _ref3.DOMElements,
-      DOMElements = _ref3$DOMElements === void 0 ? true : _ref3$DOMElements;
+  var _ref4 = _temp === void 0 ? {} : _temp,
+      classNameReplacer = _ref4.classNameReplacer,
+      _ref4$DOMElements = _ref4.DOMElements,
+      DOMElements = _ref4$DOMElements === void 0 ? true : _ref4$DOMElements;
 
@@ -414,4 +437,26 @@ var cache = new WeakSet();
   function print(val, printer) {
+    var elements = getStyleElements();
+    var keys = getKeys(elements);
+
     if (isEmotionCssPropEnzymeElement(val)) {
-      return val.children.map(printer).join('\n');
+      var cssClassNames = (val.props.css.name || '').split(' ');
+      var expectedClassNames = flatMap(cssClassNames, function (cssClassName) {
+        return keys.map(function (key) {
+          return key + "-" + cssClassName;
+        });
+      }); // if this is a shallow element, we need to manufacture the className
+      // since the underlying component is not rendered.
+
+      if (isShallowEnzymeElement(val, expectedClassNames)) {
+        var _className = [val.props.className].concat(expectedClassNames).filter(Boolean).join(' ');
+
+        return printer(_objectSpread({}, val, {
+          props: filterEmotionProps(_objectSpread({}, val.props, {
+            className: _className
+          })),
+          type: val.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__
+        }));
+      } else {
+        return val.children.map(printer).join('\n');
+      }
     }
@@ -428,3 +473,2 @@
     var classNames = getClassNamesFromNodes(nodes);
-    var elements = getStyleElements();
     var styles = getPrettyStylesFromClassNames(classNames, elements);
@@ -434,3 +478,2 @@ nodes.forEach(cache.add, cache);
     nodes.forEach(cache["delete"], cache);
-    var keys = getKeys(elements);
     return replaceClassNames(classNames, styles, printedVal, keys, classNameReplacer);
@@ -437,0 +480,0 @@ }

dist/jest-emotion.cjs.dev.js

@@ -39,3 +39,2 @@ 'use strict';
 }
-
 var RULE_TYPES = {
@@ -64,11 +63,19 @@ media: 'media',
 
-function getClassNamesFromEnzyme(selectors, node) {
-  // We need to dive if we have selected a styled child from a shallow render
-  var actualComponent = shouldDive(node) ? node.dive() : node; // Find the first node with a className prop
+function findNodeWithClassName(node) {
+  // Find the first node with a className prop
+  var found = node.findWhere(isTagWithClassName);
+  return found.length ? found.first() : null;
+}
 
-  var components = actualComponent.findWhere(isTagWithClassName);
-  var classes = components.length && components.first().prop('className');
-  return getClassNames(selectors, classes);
+function getClassNameProp(node) {
+  return node && node.prop('className') || '';
 }
 
+function getClassNamesFromEnzyme(selectors, node) {
+  // We need to dive in to get the className if we have a styled element from a shallow render
+  var isShallow = shouldDive(node);
+  var nodeWithClassName = findNodeWithClassName(isShallow ? node.dive().dive() : node);
+  return getClassNames(selectors, getClassNameProp(nodeWithClassName));
+}
+
 function getClassNamesFromCheerio(selectors, node) {
@@ -404,7 +411,23 @@ var classes = node.attr('class');
 
+function hasIntersection(left, right) {
+  return left.some(function (value) {
+    return right.includes(value);
+  });
+}
+
+function isShallowEnzymeElement(element, classNames) {
+  var delimiter = ' ';
+  var childClassNames = flatMap(element.children || [], function (_ref3) {
+    var _ref3$props = _ref3.props,
+        props = _ref3$props === void 0 ? {} : _ref3$props;
+    return (props.className || '').split(delimiter);
+  }).filter(Boolean);
+  return !hasIntersection(classNames, childClassNames);
+}
+
 function createSerializer(_temp) {
-  var _ref3 = _temp === void 0 ? {} : _temp,
-      classNameReplacer = _ref3.classNameReplacer,
-      _ref3$DOMElements = _ref3.DOMElements,
-      DOMElements = _ref3$DOMElements === void 0 ? true : _ref3$DOMElements;
+  var _ref4 = _temp === void 0 ? {} : _temp,
+      classNameReplacer = _ref4.classNameReplacer,
+      _ref4$DOMElements = _ref4.DOMElements,
+      DOMElements = _ref4$DOMElements === void 0 ? true : _ref4$DOMElements;
 
@@ -414,4 +437,26 @@ var cache = new WeakSet();
   function print(val, printer) {
+    var elements = getStyleElements();
+    var keys = getKeys(elements);
+
     if (isEmotionCssPropEnzymeElement(val)) {
-      return val.children.map(printer).join('\n');
+      var cssClassNames = (val.props.css.name || '').split(' ');
+      var expectedClassNames = flatMap(cssClassNames, function (cssClassName) {
+        return keys.map(function (key) {
+          return key + "-" + cssClassName;
+        });
+      }); // if this is a shallow element, we need to manufacture the className
+      // since the underlying component is not rendered.
+
+      if (isShallowEnzymeElement(val, expectedClassNames)) {
+        var _className = [val.props.className].concat(expectedClassNames).filter(Boolean).join(' ');
+
+        return printer(_objectSpread({}, val, {
+          props: filterEmotionProps(_objectSpread({}, val.props, {
+            className: _className
+          })),
+          type: val.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__
+        }));
+      } else {
+        return val.children.map(printer).join('\n');
+      }
     }
@@ -428,3 +473,2 @@
     var classNames = getClassNamesFromNodes(nodes);
-    var elements = getStyleElements();
     var styles = getPrettyStylesFromClassNames(classNames, elements);
@@ -434,3 +478,2 @@ nodes.forEach(cache.add, cache);
     nodes.forEach(cache["delete"], cache);
-    var keys = getKeys(elements);
     return replaceClassNames(classNames, styles, printedVal, keys, classNameReplacer);
@@ -437,0 +480,0 @@ }

dist/jest-emotion.cjs.prod.js

@@ -56,5 +56,13 @@ "use strict";
 
+function findNodeWithClassName(node) {
+  var found = node.findWhere(isTagWithClassName);
+  return found.length ? found.first() : null;
+}
+
+function getClassNameProp(node) {
+  return node && node.prop("className") || "";
+}
+
 function getClassNamesFromEnzyme(selectors, node) {
-  var components = (shouldDive(node) ? node.dive() : node).findWhere(isTagWithClassName);
-  return getClassNames(selectors, components.length && components.first().prop("className"));
+  return getClassNames(selectors, getClassNameProp(findNodeWithClassName(shouldDive(node) ? node.dive().dive() : node)));
 }
@@ -283,4 +291,17 @@
 
+function hasIntersection(left, right) {
+  return left.some(function(value) {
+    return right.includes(value);
+  });
+}
+
+function isShallowEnzymeElement(element, classNames) {
+  return !hasIntersection(classNames, flatMap(element.children || [], function(_ref3) {
+    var _ref3$props = _ref3.props;
+    return ((void 0 === _ref3$props ? {} : _ref3$props).className || "").split(" ");
+  }).filter(Boolean));
+}
+
 function createSerializer(_temp) {
-  var _ref3 = void 0 === _temp ? {} : _temp, classNameReplacer = _ref3.classNameReplacer, _ref3$DOMElements = _ref3.DOMElements, DOMElements = void 0 === _ref3$DOMElements || _ref3$DOMElements, cache = new WeakSet();
+  var _ref4 = void 0 === _temp ? {} : _temp, classNameReplacer = _ref4.classNameReplacer, _ref4$DOMElements = _ref4.DOMElements, DOMElements = void 0 === _ref4$DOMElements || _ref4$DOMElements, cache = new WeakSet();
   return {
@@ -291,3 +312,20 @@ test: function(val) {
     print: function(val, printer) {
-      if (isEmotionCssPropEnzymeElement(val)) return val.children.map(printer).join("\n");
+      var elements = getStyleElements(), keys = getKeys(elements);
+      if (isEmotionCssPropEnzymeElement(val)) {
+        var expectedClassNames = flatMap((val.props.css.name || "").split(" "), function(cssClassName) {
+          return keys.map(function(key) {
+            return key + "-" + cssClassName;
+          });
+        });
+        if (isShallowEnzymeElement(val, expectedClassNames)) {
+          var _className = [ val.props.className ].concat(expectedClassNames).filter(Boolean).join(" ");
+          return printer(_objectSpread({}, val, {
+            props: filterEmotionProps(_objectSpread({}, val.props, {
+              className: _className
+            })),
+            type: val.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__
+          }));
+        }
+        return val.children.map(printer).join("\n");
+      }
       if (isEmotionCssPropElementType(val)) return printer(_objectSpread({}, val, {
@@ -297,8 +335,6 @@ props: filterEmotionProps(val.props),
       }));
-      var nodes = getNodes(val), classNames = getClassNamesFromNodes(nodes), elements = getStyleElements(), styles = getPrettyStylesFromClassNames(classNames, elements);
+      var nodes = getNodes(val), classNames = getClassNamesFromNodes(nodes), styles = getPrettyStylesFromClassNames(classNames, elements);
       nodes.forEach(cache.add, cache);
       var printedVal = printer(val);
-      nodes.forEach(cache.delete, cache);
-      var keys = getKeys(elements);
-      return replaceClassNames(classNames, styles, printedVal, keys, classNameReplacer);
+      return nodes.forEach(cache.delete, cache), replaceClassNames(classNames, styles, printedVal, keys, classNameReplacer);
     }
@@ -305,0 +341,0 @@ };

package.json

 {
   "name": "jest-emotion",
-  "version": "10.0.17",
+  "version": "10.0.25",
   "description": "Jest utilities for emotion",
@@ -52,2 +52,2 @@ "main": "dist/jest-emotion.cjs.js",
   }
-}
+}

src/index.js

@@ -12,3 +12,4 @@ // @flow
   getStyleElements,
-  getKeys
+  getKeys,
+  flatMap
 } from './utils'
@@ -73,2 +74,15 @@
 
+function hasIntersection(left: any[], right: any[]) {
+  return left.some(value => right.includes(value))
+}
+
+function isShallowEnzymeElement(element, classNames) {
+  const delimiter = ' '
+  let childClassNames = flatMap(element.children || [], ({ props = {} }) =>
+    (props.className || '').split(delimiter)
+  ).filter(Boolean)
+
+  return !hasIntersection(classNames, childClassNames)
+}
+
 export function createSerializer({
@@ -80,4 +94,27 @@ classNameReplacer,
   function print(val: *, printer: Function) {
+    let elements = getStyleElements()
+    let keys = getKeys(elements)
     if (isEmotionCssPropEnzymeElement(val)) {
-      return val.children.map(printer).join('\n')
+      let cssClassNames = (val.props.css.name || '').split(' ')
+      let expectedClassNames = flatMap(cssClassNames, cssClassName =>
+        keys.map(key => `${key}-${cssClassName}`)
+      )
+      // if this is a shallow element, we need to manufacture the className
+      // since the underlying component is not rendered.
+      if (isShallowEnzymeElement(val, expectedClassNames)) {
+        let className = [val.props.className]
+          .concat(expectedClassNames)
+          .filter(Boolean)
+          .join(' ')
+        return printer({
+          ...val,
+          props: filterEmotionProps({
+            ...val.props,
+            className
+          }),
+          type: val.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__
+        })
+      } else {
+        return val.children.map(printer).join('\n')
+      }
     }
@@ -93,3 +130,2 @@ if (isEmotionCssPropElementType(val)) {
     const classNames = getClassNamesFromNodes(nodes)
-    let elements = getStyleElements()
     const styles = getPrettyStylesFromClassNames(classNames, elements)
@@ -99,3 +135,2 @@ nodes.forEach(cache.add, cache)
     nodes.forEach(cache.delete, cache)
-    let keys = getKeys(elements)
     return replaceClassNames(
@@ -102,0 +137,0 @@ classNames,

src/utils.js

 // @flow
 
-function flatMap(arr, iteratee) {
+export function flatMap<T, S>(arr: T[], iteratee: (arg: T) => S[] | S): S[] {
   return [].concat(...arr.map(iteratee))
@@ -28,12 +28,21 @@ }
 
-function getClassNamesFromEnzyme(selectors, node) {
-  // We need to dive if we have selected a styled child from a shallow render
-  const actualComponent = shouldDive(node) ? node.dive() : node
+function findNodeWithClassName(node) {
   // Find the first node with a className prop
-  const components = actualComponent.findWhere(isTagWithClassName)
-  const classes = components.length && components.first().prop('className')
+  const found = node.findWhere(isTagWithClassName)
+  return found.length ? found.first() : null
+}
 
-  return getClassNames(selectors, classes)
+function getClassNameProp(node) {
+  return (node && node.prop('className')) || ''
 }
 
+function getClassNamesFromEnzyme(selectors, node) {
+  // We need to dive in to get the className if we have a styled element from a shallow render
+  let isShallow = shouldDive(node)
+  let nodeWithClassName = findNodeWithClassName(
+    isShallow ? node.dive().dive() : node
+  )
+  return getClassNames(selectors, getClassNameProp(nodeWithClassName))
+}
+
 function getClassNamesFromCheerio(selectors, node) {
@@ -137,3 +146,3 @@ const classes = node.attr('class')
 
-  flatMap(elements, getElementRules).forEach(rule => {
+  flatMap(elements, getElementRules).forEach((rule: string) => {
     if (selectorPattern.test(rule)) {
@@ -140,0 +149,0 @@ styles += rule

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

68848

increased by9.38%

Lines of code

1676

increased by9.69%

No dependency changes