Add support for containMatchingElement (#149)

* add support for containsMatchingElement

* Update documentation, rename helper

* fix typo in README.md

* remove IDE Settings from repo

* set changes in CHANGELOG.md to unreleased

* add notice for breaking change in CHANGELOG.md

.gitignore

@@ -1,3 +1,5 @@
 /node_modules/
 /build/
 *.local.js
+npm-debug.log*
+.vscode

CHANGELOG.md

@@ -1,3 +1,9 @@
+Unreleased
+=======================
+
+* **[breaking]** upgrade Enzyme dependency to 2.3.x or above
+* [feature] add containMatchingElement support
+
 0.6.1 / November 18 2016
 =======================
 

README.md

@@ -13,6 +13,7 @@
     1. [`checked()`](#checked)
     1. [`className(str)`](#classnamestr)
     1. [`contain(node)`](#containnode)
+    1. [`containMatchingElement(node)`](#containmatchingelementnode)
     1. [`descendants(selector)`](#descendantsselector)
       1. [`exactly()`](#exactly)
     1. [`disabled()`](#disabled)
@@ -216,6 +217,51 @@ expect(wrapper).to.contain(<User index={1} />)
 expect(wrapper).to.not.contain(<User index={3} />)
 ```
 
+#### `containMatchingElement(node)`
+
+| render | mount | shallow |
+| -------|-------|-------- |
+| no     | yes   | yes     |
+
+
+Assert that the wrapper contains a matching given node:
+
+```js
+import React from 'react'
+import {mount, render, shallow} from 'enzyme'
+
+class User extends React.Component {
+  render () {
+    return (
+      <span>User {this.props.index} {this.props.name}</span>
+    )
+  }
+}
+
+User.propTypes = {
+  index: React.PropTypes.number,
+  name: React.PropTypes.string.isRequired
+}
+
+class Fixture extends React.Component {
+  render () {
+    return (
+      <div>
+        <ul>
+          <li><User index={1} name='John' /></li>
+          <li><User index={2} name='Doe' /></li>
+        </ul>
+      </div>
+    )
+  }
+}
+
+const wrapper = mount(<Fixture />) // mount/render/shallow when applicable
+
+expect(wrapper).to.containMatchingElement(<User name='John' />)
+expect(wrapper).to.not.containMatchingElement(<User name='Conor' />)
+```
+
 #### `descendants(selector)`
 
 | render | mount | shallow |

package.json

@@ -21,13 +21,14 @@
     "build": "babel src --out-dir build",
     "clean": "rimraf build",
     "test:lint": "standard --verbose | snazzy",
-    "test:unit": "NODE_ENV=test mocha test/**/*.test.js",
+    "test:unit": "cross-env NODE_ENV=test mocha test/**/*.test.js",
+    "test:watch": "npm run test:unit -- --watch",
     "test": "npm run test:lint && npm run test:unit"
   },
   "peerDependencies": {
     "chai": "3.x",
     "cheerio": "0.19.x || 0.20.x || 0.22.x",
-    "enzyme": "1.x || 2.x",
+    "enzyme": "1.x || ^2.3.0",
     "react": "^0.14.0 || ^15.0.0-0",
     "react-addons-test-utils": "^0.14.0 || ^15.0.0-0",
     "react-dom": "^0.14.0 || ^15.0.0-0"
@@ -57,7 +58,8 @@
     "babel-preset-react": "^6.5.0",
     "babel-register": "^6.5.2",
     "chai": "^3.5.0",
-    "enzyme": "^2.0.0",
+    "cross-env": "3.1.4",
+    "enzyme": "^2.3.0",
     "jsdom": "^9.1.0",
     "mocha": "^3.0.0",
     "react": "^0.14.0 || ^15.0.0-0",

src/assertions/containMatchingElement.js

@@ -0,0 +1,12 @@
+import reactElementToJSXString from 'react-element-to-jsx-string'
+
+export default function containMatchingElement ({ wrapper, markup, arg1, sig }) {
+  const arg1JSXString = reactElementToJSXString(arg1)
+
+  this.assert(
+    wrapper.wrapper.containsMatchingElement(arg1),
+    () => 'expected ' + sig + ' to contain matching ' + arg1JSXString + markup(),
+    () => 'expected ' + sig + ' not to contain matching ' + arg1JSXString + markup(),
+    arg1
+  )
+}

src/index.js

@@ -3,6 +3,7 @@ import printDebug from './debug'
 import checked from './assertions/checked'
 import className from './assertions/className'
 import contain from './assertions/contain'
+import containMatchingElement from './assertions/containMatchingElement'
 import descendants from './assertions/descendants'
 import disabled from './assertions/disabled'
 import empty from './assertions/empty'
@@ -53,6 +54,7 @@ module.exports = function (debug = printDebug) {
     chaiWrapper.addAssertion(exist, 'present')
 
     chaiWrapper.overwriteChainableMethod(contain, 'contain')
+    chaiWrapper.addAssertion(containMatchingElement, 'containMatchingElement')
 
     chaiWrapper.addChainableMethod(exactly, 'exactly')
   }

test/containMatchingElement.test.js

@@ -0,0 +1,56 @@
+class User extends React.Component {
+  render () {
+    return (
+      <span>User {this.props.index} {this.props.name}</span>
+    )
+  }
+}
+
+User.propTypes = {
+  index: React.PropTypes.number,
+  name: React.PropTypes.string.isRequired
+}
+
+class Fixture extends React.Component {
+  render () {
+    return (
+      <div>
+        <ul>
+          <li><User index={1} name='John' /></li>
+          <li><User index={2} name='Doe' /></li>
+        </ul>
+      </div>
+    )
+  }
+}
+
+const it = createTest(<Fixture />)
+
+describe('#containMatchingElement', () => {
+  describe('(node)', () => {
+    it('passes when the actual matches the expected', (wrapper) => {
+      expect(wrapper).to.containMatchingElement(<User name='John' />)
+      expect(wrapper).to.containMatchingElement(<User name='Doe' />)
+    }, { render: false })
+
+    it('passes negated when the actual does not match the expected', (wrapper) => {
+      expect(wrapper).to.not.containMatchingElement(<User name='Conor' />)
+    }, { render: false })
+
+    it('fails when the actual does not match the expected', (wrapper) => {
+      expect(() => {
+        expect(wrapper).to.containMatchingElement(<User name='Conor' />)
+      }).to.throw('to contain matching <User name="Conor" />')
+
+      expect(() => {
+        expect(wrapper).to.not.containMatchingElement(<User name='Doe' />)
+      }).to.throw('not to contain matching <User name="Doe" />')
+    }, { render: false })
+
+    it('fails when the actual is undefined', () => {
+      expect(() => {
+        expect(undefined).to.containMatchingElement(<User name='John' />)
+      }).to.throw()
+    })
+  })
+})