jest-styled-components - npm Package Compare versions

Comparing version 7.0.4 to 7.0.5

package.json

 {
   "name": "jest-styled-components",
-  "version": "7.0.4",
+  "version": "7.0.5",
   "description": "Jest utilities for Styled Components",
@@ -17,8 +17,7 @@ "main": "./src/index.js",
   "scripts": {
-    "test": "yarn test:web && yarn test:native && yarn test:preact && yarn test:ts",
-    "test:web": "jest",
+    "test": "yarn test:web && yarn test:native && yarn test:preact",
+    "test:web": "jest --color",
     "test:web:watch": "jest --watch",
-    "test:native": "jest --config .jest.native.json",
-    "test:preact": "jest --config .jest.preact.json",
-    "test:ts": "tsc --strict ./typings/index.d.ts"
+    "test:native": "jest --color --config .jest.native.json",
+    "test:preact": "jest --color --config .jest.preact.json"
   },
@@ -34,3 +33,3 @@ "devDependencies": {
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.8.0",
+    "babel-jest": "^26.0.0",
     "enzyme": "^3.6.0",
@@ -42,8 +41,9 @@ "enzyme-adapter-preact-pure": "^2.2.0",
     "eslint-config-prettier": "^6.5.0",
+    "eslint-plugin-prettier": "^3.4.0",
     "husky": "^3.0.9",
-    "jest": "^24.8.0",
+    "jest": "^26.0.0",
     "lint-staged": "^9.4.2",
     "preact": "^10.0.0-beta.2",
     "preact-render-to-json": "^3.6.6",
-    "prettier": "^1.18.2",
+    "prettier": "^2.3.2",
     "react": "^16.8.0",
@@ -54,7 +54,6 @@ "react-dom": "^16.8.0",
     "react-test-renderer": "^16.8.0",
-    "styled-components": "^5.0.0",
-    "typescript": "^3.0.3"
+    "styled-components": "^5.0.0"
   },
   "dependencies": {
-    "css": "^2.2.4"
+    "css": "^3.0.0"
   },
@@ -89,3 +88,6 @@ "peerDependencies": {
     ]
+  },
+  "engines": {
+    "node": ">= 12"
   }
 }

src/native/toHaveStyleRule.js

@@ -1,5 +0,5 @@
-const { matcherTest, buildReturnMessage } = require('../utils')
+const { matcherTest, buildReturnMessage } = require('../utils');
 
 function toHaveStyleRule(component, property, expected) {
-  const styles = component.props.style.filter(x => x)
+  const styles = component.props.style.filter((x) => x);
 
@@ -9,5 +9,3 @@ /**
    */
-  const camelCasedProperty = property.replace(/-(\w)/, (_, match) =>
-    match.toUpperCase()
-  )
+  const camelCasedProperty = property.replace(/-(\w)/, (_, match) => match.toUpperCase());
 
@@ -18,8 +16,5 @@ /**
    */
-  const mergedStyles = styles.reduce((acc, item) => (Object.assign({}, acc, item )), {})
-  const received = mergedStyles[camelCasedProperty]
-  const pass =
-    !received && !expected && this.isNot
-      ? false
-      : matcherTest(received, expected)
+  const mergedStyles = styles.reduce((acc, item) => Object.assign({}, acc, item), {});
+  const received = mergedStyles[camelCasedProperty];
+  const pass = !received && !expected && this.isNot ? false : matcherTest(received, expected);
 
@@ -29,5 +24,5 @@ return {
     message: buildReturnMessage(this.utils, pass, property, received, expected),
-  }
+  };
 }
 
-module.exports = toHaveStyleRule
+module.exports = toHaveStyleRule;

src/styleSheetSerializer.js

@@ -12,3 +12,3 @@ const css = require('css');
   if (node.children) {
-    Array.from(node.children).forEach(child => getNodes(child, nodes));
+    Array.from(node.children).forEach((child) => getNodes(child, nodes));
   }
