jest-emotion - npm Package Compare versions

Comparing version 10.0.25 to 10.0.26

CHANGELOG.md

 # jest-emotion
 
+## 10.0.26
+
+### Patch Changes
+
+- [`b3c5b8de`](https://github.com/emotion-js/emotion/commit/b3c5b8de66e42dd2e6459862c9603f012ba01d54) [#1667](https://github.com/emotion-js/emotion/pull/1667) Thanks [@Andarist](https://github.com/Andarist)! - Revert improved support for Enzyme's shallow rendering - its release was an unforseen breaking change.
+
 ## 10.0.25
@@ -4,0 +10,0 @@

dist/jest-emotion.browser.cjs.js

@@ -39,2 +39,3 @@ 'use strict';
 }
+
 var RULE_TYPES = {
@@ -63,19 +64,11 @@ media: 'media',
 
-function findNodeWithClassName(node) {
-  // Find the first node with a className prop
-  var found = node.findWhere(isTagWithClassName);
-  return found.length ? found.first() : null;
-}
+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 getClassNameProp(node) {
-  return node && node.prop('className') || '';
+  var components = actualComponent.findWhere(isTagWithClassName);
+  var classes = components.length && components.first().prop('className');
+  return getClassNames(selectors, classes);
 }
 
-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) {
@@ -411,23 +404,7 @@ 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 _ref4 = _temp === void 0 ? {} : _temp,
-      classNameReplacer = _ref4.classNameReplacer,
-      _ref4$DOMElements = _ref4.DOMElements,
-      DOMElements = _ref4$DOMElements === void 0 ? true : _ref4$DOMElements;
+  var _ref3 = _temp === void 0 ? {} : _temp,
+      classNameReplacer = _ref3.classNameReplacer,
+      _ref3$DOMElements = _ref3.DOMElements,
+      DOMElements = _ref3$DOMElements === void 0 ? true : _ref3$DOMElements;
 
@@ -437,26 +414,4 @@ var cache = new WeakSet();
   function print(val, printer) {
-    var elements = getStyleElements();
-    var keys = getKeys(elements);
-
     if (isEmotionCssPropEnzymeElement(val)) {
-      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');
-      }
+      return val.children.map(printer).join('\n');
     }
@@ -473,2 +428,3 @@
     var classNames = getClassNamesFromNodes(nodes);
+    var elements = getStyleElements();
     var styles = getPrettyStylesFromClassNames(classNames, elements);
@@ -478,2 +434,3 @@ nodes.forEach(cache.add, cache);
     nodes.forEach(cache["delete"], cache);
+    var keys = getKeys(elements);
     return replaceClassNames(classNames, styles, printedVal, keys, classNameReplacer);
@@ -480,0 +437,0 @@ }

dist/jest-emotion.cjs.dev.js

@@ -39,2 +39,3 @@ 'use strict';
 }
+
 var RULE_TYPES = {
@@ -63,19 +64,11 @@ media: 'media',
 
-function findNodeWithClassName(node) {
-  // Find the first node with a className prop
-  var found = node.findWhere(isTagWithClassName);
-  return found.length ? found.first() : null;
-}
+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 getClassNameProp(node) {
-  return node && node.prop('className') || '';
+  var components = actualComponent.findWhere(isTagWithClassName);
+  var classes = components.length && components.first().prop('className');
+  return getClassNames(selectors, classes);
 }
 
-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) {
@@ -411,23 +404,7 @@ 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 _ref4 = _temp === void 0 ? {} : _temp,
-      classNameReplacer = _ref4.classNameReplacer,
-      _ref4$DOMElements = _ref4.DOMElements,
-      DOMElements = _ref4$DOMElements === void 0 ? true : _ref4$DOMElements;
+  var _ref3 = _temp === void 0 ? {} : _temp,
+      classNameReplacer = _ref3.classNameReplacer,
+      _ref3$DOMElements = _ref3.DOMElements,
+      DOMElements = _ref3$DOMElements === void 0 ? true : _ref3$DOMElements;
 
@@ -437,26 +414,4 @@ var cache = new WeakSet();
   function print(val, printer) {
-    var elements = getStyleElements();
-    var keys = getKeys(elements);
-
     if (isEmotionCssPropEnzymeElement(val)) {
-      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');
-      }
+      return val.children.map(printer).join('\n');
     }
@@ -473,2 +428,3 @@
     var classNames = getClassNamesFromNodes(nodes);
+    var elements = getStyleElements();
     var styles = getPrettyStylesFromClassNames(classNames, elements);
@@ -478,2 +434,3 @@ nodes.forEach(cache.add, cache);
     nodes.forEach(cache["delete"], cache);
+    var keys = getKeys(elements);
     return replaceClassNames(classNames, styles, printedVal, keys, classNameReplacer);
@@ -480,0 +437,0 @@ }

