Find attribute values #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Feb 19, 2016

README.md

-Original file line number
+Diff line change
@@ Expand Up / @@ -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(() => {
@@ Expand Down Expand Up / @@ -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
@@ Expand Down @@

package.json

-Original file line number
+Diff line change
@@ -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": {
@@ Expand Down @@

src/middleware/find.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -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
@@ Expand Down @@

tests/components/component.jsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -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>
@@ Expand Down @@

tests/find.jsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -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)
@@ Expand Down @@

Provide feedback