Skip to content

Commit

Permalink
[Fizz] Make some tests more resilient to implementation details (#21438)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@sebmarkbage
sebmarkbage committed May 5, 2021
1 parent 12751d2 commit 212d290
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 27 deletions.
52 changes: 36 additions & 16 deletions packages/react-dom/src/__tests__/ReactDOMSelect-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -442,10 +442,15 @@ describe('ReactDOMSelect', () => {
<option value="gorilla">A gorilla!</option>
</select>
);
const markup = ReactDOMServer.renderToString(stub);
expect(markup).toContain('<option selected="" value="giraffe"');
expect(markup).not.toContain('<option selected="" value="monkey"');
expect(markup).not.toContain('<option selected="" value="gorilla"');
const container = document.createElement('div');
container.innerHTML = ReactDOMServer.renderToString(stub);
const options = container.firstChild.options;
expect(options[0].value).toBe('monkey');
expect(options[0].selected).toBe(false);
expect(options[1].value).toBe('giraffe');
expect(options[1].selected).toBe(true);
expect(options[2].value).toBe('gorilla');
expect(options[2].selected).toBe(false);
});

it('should support server-side rendering with defaultValue', () => {
Expand All @@ -456,10 +461,15 @@ describe('ReactDOMSelect', () => {
<option value="gorilla">A gorilla!</option>
</select>
);
const markup = ReactDOMServer.renderToString(stub);
expect(markup).toContain('<option selected="" value="giraffe"');
expect(markup).not.toContain('<option selected="" value="monkey"');
expect(markup).not.toContain('<option selected="" value="gorilla"');
const container = document.createElement('div');
container.innerHTML = ReactDOMServer.renderToString(stub);
const options = container.firstChild.options;
expect(options[0].value).toBe('monkey');
expect(options[0].selected).toBe(false);
expect(options[1].value).toBe('giraffe');
expect(options[1].selected).toBe(true);
expect(options[2].value).toBe('gorilla');
expect(options[2].selected).toBe(false);
});

it('should support server-side rendering with dangerouslySetInnerHTML', () => {
Expand Down Expand Up @@ -487,10 +497,15 @@ describe('ReactDOMSelect', () => {
/>
</select>
);
const markup = ReactDOMServer.renderToString(stub);
expect(markup).toContain('<option selected="" value="giraffe"');
expect(markup).not.toContain('<option selected="" value="monkey"');
expect(markup).not.toContain('<option selected="" value="gorilla"');
const container = document.createElement('div');
container.innerHTML = ReactDOMServer.renderToString(stub);
const options = container.firstChild.options;
expect(options[0].value).toBe('monkey');
expect(options[0].selected).toBe(false);
expect(options[1].value).toBe('giraffe');
expect(options[1].selected).toBe(true);
expect(options[2].value).toBe('gorilla');
expect(options[2].selected).toBe(false);
});

it('should support server-side rendering with multiple', () => {
Expand All @@ -501,10 +516,15 @@ describe('ReactDOMSelect', () => {
<option value="gorilla">A gorilla!</option>
</select>
);
const markup = ReactDOMServer.renderToString(stub);
expect(markup).toContain('<option selected="" value="giraffe"');
expect(markup).toContain('<option selected="" value="gorilla"');
expect(markup).not.toContain('<option selected="" value="monkey"');
const container = document.createElement('div');
container.innerHTML = ReactDOMServer.renderToString(stub);
const options = container.firstChild.options;
expect(options[0].value).toBe('monkey');
expect(options[0].selected).toBe(false);
expect(options[1].value).toBe('giraffe');
expect(options[1].selected).toBe(true);
expect(options[2].value).toBe('gorilla');
expect(options[2].selected).toBe(true);
});

it('should not control defaultValue if re-adding options', () => {
Expand Down
57 changes: 46 additions & 11 deletions packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,45 @@ describe('ReactDOMServerSuspense', () => {
throw new Promise(() => {});
}

function getVisibleChildren(element) {
const children = [];
let node = element.firstChild;
while (node) {
if (node.nodeType === 1) {
if (
node.tagName !== 'SCRIPT' &&
node.tagName !== 'TEMPLATE' &&
node.tagName !== 'template' &&
!node.hasAttribute('hidden') &&
!node.hasAttribute('aria-hidden')
) {
const props = {};
const attributes = node.attributes;
for (let i = 0; i < attributes.length; i++) {
if (
attributes[i].name === 'id' &&
attributes[i].value.includes(':')
) {
// We assume this is a React added ID that's a non-visual implementation detail.
continue;
}
props[attributes[i].name] = attributes[i].value;
}
props.children = getVisibleChildren(node);
children.push(React.createElement(node.tagName.toLowerCase(), props));
}
} else if (node.nodeType === 3) {
children.push(node.data);
}
node = node.nextSibling;
}
return children.length === 0
? undefined
: children.length === 1
? children[0]
: children;
}

// @gate experimental || www
it('should render the children when no promise is thrown', async () => {
const c = await serverRender(
Expand All @@ -63,10 +102,7 @@ describe('ReactDOMServerSuspense', () => {
</React.Suspense>
</div>,
);
const e = c.children[0];

expect(e.tagName).toBe('DIV');
expect(e.textContent).toBe('Children');
expect(getVisibleChildren(c)).toEqual(<div>Children</div>);
});

// @gate experimental || www
Expand All @@ -78,10 +114,7 @@ describe('ReactDOMServerSuspense', () => {
</React.Suspense>
</div>,
);
const e = c.children[0];

expect(e.tagName).toBe('DIV');
expect(e.textContent).toBe('Fallback');
expect(getVisibleChildren(c)).toEqual(<div>Fallback</div>);
});

// @gate experimental || www
Expand All @@ -98,10 +131,12 @@ describe('ReactDOMServerSuspense', () => {
</React.Suspense>
</div>,
);
const e = c.children[0];

expect(e.innerHTML).toBe(
'<div>Children</div><!--$!--><div>Fallback</div><!--/$-->',
expect(getVisibleChildren(c)).toEqual(
<div>
<div>Children</div>
<div>Fallback</div>
</div>,
);
});

Expand Down

0 comments on commit 212d290

Please sign in to comment.