Rewrite ReactInstanceHandles-test to be less brittle
Ben Alpert committed
Sep 26, 2015 at 15:11 UTC
fe9a76ef25bd0cd274598572d5cb0a952edd00da
1 file changed
+52
-40
src/renderers/shared/reconciler/__tests__/ReactInstanceHandles-test.js
+52
-40
@@ -76,72 +76,84 @@ describe('ReactInstanceHandles', function() {
76
77
describe('findComponentRoot', function() {
78
it('should find the correct node with prefix sibling IDs', function() {
79
- var parentNode = document.createElement('div');
80
- var childNodeA = document.createElement('div');
81
- var childNodeB = document.createElement('div');
82
- parentNode.appendChild(childNodeA);
83
- parentNode.appendChild(childNodeB);
84
-
85
- ReactMount.setID(parentNode, '.0');
86
- ReactMount.setID(childNodeA, '.0.0');
87
- ReactMount.setID(childNodeB, '.0.0:1');
79
+ var parentNode = ReactTestUtils.renderIntoDocument(
80
+ <div>
81
+ <div />
82
+ {[<div key="x" />]}
83
+ </div>
84
+ );
85
+ var childNodeB = parentNode.childNodes[1];
86
87
expect(
90
- ReactMount.findComponentRoot(
91
- parentNode,
92
- ReactMount.getID(childNodeB)
88
+ ReactMount.getNode(
89
+ getNodeID(childNodeB)
90
)
91
).toBe(childNodeB);
92
});
93
94
it('should work around unidentified nodes', function() {
98
- var parentNode = document.createElement('div');
99
- var childNodeA = document.createElement('div');
100
- var childNodeB = document.createElement('div');
101
- parentNode.appendChild(childNodeA);
102
- parentNode.appendChild(childNodeB);
95
+ var parentNode = ReactTestUtils.renderIntoDocument(
96
+ <div>
97
+ {[<div key="x" />]}
98
+ </div>
99
+ );
100
+ var childNodeB = parentNode.childNodes[0];
101
104
- ReactMount.setID(parentNode, '.0');
102
// No ID on `childNodeA`.
106
- ReactMount.setID(childNodeB, '.0.0:1');
103
+ var childNodeA = document.createElement('div');
104
+ parentNode.insertBefore(childNodeA, childNodeB);
105
106
expect(
109
- ReactMount.findComponentRoot(
110
- parentNode,
111
- ReactMount.getID(childNodeB)
107
+ ReactMount.getNode(
108
+ getNodeID(childNodeB)
109
)
110
).toBe(childNodeB);
111
});
112
113
it('should throw if a rendered element cannot be found', function() {
117
- var parentNode = document.createElement('table');
118
- var childNodeA = document.createElement('tbody');
119
- var childNodeB = document.createElement('tr');
120
- parentNode.appendChild(childNodeA);
121
- childNodeA.appendChild(childNodeB);
122
-
123
- ReactMount.setID(parentNode, '.0');
124
- // No ID on `childNodeA`, it was "rendered by the browser".
125
- ReactMount.setID(childNodeB, '.0.1:0');
114
+ spyOn(console, 'error');
115
+ var parentNode = ReactTestUtils.renderIntoDocument(
116
+ <table>
117
+ <tr />
118
+ </table>
119
+ );
120
+ var childNodeA = parentNode.childNodes[0];
121
+ var childNodeB;
122
+ if (childNodeA.tagName === 'TR') {
123
+ childNodeB = childNodeA;
124
+ // No ID on `childNodeA`, it was "rendered by the browser".
125
+ childNodeA = document.createElement('tbody');
126
+ childNodeA.appendChild(childNodeB);
127
+ parentNode.appendChild(childNodeA);
128
+ } else {
129
+ childNodeB = childNodeA.childNodes[0];
130
+ }
131
+ expect(childNodeA.tagName).toBe('TBODY');
132
127
- expect(ReactMount.findComponentRoot(
128
- parentNode,
129
- ReactMount.getID(childNodeB)
130
- )).toBe(childNodeB);
133
+ expect(
134
+ ReactMount.getNode(
135
+ getNodeID(childNodeB)
136
+ )
137
+ ).toBe(childNodeB);
138
139
+ var junkID = getNodeID(childNodeB) + ':junk';
140
expect(function() {
133
- ReactMount.findComponentRoot(
134
- parentNode,
135
- ReactMount.getID(childNodeB) + ':junk'
141
+ ReactMount.getNode(
142
+ junkID
143
);
144
}).toThrow(
138
- 'Invariant Violation: findComponentRoot(..., .0.1:0:junk): ' +
145
+ 'Invariant Violation: findComponentRoot(..., ' + junkID + '): ' +
146
'Unable to find element. This probably means the DOM was ' +
147
'unexpectedly mutated (e.g., by the browser), usually due to ' +
148
'forgetting a <tbody> when using tables, nesting tags ' +
149
'like <form>, <p>, or <a>, or using non-SVG elements in an <svg> ' +
150
'parent. ' +
144
- 'Try inspecting the child nodes of the element with React ID `.0`.'
151
+ 'Try inspecting the child nodes of the element with React ID ``.'
152
+ );
153
+
154
+ expect(console.error.argsForCall.length).toBe(1);
155
+ expect(console.error.argsForCall[0][0]).toContain(
156
+ '<tr> cannot appear as a child of <table>'
157
);
158
});
159
});