Rewrite setInnerHTML tests to use Public API. (#11385)
* Rewrite setInnerHTML tests to use Public API. * Rename variables and drop unnecessary variable assignments. * Rename testfile to dangerouslySetInnerHTML-test.js * Properly prettify test file. * Rewrite SVG tests to verify we recover from missing innerHTML
Jonathan Silvestri committed
Nov 4, 2017 at 14:04 UTC
366600d0b2b99ece8cd03d60e2a5454a02857502
2 files changed
+94
-68
packages/react-dom/src/client/__tests__/dangerouslySetInnerHTML-test.js
new
+94
@@ -0,0 +1,94 @@
1
+/**
2
+ * Copyright (c) 2016-present, Facebook, Inc.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @emails react-core
8
+ */
9
+
10
+'use strict';
11
+
12
+const React = require('react');
13
+const ReactDOM = require('react-dom');
14
+
15
+describe('dangerouslySetInnerHTML', () => {
16
+ describe('when the node has innerHTML property', () => {
17
+ it('sets innerHTML on it', () => {
18
+ const container = document.createElement('div');
19
+ const node = ReactDOM.render(
20
+ <div dangerouslySetInnerHTML={{__html: '<h1>Hello</h1>'}} />,
21
+ container,
22
+ );
23
+ expect(node.innerHTML).toBe('<h1>Hello</h1>');
24
+ });
25
+ });
26
+
27
+ describe('when the node does not have an innerHTML property', () => {
28
+ let innerHTMLDescriptor;
29
+
30
+ // In some versions of IE (TODO: which ones?) SVG nodes don't have
31
+ // innerHTML. To simulate this, we will take it off the Element prototype
32
+ // and put it onto the HTMLDivElement prototype. We expect that the logic
33
+ // checks for existence of innerHTML on SVG, and if one doesn't exist, falls
34
+ // back to using appendChild and removeChild.
35
+
36
+ beforeEach(() => {
37
+ innerHTMLDescriptor = Object.getOwnPropertyDescriptor(
38
+ Element.prototype,
39
+ 'innerHTML',
40
+ );
41
+ delete Element.prototype.innerHTML;
42
+ Object.defineProperty(
43
+ HTMLDivElement.prototype,
44
+ 'innerHTML',
45
+ innerHTMLDescriptor,
46
+ );
47
+ });
48
+
49
+ afterEach(() => {
50
+ delete HTMLDivElement.prototype.innerHTML;
51
+ Object.defineProperty(
52
+ Element.prototype,
53
+ 'innerHTML',
54
+ innerHTMLDescriptor,
55
+ );
56
+ });
57
+
58
+ it('sets innerHTML on it', () => {
59
+ const html = '<circle></circle>';
60
+ const container = document.createElementNS(
61
+ 'http://www.w3.org/2000/svg',
62
+ 'svg',
63
+ );
64
+ ReactDOM.render(
65
+ <g dangerouslySetInnerHTML={{__html: html}} />,
66
+ container,
67
+ );
68
+ const circle = container.firstChild.firstChild;
69
+ expect(circle.tagName).toBe('circle');
70
+ });
71
+
72
+ it('clears previous children', () => {
73
+ const firstHtml = '<rect></rect>';
74
+ const secondHtml = '<circle></circle>';
75
+
76
+ const container = document.createElementNS(
77
+ 'http://www.w3.org/2000/svg',
78
+ 'svg',
79
+ );
80
+ ReactDOM.render(
81
+ <g dangerouslySetInnerHTML={{__html: firstHtml}} />,
82
+ container,
83
+ );
84
+ const rect = container.firstChild.firstChild;
85
+ expect(rect.tagName).toBe('rect');
86
+ ReactDOM.render(
87
+ <g dangerouslySetInnerHTML={{__html: secondHtml}} />,
88
+ container,
89
+ );
90
+ const circle = container.firstChild.firstChild;
91
+ expect(circle.tagName).toBe('circle');
92
+ });
93
+ });
94
+});
packages/react-dom/src/client/__tests__/setInnerHTML-test.js
deleted
-68
@@ -1,68 +0,0 @@
1
-/**
2
- * Copyright (c) 2016-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
- */
9
-
10
-'use strict';
11
-
12
-// TODO: can we express this test with only public API?
13
-var setInnerHTML = require('../setInnerHTML').default;
14
-var Namespaces = require('../../shared/DOMNamespaces').Namespaces;
15
-
16
-describe('setInnerHTML', () => {
17
- describe('when the node has innerHTML property', () => {
18
- it('sets innerHTML on it', () => {
19
- var node = document.createElement('div');
20
- var html = '<h1>hello</h1>';
21
- setInnerHTML(node, html);
22
- expect(node.innerHTML).toBe(html);
23
- });
24
- });
25
-
26
- describe('when the node does not have an innerHTML property', () => {
27
- var node;
28
- var nodeProxy;
29
- beforeEach(() => {
30
- // Create a mock node that looks like an SVG in IE (without innerHTML)
31
- node = document.createElementNS(Namespaces.svg, 'svg');
32
-
33
- nodeProxy = new Proxy(node, {
34
- has: (target, prop) => {
35
- return prop === 'innerHTML' ? false : prop in target;
36
- },
37
- });
38
-
39
- spyOn(node, 'appendChild').and.callThrough();
40
- spyOn(node, 'removeChild').and.callThrough();
41
- });
42
-
43
- it('sets innerHTML on it', () => {
44
- var html = '<circle></circle><rect></rect>';
45
- setInnerHTML(nodeProxy, html);
46
-
47
- expect(node.appendChild.calls.argsFor(0)[0].outerHTML).toBe(
48
- '<circle></circle>',
49
- );
50
- expect(node.appendChild.calls.argsFor(1)[0].outerHTML).toBe(
51
- '<rect></rect>',
52
- );
53
- });
54
-
55
- it('clears previous children', () => {
56
- var firstHtml = '<rect></rect>';
57
- var secondHtml = '<circle></circle>';
58
- setInnerHTML(nodeProxy, firstHtml);
59
-
60
- setInnerHTML(nodeProxy, secondHtml);
61
-
62
- expect(node.removeChild.calls.argsFor(0)[0].outerHTML).toBe(
63
- '<rect></rect>',
64
- );
65
- expect(node.innerHTML).toBe('<circle></circle>');
66
- });
67
- });
68
-});