ShowMoreCard should expand when content size changes (mozilla#3057)

src/ui/components/ShowMoreCard/index.js

@@ -3,7 +3,6 @@
 import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
 import { compose } from 'redux';
 
 import translate from 'core/i18n/translate';
@@ -29,15 +28,13 @@ export class ShowMoreCardBase extends React.Component {
   }
 
   componentWillReceiveProps() {
-    this.truncateToMaxHeight(ReactDOM.findDOMNode(this.contents));
+    this.setState({ expanded: true }, () => {
+      this.truncateToMaxHeight(this.contents);
+    });
   }
 
   onClick = (event) => {
     event.preventDefault();
-    this.expandText();
-  }
-
-  expandText() {
     this.setState({ expanded: true });
   }
 

tests/unit/ui/components/TestShowMoreCard.js

@@ -13,7 +13,7 @@ function render(props) {
   );
 }
 
-describe('<ShowMoreCard />', () => {
+describe(__filename, () => {
   it('reveals more text when clicking "show more" link', () => {
     const root = render({ children: 'Hello I am description' });
     const rootNode = findDOMNode(root);
@@ -22,26 +22,26 @@ describe('<ShowMoreCard />', () => {
     // don't have a clientHeight in the tests.
     root.setState({ expanded: false });
     expect(rootNode.className).not.toContain('.ShowMoreCard--expanded');
-    expect(root.state.expanded).toBe(false);
+    expect(root.state.expanded).toEqual(false);
     expect(rootNode.querySelector('.Card-footer-link').textContent).toEqual('Expand to Read more');
 
     Simulate.click(rootNode.querySelector('.Card-footer-link a'));
 
     expect(rootNode.className).toContain('ShowMoreCard--expanded');
-    expect(root.state.expanded).toBe(true);
+    expect(root.state.expanded).toEqual(true);
 
     expect(rootNode.querySelector('.Card-footer-link')).toEqual(null);
   });
 
   it('is expanded by default', () => {
     const root = render({ children: 'Hello I am description' });
-    expect(root.state.expanded).toBe(true);
+    expect(root.state.expanded).toEqual(true);
   });
 
   it('truncates the contents if they are too long', () => {
     const root = render({ children: 'Hello I am description' });
     root.truncateToMaxHeight({ clientHeight: 101 });
-    expect(root.state.expanded).toBe(false);
+    expect(root.state.expanded).toEqual(false);
   });
 
   it('renders className', () => {
@@ -69,4 +69,23 @@ describe('<ShowMoreCard />', () => {
 
     sinon.assert.calledWith(truncateToMaxHeight, contentNode);
   });
+
+  it('expands if new child content is smaller', () => {
+    const root = mount(
+      <ShowMoreCardBase i18n={getFakeI18nInst()}>
+        This would be very long content, but we cannot get `clientHeight` in
+        the tests, so this will be forced below (via setState()).
+      </ShowMoreCardBase>
+    );
+
+    // We have to manually set the expanded flag to false because we don't have
+    // a `clientHeight` in the tests.
+    root.setState({ expanded: false });
+
+    expect(root.state('expanded')).toEqual(false);
+    // This will call `componentWillReceiveProps()`, the content of `children`
+    // is for example purpose.
+    root.setProps({ children: 'short content' });
+    expect(root.state('expanded')).toEqual(true);
+  });
 });