Handle escaping when comparing server/client markup
Eric O'Connell committed
Jul 8, 2015 at 20:31 UTC
0249adf3db4e6147c9689d4ecb3d4dfc4344d43e
2 files changed
+23
-2
src/renderers/dom/client/ReactMount.js
+6
-2
@@ -880,9 +880,13 @@ var ReactMount = {
880
checksum
881
);
882
883
- var diffIndex = firstDifferenceIndex(markup, rootMarkup);
883
+ var normalizer = document.createElement('div');
884
+ normalizer.innerHTML = markup;
885
+ var normalizedMarkup = normalizer.innerHTML;
886
+
887
+ var diffIndex = firstDifferenceIndex(normalizedMarkup, rootMarkup);
888
var difference = ' (client) ' +
885
- markup.substring(diffIndex - 20, diffIndex + 20) +
889
+ normalizedMarkup.substring(diffIndex - 20, diffIndex + 20) +
890
'\n (server) ' + rootMarkup.substring(diffIndex - 20, diffIndex + 20);
891
892
invariant(
src/renderers/dom/client/__tests__/ReactMount-test.js
+17
@@ -16,6 +16,7 @@ var mocks = require('mocks');
16
describe('ReactMount', function() {
17
var React = require('React');
18
var ReactMount = require('ReactMount');
19
+ var ReactMarkupChecksum = require('ReactMarkupChecksum');
20
var ReactTestUtils = require('ReactTestUtils');
21
var WebComponents = WebComponents;
22
@@ -156,6 +157,22 @@ describe('ReactMount', function() {
157
);
158
});
159
160
+ it('should account for escaping on a checksum mismatch', function () {
161
+ var div = document.createElement('div');
162
+ var markup = React.renderToString(
163
+ <div>This markup contains an html entity: & server text</div>);
164
+ div.innerHTML = markup;
165
+
166
+ spyOn(console, 'error');
167
+ React.render(
168
+ <div>This markup contains an html entity: & client text</div>, div);
169
+ expect(console.error.calls.length).toBe(1);
170
+ expect(console.error.calls[0].args[0]).toContain(
171
+ ' (client) html entity: & client text</div>\n' +
172
+ ' (server) html entity: & server text</div>'
173
+ )
174
+ });
175
+
176
if (WebComponents !== undefined) {
177
it('should allow mounting/unmounting to document fragment container',
178
function() {