Support Property Selector

docs/api/ReactWrapper/find.md

@@ -28,6 +28,9 @@ expect(wrapper.find('div.some-class')).to.have.length(3);
 
 // CSS id selector
 expect(wrapper.find('#foo')).to.have.length(1);
+
+// property selector
+expect(wrapper.find('[htmlFor="checkbox"]')).to.have.length(1);
 ```
 
 Component Constructors:

docs/api/selector.md

@@ -12,13 +12,32 @@ follows:
 - class syntax (`.foo`, `.foo-bar`, etc.)
 - tag syntax (`input`, `div`, `span`, etc.)
 - id syntax (`#foo`, `#foo-bar`, etc.)
+- prop syntax (`[htmlFor="foo"]`, `[bar]`, `[baz=1]`, etc.);
+
+**Note -- Prop selector**
+Strings, numeric literals and boolean property values are supported for prop syntax
+in combination of the expected string syntax. For example, the following
+is supported:
+
+```js
+const wrapper = mount(
+  <div>
+    <span foo={3} bar={false} title="baz" />
+  </div>
+)
+
+wrapper.find('[foo=3]')
+wrapper.find('[bar=false]')
+wrapper.find('[title="baz"]')
+```
 
 Further, enzyme supports combining any of those supported syntaxes together to uniquely identify a
 single node.  For instance:
 
 ```css
 div.foo.bar
 input#input-name
+label[foo=true]
 ```
 
 Are all valid selectors in enzyme.  At this time, however, any contextual CSS selector syntax that

src/MountedTraversal.js

@@ -1,10 +1,14 @@
 import {
+  coercePropValue,
   nodeEqual,
+  propsOfNode,
   isSimpleSelector,
   splitSelector,
   selectorError,
+  selectorType,
   isCompoundSelector,
   AND,
+  SELECTOR,
 } from './Utils';
 import {
   isDOMComponent,
@@ -65,6 +69,26 @@ export function instHasType(inst, type) {
   }
 }
 
