Add missing renderComplete calls in markdown vis (#16577)
* Add the missing renderComplete calls * Pass renderComplete down to implementation * Add tests for renderComplete
This commit is contained in:
parent
c36885c295
commit
31f1a2d23a
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue