[Fizz] Make some tests more resilient to implementation details (#21438)
* Make some tests resilient against changing the specifics of the HTML This ensures that for example flipping order of attributes doesn't matter. * Use getVisibleChildren approach for more resilient tests
Sebastian Markbåge committed
May 5, 2021 at 19:13 UTC
212d2909d3c66eb5950b915b1f079f261e3ccb7c
2 files changed
+82
-27
packages/react-dom/src/__tests__/ReactDOMSelect-test.js
+36
-16
@@ -442,10 +442,15 @@ describe('ReactDOMSelect', () => {
442
<option value="gorilla">A gorilla!</option>
443
</select>
444
);
445
- const markup = ReactDOMServer.renderToString(stub);
446
- expect(markup).toContain('<option selected="" value="giraffe"');
447
- expect(markup).not.toContain('<option selected="" value="monkey"');
448
- expect(markup).not.toContain('<option selected="" value="gorilla"');
445
+ const container = document.createElement('div');
446
+ container.innerHTML = ReactDOMServer.renderToString(stub);
447
+ const options = container.firstChild.options;
448
+ expect(options[0].value).toBe('monkey');
449
+ expect(options[0].selected).toBe(false);
450
+ expect(options[1].value).toBe('giraffe');
451
+ expect(options[1].selected).toBe(true);
452
+ expect(options[2].value).toBe('gorilla');
453
+ expect(options[2].selected).toBe(false);
454
});
455
456
it('should support server-side rendering with defaultValue', () => {
@@ -456,10 +461,15 @@ describe('ReactDOMSelect', () => {
461
<option value="gorilla">A gorilla!</option>
462
</select>
463
);
459
- const markup = ReactDOMServer.renderToString(stub);
460
- expect(markup).toContain('<option selected="" value="giraffe"');
461
- expect(markup).not.toContain('<option selected="" value="monkey"');
462
- expect(markup).not.toContain('<option selected="" value="gorilla"');
464
+ const container = document.createElement('div');
465
+ container.innerHTML = ReactDOMServer.renderToString(stub);
466
+ const options = container.firstChild.options;
467
+ expect(options[0].value).toBe('monkey');
468
+ expect(options[0].selected).toBe(false);
469
+ expect(options[1].value).toBe('giraffe');
470
+ expect(options[1].selected).toBe(true);
471
+ expect(options[2].value).toBe('gorilla');
472
+ expect(options[2].selected).toBe(false);
473
});
474
475
it('should support server-side rendering with dangerouslySetInnerHTML', () => {
@@ -487,10 +497,15 @@ describe('ReactDOMSelect', () => {
497
/>
498
</select>
499
);
490
- const markup = ReactDOMServer.renderToString(stub);
491
- expect(markup).toContain('<option selected="" value="giraffe"');
492
- expect(markup).not.toContain('<option selected="" value="monkey"');
493
- expect(markup).not.toContain('<option selected="" value="gorilla"');
500
+ const container = document.createElement('div');
501
+ container.innerHTML = ReactDOMServer.renderToString(stub);
502
+ const options = container.firstChild.options;
503
+ expect(options[0].value).toBe('monkey');
504
+ expect(options[0].selected).toBe(false);
505
+ expect(options[1].value).toBe('giraffe');
506
+ expect(options[1].selected).toBe(true);
507
+ expect(options[2].value).toBe('gorilla');
508
+ expect(options[2].selected).toBe(false);
509
});
510
511
it('should support server-side rendering with multiple', () => {
@@ -501,10 +516,15 @@ describe('ReactDOMSelect', () => {
516
<option value="gorilla">A gorilla!</option>
517
</select>
518
);
504
- const markup = ReactDOMServer.renderToString(stub);
505
- expect(markup).toContain('<option selected="" value="giraffe"');
506
- expect(markup).toContain('<option selected="" value="gorilla"');
507
- expect(markup).not.toContain('<option selected="" value="monkey"');
519
+ const container = document.createElement('div');
520
+ container.innerHTML = ReactDOMServer.renderToString(stub);
521
+ const options = container.firstChild.options;
522
+ expect(options[0].value).toBe('monkey');
523
+ expect(options[0].selected).toBe(false);
524
+ expect(options[1].value).toBe('giraffe');
525
+ expect(options[1].selected).toBe(true);
526
+ expect(options[2].value).toBe('gorilla');
527
+ expect(options[2].selected).toBe(true);
528
});
529
530
it('should not control defaultValue if re-adding options', () => {
packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+46
-11
@@ -54,6 +54,45 @@ describe('ReactDOMServerSuspense', () => {
54
throw new Promise(() => {});
55
}
56
57
+ function getVisibleChildren(element) {
58
+ const children = [];
59
+ let node = element.firstChild;
60
+ while (node) {
61
+ if (node.nodeType === 1) {
62
+ if (
63
+ node.tagName !== 'SCRIPT' &&
64
+ node.tagName !== 'TEMPLATE' &&
65
+ node.tagName !== 'template' &&
66
+ !node.hasAttribute('hidden') &&
67
+ !node.hasAttribute('aria-hidden')
68
+ ) {
69
+ const props = {};
70
+ const attributes = node.attributes;
71
+ for (let i = 0; i < attributes.length; i++) {
72
+ if (
73
+ attributes[i].name === 'id' &&
74
+ attributes[i].value.includes(':')
75
+ ) {
76
+ // We assume this is a React added ID that's a non-visual implementation detail.
77
+ continue;
78
+ }
79
+ props[attributes[i].name] = attributes[i].value;
80
+ }
81
+ props.children = getVisibleChildren(node);
82
+ children.push(React.createElement(node.tagName.toLowerCase(), props));
83
+ }
84
+ } else if (node.nodeType === 3) {
85
+ children.push(node.data);
86
+ }
87
+ node = node.nextSibling;
88
+ }
89
+ return children.length === 0
90
+ ? undefined
91
+ : children.length === 1
92
+ ? children[0]
93
+ : children;
94
+ }
95
+
96
// @gate experimental || www
97
it('should render the children when no promise is thrown', async () => {
98
const c = await serverRender(
@@ -63,10 +102,7 @@ describe('ReactDOMServerSuspense', () => {
102
</React.Suspense>
103
</div>,
104
);
66
- const e = c.children[0];
67
-
68
- expect(e.tagName).toBe('DIV');
69
- expect(e.textContent).toBe('Children');
105
+ expect(getVisibleChildren(c)).toEqual(<div>Children</div>);
106
});
107
108
// @gate experimental || www
@@ -78,10 +114,7 @@ describe('ReactDOMServerSuspense', () => {
114
</React.Suspense>
115
</div>,
116
);
81
- const e = c.children[0];
82
-
83
- expect(e.tagName).toBe('DIV');
84
- expect(e.textContent).toBe('Fallback');
117
+ expect(getVisibleChildren(c)).toEqual(<div>Fallback</div>);
118
});
119
120
// @gate experimental || www
@@ -98,10 +131,12 @@ describe('ReactDOMServerSuspense', () => {
131
</React.Suspense>
132
</div>,
133
);
101
- const e = c.children[0];
134
103
- expect(e.innerHTML).toBe(
104
- '<div>Children</div><!--$!--><div>Fallback</div><!--/$-->',
135
+ expect(getVisibleChildren(c)).toEqual(
136
+ <div>
137
+ <div>Children</div>
138
+ <div>Fallback</div>
139
+ </div>,
140
);
141
});
142