Merge pull request #37 from NickStefan/master

find now supports more css selectors

Author: zackify

README.md

@@ -31,11 +31,7 @@ Test(<TestComponent onClick={spy}/>) //or shallow render Test(<Component/>, {sha
 //finding an element
 Test(<TestComponent/>)
 .find('.box')
-.test(({box}) => {
-  /*new in 0.3.4
-    if you only have elements in your helpers object, they're available in the root object
-    ex: helpers.elements.box.props -> box.props, you can still use the long way :)
-  */
+.elements('.box', (box) => {
   expect(box.props.children).to.be.equal('found me!')
 })
 ~~~
@@ -91,7 +87,7 @@ Test(<TestComponent/>)
 
 .find('.box')
 .find('div')
-.element('box', box => {
+.element('.box', box => {
   expect(box.props.children).to.be.equal('found me!')
 })
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "legit-tests",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "description": "a chainable testing library for React",
   "main": "legit-tests.js",
   "scripts": {
@@ -47,6 +47,7 @@
     "babel": "^5.8.29",
     "harmony-reflect": "^1.4.2",
     "jsdom": "^6.5.1",
+    "lodash": "^3.10.1",
     "react": "^0.14.0",
     "react-addons-test-utils": "^0.14.0",
     "react-dom": "^0.14.0"

src/middleware/find.js

@@ -1,20 +1,66 @@
 import TestUtils from 'react-addons-test-utils'
+import _ from 'lodash'
 
 export default function find(selector){
 
-  let elements, name
-  if (!(typeof selector === "string")) {
-    name = (selector.name || selector.displayName).toLowerCase()
+  var self = this
+  var foundElements = []
+  var elements
+  var selector
+
+  if (_.isFunction(selector)){
     elements = TestUtils.scryRenderedComponentsWithType(this.instance, selector)
-  } else if (selector.match(/\./)) {
-    selector = selector.replace(/\./, '')
-    elements = TestUtils.scryRenderedDOMComponentsWithClass(this.instance, selector)
+    selector = (selector.name || selector.displayName).toLowerCase()
+  } else {
+
+    var tokens = selector.split(/(?=\.)|(?=#)|(?=\[)/)
+    tokens
+    .forEach(function(subselector){
+      var els
+      switch (subselector[0]){
+        // class
+      case '.':
+        els = TestUtils.scryRenderedDOMComponentsWithClass(self.instance, subselector.slice(1))
+        foundElements.push( Array.isArray(els) ? els : [els] )
+        break
+
+      // id
+      case '#':
+        els = TestUtils.findAllInRenderedTree(self.instance, function(component){
+          if (component.id === subselector.slice(1)){
+            return true
+          }
+        })
+        foundElements.push( Array.isArray(els) ? els : [els] )
+        break
+
+      // data attribute
+      case '[':
+        els = TestUtils.findAllInRenderedTree(self.instance, function(component){
+          if (component.getAttribute) {
+            return component.getAttribute(subselector.slice(1,-1))
+          }
+        })
+        foundElements.push( Array.isArray(els) ? els : [els] )
+        break
+
+      // tag
+      default:
+        els = TestUtils.scryRenderedDOMComponentsWithTag(self.instance, subselector)
+        foundElements.push( Array.isArray(els) ? els : [els] )
+        break
+      }
+    })
+
+    elements = _.intersection.apply(_, foundElements)
   }
-  else elements = TestUtils.scryRenderedDOMComponentsWithTag(this.instance, selector)
 
-  if (Array.isArray(elements) && elements.length === 1) {
-    this.elements[name || selector] = elements[0]
-  } else {
-    this.elements[name || selector] = elements
+  if (elements){
+    if (Array.isArray(elements) && elements.length === 1) {
+      this.elements[selector] = elements[0]
+    } else {
+      this.elements[selector] = elements
+    }
   }
+
 }

tests/components/component.jsx

@@ -12,7 +12,7 @@ export default class TestComponent extends Component {
     return (
       <section>
         <div onClick={this.props.onClick}>{this.state.test}</div>
-        <p className="box">found me!</p>
+        <p className="box" data-p-tag>found me!</p>
         <button
           type="button"
           onClick={this.props.onClick}>

tests/element.jsx

@@ -17,7 +17,7 @@ describe('.element', () => {
     Test(<TestComponent/>)
     .find('.box')
     .find('div')
-    .element('box', box => {
+    .element('.box', box => {
       expect(box.props.children).to.be.equal('found me!')
     })
     .element('div', div => {
@@ -29,7 +29,7 @@ describe('.element', () => {
     Test(<TestComponent />)
     .find('.box')
     .find('div')
-    .element(['box', 'div'], (box, div) => {
+    .element(['.box', 'div'], (box, div) => {
       expect(div.length).to.be.equal(2)
       expect(box.props.children).to.be.equal('found me!')
     })

tests/find.jsx

@@ -16,19 +16,28 @@ describe('Find middleware', () => {
 
   it('should find p tag with class', () => {
     Test(<TestComponent/>)
-    .use(Find, '.box')
+    .use(Find, 'p.box')
     .test(function() {
-      expect(this.elements.box.props.children).to.be.equal('found me!')
+      expect(this.elements['p.box'].props.children).to.be.equal('found me!')
     })
 
     Test(<TestComponent/>)
-    .use(Find, '.box')
-    .test(({box}) => {
+    .use(Find, 'p.box')
+    .element('p.box',(box) => {
       expect(box.innerHTML).to.be.equal('found me!')
     })
 
   })
 
+  it('should find p tag with data attribute', () => {
+    Test(<TestComponent/>)
+    .use(Find, '[data-p-tag]')
+    .test(function() {
+      expect(this.elements['[data-p-tag]'].props.children).to.be.equal('found me!')
+    })
+
+  })
+
   it('should find a rendered component', () => {
     Test(<TestComponent/>)
     .find(TinyComponent)