dist/jest-emotion.cjs.prod.js

@@ -56,13 +56,5 @@ "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) {
-  return getClassNames(selectors, getClassNameProp(findNodeWithClassName(shouldDive(node) ? node.dive().dive() : node)));
+  var components = (shouldDive(node) ? node.dive() : node).findWhere(isTagWithClassName);
+  return getClassNames(selectors, components.length && components.first().prop("className"));
 }
@@ -291,17 +283,4 @@
 
-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 _ref4 = void 0 === _temp ? {} : _temp, classNameReplacer = _ref4.classNameReplacer, _ref4$DOMElements = _ref4.DOMElements, DOMElements = void 0 === _ref4$DOMElements || _ref4$DOMElements, cache = new WeakSet();
+  var _ref3 = void 0 === _temp ? {} : _temp, classNameReplacer = _ref3.classNameReplacer, _ref3$DOMElements = _ref3.DOMElements, DOMElements = void 0 === _ref3$DOMElements || _ref3$DOMElements, cache = new WeakSet();
   return {
@@ -312,20 +291,3 @@ test: function(val) {
     print: function(val, printer) {
-      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 (isEmotionCssPropEnzymeElement(val)) return val.children.map(printer).join("\n");
       if (isEmotionCssPropElementType(val)) return printer(_objectSpread({}, val, {
@@ -335,6 +297,8 @@ props: filterEmotionProps(val.props),
       }));
-      var nodes = getNodes(val), classNames = getClassNamesFromNodes(nodes), styles = getPrettyStylesFromClassNames(classNames, elements);
+      var nodes = getNodes(val), classNames = getClassNamesFromNodes(nodes), elements = getStyleElements(), styles = getPrettyStylesFromClassNames(classNames, elements);
       nodes.forEach(cache.add, cache);
       var printedVal = printer(val);
-      return nodes.forEach(cache.delete, cache), replaceClassNames(classNames, styles, printedVal, keys, classNameReplacer);
+      nodes.forEach(cache.delete, cache);
+      var keys = getKeys(elements);
+      return replaceClassNames(classNames, styles, printedVal, keys, classNameReplacer);
     }
@@ -341,0 +305,0 @@ };

package.json

 {
   "name": "jest-emotion",
-  "version": "10.0.25",
+  "version": "10.0.26",
   "description": "Jest utilities for emotion",
@@ -5,0 +5,0 @@ "main": "dist/jest-emotion.cjs.js",

src/index.js

@@ -12,4 +12,3 @@ // @flow
   getStyleElements,
-  getKeys,
-  flatMap
+  getKeys
 } from './utils'
@@ -74,15 +73,2 @@
 
-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({
@@ -94,27 +80,4 @@ classNameReplacer,
   function print(val: *, printer: Function) {
-    let elements = getStyleElements()
-    let keys = getKeys(elements)
     if (isEmotionCssPropEnzymeElement(val)) {
-      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')
-      }
+      return val.children.map(printer).join('\n')
     }
@@ -130,2 +93,3 @@ if (isEmotionCssPropElementType(val)) {
     const classNames = getClassNamesFromNodes(nodes)
+    let elements = getStyleElements()
     const styles = getPrettyStylesFromClassNames(classNames, elements)
@@ -135,2 +99,3 @@ nodes.forEach(cache.add, cache)
     nodes.forEach(cache.delete, cache)
+    let keys = getKeys(elements)
     return replaceClassNames(
@@ -137,0 +102,0 @@ classNames,

src/utils.js

 // @flow
 
-export function flatMap<T, S>(arr: T[], iteratee: (arg: T) => S[] | S): S[] {
+function flatMap(arr, iteratee) {
   return [].concat(...arr.map(iteratee))
@@ -28,21 +28,12 @@ }
 
-function findNodeWithClassName(node) {
+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
   // Find the first node with a className prop
-  const found = node.findWhere(isTagWithClassName)
-  return found.length ? found.first() : null
-}
+  const components = actualComponent.findWhere(isTagWithClassName)
+  const classes = components.length && components.first().prop('className')
 
-function getClassNameProp(node) {
-  return (node && node.prop('className')) || ''
+  return getClassNames(selectors, classes)
 }
 
-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) {
@@ -146,3 +137,3 @@ const classes = node.attr('class')
 
-  flatMap(elements, getElementRules).forEach((rule: string) => {
+  flatMap(elements, getElementRules).forEach(rule => {
     if (selectorPattern.test(rule)) {
@@ -149,0 +140,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

Worsened metrics

Total package byte prevSize

63576

decreased by-7.66%

Lines of code

1528

decreased by-8.83%

No dependency changes