diff --git a/src/components/Template.js b/src/components/Template.js
index 40c462c574..a55f78a2f8 100644
--- a/src/components/Template.js
+++ b/src/components/Template.js
@@ -16,7 +16,7 @@ class Template extends React.Component {
}
shouldComponentUpdate(nextProps) {
- return !isEqual(this.props.data, nextProps.data);
+ return !isEqual(this.props.data, nextProps.data) || this.props.templateKey !== nextProps.templateKey;
}
render() {
diff --git a/src/components/__tests__/Template-test.js b/src/components/__tests__/Template-test.js
index 7b5b0dc2db..41ad1dec4c 100644
--- a/src/components/__tests__/Template-test.js
+++ b/src/components/__tests__/Template-test.js
@@ -1,10 +1,14 @@
/* eslint-env mocha */
import React from 'react';
+import ReactDOM from 'react-dom';
import expect from 'expect';
import TestUtils from 'react-addons-test-utils';
import Template from '../Template';
+import jsdom from 'jsdom-global';
+import sinon from 'sinon';
+
import expectJSX from 'expect-jsx';
expect.extend(expectJSX);
@@ -229,6 +233,41 @@ describe('Template', () => {
});
});
+ context('shouldComponentUpdate', () => {
+ let props;
+ let component;
+ let container;
+
+ beforeEach(function() {this.jsdom = jsdom();});
+ afterEach(function() {this.jsdom();});
+ beforeEach(() => {
+ container = document.createElement('div');
+ props = getProps({
+ data: {hello: 'mom'}
+ });
+ component = ReactDOM.render(, container);
+ sinon.spy(component, 'render');
+ });
+
+ it('does not call render when no change in data', () => {
+ ReactDOM.render(, container);
+ expect(component.render.called).toBe(false);
+ });
+
+ it('calls render when data changes', () => {
+ props.data = {hello: 'dad'};
+ ReactDOM.render(, container);
+ expect(component.render.called).toBe(true);
+ });
+
+ it('calls render when templateKey changes', () => {
+ props.templateKey += '-rerender';
+ props.templates = {[props.templateKey]: ''};
+ ReactDOM.render(, container);
+ expect(component.render.called).toBe(true);
+ });
+ });
+
function getProps({
templates = {test: ''},
data = {},