[Tests] .hasClass: make shallow/mount tests consistent

enzymejs · Mar 19, 2019 · 4196bae · 4196bae
1 parent 2b04cd3
commit 4196bae
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 7 deletions.
diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
@@ -4663,7 +4663,7 @@ describeWithDOM('mount', () => {
   });
 
   describe('.hasClass(className)', () => {
-    context('When using a DOM component', () => {
+    context('when using a DOM component', () => {
       it('returns whether or not node has a certain class', () => {
         const wrapper = mount(<div className="foo bar baz some-long-string FoOo" />);
 
@@ -4697,7 +4697,7 @@ describeWithDOM('mount', () => {
       });
     });
 
-    context('When using a Composite class component', () => {
+    context('when using a Composite class component', () => {
       it('returns whether or not node has a certain class', () => {
         class Foo extends React.Component {
           render() {
@@ -4722,7 +4722,7 @@ describeWithDOM('mount', () => {
       });
     });
 
-    context('When using nested composite components', () => {
+    context('when using nested composite components', () => {
       it('returns whether or not node has a certain class', () => {
         class Foo extends React.Component {
           render() {
@@ -4754,7 +4754,7 @@ describeWithDOM('mount', () => {
       });
     });
 
-    context('When using a Composite component that renders null', () => {
+    context('when using a Composite component that renders null', () => {
       it('returns whether or not node has a certain class', () => {
         class Foo extends React.Component {
           render() {
@@ -4773,8 +4773,12 @@ describeWithDOM('mount', () => {
           return <div {...this.props} />;
         }
       }
-      const wrapper = mount(<Foo className={{ classA: true, classB: false }} />);
+      const obj = { classA: true, classB: false };
+      const wrapper = mount(<Foo className={obj} />);
       expect(wrapper.hasClass('foo')).to.equal(false);
+      expect(wrapper.hasClass('classA')).to.equal(false);
+      expect(wrapper.hasClass('classB')).to.equal(false);
+      expect(wrapper.hasClass(String(obj))).to.equal(true);
     });
   });
 

diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx
@@ -4628,6 +4628,65 @@ describe('shallow', () => {
   });
 
   describe('.hasClass(className)', () => {
+    context('when using a DOM component', () => {
+      it('returns whether or not node has a certain class', () => {
+        const wrapper = shallow(<div className="foo bar baz some-long-string FoOo" />);
+
+        expect(wrapper.hasClass('foo')).to.equal(true);
+        expect(wrapper.hasClass('bar')).to.equal(true);
+        expect(wrapper.hasClass('baz')).to.equal(true);
+        expect(wrapper.hasClass('some-long-string')).to.equal(true);
+        expect(wrapper.hasClass('FoOo')).to.equal(true);
+        expect(wrapper.hasClass('doesnt-exist')).to.equal(false);
+      });
+    });
+
+    describeIf(is('> 0.13'), 'with stateless function components (SFCs)', () => {
+      it('returns whether or not node has a certain class', () => {
+        const Foo = () => <main><div className="foo bar baz some-long-string FoOo" /></main>;
+        const wrapper = shallow(<Foo />);
+
+        expect(wrapper.hasClass('foo')).to.equal(false);
+        expect(wrapper.hasClass('bar')).to.equal(false);
+        expect(wrapper.hasClass('baz')).to.equal(false);
+        expect(wrapper.hasClass('some-long-string')).to.equal(false);
+        expect(wrapper.hasClass('FoOo')).to.equal(false);
+        expect(wrapper.hasClass('doesnt-exist')).to.equal(false);
+
+        expect(wrapper.children().hasClass('foo')).to.equal(true);
+        expect(wrapper.children().hasClass('bar')).to.equal(true);
+        expect(wrapper.children().hasClass('baz')).to.equal(true);
+        expect(wrapper.children().hasClass('some-long-string')).to.equal(true);
+        expect(wrapper.children().hasClass('FoOo')).to.equal(true);
+        expect(wrapper.children().hasClass('doesnt-exist')).to.equal(false);
+      });
+    });
+
+    context('when using a Composite class component', () => {
+      it('returns whether or not node has a certain class', () => {
+        class Foo extends React.Component {
+          render() {
+            return (<main><div className="foo bar baz some-long-string FoOo" /></main>);
+          }
+        }
+        const wrapper = shallow(<Foo />);
+
+        expect(wrapper.hasClass('foo')).to.equal(false);
+        expect(wrapper.hasClass('bar')).to.equal(false);
+        expect(wrapper.hasClass('baz')).to.equal(false);
+        expect(wrapper.hasClass('some-long-string')).to.equal(false);
+        expect(wrapper.hasClass('FoOo')).to.equal(false);
+        expect(wrapper.hasClass('doesnt-exist')).to.equal(false);
+
+        expect(wrapper.children().hasClass('foo')).to.equal(true);
+        expect(wrapper.children().hasClass('bar')).to.equal(true);
+        expect(wrapper.children().hasClass('baz')).to.equal(true);
+        expect(wrapper.children().hasClass('some-long-string')).to.equal(true);
+        expect(wrapper.children().hasClass('FoOo')).to.equal(true);
+        expect(wrapper.children().hasClass('doesnt-exist')).to.equal(false);
+      });
+    });
+
     it('returns whether or not node has a certain class', () => {
       const wrapper = shallow((
         <div className="foo bar baz some-long-string FoOo" />
@@ -4641,14 +4700,31 @@ describe('shallow', () => {
       expect(wrapper.hasClass('doesnt-exist')).to.equal(false);
     });
 
+    context('when using a Composite component that renders null', () => {
+      it('returns whether or not node has a certain class', () => {
+        class Foo extends React.Component {
+          render() {
+            return null;
+          }
+        }
+        const wrapper = shallow(<Foo />);
+
+        expect(wrapper.hasClass('foo')).to.equal(false);
+      });
+    });
+
     it('works with a non-string `className` prop', () => {
       class Foo extends React.Component {
         render() {
-          return <Foo {...this.props} />;
+          return <div {...this.props} />;
         }
       }
-      const wrapper = shallow(<Foo className={{ classA: true, classB: false }} />);
+      const obj = { classA: true, classB: false };
+      const wrapper = shallow(<Foo className={obj} />);
       expect(wrapper.hasClass('foo')).to.equal(false);
+      expect(wrapper.hasClass('classA')).to.equal(false);
+      expect(wrapper.hasClass('classB')).to.equal(false);
+      expect(wrapper.hasClass(String(obj))).to.equal(true);
     });
   });