@@ -19,6 +19,6 @@
 
-const markNodes = nodes => nodes.forEach(node => (node[KEY] = true));
+const markNodes = (nodes) => nodes.forEach((node) => (node[KEY] = true));
 
-const getClassNamesFromDOM = node => Array.from(node.classList);
-const getClassNamesFromProps = node => {
+const getClassNamesFromDOM = (node) => Array.from(node.classList);
+const getClassNamesFromProps = (node) => {
   const classNameProp = node.props && (node.props.class || node.props.className);
@@ -33,3 +33,3 @@
 
-const getClassNames = nodes =>
+const getClassNames = (nodes) =>
   nodes.reduce((classNames, node) => {
@@ -44,3 +44,3 @@ let newClassNames = null;
 
-    newClassNames.forEach(className => classNames.add(className));
+    newClassNames.forEach((className) => classNames.add(className));
 
@@ -50,14 +50,24 @@ return classNames;
 
-const filterClassNames = (classNames, hashes) => classNames.filter(className => hashes.includes(className));
-const filterUnreferencedClassNames = (classNames, hashes) => classNames.filter(className => className.startsWith('sc-') && !hashes.includes(className));
+const filterClassNames = (classNames, hashes) => classNames.filter((className) => hashes.includes(className));
+const filterUnreferencedClassNames = (classNames, hashes) =>
+  classNames.filter((className) => className.startsWith('sc-') && !hashes.includes(className));
 
 const includesClassNames = (classNames, selectors) =>
-  classNames.some(className => selectors.some(selector => selector.includes(className)));
+  classNames.some((className) => selectors.some((selector) => selector.includes(className)));
 
-const filterRules = classNames => rule =>
-  rule.type === 'rule' && includesClassNames(classNames, rule.selectors) && rule.declarations.length;
+const includesUnknownClassNames = (classNames, selectors) =>
+  !selectors
+    .flatMap((selector) => selector.split(' '))
+    .filter((chunk) => chunk.includes('sc-'))
+    .every((chunk) => classNames.some((className) => chunk.includes(className)));
 
+const filterRules = (classNames) => (rule) =>
+  rule.type === 'rule' &&
+  !includesUnknownClassNames(classNames, rule.selectors) &&
+  includesClassNames(classNames, rule.selectors) &&
+  rule.declarations.length;
+
 const getAtRules = (ast, filter) =>
   ast.stylesheet.rules
-    .filter(rule => rule.type === 'media' || rule.type === 'supports')
+    .filter((rule) => rule.type === 'media' || rule.type === 'supports')
     .reduce((acc, atRule) => {
@@ -69,3 +79,3 @@ atRule.rules = atRule.rules.filter(filter);
 
-const getStyle = classNames => {
+const getStyle = (classNames) => {
   const ast = getCSS();
@@ -86,6 +96,6 @@ const filter = filterRules(classNames);
 
-  const selectors = rules.map(rule => rule.selectors);
+  const selectors = rules.map((rule) => rule.selectors);
   const classNamesIncludingFromSelectors = new Set(classNames);
-  const addHashFromSelectorListToClassNames = hash =>
-    selectors.forEach(selectorList => selectorList[0].includes(hash) && classNamesIncludingFromSelectors.add(hash));
+  const addHashFromSelectorListToClassNames = (hash) =>
+    selectors.forEach((selectorList) => selectorList[0].includes(hash) && classNamesIncludingFromSelectors.add(hash));
 
@@ -99,8 +109,7 @@ hashes.forEach(addHashFromSelectorListToClassNames);
   classNames
-    .filter(className => style.includes(className))
+    .filter((className) => style.includes(className))
     .reduce((acc, className, index) => acc.replace(new RegExp(className, 'g'), `c${index++}`), result);
 
 const stripUnreferencedClassNames = (result, classNames) =>
-    classNames
-      .reduce((acc, className) => acc.replace(new RegExp(`${className}\\s?`,'g'), ''), result);
+  classNames.reduce((acc, className) => acc.replace(new RegExp(`${className}\\s?`, 'g'), ''), result);
 
@@ -107,0 +116,0 @@ const replaceHashes = (result, hashes) =>

src/toHaveStyleRule.js

@@ -1,34 +0,31 @@
-const { getCSS, matcherTest, buildReturnMessage } = require("./utils");
+const { getCSS, matcherTest, buildReturnMessage } = require('./utils');
 
-const shouldDive = node =>
-  typeof node.dive === "function" && typeof node.type() !== "string";
+const shouldDive = (node) => typeof node.dive === 'function' && typeof node.type() !== 'string';
 
-const isTagWithClassName = node =>
-  node.exists() && node.prop("className") && typeof node.type() === "string";
+const isTagWithClassName = (node) => node.exists() && node.prop('className') && typeof node.type() === 'string';
 
-const isStyledClass = className =>
-  /^(\w+(-|_))?sc-/.test(className);
+const isStyledClass = (className) => /^(\w+(-|_))?sc-/.test(className);
 
-const hasClassName = node =>
-  node.length > 0
-  && typeof node.props === "function"
-  && node.prop("className")
-  && isStyledClass(node.prop("className"))
+const hasClassName = (node) =>
+  node.length > 0 &&
+  typeof node.props === 'function' &&
+  node.prop('className') &&
+  isStyledClass(node.prop('className'));
 
-const getClassNames = received => {
+const getClassNames = (received) => {
   let className;
 
   if (received) {
-    if (received.$$typeof === Symbol.for("react.test.json")) {
+    if (received.$$typeof === Symbol.for('react.test.json')) {
       className = received.props.className || received.props.class;
     } else if (hasClassName(received)) {
-      className = received.prop("className");
-    } else if (typeof received.exists === "function" && received.exists()) {
+      className = received.prop('className');
+    } else if (typeof received.exists === 'function' && received.exists()) {
       const tree = shouldDive(received) ? received.dive() : received;
       const components = tree.findWhere(isTagWithClassName);
       if (components.length) {
-        className = components.first().prop("className");
+        className = components.first().prop('className');
       }
     } else if (global.Element && received instanceof global.Element) {
-      className = Array.from(received.classList).join(" ");
+      className = Array.from(received.classList).join(' ');
     }
@@ -40,4 +37,3 @@ }
 
-const hasAtRule = options =>
-  Object.keys(options).some(option => ["media", "supports"].includes(option));
+const hasAtRule = (options) => Object.keys(options).some((option) => ['media', 'supports'].includes(option));
 
@@ -48,10 +44,6 @@ const getAtRules = (ast, options) => {
   return Object.keys(options)
-    .map(option =>
+    .map((option) =>
       ast.stylesheet.rules
-        .filter(
-          rule =>
-            rule.type === option &&
-            rule[option] === options[option].replace(mediaRegex, "$1$2")
-        )
-        .map(rule => rule.rules)
+        .filter((rule) => rule.type === option && rule[option] === options[option].replace(mediaRegex, '$1$2'))
+        .map((rule) => rule.rules)
         .reduce((acc, rules) => acc.concat(rules), [])
@@ -62,8 +54,10 @@ )
 
-const getModifiedClassName = (className, staticClassName, modifier = "") => {
+const normalizeQuotations = (input) => input.replace(/['"]/g, '"');
+
+const getModifiedClassName = (className, staticClassName, modifier = '') => {
   const classNameSelector = `.${className}`;
-  let prefix = "";
+  let prefix = '';
 
   modifier = modifier.trim();
-  if (modifier.includes("&")) {
+  if (modifier.includes('&')) {
     modifier = modifier
@@ -77,4 +71,4 @@ // & combined with other selectors and not a precedence boost should be replaced with the static className, but the first instance should be the dynamic className
   const first = modifier[0];
-  if (first !== ":" && first !== "[") {
-    prefix += " ";
+  if (first !== ':' && first !== '[') {
+    prefix += ' ';
   }
@@ -86,12 +80,8 @@
 const hasClassNames = (classNames, selectors, options) => {
-  const staticClassNames = classNames.filter(x => isStyledClass(x));
+  const staticClassNames = classNames.filter((x) => isStyledClass(x));
 
-  return classNames.some(className =>
-    staticClassNames.some(staticClassName =>
+  return classNames.some((className) =>
+    staticClassNames.some((staticClassName) =>
       selectors.includes(
-        getModifiedClassName(
-          className,
-          staticClassName,
-          options.modifier
-        ).replace(/['"]/g, '"')
+        normalizeQuotations(getModifiedClassName(className, staticClassName, options.modifier).replace(/['"]/g, '"'))
       )
@@ -103,20 +93,16 @@ )
 const getRules = (ast, classNames, options) => {
-  const rules = hasAtRule(options)
-    ? getAtRules(ast, options)
-    : ast.stylesheet.rules;
+  const rules = (hasAtRule(options) ? getAtRules(ast, options) : ast.stylesheet.rules).map((rule) => ({
+    ...rule,
+    selectors: Array.isArray(rule.selectors) ? rule.selectors.map(normalizeQuotations) : rule.selectors,
+  }));
 
-  return rules.filter(
-    rule =>
-      rule.type === "rule" && hasClassNames(classNames, rule.selectors, options)
-  );
+  return rules.filter((rule) => rule.type === 'rule' && hasClassNames(classNames, rule.selectors, options));
 };
 
-const handleMissingRules = options => ({
+const handleMissingRules = (options) => ({
   pass: false,
   message: () =>
     `No style rules found on passed Component${
-      Object.keys(options).length
-        ? ` using options:\n${JSON.stringify(options)}`
-        : ""
-    }`
+      Object.keys(options).length ? ` using options:\n${JSON.stringify(options)}` : ''
+    }`,
 });
@@ -126,17 +112,11 @@
   rule.declarations
-    .filter(
-      declaration =>
-        declaration.type === "declaration" && declaration.property === property
-    )
+    .filter((declaration) => declaration.type === 'declaration' && declaration.property === property)
     .pop();
 
-const getDeclarations = (rules, property) =>
-  rules.map(rule => getDeclaration(rule, property)).filter(Boolean);
+const getDeclarations = (rules, property) => rules.map((rule) => getDeclaration(rule, property)).filter(Boolean);
 
-const normalizeOptions = options =>
+const normalizeOptions = (options) =>
   options.modifier
     ? Object.assign({}, options, {
-        modifier: Array.isArray(options.modifier)
-          ? options.modifier.join("")
-          : options.modifier
+        modifier: Array.isArray(options.modifier) ? options.modifier.join('') : options.modifier,
       })
@@ -158,10 +138,7 @@ : options;
   const received = declaration.value;
-  const pass =
-    !received && !expected && this.isNot
-      ? false
-      : matcherTest(received, expected);
+  const pass = !received && !expected && this.isNot ? false : matcherTest(received, expected);
 
   return {
     pass,
-    message: buildReturnMessage(this.utils, pass, property, received, expected)
+    message: buildReturnMessage(this.utils, pass, property, received, expected),
   };
@@ -168,0 +145,0 @@ }

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

39368

increased by1.09%

Worsened metrics

Lines of code

328

decreased by-6.02%

Dependency changes

• + Addedcss@3.0.0(transitive)

• + Addedsource-map-resolve@0.6.0(transitive)

• - Removedcss@2.2.4(transitive)

• - Removedresolve-url@0.2.1(transitive)

• - Removedsource-map-resolve@0.5.3(transitive)

• - Removedsource-map-url@0.4.1(transitive)

• - Removedurix@0.1.0(transitive)

• Updatedcss@^3.0.0