+export function instHasProperty(inst, propKey, stringifiedPropValue) {
+  if (!isDOMComponent(inst)) return false;
+  const node = getNode(inst);
+  const nodeProps = propsOfNode(node);
+  const nodePropValue = nodeProps[propKey];
+
+  const propValue = coercePropValue(stringifiedPropValue);
+
+  // intentionally not matching node props that are undefined
+  if (nodePropValue === undefined) {
+    return false;
+  }
+
+  if (propValue) {
+    return nodePropValue === propValue;
+  }
+
+  return nodeProps.hasOwnProperty(propKey);
+}
+
 // called with private inst
 export function renderedChildrenOfInst(inst) {
   return REACT013
@@ -166,15 +190,22 @@ export function buildInstPredicate(selector) {
       if (isCompoundSelector.test(selector)) {
         return AND(splitSelector(selector).map(buildInstPredicate));
       }
-      if (selector[0] === '.') {
-        // selector is a class name
-        return inst => instHasClassName(inst, selector.substr(1));
-      } else if (selector[0] === '#') {
-        // selector is an id name
-        return inst => instHasId(inst, selector.substr(1));
+
+      switch (selectorType(selector)) {
+        case SELECTOR.CLASS_TYPE:
+          return inst => instHasClassName(inst, selector.substr(1));
+        case SELECTOR.ID_TYPE:
+          return inst => instHasId(inst, selector.substr(1));
+        case SELECTOR.PROP_TYPE:
+          const propKey = selector.split(/\[([a-zA-Z\-\:]*?)(=|\])/)[1];
+          const propValue = selector.split(/=(.*?)]/)[1];
+
+          return node => instHasProperty(node, propKey, propValue);
+        default:
+          // selector is a string. match to DOM tag or constructor displayName
+          return inst => instHasType(inst, selector);
       }
-      // selector is a string. match to DOM tag or constructor displayName
-      return inst => instHasType(inst, selector);
+      break;
 
     default:
       throw new TypeError('Expecting a string or Component Constructor');

src/ShallowTraversal.js

@@ -1,13 +1,17 @@
 import React from 'react';
 import {
+  coercePropValue,
   propsOfNode,
   isSimpleSelector,
   splitSelector,
   selectorError,
   isCompoundSelector,
+  selectorType,
   AND,
+  SELECTOR,
 } from './Utils';
 
+
 export function childrenOfNode(node) {
   if (!node) return [];
   const maybeArray = propsOfNode(node).children;
@@ -66,6 +70,24 @@ export function nodeHasId(node, id) {
   return propsOfNode(node).id === id;
 }
 
+
+export function nodeHasProperty(node, propKey, stringifiedPropValue) {
+  const nodeProps = propsOfNode(node);
+  const propValue = coercePropValue(stringifiedPropValue);
+  const nodePropValue = nodeProps[propKey];
+
+  if (nodePropValue === undefined) {
+    return false;
+  }
+
+  if (propValue) {
+    return nodePropValue === propValue;
+  }
+
+  return nodeProps.hasOwnProperty(propKey);
+}
+
+
 export function nodeHasType(node, type) {
   if (!type || !node) return false;
   if (!node.type) return false;
@@ -86,21 +108,32 @@ export function buildPredicate(selector) {
       if (isCompoundSelector.test(selector)) {
         return AND(splitSelector(selector).map(buildPredicate));
       }
-      if (selector[0] === '.') {
-        // selector is a class name
-        return node => hasClassName(node, selector.substr(1));
-      } else if (selector[0] === '#') {
-        // selector is an id name
-        return node => nodeHasId(node, selector.substr(1));
+
+      switch (selectorType(selector)) {
+        case SELECTOR.CLASS_TYPE:
+          return node => hasClassName(node, selector.substr(1));
+
+        case SELECTOR.ID_TYPE:
+          return node => nodeHasId(node, selector.substr(1));
+
+        case SELECTOR.PROP_TYPE:
+          const propKey = selector.split(/\[([a-zA-Z\-]*?)(=|\])/)[1];
+          const propValue = selector.split(/=(.*?)\]/)[1];
+
+          return node => nodeHasProperty(node, propKey, propValue);
+        default:
+          // selector is a string. match to DOM tag or constructor displayName
+          return node => nodeHasType(node, selector);
       }
-      // selector is a string. match to DOM tag or constructor displayName
-      return node => nodeHasType(node, selector);
+      break;
+
 
     default:
       throw new TypeError('Expecting a string or Component Constructor');
   }
 }
 
+
 export function getTextFromNode(node) {
   if (node === null || node === undefined) {
     return '';

src/Utils.js

@@ -102,12 +102,12 @@ export function withSetStateAllowed(fn) {
 }
 
 export function splitSelector(selector) {
-  return selector.split(/(?=\.)/);
+  return selector.split(/(?=\.|\[.*\])/);
 }
 
 export function isSimpleSelector(selector) {
   // any of these characters pretty much guarantee it's a complex selector
-  return !/[~\s\[\]:>]/.test(selector);
+  return !/[~\s:>]/.test(selector);
 }
 
 export function selectorError(selector) {
@@ -116,8 +116,25 @@ export function selectorError(selector) {
   );
 }
 
-export const isCompoundSelector = /[a-z]\.[a-z]/i;
+export const isCompoundSelector = /([a-z]\.[a-z]|[a-z]\[.*\])/i;
 
+const isPropSelector = /^\[.*\]$/;
+
+export const SELECTOR = {
+  CLASS_TYPE: 0,
+  ID_TYPE: 1,
+  PROP_TYPE: 2,
+};
+
+export function selectorType(selector) {
+  if (selector[0] === '.') {
+    return SELECTOR.CLASS_TYPE;
+  } else if (selector[0] === '#') {
+    return SELECTOR.ID_TYPE;
+  } else if (isPropSelector.test(selector)) {
+    return SELECTOR.PROP_TYPE;
+  }
+}
 
 export function AND(fns) {
   return x => {
@@ -128,3 +145,26 @@ export function AND(fns) {
     return true;
   };
 }
+
+export function coercePropValue(propValue) {
+  // can be undefined
+  if (propValue === undefined) {
+    return propValue;
+  }
+
+  // if propValue includes quotes, it should be
+  // treated as a string
+  if (propValue.search(/"/) !== -1) {
+    return propValue.replace(/"/g, '');
+  }
+
+  const numericPropValue = parseInt(propValue, 10);
+
+  // if parseInt is not NaN, then we've wanted a number
+  if (!isNaN(numericPropValue)) {
+    return numericPropValue;
+  }
+
+  // coerce to boolean
+  return propValue === 'true' ? true : false;
+}

src/__tests__/ReactWrapper-spec.js

@@ -122,6 +122,100 @@ describeWithDOM('mount', () => {
       expect(wrapper.find(Foo).type()).to.equal(Foo);
     });
 
+    it('should find component based on a react prop', () => {
+      const wrapper = mount(
+        <div>
+          <span htmlFor="foo" />
+        </div>
+      );
+
+      expect(wrapper.find('[htmlFor="foo"]')).to.have.length(1);
+      expect(wrapper.find('[htmlFor]')).to.have.length(1);
+    });
+
+    it('should compound tag and prop selector', () => {
+      const wrapper = mount(
+        <div>
+          <span htmlFor="foo" />
+        </div>
+      );
+
+      expect(wrapper.find('span[htmlFor="foo"]')).to.have.length(1);
+      expect(wrapper.find('span[htmlFor]')).to.have.length(1);
+
+    });
+
+    it('should support data prop selectors', () => {
+      const wrapper = mount(
+        <div>
+          <span data-foo="bar" />
+        </div>
+      );
+
+      expect(wrapper.find('[data-foo="bar"]')).to.have.length(1);
+      expect(wrapper.find('[data-foo]')).to.have.length(1);
+    });
+
+    it('should find components with multiple matching props', () => {
+      const onChange = () => {};
+      const wrapper = mount(
+        <div>
+          <span htmlFor="foo" onChange={onChange} preserveAspectRatio="xMaxYMax" />
+        </div>
+      );
+
+      expect(wrapper.find('span[htmlFor="foo"][onChange]')).to.have.length(1);
+      expect(wrapper.find('span[htmlFor="foo"][preserveAspectRatio="xMaxYMax"]')).to.have.length(1);
+    });
+
+
+    it('should not find property when undefined', () => {
+      const wrapper = mount(
+        <div>
+          <span data-foo={undefined} />
+        </div>
+      );
+
+      expect(wrapper.find('[data-foo]')).to.have.length(0);
+    });
+
+    it('should support boolean and numeric values for matching props', () => {
+      const wrapper = mount(
+        <div>
+          <span value={1} />
+          <a value={false} />
+        </div>
+      );
+
+      expect(wrapper.find('span[value=1]')).to.have.length(1);
+      expect(wrapper.find('span[value=2]')).to.have.length(0);
+      expect(wrapper.find('a[value=false]')).to.have.length(1);
+      expect(wrapper.find('a[value=true]')).to.have.length(0);
+    });
+
+    it('should not find key or ref via property selector', () => {
+      class Foo extends React.Component {
+        render() {
+          const arrayOfComponents = [<div key="1" />, <div key="2" />];
+
+          return (
+            <div>
+              <div ref="foo" />
+              {arrayOfComponents}
+            </div>
+          );
+        }
+      }
+
+      const wrapper = mount(<Foo />);
+
+      expect(wrapper.find('div[ref="foo"]')).to.have.length(0);
+      expect(wrapper.find('div[key="1"]')).to.have.length(0);
+      expect(wrapper.find('[ref]')).to.have.length(0);
+      expect(wrapper.find('[key]')).to.have.length(0);
+    });
+
+
     it('should find multiple elements based on a class name', () => {
       const wrapper = mount(
         <div>