Add missing renderComplete calls in markdown vis (#16577) (#16633)

* Add the missing renderComplete calls

* Pass renderComplete down to implementation

* Add tests for renderComplete

src/core_plugins/markdown_vis/public/markdown_vis_controller.js

@@ -62,8 +62,36 @@ class MarkdownVisComponent extends Component {
    * actually changed. So we prevent calling render if none of it changed.
    */
   shouldComponentUpdate(props, state) {
-    return props.fontSize !== this.props.fontSize ||
+    const shouldUpdate = props.fontSize !== this.props.fontSize ||
         state.renderedMarkdown !== this.state.renderedMarkdown;
+
+    // If we won't update, we need to trigger the renderComplete method here,
+    // since we will never render and thus never get to componentDidUpdate.
+    if (!shouldUpdate) {
+      this.props.renderComplete();
+    }
+
+    return shouldUpdate;
+  }
+
+  /**
+   * Will be called after the first render when the component is present in the DOM.
+   *
+   * We call renderComplete here, to signal, that we are done with rendering.
+   */
+  componentDidMount() {
+    this.props.renderComplete();
+  }
+
+  /**
+   * Will be called after the component has been updated and the changes has been
+   * flushed into the DOM.
+   *
+   * We will use this to signal that we are done rendering by calling the
+   * renderComplete property.
+   */
+  componentDidUpdate() {
+    this.props.renderComplete();
   }
 
   /**
@@ -103,6 +131,7 @@ export function MarkdownVisWrapper(props) {
     <MarkdownVisComponent
       fontSize={props.vis.params.fontSize}
       markdown={props.vis.params.markdown}
+      renderComplete={props.renderComplete}
     />
   );
 }

src/core_plugins/markdown_vis/public/markdown_vis_controller.test.js

@@ -10,7 +10,7 @@ describe('markdown vis controller', () => {
       }
     };
 
-    const wrapper = render(<MarkdownVisWrapper vis={vis} />);
+    const wrapper = render(<MarkdownVisWrapper vis={vis} renderComplete={jest.fn()}/>);
     expect(wrapper.find('a').text()).toBe('markdown');
   });
 
@@ -21,7 +21,7 @@ describe('markdown vis controller', () => {
       }
     };
 
-    const wrapper = render(<MarkdownVisWrapper vis={vis} />);
+    const wrapper = render(<MarkdownVisWrapper vis={vis} renderComplete={jest.fn()}/>);
     expect(wrapper.text()).toBe('Testing <a>html</a>\n');
   });
 
@@ -32,10 +32,52 @@ describe('markdown vis controller', () => {
       }
     };
 
-    const wrapper = mount(<MarkdownVisWrapper vis={vis} />);
+    const wrapper = mount(<MarkdownVisWrapper vis={vis} renderComplete={jest.fn()}/>);
     expect(wrapper.text().trim()).toBe('Initial');
     vis.params.markdown = 'Updated';
     wrapper.setProps({ vis });
     expect(wrapper.text().trim()).toBe('Updated');
   });
+
+  describe('renderComplete', () => {
+    it('should be called on initial rendering', () => {
+      const vis = {
+        params: {
+          markdown: 'test'
+        }
+      };
+      const renderComplete = jest.fn();
+      mount(<MarkdownVisWrapper vis={vis} renderComplete={renderComplete}/>);
+      expect(renderComplete.mock.calls.length).toBe(1);
+    });
+
+    it('should be called on successive render when params change', () => {
+      const vis = {
+        params: {
+          markdown: 'test'
+        }
+      };
+      const renderComplete = jest.fn();
+      mount(<MarkdownVisWrapper vis={vis} renderComplete={renderComplete}/>);
+      expect(renderComplete.mock.calls.length).toBe(1);
+      renderComplete.mockClear();
+      vis.params.markdown = 'changed';
+      mount(<MarkdownVisWrapper vis={vis} renderComplete={renderComplete}/>);
+      expect(renderComplete.mock.calls.length).toBe(1);
+    });
+
+    it('should be called on successive render even without data change', () => {
+      const vis = {
+        params: {
+          markdown: 'test'
+        }
+      };
+      const renderComplete = jest.fn();
+      mount(<MarkdownVisWrapper vis={vis} renderComplete={renderComplete}/>);
+      expect(renderComplete.mock.calls.length).toBe(1);
+      renderComplete.mockClear();
+      mount(<MarkdownVisWrapper vis={vis} renderComplete={renderComplete}/>);
+      expect(renderComplete.mock.calls.length).toBe(1);
+    });
+  });
 });