Skip to content

Commit

Permalink
ValidateDOMNesting tests(#11299)
Browse files Browse the repository at this point in the history 
 * Rewrite tests using only public API.
 * Modified the tests to prevent duplication of code.
 * Code review changes implemented.
  • Loading branch information
@imanushree
imanushree committed Dec 6, 2017
1 parent 8ce5367 commit ffb5e71
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 164 deletions.
243 changes: 90 additions & 153 deletions packages/react-dom/src/__tests__/validateDOMNesting-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,175 +9,112 @@

'use strict';

var validateDOMNesting;
var React = require('react');
var ReactDOM = require('react-dom');

// https://html.spec.whatwg.org/multipage/syntax.html#special
var specialTags = [
'address',
'applet',
'area',
'article',
'aside',
'base',
'basefont',
'bgsound',
'blockquote',
'body',
'br',
'button',
'caption',
'center',
'col',
'colgroup',
'dd',
'details',
'dir',
'div',
'dl',
'dt',
'embed',
'fieldset',
'figcaption',
'figure',
'footer',
'form',
'frame',
'frameset',
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'head',
'header',
'hgroup',
'hr',
'html',
'iframe',
'img',
'input',
'isindex',
'li',
'link',
'listing',
'main',
'marquee',
'menu',
'menuitem',
'meta',
'nav',
'noembed',
'noframes',
'noscript',
'object',
'ol',
'p',
'param',
'plaintext',
'pre',
'script',
'section',
'select',
'source',
'style',
'summary',
'table',
'tbody',
'td',
'template',
'textarea',
'tfoot',
'th',
'thead',
'title',
'tr',
'track',
'ul',
'wbr',
'xmp',
];

// https://html.spec.whatwg.org/multipage/syntax.html#formatting
var formattingTags = [
'a',
'b',
'big',
'code',
'em',
'font',
'i',
'nobr',
's',
'small',
'strike',
'strong',
'tt',
'u',
];
function normalizeCodeLocInfo(str) {
return str && str.replace(/at .+?:\d+/g, 'at **');
}

function isTagStackValid(stack) {
var ancestorInfo = null;
for (var i = 0; i < stack.length; i++) {
if (!validateDOMNesting.isTagValidInContext(stack[i], ancestorInfo)) {
return false;
function expectInvalidNestingWarning(shouldWarn, tagsList, warningsList = []) {
let element = null;
let tags = tagsList;
let warnings = warningsList;
console.error.calls.reset();
const container = document.createElement(tags.splice(0, 1));
while (tags.length) {
element = React.createElement(tags.pop(), null, element);
}
ReactDOM.render(element, container);
if (shouldWarn) {
expect(console.error.calls.count()).toEqual(warningsList.length);
while (warnings.length) {
expect(
normalizeCodeLocInfo(
console.error.calls.argsFor(warnings.length - 1)[0],
),
).toContain(warnings.pop());
}
ancestorInfo = validateDOMNesting.updatedAncestorInfo(
ancestorInfo,
stack[i],
null,
);
} else {
expect(console.error.calls.count()).toEqual(0);
}
return true;
}

describe('validateDOMNesting', () => {
beforeEach(() => {
jest.resetModules();

// TODO: can we express this test with only public API?
validateDOMNesting = require('../client/validateDOMNesting').default;
});

it('allows any tag with no context', () => {
if (__DEV__) {
// With renderToString (for example), we don't know where we're mounting the
// tag so we must err on the side of leniency.
var allTags = [].concat(specialTags, formattingTags, ['mysterytag']);
allTags.forEach(function(tag) {
expect(validateDOMNesting.isTagValidInContext(tag, null)).toBe(true);
});
}
});

it('allows valid nestings', () => {
if (__DEV__) {
expect(isTagStackValid(['table', 'tbody', 'tr', 'td', 'b'])).toBe(true);
expect(isTagStackValid(['body', 'datalist', 'option'])).toBe(true);
expect(isTagStackValid(['div', 'a', 'object', 'a'])).toBe(true);
expect(isTagStackValid(['div', 'p', 'button', 'p'])).toBe(true);
expect(isTagStackValid(['p', 'svg', 'foreignObject', 'p'])).toBe(true);
expect(isTagStackValid(['html', 'body', 'div'])).toBe(true);
spyOnDev(console, 'error');
expectInvalidNestingWarning(false, ['table', 'tbody', 'tr', 'td', 'b']);
expectInvalidNestingWarning(false, ['div', 'a', 'object', 'a']);
expectInvalidNestingWarning(false, ['div', 'p', 'button', 'p']);
expectInvalidNestingWarning(false, ['p', 'svg', 'foreignObject', 'p']);
expectInvalidNestingWarning(false, ['html', 'body', 'div']);

// Invalid, but not changed by browser parsing so we allow them
expect(isTagStackValid(['div', 'ul', 'ul', 'li'])).toBe(true);
expect(isTagStackValid(['div', 'label', 'div'])).toBe(true);
expect(isTagStackValid(['div', 'ul', 'li', 'section', 'li'])).toBe(true);
expect(isTagStackValid(['div', 'ul', 'li', 'dd', 'li'])).toBe(true);
expectInvalidNestingWarning(false, ['div', 'ul', 'ul', 'li']);
expectInvalidNestingWarning(false, ['div', 'label', 'div']);
expectInvalidNestingWarning(false, ['div', 'ul', 'li', 'section', 'li']);
expectInvalidNestingWarning(false, ['div', 'ul', 'li', 'dd', 'li']);
}
});

it('prevents problematic nestings', () => {
if (__DEV__) {
expect(isTagStackValid(['a', 'a'])).toBe(false);
expect(isTagStackValid(['form', 'form'])).toBe(false);
expect(isTagStackValid(['p', 'p'])).toBe(false);
expect(isTagStackValid(['table', 'tr'])).toBe(false);
expect(isTagStackValid(['div', 'ul', 'li', 'div', 'li'])).toBe(false);
expect(isTagStackValid(['div', 'html'])).toBe(false);
expect(isTagStackValid(['body', 'body'])).toBe(false);
expect(isTagStackValid(['svg', 'foreignObject', 'body', 'p'])).toBe(
false,
spyOnDev(console, 'error');
expectInvalidNestingWarning(
true,
['body', 'datalist', 'option'],
[
'render(): Rendering components directly into document.body is discouraged',
],
);
expectInvalidNestingWarning(
true,
['table', 'tr'],
['validateDOMNesting(...): <tr> cannot appear as a child of <table>'],
);
expectInvalidNestingWarning(
true,
['p', 'p'],
['validateDOMNesting(...): <p> cannot appear as a descendant of <p>'],
);
expectInvalidNestingWarning(
true,
['div', 'ul', 'li', 'div', 'li'],
['validateDOMNesting(...): <li> cannot appear as a descendant of <li>'],
);
expectInvalidNestingWarning(
true,
['div', 'html'],
['validateDOMNesting(...): <html> cannot appear as a child of <div>'],
);
expectInvalidNestingWarning(
true,
['body', 'body'],
[
'render(): Rendering components directly into document.body is discouraged',
'validateDOMNesting(...): <body> cannot appear as a child of <body>',
],
);
expectInvalidNestingWarning(
true,
['svg', 'foreignObject', 'body', 'p'],
[
'validateDOMNesting(...): <body> cannot appear as a child of <foreignObject>',
'<foreignObject /> is using uppercase HTML',
],
);
expectInvalidNestingWarning(
true,
['a', 'a'],
['validateDOMNesting(...): <a> cannot appear as a descendant of <a>'],
);
expectInvalidNestingWarning(
true,
['form', 'form'],
[
'validateDOMNesting(...): <form> cannot appear as a descendant of <form>',
],
);
}
});
Expand Down
11 changes: 0 additions & 11 deletions packages/react-dom/src/client/validateDOMNesting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -482,17 +482,6 @@ if (__DEV__) {

// TODO: turn this into a named export
validateDOMNesting.updatedAncestorInfo = updatedAncestorInfo;

// For testing
validateDOMNesting.isTagValidInContext = function(tag, ancestorInfo) {
ancestorInfo = ancestorInfo || emptyAncestorInfo;
const parentInfo = ancestorInfo.current;
const parentTag = parentInfo && parentInfo.tag;
return (
isTagValidWithParent(tag, parentTag) &&
!findInvalidAncestorForTag(tag, ancestorInfo)
);
};
}

export default validateDOMNesting;

0 comments on commit ffb5e71

Please sign in to comment.