fix: update state.text if props.children change

Author: createthis

.gitignore

@@ -59,3 +59,9 @@ typings/
 
 # compiled
 dist
+
+# I don't see this committed, so putting in ignore
+package-lock.json
+
+# vim swap files
+**/*.swp

src/index.js

@@ -35,6 +35,11 @@ class EllipisWithTooltip extends React.Component {
     }
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.children === this.props.children) return;
+    this.setState({ hasOverflowingChildren: false });
+  }
+
   render() {
     const { hasOverflowingChildren, text } = this.state;
     const {

src/index.test.js

@@ -109,4 +109,25 @@ describe('Ellipsis', () => {
 
     expect(toJson(wrapper)).toMatchSnapshot();
   });
+
+  it('should update text when props change', () => {
+    const wrapper = setup('this is some long text');
+    let domElement = wrapper.find('#a div').getDOMNode();
+
+    expect(wrapper.state().hasOverflowingChildren).toEqual(false);
+    Object.defineProperty(domElement, 'clientWidth', { get() { return 300; } });
+    Object.defineProperty(domElement, 'scrollWidth', { get() { return 400; } });
+    wrapper.find('#a div').simulate('mouseEnter');
+    expect(wrapper.state().hasOverflowingChildren).toEqual(true);
+
+    expect(wrapper.state().text).toEqual('this is some long text');
+    wrapper.setProps({children: 'this changed'});
+    expect(wrapper.state().hasOverflowingChildren).toEqual(false);
+    domElement = wrapper.find('#a div').getDOMNode();
+    Object.defineProperty(domElement, 'clientWidth', { get() { return 300; } });
+    Object.defineProperty(domElement, 'scrollWidth', { get() { return 400; } });
+    wrapper.find('#a div').simulate('mouseEnter');
+    expect(wrapper.state().hasOverflowingChildren).toEqual(true);
+    expect(wrapper.state().text).toEqual('this changed');
+  });
 });