[New]: shallow/mount: selectors: support universal selector

enzymejs · Dec 16, 2018 · 7bd0bdb · 7bd0bdb
1 parent aa1af32
commit 7bd0bdb
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 0 deletions.
diff --git a/docs/api/selector.md b/docs/api/selector.md
@@ -12,6 +12,7 @@ follows:
 - element tag name syntax (`input`, `div`, `span`, etc.)
 - id syntax (`#foo`, `#foo-bar`, etc.)
 - attribute syntax (`[href="foo"]`, `[type="text"]`, and the other attribute selectors listed [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors).)
+- universal syntax (`*`)
 
 The attribute syntax also works by value, rather than by string. Strings, numbers, and boolean property values are supported. Example:
 

diff --git a/packages/enzyme-test-suite/test/selector-spec.jsx b/packages/enzyme-test-suite/test/selector-spec.jsx
@@ -32,6 +32,116 @@ describe('selectors', () => {
       };
     });
     describeMethod(name, () => {
+      it('universal selector *', () => {
+        const wrapper = renderMethod((
+          <div>
+            <div className="top-div">
+              <span>inside top div</span>
+            </div>
+
+            <div className="bottom-div" />
+            <span />
+          </div>
+        ));
+
+        expect(wrapper.find('*')).to.have.lengthOf(5);
+      });
+
+      it('* + *', () => {
+        const wrapper = renderMethod((
+          <div>
+            <div className="top-div">
+              <span>inside top div</span>
+            </div>
+            <div className="bottom-div" />
+            <span />
+          </div>
+        ));
+
+        expect(wrapper.find('* + *')).to.have.lengthOf(2);
+      });
+
+      it('.top-div ~ *', () => {
+        const wrapper = renderMethod((
+          <div>
+            <div className="top-div">
+              <span>inside top div</span>
+            </div>
+            <div className="bottom-div" />
+            <span />
+          </div>
+        ));
+
+        expect(wrapper.find('.top-div ~ *')).to.have.lengthOf(2);
+      });
+
+      it('* > span', () => {
+        const wrapper = renderMethod((
+          <div>
+            <div className="top-div">
+              <span>inside top div</span>
+            </div>
+            <div className="bottom-div" />
+            <span />
+          </div>
+        ));
+
+        expect(wrapper.find('* > span')).to.have.lengthOf(2);
+      });
+
+      it('* .top-div *', () => {
+        const wrapper = renderMethod((
+          <div>
+            <div className="top-div">
+              <span>inside top div</span>
+            </div>
+            <div className="bottom-div" />
+            <span id="bottom-span" />
+          </div>
+        ));
+
+        expect(wrapper.find('* .top-div *')).to.have.lengthOf(1);
+      });
+
+      it('#wrap-div > *', () => {
+        const wrapper = renderMethod((
+          <div id="wrap-div">
+            <div className="top-div">
+              <span>inside top div</span>
+            </div>
+            <div className="bottom-div" />
+            <span id="bottom-span" />
+          </div>
+        ));
+
+        expect(wrapper.find('#wrap-div > *')).to.have.lengthOf(3);
+      });
+
+      it('universal selector should also find component node', () => {
+        class ExampleComponent extends React.Component {
+          render() {
+            return <span>Hello world</span>;
+          }
+        }
+        const wrapper = renderMethod((
+          <div id="wrap-div">
+            <div className="top-div">
+              <ExampleComponent />
+            </div>
+            <div className="bottom-div" />
+            <ExampleComponent />
+          </div>
+        ));
+
+        expect(wrapper.find('* > ExampleComponent')).to.have.lengthOf(2);
+        if (name === 'shallow') {
+          // cannot render span inside ExampleComponent when shallow rendering
+          expect(wrapper.find('*')).to.have.lengthOf(5);
+        } else {
+          expect(wrapper.find('*')).to.have.lengthOf(7);
+        }
+      });
+
       it('simple descendent', () => {
         const wrapper = renderMethod((
           <div>

diff --git a/packages/enzyme/src/selectors.js b/packages/enzyme/src/selectors.js
@@ -28,6 +28,7 @@ const SELECTOR = 'selector';
 const TYPE_SELECTOR = 'typeSelector';
 const CLASS_SELECTOR = 'classSelector';
 const ID_SELECTOR = 'idSelector';
+const UNIVERSAL_SELECTOR = 'universalSelector';
 const ATTRIBUTE_PRESENCE = 'attributePresenceSelector';
 const ATTRIBUTE_VALUE = 'attributeValueSelector';
 // @TODO we dont support these, throw if they are used
@@ -184,6 +185,12 @@ function nodeMatchesToken(node, token, root) {
     return false;
   }
   switch (token.type) {
+    /**
+     * Match every node
+     * @example '*' matches every node
+     */
+    case UNIVERSAL_SELECTOR:
+      return true;
     /**
      * Match against the className prop
      * @example '.active' matches <div className='active' />