Jest emotion/improvements

.changeset/flat-adults-add.md

@@ -0,0 +1,5 @@
+---
+'jest-emotion': patch
+---
+
+Take specificity into account when matching styles

.changeset/rare-toes-grow.md

@@ -0,0 +1,5 @@
+---
+'jest-emotion': patch
+---
+
+Match rules in declarations with component used as a selector

packages/jest-emotion/package.json

@@ -17,7 +17,8 @@
     "@babel/runtime": "^7.5.5",
     "@types/jest": "^23.0.2",
     "chalk": "^2.4.1",
-    "css": "^2.2.1"
+    "css": "^2.2.1",
+    "specificity": "^0.4.1"
   },
   "devDependencies": {
     "@emotion/core": "^11.0.0-next.0",

packages/jest-emotion/src/matchers.js

@@ -1,12 +1,14 @@
 // @flow
 import chalk from 'chalk'
 import * as css from 'css'
+import * as specificity from 'specificity'
 import {
   getClassNamesFromNodes,
   getStylesFromClassNames,
   getStyleElements,
   hasClassNames,
   getMediaRules,
+  findLast,
   RULE_TYPES
 } from './utils'
 
@@ -53,23 +55,40 @@ function toHaveStyleRule(
   if (media) {
     preparedRules = getMediaRules(preparedRules, media)
   }
-  const declaration = preparedRules
+  const result = 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)
+    .reduce((acc, rule) => {
+      const lastMatchingDeclaration = findLast(
+        rule.declarations,
+        dec => dec.type === 'declaration' && dec.property === property
+      )
+      if (!lastMatchingDeclaration) {
+        return acc
+      }
+      return acc.concat(
+        rule.selectors.map(selector => ({
+          selector,
+          declaration: lastMatchingDeclaration
+        }))
+      )
+    }, [])
+    .sort(({ selector: selectorA }, { selector: selectorB }) =>
+      specificity.compare(selectorA, selectorB)
+    )
     .pop()
 
-  if (!declaration) {
+  if (!result) {
     return {
       pass: false,
       message: () => `Property not found: ${property}`
     }
   }
 
+  const { declaration } = result
   const pass = valueMatches(declaration, value)
 
   const message = () =>

packages/jest-emotion/src/utils.js

@@ -1,9 +1,21 @@
 // @flow
 
+function last(arr) {
+  return arr.length > 0 ? arr[arr.length - 1] : undefined
+}
+
 function flatMap(arr, iteratee) {
   return [].concat(...arr.map(iteratee))
 }
 
+export function findLast<T>(arr: T[], predicate: T => boolean) {
+  for (let i = arr.length - 1; i >= 0; i--) {
+    if (predicate(arr[i])) {
+      return arr[i]
+    }
+  }
+}
+
 export const RULE_TYPES = {
   media: 'media',
   rule: 'rule'
@@ -122,10 +134,17 @@ export function getStylesFromClassNames(
     return ''
   }
 
-  let keyPatten = new RegExp(`^(${keys.join('|')})-`)
+  let targetClassName = classNames.find(className =>
+    /^e[a-z0-9]+$/.test(className)
+  )
+  let keyPattern = `(${keys.join('|')})-`
+  let classNamesRegExp = new RegExp(
+    targetClassName ? `^(${keyPattern}|${targetClassName})` : `^${keyPattern}`
+  )
   let filteredClassNames = classNames.filter(className =>
-    keyPatten.test(className)
+    classNamesRegExp.test(className)
   )
+
   if (!filteredClassNames.length) {
     return ''
   }
@@ -200,7 +219,11 @@ export function hasClassNames(
     // 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))
+      const lastCls = last(selector.split(' '))
+      if (!lastCls) {
+        return false
+      }
+      return classNames.includes(lastCls.slice(1))
     }
     // check if selector (className) of specific css rule match target
     return target instanceof RegExp

packages/jest-emotion/test/matchers.test.js

@@ -296,4 +296,49 @@ describe('toHaveStyleRule', () => {
     expect(result.pass).toBe(false)
     expect(result.message()).toBe('Property not found: font-size')
   })
+
+  it('matches styles for a component used as selector', () => {
+    const Bar = styled.div``
+
+    const Foo = styled.div`
+      color: red;
+
+      ${Bar} {
+        color: hotpink;
+      }
+    `
+    const tree = renderer
+      .create(
+        <Foo>
+          <Bar />
+        </Foo>
+      )
+      .toJSON()
+
+    expect(tree.children[0]).toHaveStyleRule('color', 'hotpink')
+  })
+
+  it('takes specificity into account when matching styles (basic)', () => {
+    const Bar = styled.div`
+      color: yellow;
+    `
+
+    const Foo = styled.div`
+      color: red;
+
+      ${Bar} {
+        color: hotpink;
+      }
+    `
+
+    const tree = renderer
+      .create(
+        <Foo>
+          <Bar />
+        </Foo>
+      )
+      .toJSON()
+
+    expect(tree.children[0]).toHaveStyleRule('color', 'hotpink')
+  })
 })

yarn.lock

@@ -1282,6 +1282,16 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@emotion/babel-preset-css-prop@^10.0.5":
+  version "10.0.23"
+  resolved "https://registry.npmjs.org/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-10.0.23.tgz#7c21a36c97c3ce9e96f5896b56f68b9bbac800bd"
+  integrity sha512-XG1s1SQF8twf/ufh+j3EdVjQW7SjcAPOdPZDxEsVVahoR1mF2/nWl4adc5ROppSr/P84QJEdquA6lmyZWcnaBQ==
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.3.0"
+    "@babel/runtime" "^7.5.5"
+    "@emotion/babel-plugin-jsx-pragmatic" "^0.1.4"
+    babel-plugin-emotion "^10.0.23"
+
 "@gatsbyjs/[email protected]":
   version "2.0.0-printer-fix.2"
   resolved "https://registry.npmjs.org/@gatsbyjs/relay-compiler/-/relay-compiler-2.0.0-printer-fix.2.tgz#214db0e6072d40ea78ad5fabdb49d56bc95f4e99"
@@ -3669,6 +3679,22 @@ babel-plugin-dynamic-import-node@^2.3.0:
   dependencies:
     object.assign "^4.1.0"
 
+babel-plugin-emotion@^10.0.23:
+  version "10.0.23"
+  resolved "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.23.tgz#040d40bf61dcab6d31dd6043d10e180240b8515b"
+  integrity sha512-1JiCyXU0t5S2xCbItejCduLGGcKmF3POT0Ujbexog2MI4IlRcIn/kWjkYwCUZlxpON0O5FC635yPl/3slr7cKQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@emotion/hash" "0.7.3"
+    "@emotion/memoize" "0.7.3"
+    "@emotion/serialize" "^0.11.14"
+    babel-plugin-macros "^2.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^1.0.5"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+
 babel-plugin-fix-dce-for-classes-with-statics@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/babel-plugin-fix-dce-for-classes-with-statics/-/babel-plugin-fix-dce-for-classes-with-statics-0.1.0.tgz#9cac930cfb50a879d66cd5dc3bd4af731c1ecb90"
@@ -5016,7 +5042,7 @@ browserify-zlib@^0.2.0:
 
 [email protected], [email protected], browserslist@^1.3.6, browserslist@^1.4.0, browserslist@^1.5.2, browserslist@^1.7.6, browserslist@^2.1.2, browserslist@^2.1.3, browserslist@^2.5.1, browserslist@^3.2.8, browserslist@^4.0.0, browserslist@^4.1.0, browserslist@^4.3.4, browserslist@^4.6.0, browserslist@^4.6.2, browserslist@^4.6.3:
   version "3.2.8"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.2.8.tgz#b0005361d6471f0f5952797a76fc985f1f978fc6"
+  resolved "https://registry.npmjs.org/browserslist/-/browserslist-3.2.8.tgz#b0005361d6471f0f5952797a76fc985f1f978fc6"
   integrity sha512-WHVocJYavUwVgVViC0ORikPHQquXwVh939TaelZ4WDqpWgTX/FsGhl/+P4qBUAGcRvtOgDgC+xftNWWp2RUTAQ==
   dependencies:
     caniuse-lite "^1.0.30000844"
@@ -10504,6 +10530,12 @@ global-prefix@^1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz#dbf743c6c14992593c655568cb66ed32c0122ebe"
   integrity sha1-2/dDxsFJklk8ZVVoy2btMsASLr4=
+  dependencies:
+    expand-tilde "^2.0.2"
+    homedir-polyfill "^1.0.1"
+    ini "^1.3.4"
+    is-windows "^1.0.1"
+    which "^1.2.14"
 
 global@^4.3.0:
   version "4.4.0"
@@ -10751,7 +10783,7 @@ graphql-request@^1.5.0:
 
 [email protected], graphql-type-json@^0.2.4:
   version "0.2.4"
-  resolved "https://registry.yarnpkg.com/graphql-type-json/-/graphql-type-json-0.2.4.tgz#545af27903e40c061edd30840a272ea0a49992f9"
+  resolved "https://registry.npmjs.org/graphql-type-json/-/graphql-type-json-0.2.4.tgz#545af27903e40c061edd30840a272ea0a49992f9"
   integrity sha512-/tq02ayMQjrG4oDFDRLLrPk0KvJXue0nVXoItBe7uAdbNXjQUu+HYCBdAmPLQoseVzUKKMzrhq2P/sfI76ON6w==
 
 graphql@^14.1.1:
@@ -19248,7 +19280,7 @@ react-devtools-core@^3.4.2:
 
 [email protected], "react-dom@^15 || ^16", react-dom@^16.5.2:
   version "16.8.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.1.tgz#ec860f98853d09d39bafd3a6f1e12389d283dbb4"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-16.8.1.tgz#ec860f98853d09d39bafd3a6f1e12389d283dbb4"
   integrity sha512-N74IZUrPt6UiDjXaO7UbDDFXeUXnVhZzeRLy/6iqqN1ipfjrhR60Bp5NuBK+rv3GMdqdIuwIl22u1SYwf330bg==
   dependencies:
     loose-envify "^1.1.0"
@@ -19560,7 +19592,7 @@ react-transform-hmr@^1.0.4:
 
 [email protected], "react@^15 || ^16", react@^16.5.2, react@^16.8.4:
   version "16.8.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.8.1.tgz#ae11831f6cb2a05d58603a976afc8a558e852c4a"
+  resolved "https://registry.npmjs.org/react/-/react-16.8.1.tgz#ae11831f6cb2a05d58603a976afc8a558e852c4a"
   integrity sha512-wLw5CFGPdo7p/AgteFz7GblI2JPOos0+biSoxf1FPsGxWQZdN/pj6oToJs1crn61DL3Ln7mN86uZ4j74p31ELQ==
   dependencies:
     loose-envify "^1.1.0"
@@ -21495,6 +21527,11 @@ spdy@^4.0.0:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
+specificity@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/specificity/-/specificity-0.4.1.tgz#aab5e645012db08ba182e151165738d00887b019"
+  integrity sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==
+
 split-on-first@^1.0.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"