[Refactor] shallow/mount: make tests and method ordering more con…

…sistent
enzymejs · Sep 1, 2018 · d0fccaf · d0fccaf
1 parent 2ccacb4
commit d0fccaf
Show file tree

Hide file tree

Showing 4 changed files with 460 additions and 61 deletions.
diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx
@@ -629,6 +629,7 @@ describeWithDOM('mount', () => {
       const a = <div className="foo" />;
       const b = <div className="foo" />;
       const c = <div className="bar" />;
+
       expect(mount(a).equals(b)).to.equal(true);
       expect(mount(a).equals(c)).to.equal(false);
     });
@@ -656,7 +657,7 @@ describeWithDOM('mount', () => {
       expect(wrapper.equals(b)).to.equal(true);
     });
 
-    it.skip('does not expand `node` content', () => {
+    it('does not expand `node` content', () => {
       class Bar extends React.Component {
         render() { return <div />; }
       }
@@ -665,8 +666,9 @@ describeWithDOM('mount', () => {
         render() { return <Bar />; }
       }
 
-      expect(mount(<Foo />).equals(<Bar />)).to.equal(true);
-      expect(mount(<Foo />).equals(<Foo />)).to.equal(false);
+      const wrapper = mount(<Foo />).children();
+      expect(wrapper.equals(<Bar />)).to.equal(true);
+      expect(wrapper.equals(<Foo />)).to.equal(false);
     });
 
     describeIf(is('> 0.13'), 'stateless function components (SFCs)', () => {
@@ -684,7 +686,7 @@ describeWithDOM('mount', () => {
         expect(wrapper.equals(b)).to.equal(true);
       });
 
-      it.skip('does not expand `node` content', () => {
+      it('does not expand `node` content', () => {
         const Bar = () => (
           <div />
         );
@@ -693,12 +695,13 @@ describeWithDOM('mount', () => {
           <Bar />
         );
 
-        expect(mount(<Foo />).equals(<Bar />)).to.equal(true);
-        expect(mount(<Foo />).equals(<Foo />)).to.equal(false);
+        const wrapper = mount(<Foo />).children();
+        expect(wrapper.equals(<Bar />)).to.equal(true);
+        expect(wrapper.equals(<Foo />)).to.equal(false);
       });
     });
 
-    it.skip('flattens arrays of children to compare', () => {
+    it('flattens arrays of children to compare', () => {
       class TwoChildren extends React.Component {
         render() {
           return (
@@ -720,8 +723,8 @@ describeWithDOM('mount', () => {
           );
         }
       }
-      const twoChildren = mount(<TwoChildren />);
-      const twoChildrenOneArrayed = mount(<TwoChildrenOneArrayed />);
+      const twoChildren = mount(<TwoChildren />).children();
+      const twoChildrenOneArrayed = mount(<TwoChildrenOneArrayed />).children();
 
       expect(twoChildren.equals(twoChildrenOneArrayed.getElement())).to.equal(true);
       expect(twoChildrenOneArrayed.equals(twoChildren.getElement())).to.equal(true);
@@ -752,6 +755,100 @@ describeWithDOM('mount', () => {
       expect(hostNodes.filter('div')).to.have.lengthOf(1);
       expect(hostNodes.filter('span')).to.have.lengthOf(1);
     });
+
+    it('does NOT allow matches on a nested node', () => {
+      const wrapper = mount((
+        <div>
+          <div className="foo" />
+        </div>
+      ));
+      const b = <div className="foo" />;
+      expect(wrapper.equals(b)).to.equal(false);
+    });
+
+    it('matches composite components', () => {
+      class Foo extends React.Component {
+        render() { return <div />; }
+      }
+      const wrapper = mount((
+        <div>
+          <Foo />
+        </div>
+      ));
+      const b = <div><Foo /></div>;
+      expect(wrapper.equals(b)).to.equal(true);
+    });
+
+    it.skip('does not expand `node` content', () => {
+      class Bar extends React.Component {
+        render() { return <div />; }
+      }
+
+      class Foo extends React.Component {
+        render() { return <Bar />; }
+      }
+
+      expect(mount(<Foo />).equals(<Bar />)).to.equal(true);
+      expect(mount(<Foo />).equals(<Foo />)).to.equal(false);
+    });
+
+    describeIf(is('> 0.13'), 'stateless function components (SFCs)', () => {
+      it('matches composite SFCs', () => {
+        const Foo = () => (
+          <div />
+        );
+
+        const wrapper = mount((
+          <div>
+            <Foo />
+          </div>
+        ));
+        const b = <div><Foo /></div>;
+        expect(wrapper.equals(b)).to.equal(true);
+      });
+
+      it.skip('does not expand `node` content', () => {
+        const Bar = () => (
+          <div />
+        );
+
+        const Foo = () => (
+          <Bar />
+        );
+
+        expect(mount(<Foo />).equals(<Bar />)).to.equal(true);
+        expect(mount(<Foo />).equals(<Foo />)).to.equal(false);
+      });
+    });
+
+    it.skip('flattens arrays of children to compare', () => {
+      class TwoChildren extends React.Component {
+        render() {
+          return (
+            <div className="parent-component-class">
+              <div key="a" className="asd" />
+              <div key="b" className="fgh" />
+            </div>
+          );
+        }
+      }
+
+      class TwoChildrenOneArrayed extends React.Component {
+        render() {
+          return (
+            <div className="parent-component-class">
+              <div key="a" className="asd" />
+              {[<div key="b" className="fgh" />]}
+            </div>
+          );
+        }
+      }
+      const twoChildren = mount(<TwoChildren />);
+      const twoChildrenOneArrayed = mount(<TwoChildrenOneArrayed />);
+
+      expect(twoChildren.equals(twoChildrenOneArrayed.getElement())).to.equal(true);
+      expect(twoChildrenOneArrayed.equals(twoChildren.getElement())).to.equal(true);
+    });
   });
 
   wrap()
@@ -1729,7 +1826,7 @@ describeWithDOM('mount', () => {
         render() {
           return (
             <div className={this.props.id}>
-              {this.props.id}
+              {this.props.foo}
             </div>
           );
         }
@@ -1740,6 +1837,144 @@ describeWithDOM('mount', () => {
       expect(wrapper.find('.bar')).to.have.lengthOf(1);
     });
 
+    describe('merging props', () => {
+      it('merges, not replaces, props when rerendering', () => {
+        class Foo extends React.Component {
+          render() {
+            return (
+              <div className={this.props.id}>
+                {this.props.foo}
+              </div>
+            );
+          }
+        }
+
+        const wrapper = mount(<Foo id="foo" foo="bar" />);
+
+        expect(wrapper.children().debug()).to.equal(`
+<div className="foo">
+  bar
+</div>
+        `.trim());
+        expect(wrapper.children().props()).to.eql({
+          className: 'foo',
+          children: 'bar',
+        });
+        expect(wrapper.instance().props).to.eql({
+          id: 'foo',
+          foo: 'bar',
+        });
+
+        wrapper.setProps({ id: 'bar' });
+
+        expect(wrapper.children().debug()).to.equal(`
+<div className="bar">
+  bar
+</div>
+        `.trim());
+        expect(wrapper.children().props()).to.eql({
+          className: 'bar',
+          children: 'bar',
+        });
+        expect(wrapper.instance().props).to.eql({
+          id: 'bar',
+          foo: 'bar',
+        });
+      });
+
+      itIf(is('> 0.13'), 'merges, not replaces, props on SFCs', () => {
+        function Foo({ id, foo }) {
+          return (
+            <div className={id}>
+              {foo}
+            </div>
+          );
+        }
+        const wrapper = mount(<Foo id="foo" foo="bar" />);
+
+        expect(wrapper.children().debug()).to.equal(`
+<div className="foo">
+  bar
+</div>
+        `.trim());
+        expect(wrapper.children().props()).to.eql({
+          className: 'foo',
+          children: 'bar',
+        });
+        if (is('< 16')) {
+          expect(wrapper.instance().props).to.eql({
+            id: 'foo',
+            foo: 'bar',
+          });
+        }
+
+        wrapper.setProps({ id: 'bar' });
+
+        expect(wrapper.children().debug()).to.equal(`
+<div className="bar">
+  bar
+</div>
+        `.trim());
+        expect(wrapper.children().props()).to.eql({
+          className: 'bar',
+          children: 'bar',
+        });
+        if (is('< 16')) {
+          expect(wrapper.instance().props).to.eql({
+            id: 'bar',
+            foo: 'bar',
+          });
+        }
+      });
+
+      it('merges, not replaces, props when no rerender is needed', () => {
+        class Foo extends React.Component {
+          shouldComponentUpdate() {
+            return false;
+          }
+
+          render() {
+            return (
+              <div className={this.props.id}>
+                {this.props.foo}
+              </div>
+            );
+          }
+        }
+        const wrapper = mount(<Foo id="foo" foo="bar" />);
+
+        expect(wrapper.children().debug()).to.equal(`
+<div className="foo">
+  bar
+</div>
+        `.trim());
+        expect(wrapper.children().props()).to.eql({
+          className: 'foo',
+          children: 'bar',
+        });
+        expect(wrapper.instance().props).to.eql({
+          id: 'foo',
+          foo: 'bar',
+        });
+
+        wrapper.setProps({ id: 'foo' });
+
+        expect(wrapper.children().debug()).to.equal(`
+<div className="foo">
+  bar
+</div>
+        `.trim());
+        expect(wrapper.children().props()).to.eql({
+          className: 'foo',
+          children: 'bar',
+        });
+        expect(wrapper.instance().props).to.eql({
+          id: 'foo',
+          foo: 'bar',
+        });
+      });
+    });
+
     it('calls componentWillReceiveProps for new renders', () => {
       const stateValue = {};
 
@@ -1798,7 +2033,9 @@ describeWithDOM('mount', () => {
       }
       class Bar extends React.Component {
         render() {
-          return <div />;
+          return (
+            <div />
+          );
         }
       }
 
@@ -1812,6 +2049,25 @@ describeWithDOM('mount', () => {
       expect(wrapper.props().d).to.equal('e');
     });
 
+    it('passes in old context', () => {
+      class Foo extends React.Component {
+        render() {
+          return (
+            <div>{this.context.x}</div>
+          );
+        }
+      }
+
+      Foo.contextTypes = { x: PropTypes.string };
+
+      const context = { x: 'yolo' };
+      const wrapper = mount(<Foo x={5} />, { context });
+      expect(wrapper.first('div').text()).to.equal('yolo');
+
+      wrapper.setProps({ x: 5 }); // Just force a re-render
+      expect(wrapper.first('div').text()).to.equal('yolo');
+    });
+
     it('uses defaultProps if new props includes undefined values', () => {
       const initialState = { a: 42 };
       const context = { b: 7 };
@@ -4289,6 +4545,12 @@ describeWithDOM('mount', () => {
     });
   });
 
+  describe('.debug()', () => {
+    it('passes through to the debugNodes function', () => {
+      expect(mount(<div />).debug()).to.equal('<div />');
+    });
+  });
+
   describe('.html()', () => {
     it('returns html of straight DOM elements', () => {
       const wrapper = mount((