[Tests] .find(): add tests for finding data- attributes.

Closes #1314.
enzymejs · Jul 17, 2018 · 8d9efda · 8d9efda
1 parent 1187a6b
commit 8d9efda
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 0 deletions.
diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
@@ -911,6 +911,30 @@ describeWithDOM('mount', () => {
         expect(wrapper.find('a[href="/page#anchor"]')).to.have.lengthOf(1);
       });
     });
+
+    describe('works with data- attributes', () => {
+      class Foo extends React.Component {
+        render() {
+          return (
+            <div>
+              <i className="ficon ficon-12 some-icon" />
+              <span className="custom class">
+                <i className="ficon ficon-book ficon-24" data-custom-tag="bookIcon" />
+                <i className="ficon ficon-book ficon-24" data-custom-tag="bookIcon" />
+              </span>
+            </div>
+          );
+        }
+      }
+
+      it('finds elements by data attribute', () => {
+        const wrapper = mount(<Foo />);
+        expect(wrapper.html()).to.contain('data-custom-tag="bookIcon"'); // sanity check
+        const elements = wrapper.find('[data-custom-tag="bookIcon"]');
+        expect(elements).to.have.lengthOf(2);
+        expect(elements.filter('i')).to.have.lengthOf(2);
+      });
+    });
   });
 
   describe('.findWhere(predicate)', () => {

diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
@@ -937,6 +937,30 @@ describe('shallow', () => {
         expect(wrapper.find('a[href="/page#anchor"]')).to.have.lengthOf(1);
       });
     });
+
+    describe('works with data- attributes', () => {
+      class Foo extends React.Component {
+        render() {
+          return (
+            <div>
+              <i className="ficon ficon-12 some-icon" />
+              <span className="custom class">
+                <i className="ficon ficon-book ficon-24" data-custom-tag="bookIcon" />
+                <i className="ficon ficon-book ficon-24" data-custom-tag="bookIcon" />
+              </span>
+            </div>
+          );
+        }
+      }
+
+      it('finds elements by data attribute', () => {
+        const wrapper = shallow(<Foo />);
+        expect(wrapper.html()).to.contain('data-custom-tag="bookIcon"'); // sanity check
+        const elements = wrapper.find('[data-custom-tag="bookIcon"]');
+        expect(elements).to.have.lengthOf(2);
+        expect(elements.filter('i')).to.have.lengthOf(2);
+      });
+    });
   });
 
   describe('.findWhere(predicate)', () => {