Merge pull request #670 from ljharb/fix_id_selectors

[Fix] `mount`/`shallow`: fix ID selectors

Fixes #495.

package.json

@@ -57,8 +57,10 @@
     "is-subset": "^0.1.1",
     "lodash": "^4.13.1",
     "object-is": "^1.0.1",
-    "object.assign": "^4.0.3",
-    "object.values": "^1.0.3"
+    "object.assign": "^4.0.4",
+    "object.entries": "^1.0.3",
+    "object.values": "^1.0.3",
+    "uuid": "^2.0.3"
   },
   "devDependencies": {
     "babel-cli": "^6.10.1",

src/Utils.js

@@ -2,6 +2,9 @@
 import isEqual from 'lodash/isEqual';
 import React from 'react';
 import is from 'object-is';
+import uuid from 'uuid';
+import entries from 'object.entries';
+import assign from 'object.assign';
 import functionName from 'function.prototype.name';
 import {
   isDOMComponent,
@@ -164,7 +167,24 @@ export function withSetStateAllowed(fn) {
 }
 
 export function splitSelector(selector) {
-  return selector.split(/(?=\.|\[.*\])|(?=#|\[#.*\])/);
+  // step 1: make a map of all quoted strings with a uuid
+  const quotedSegments = selector.split(/[^" ]+|("[^"]*")|.*/g)
+    .filter(Boolean)
+    .reduce((obj, match) => assign({}, obj, { [match]: uuid.v4() }), {});
+
+  return selector
+    // step 2: replace all quoted strings with the uuid, so we don't have to properly parse them
+    .replace(/[^" ]+|("[^"]*")|.*/g, x => quotedSegments[x] || x)
+    // step 3: split as best we can without a proper parser
+    .split(/(?=\.|\[.*])|(?=#|\[#.*])/)
+    // step 4: restore the quoted strings by swapping back the uuid's for the original segments
+    .map((selectorSegment) => {
+      let restoredSegment = selectorSegment;
+      entries(quotedSegments).forEach(([k, v]) => {
+        restoredSegment = restoredSegment.replace(v, k);
+      });
+      return restoredSegment;
+    });
 }
 
 export function isSimpleSelector(selector) {
@@ -178,7 +198,7 @@ export function selectorError(selector) {
   );
 }
 
-export const isCompoundSelector = /([a-z]\.[a-z]|[a-z]\[.*\]|[a-z]#[a-z])/i;
+export const isCompoundSelector = /^[\.#]?-?[_a-z]+[_a-z0-9-]*[\.\[#]/i;
 
 const isPropSelector = /^\[.*\]$/;
 

test/ReactWrapper-spec.js

@@ -616,6 +616,30 @@ describeWithDOM('mount', () => {
         expect(wrapper.find('[key]')).to.have.length(0);
       });
     });
+
+    describe('works with attribute selectors containing #', () => {
+      let wrapper;
+      beforeEach(() => {
+        wrapper = mount(
+          <div>
+            <a id="test" href="/page">Hello</a>
+            <a href="/page#anchor">World</a>
+          </div>
+        );
+      });
+
+      it('works with an ID', () => {
+        expect(wrapper.find('a#test')).to.have.lengthOf(1);
+      });
+
+      it('works with a normal attribute', () => {
+        expect(wrapper.find('a[href="/page"]')).to.have.lengthOf(1);
+      });
+
+      it('works with an attribute with a #', () => {
+        expect(wrapper.find('a[href="/page#anchor"]')).to.have.lengthOf(1);
+      });
+    });
   });
 
   describe('.findWhere(predicate)', () => {

test/ShallowWrapper-spec.js

@@ -600,6 +600,30 @@ describe('shallow', () => {
         expect(wrapper.find('Foo').type()).to.equal(Foo);
       });
     });
+
+    describe('works with attribute selectors containing #', () => {
+      let wrapper;
+      beforeEach(() => {
+        wrapper = shallow(
+          <div>
+            <a id="test" href="/page">Hello</a>
+            <a href="/page#anchor">World</a>
+          </div>
+        );
+      });
+
+      it('works with an ID', () => {
+        expect(wrapper.find('a#test')).to.have.lengthOf(1);
+      });
+
+      it('works with a normal attribute', () => {
+        expect(wrapper.find('a[href="/page"]')).to.have.lengthOf(1);
+      });
+
+      it('works with an attribute with a #', () => {
+        expect(wrapper.find('a[href="/page#anchor"]')).to.have.lengthOf(1);
+      });
+    });
   });
 
   describe('.findWhere(predicate)', () => {