jest-emotion - npm Package Compare versions

Comparing version 10.0.5 to 10.0.6

dist/jest-emotion.browser.cjs.js

@@ -7,3 +7,2 @@ 'use strict';
 
-var _objectAssign = _interopDefault(require('object-assign'));
 var chalk = _interopDefault(require('chalk'));
@@ -34,2 +33,7 @@ var css = require('css');
 
+var RULE_TYPES = {
+  media: 'media',
+  rule: 'rule'
+};
+
 function getClassNames(selectors, classes) {
@@ -184,3 +188,25 @@ return classes ? selectors.concat(classes.split(' ')) : selectors;
 }
+function hasClassNames(classNames, selectors, target) {
+  // selectors is the classNames of specific css rule
+  return selectors.some(function (selector) {
+    // if no target, use className of the specific css rule and try to find it
+    // in the list of received node classNames to make sure this css rule
+    // applied for root element
+    if (!target) {
+      return classNames.includes(selector.slice(1));
+    } // check if selector (className) of specific css rule match target
 
+
+    return selector.includes(target);
+  });
+}
+function getMediaRules(rules, media) {
+  return rules.filter(function (rule) {
+    var isMediaMatch = rule.media ? rule.media.replace(/\s/g, '').includes(media.replace(/\s/g, '')) : false;
+    return rule.type === RULE_TYPES.media && isMediaMatch;
+  }).reduce(function (mediaRules, mediaRule) {
+    return mediaRules.concat(mediaRule.rules);
+  }, []);
+}
+
 /*
@@ -216,8 +242,23 @@ * Taken from
 
-function toHaveStyleRule(received, property, value) {
+function toHaveStyleRule(received, property, value, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  var _options = options,
+      target = _options.target,
+      media = _options.media;
   var classNames = getClassNamesFromNodes([received]);
   var cssString = getStylesFromClassNames(classNames, getStyleElements());
   var styles = css.parse(cssString);
-  var declaration = styles.stylesheet.rules.reduce(function (decs, rule) {
-    return _objectAssign([], decs, rule.declarations);
+  var preparedRules = styles.stylesheet.rules;
+
+  if (media) {
+    preparedRules = getMediaRules(preparedRules, media);
+  }
+
+  var declaration = preparedRules.filter(function (rule) {
+    return rule.type === RULE_TYPES.rule && hasClassNames(classNames, rule.selectors, target);
+  }).reduce(function (decs, rule) {
+    return decs.concat(rule.declarations);
   }, []).filter(function (dec) {
@@ -224,0 +265,0 @@ return dec.type === 'declaration' && dec.property === property;

dist/jest-emotion.browser.esm.js

@@ -1,2 +0,1 @@
-import _objectAssign from 'object-assign';
 import chalk from 'chalk';
@@ -27,2 +26,7 @@ import { stringify, parse } from 'css';
 
+var RULE_TYPES = {
+  media: 'media',
+  rule: 'rule'
+};
+
 function getClassNames(selectors, classes) {
@@ -177,3 +181,25 @@ return classes ? selectors.concat(classes.split(' ')) : selectors;
 }
+function hasClassNames(classNames, selectors, target) {
+  // selectors is the classNames of specific css rule
+  return selectors.some(function (selector) {
+    // if no target, use className of the specific css rule and try to find it
+    // in the list of received node classNames to make sure this css rule
+    // applied for root element
+    if (!target) {
+      return classNames.includes(selector.slice(1));
+    } // check if selector (className) of specific css rule match target
 
+
+    return selector.includes(target);
+  });
+}
+function getMediaRules(rules, media) {
+  return rules.filter(function (rule) {
+    var isMediaMatch = rule.media ? rule.media.replace(/\s/g, '').includes(media.replace(/\s/g, '')) : false;
+    return rule.type === RULE_TYPES.media && isMediaMatch;
+  }).reduce(function (mediaRules, mediaRule) {
+    return mediaRules.concat(mediaRule.rules);
+  }, []);
+}
+
 /*
@@ -209,8 +235,23 @@ * Taken from
 
-function toHaveStyleRule(received, property, value) {
+function toHaveStyleRule(received, property, value, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  var _options = options,
+      target = _options.target,
+      media = _options.media;
   var classNames = getClassNamesFromNodes([received]);
   var cssString = getStylesFromClassNames(classNames, getStyleElements());
   var styles = parse(cssString);
-  var declaration = styles.stylesheet.rules.reduce(function (decs, rule) {
-    return _objectAssign([], decs, rule.declarations);
+  var preparedRules = styles.stylesheet.rules;
+
+  if (media) {
+    preparedRules = getMediaRules(preparedRules, media);
+  }
+
+  var declaration = preparedRules.filter(function (rule) {
+    return rule.type === RULE_TYPES.rule && hasClassNames(classNames, rule.selectors, target);
+  }).reduce(function (decs, rule) {
+    return decs.concat(rule.declarations);
   }, []).filter(function (dec) {
@@ -217,0 +258,0 @@ return dec.type === 'declaration' && dec.property === property;

dist/jest-emotion.cjs.dev.js

@@ -7,3 +7,2 @@ 'use strict';
 
-var _objectAssign = _interopDefault(require('object-assign'));
 var chalk = _interopDefault(require('chalk'));
@@ -34,2 +33,7 @@ var css = require('css');
 
+var RULE_TYPES = {
+  media: 'media',
+  rule: 'rule'
+};
+
 function getClassNames(selectors, classes) {
@@ -184,3 +188,25 @@ return classes ? selectors.concat(classes.split(' ')) : selectors;
 }
+function hasClassNames(classNames, selectors, target) {
+  // selectors is the classNames of specific css rule
+  return selectors.some(function (selector) {
+    // if no target, use className of the specific css rule and try to find it
+    // in the list of received node classNames to make sure this css rule
+    // applied for root element
+    if (!target) {
+      return classNames.includes(selector.slice(1));
+    } // check if selector (className) of specific css rule match target
 
+
+    return selector.includes(target);
+  });
+}
+function getMediaRules(rules, media) {
+  return rules.filter(function (rule) {
+    var isMediaMatch = rule.media ? rule.media.replace(/\s/g, '').includes(media.replace(/\s/g, '')) : false;
+    return rule.type === RULE_TYPES.media && isMediaMatch;
+  }).reduce(function (mediaRules, mediaRule) {
+    return mediaRules.concat(mediaRule.rules);
+  }, []);
+}
+
 /*
@@ -216,8 +242,23 @@ * Taken from
 
-function toHaveStyleRule(received, property, value) {
+function toHaveStyleRule(received, property, value, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  var _options = options,
+      target = _options.target,
+      media = _options.media;
   var classNames = getClassNamesFromNodes([received]);
   var cssString = getStylesFromClassNames(classNames, getStyleElements());
   var styles = css.parse(cssString);
-  var declaration = styles.stylesheet.rules.reduce(function (decs, rule) {
-    return _objectAssign([], decs, rule.declarations);
+  var preparedRules = styles.stylesheet.rules;
+
+  if (media) {
+    preparedRules = getMediaRules(preparedRules, media);
+  }
+
+  var declaration = preparedRules.filter(function (rule) {
+    return rule.type === RULE_TYPES.rule && hasClassNames(classNames, rule.selectors, target);
+  }).reduce(function (decs, rule) {
+    return decs.concat(rule.declarations);
   }, []).filter(function (dec) {
@@ -224,0 +265,0 @@ return dec.type === 'declaration' && dec.property === property;

dist/jest-emotion.cjs.prod.js

@@ -6,4 +6,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var _objectAssign = _interopDefault(require("object-assign")),
-  chalk = _interopDefault(require("chalk")),
+var chalk = _interopDefault(require("chalk")),
   css = require("css");
@@ -38,3 +37,4 @@ function defaultClassNameReplacer(className, index) {
     }, styles + (styles ? "\n\n" : "") + code);
-  };
+  },
+  RULE_TYPES = { media: "media", rule: "rule" };
 function getClassNames(selectors, classes) {
@@ -157,2 +157,21 @@ return classes ? selectors.concat(classes.split(" ")) : selectors;
 }
+function hasClassNames(classNames, selectors, target) {
+  return selectors.some(function(selector) {
+    return target
+      ? selector.includes(target)
+      : classNames.includes(selector.slice(1));
+  });
+}
+function getMediaRules(rules, media) {
+  return rules
+    .filter(function(rule) {
+      var isMediaMatch =
+        !!rule.media &&
+        rule.media.replace(/\s/g, "").includes(media.replace(/\s/g, ""));
+      return rule.type === RULE_TYPES.media && isMediaMatch;
+    })
+    .reduce(function(mediaRules, mediaRule) {
+      return mediaRules.concat(mediaRule.rules);
+    }, []);
+}
 function isA(typeName, value) {
@@ -171,16 +190,25 @@ return Object.prototype.toString.apply(value) === "[object " + typeName + "]";
 }
-function toHaveStyleRule(received, property, value) {
-  var cssString = getStylesFromClassNames(
-      getClassNamesFromNodes([received]),
-      getStyleElements()
-    ),
-    declaration = css
-      .parse(cssString)
-      .stylesheet.rules.reduce(function(decs, rule) {
-        return _objectAssign([], decs, rule.declarations);
-      }, [])
-      .filter(function(dec) {
-        return "declaration" === dec.type && dec.property === property;
-      })
-      .pop();
+function toHaveStyleRule(received, property, value, options) {
+  void 0 === options && (options = {});
+  var _options = options,
+    target = _options.target,
+    media = _options.media,
+    classNames = getClassNamesFromNodes([received]),
+    cssString = getStylesFromClassNames(classNames, getStyleElements()),
+    preparedRules = css.parse(cssString).stylesheet.rules;
+  media && (preparedRules = getMediaRules(preparedRules, media));
+  var declaration = preparedRules
+    .filter(function(rule) {
+      return (
+        rule.type === RULE_TYPES.rule &&
+        hasClassNames(classNames, rule.selectors, target)
+      );
+    })
+    .reduce(function(decs, rule) {
+      return decs.concat(rule.declarations);
+    }, [])
+    .filter(function(dec) {
+      return "declaration" === dec.type && dec.property === property;
+    })
+    .pop();
   if (!declaration)
@@ -187,0 +215,0 @@ return {

package.json

 {
   "name": "jest-emotion",
-  "version": "10.0.5",
+  "version": "10.0.6",
   "description": "Jest utilities for emotion",
@@ -24,3 +24,3 @@ "main": "dist/jest-emotion.cjs.js",
     "dtslint": "^0.3.0",
-    "emotion": "^10.0.5",
+    "emotion": "^10.0.6",
     "preact": "^8.2.9",
@@ -27,0 +27,0 @@ "preact-render-to-json": "^3.6.6",

src/matchers.js

@@ -7,3 +7,6 @@ // @flow
   getStylesFromClassNames,
-  getStyleElements
+  getStyleElements,
+  hasClassNames,
+  getMediaRules,
+  RULE_TYPES
 } from './utils'
@@ -39,3 +42,9 @@
 
-function toHaveStyleRule(received: *, property: *, value: *) {
+function toHaveStyleRule(
+  received: *,
+  property: *,
+  value: *,
+  options?: { target?: string, media?: string } = {}
+) {
+  const { target, media } = options
   const classNames = getClassNamesFromNodes([received])
@@ -45,4 +54,13 @@ const cssString = getStylesFromClassNames(classNames, getStyleElements())
 
-  const declaration = styles.stylesheet.rules
-    .reduce((decs, rule) => Object.assign([], decs, rule.declarations), [])
+  let preparedRules = styles.stylesheet.rules
+  if (media) {
+    preparedRules = getMediaRules(preparedRules, media)
+  }
+  const declaration = preparedRules
+    .filter(
+      rule =>
+        rule.type === RULE_TYPES.rule &&
+        hasClassNames(classNames, rule.selectors, target)
+    )
+    .reduce((decs, rule) => decs.concat(rule.declarations), [])
     .filter(dec => dec.type === 'declaration' && dec.property === property)
@@ -49,0 +67,0 @@ .pop()

src/utils.js

 // @flow
 
+export const RULE_TYPES = {
+  media: 'media',
+  rule: 'rule'
+}
+
 function getClassNames(selectors: any, classes?: string) {
@@ -157,1 +162,30 @@ return classes ? selectors.concat(classes.split(' ')) : selectors
 }
+
+export function hasClassNames(
+  classNames: Array<string>,
+  selectors: Array<string>,
+  target: ?string
+): boolean {
+  // selectors is the classNames of specific css rule
+  return selectors.some(selector => {
+    // if no target, use className of the specific css rule and try to find it
+    // in the list of received node classNames to make sure this css rule
+    // applied for root element
+    if (!target) {
+      return classNames.includes(selector.slice(1))
+    }
+    // check if selector (className) of specific css rule match target
+    return selector.includes(target)
+  })
+}
+
+export function getMediaRules(rules: Array<Object>, media: string): Array<any> {
+  return rules
+    .filter(rule => {
+      const isMediaMatch = rule.media
+        ? rule.media.replace(/\s/g, '').includes(media.replace(/\s/g, ''))
+        : false
+      return rule.type === RULE_TYPES.media && isMediaMatch
+    })
+    .reduce((mediaRules, mediaRule) => mediaRules.concat(mediaRule.rules), [])
+}

types/index.d.ts

@@ -9,3 +9,4 @@ // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
     property: string,
-    value: any
+    value: any,
+    options?: StyleRuleOptions
   ): { message(): string; pass: boolean }
@@ -19,2 +20,6 @@ }
 }
+export interface StyleRuleOptions {
+  target?: string
+  media?: string
+}
 export function createSerializer(
@@ -31,5 +36,9 @@ options?: CreateSerializerOptions
     interface Matchers<R> {
-      toHaveStyleRule(property: string, value: any): R
+      toHaveStyleRule(
+        property: string,
+        value: any,
+        options?: StyleRuleOptions
+      ): R
     }
   }
 }

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

59293

increased by11.96%

Lines of code

1679

increased by12.84%

No dependency changes