Merge pull request #39 from NickStefan/find-attribute-values

Find attribute values

README.md

@@ -21,7 +21,7 @@ let spy = sinon.spy()
 
 
 //Calling a prop
-Test(<TestComponent onClick={spy}/>) //or shallow render Test(<Component/>, {shallow: true})
+Test(<TestComponent onClick={spy}/>)
 .find('button')
 .simulate({method: 'click', element: 'button'})
 .test(() => {
@@ -112,6 +112,37 @@ Test(<TestComponent />)
 
 ~~~
 
+##DOM rendering
+__Shallow__ -- uses React shallow rendering (no DOM)
+~~~js
+Test(<TestComponent onClick={spy}/>, {shallow: true})
+.find('button')
+.simulate({method: 'click', element: 'button'})
+.test(() => {
+  expect(spy.called).to.be.true
+})
+~~~
+
+__Normal__ -- React render into document fragment
+~~~js
+Test(<TestComponent onClick={spy}/>)
+.find('button')
+.simulate({method: 'click', element: 'button'})
+.test(() => {
+  expect(spy.called).to.be.true
+})
+~~~
+
+__fullDOM__ -- ReactDOM render into document.body.div of jsdom
+~~~js
+Test(<section />, {fullDOM: true})
+.test(function() {
+  expect(global.window.document.querySelector('section'))
+  .to.be.okay
+})
+.clean() // restores the document.body to empty
+~~~ 
+
 You can see more examples in the tests directory.
 
 ##Testing Alt Stores

package.json

@@ -1,6 +1,6 @@
 {
   "name": "legit-tests",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "a chainable testing library for React",
   "main": "legit-tests.js",
   "scripts": {

src/middleware/find.js

@@ -36,11 +36,18 @@ export default function find(selector){
 
       // data attribute
       case '[':
+        var attributeName = _.first( subselector.slice(1,-1).split('=') )
+        var attributeValue = subselector.slice(1,-1).split('=').slice(1).join('=').replace(/^"(.*)"$/, '$1')
+
         els = TestUtils.findAllInRenderedTree(self.instance, function(component){
           if (component.getAttribute) {
-            return component.getAttribute(subselector.slice(1,-1))
+            var val = component.getAttribute(attributeName)
+            if (val === attributeValue || (val === 'true' && attributeValue === '')){
+              return true
+            }
           }
         })
+
         foundElements.push( Array.isArray(els) ? els : [els] )
         break
 

tests/components/component.jsx

@@ -23,6 +23,8 @@ export default class TestComponent extends Component {
           onClick={this.props.onClick}>
           Click Me
         </button>
+        <input className="notbob" name />
+        <input className="bob" name="bob" />
         <TinyComponent test="true"/>
         <OtherComponent test="true"/>
       </section>

tests/find.jsx

@@ -38,6 +38,16 @@ describe('Find middleware', () => {
 
   })
 
+  it('should find an input with a name attribute that equals \'bob\'', ()=>{
+    Test(<TestComponent/>)
+    .find('input[name="bob"]')
+    .find('input[name]')
+    .test(function(){
+      expect(this.elements['input[name="bob"]'].className).equal('bob')
+      expect(this.elements['input[name]'].className).equal('notbob')
+    })
+  })
+
   it('should find a rendered component', () => {
     Test(<TestComponent/>)
     .find(TinyComponent)