fix(TetherContent): rerender when other props change (#128)

TheSharpieOne · eddywashere · commit 25600d4fbabb · 2016-09-07T21:20:39.000-07:00
Fix #125 Let the TetherContent rerender when any props change while it is showing. This allows the children to update dynamically without needing to hide and show the content to force the update.
diff --git a/src/TetherContent.js b/src/TetherContent.js
@@ -32,6 +32,9 @@ class TetherContent extends React.Component {
   componentDidUpdate(prevProps) {
     if (this.props.isOpen !== prevProps.isOpen) {
       this.handleProps();
+    } else if (this._element) {
+      // rerender
+      this.renderIntoSubtree();
     }
   }
 
@@ -94,11 +97,7 @@ class TetherContent extends React.Component {
 
     this._element = document.createElement('div');
     document.body.appendChild(this._element);
-    ReactDOM.unstable_renderSubtreeIntoContainer(
-      this,
-      this.renderChildren(),
-      this._element
-    );
+    this.renderIntoSubtree();
 
     if (this.props.arrow) {
       const arrow = document.createElement('div');
@@ -119,6 +118,14 @@ class TetherContent extends React.Component {
     return this.props.toggle();
   }
 
+  renderIntoSubtree() {
+    ReactDOM.unstable_renderSubtreeIntoContainer(
+      this,
+      this.renderChildren(),
+      this._element
+    );
+  }
+
   renderChildren() {
     const { children, style } = this.props;
     return React.cloneElement(
diff --git a/test/TetherContent.spec.js b/test/TetherContent.spec.js
@@ -81,14 +81,14 @@ describe('TetherContent', () => {
   });
 
   describe('show', () => {
-    it('should be called on componentWillUnmount', () => {
+    it('should be called on componentDidMount', () => {
       state = true;
-      spyOn(TetherContent.prototype, 'componentWillUnmount').and.callThrough();
+      spyOn(TetherContent.prototype, 'componentDidMount').and.callThrough();
       spyOn(TetherContent.prototype, 'show').and.callThrough();
       const wrapper = mount(<TetherContent tether={tetherConfig} isOpen={state} toggle={toggle}><p>Content</p></TetherContent>);
       const instance = wrapper.instance();
 
-      expect(TetherContent.prototype.componentWillUnmount.calls.count()).toBe(0);
+      expect(TetherContent.prototype.componentDidMount.calls.count()).toBe(1);
       expect(TetherContent.prototype.show.calls.count()).toBe(1);
       expect(instance._element.textContent).toBe('Content');
       expect(instance._tether.enabled).toBe(true);
@@ -234,4 +234,71 @@ describe('TetherContent', () => {
       expect(instance.props.isOpen).toBe(false);
     });
   });
+
+  describe('renderIntoSubtree', () => {
+    it('should be called when the content is shown', () => {
+      spyOn(TetherContent.prototype, 'renderIntoSubtree').and.callThrough();
+      mount(<TetherContent tether={tetherConfig} isOpen toggle={toggle}><p>Content</p></TetherContent>);
+
+      expect(TetherContent.prototype.renderIntoSubtree.calls.count()).toBe(1);
+    });
+
+    it('should be called when the content is not shown', () => {
+      spyOn(TetherContent.prototype, 'renderIntoSubtree').and.callThrough();
+      mount(<TetherContent tether={tetherConfig} isOpen={false} toggle={toggle}><p>Content</p></TetherContent>);
+
+      expect(TetherContent.prototype.renderIntoSubtree.calls.count()).toBe(0);
+    });
+
+    it('should be called on componentDidUpdate when isOpen did not change is true', () => {
+      spyOn(TetherContent.prototype, 'componentDidUpdate').and.callThrough();
+      spyOn(TetherContent.prototype, 'renderIntoSubtree').and.callThrough();
+      const wrapper = mount(<TetherContent tether={tetherConfig} isOpen toggle={toggle}><p>Content</p></TetherContent>);
+      const instance = wrapper.instance();
+
+      expect(TetherContent.prototype.componentDidUpdate.calls.count()).toBe(0);
+      expect(TetherContent.prototype.renderIntoSubtree.calls.count()).toBe(1);
+      expect(instance.props.isOpen).toBe(true);
+
+      wrapper.setProps({ children: <span>something</span> });
+
+      expect(TetherContent.prototype.componentDidUpdate.calls.count()).toBe(1);
+      expect(TetherContent.prototype.renderIntoSubtree.calls.count()).toBe(2);
+      expect(instance.props.isOpen).toBe(true);
+    });
+
+    it('should not be called on componentDidUpdate when isOpen changed to false', () => {
+      spyOn(TetherContent.prototype, 'componentDidUpdate').and.callThrough();
+      spyOn(TetherContent.prototype, 'renderIntoSubtree').and.callThrough();
+      const wrapper = mount(<TetherContent tether={tetherConfig} isOpen toggle={toggle}><p>Content</p></TetherContent>);
+      const instance = wrapper.instance();
+
+      expect(TetherContent.prototype.componentDidUpdate.calls.count()).toBe(0);
+      expect(TetherContent.prototype.renderIntoSubtree.calls.count()).toBe(1);
+      expect(instance.props.isOpen).toBe(true);
+
+      wrapper.setProps({ isOpen: false });
+
+      expect(TetherContent.prototype.componentDidUpdate.calls.count()).toBe(1);
+      expect(TetherContent.prototype.renderIntoSubtree.calls.count()).toBe(1);
+      expect(instance.props.isOpen).toBe(false);
+    });
+
+    it('should not be called on componentDidUpdate when isOpen did not change and is false', () => {
+      spyOn(TetherContent.prototype, 'componentDidUpdate').and.callThrough();
+      spyOn(TetherContent.prototype, 'renderIntoSubtree').and.callThrough();
+      const wrapper = mount(<TetherContent tether={tetherConfig} isOpen={false} toggle={toggle}><p>Content</p></TetherContent>);
+      const instance = wrapper.instance();
+
+      expect(TetherContent.prototype.componentDidUpdate.calls.count()).toBe(0);
+      expect(TetherContent.prototype.renderIntoSubtree.calls.count()).toBe(0);
+      expect(instance.props.isOpen).toBe(false);
+
+      wrapper.setProps({ children: <span>something</span> });
+
+      expect(TetherContent.prototype.componentDidUpdate.calls.count()).toBe(1);
+      expect(TetherContent.prototype.renderIntoSubtree.calls.count()).toBe(0);
+      expect(instance.props.isOpen).toBe(false);
+    });
+  });
 });
