).then(e => expect(e.getAttribute('width')).toBe('30'));
+ });
+
+ itRenders('renders booleans correctly', (render) => {
+ return Promise.all([
+ render(
).then(e => expect(e.getAttribute('hidden')).toBe('')),
+ /* eslint-disable react/jsx-boolean-value */
+ render().then(e => expect(e.getAttribute('hidden')).toBe('')),
+ /* eslint-enable react/jsx-boolean-value */
+ render().then(e => expect(e.getAttribute('hidden')).toBe('')),
+
+ // I think this is not correct behavior, since hidden="" in HTML indicates
+ // that the boolean property is present. however, it is how the current code
+ // behaves, so the test is included here.
+ render().then(e => expect(e.getAttribute('hidden')).toBe(null)),
+ // I also disagree with the behavior of the next five tests; I think it's
+ // overly clever and masks what may be a programmer error. Ideally, it would
+ // warn and pass the value through.
+ render().then(e => expect(e.getAttribute('hidden')).toBe('')),
+ render().then(e => expect(e.getAttribute('hidden')).toBe('')),
+ render(
).then(e => expect(e.getAttribute('hidden')).toBe('')),
+ render(
).then(e => expect(e.getAttribute('hidden')).toBe('')),
+ render(
).then(e => expect(e.getAttribute('hidden')).toBe(null)),
+
+ render(
).then(e => expect(e.getAttribute('hidden')).toBe(null)),
+ render().then(e => expect(e.getAttribute('hidden')).toBe(null)),
+ ]);
+ });
+
+ itRenders('renders booleans as strings for string attributes', (render) => {
+ return Promise.all([
+ // I disagree with this behavior; I think it is undesirable and masks a
+ // probable programmer error. I'd prefer that {true} & {false} be rendered as
+ // they are for boolean attributes.
+ render().then(e => expect(e.getAttribute('href')).toBe('true')),
+ /* eslint-disable react/jsx-boolean-value */
+ render().then(e => expect(e.getAttribute('href')).toBe('true')),
+ /* eslint-enable react/jsx-boolean-value */
+ render().then(e => expect(e.getAttribute('href')).toBe('false')),
+ ]);
+ });
+
+ itRenders('handles download as a combined boolean/string attribute', (render) => {
+ return Promise.all([
+ render().then(e => expect(e.getAttribute('download')).toBe('')),
+ /* eslint-disable react/jsx-boolean-value */
+ render().then(e => expect(e.getAttribute('download')).toBe('')),
+ /* eslint-enable react/jsx-boolean-value */
+ render().then(e => expect(e.getAttribute('download')).toBe(null)),
+ render().then(e => expect(e.getAttribute('download')).toBe('myfile')),
+ render().then(e => expect(e.getAttribute('download')).toBe('true')),
+ ]);
+ });
+
+ itRenders('renders className and htmlFor correctly', (render) => {
+ return Promise.all([
+ render().then(e => expect(e.getAttribute('class')).toBe(null)),
+ render().then(e => expect(e.getAttribute('class')).toBe('myClassName')),
+ render().then(e => expect(e.getAttribute('class')).toBe('')),
+ // I disagree with the behavior of the next three tests; I think that a boolean value should
+ // warn, and not transform the value. These tests express current behavior.
+ render(
).then(e => expect(e.getAttribute('class')).toBe('true')),
+ /* eslint-disable react/jsx-boolean-value */
+ render().then(e => expect(e.getAttribute('class')).toBe('true')),
+ /* eslint-enable react/jsx-boolean-value */
+ render(
).then(e => expect(e.getAttribute('class')).toBe('false')),
+
+ render().then(e => expect(e.getAttribute('for')).toBe(null)),
+ render().then(e => expect(e.getAttribute('for')).toBe('myFor')),
+ render().then(e => expect(e.getAttribute('for')).toBe('')),
+ // I disagree with the behavior of the next three tests; I think that a boolean value should
+ // warn, and not transform the value. These tests express current behavior.
+ render(
).then(e => expect(e.getAttribute('for')).toBe('true')),
+ /* eslint-disable react/jsx-boolean-value */
+ render().then(e => expect(e.getAttribute('for')).toBe('true')),
+ /* eslint-enable react/jsx-boolean-value */
+ render(
).then(e => expect(e.getAttribute('for')).toBe('false')),
+ ]);
+ });
+
+ itRenders('does not render key, children, ref, or dangerouslySetInnerHTML as attributes', (render) => {
+ class RefComponent extends React.Component {
+ render() {
+ return ;
+ }
+ }
+ return Promise.all([
+ render(
)
+ .then(e => expect(e.getAttribute('dangerouslySetInnerHTML')).toBe(null)),
+ ]);
+ });
+
+ itRenders('does not render unknown attributes', render =>
+ render().then(e => expect(e.getAttribute('foo')).toBe(null)));
+
+ itRenders('does not render unknown attributes for non-standard elements', render =>
+ render(
{}}/>).then(e => expect(e.getAttribute('onClick')).toBe(null)),
+ render(
{}}/>).then(e => expect(e.getAttribute('onclick')).toBe(null)),
+ render(
{}}/>).then(e => expect(e.getAttribute('click')).toBe(null)),
+ render(
{}}/>).then(e => expect(e.getAttribute('onKeyDown')).toBe(null)),
+ render(
+
+
+
+
+ )
+ .then(element => {
+ for (var i = 0; i < 3; i++) {
+ expect(element.tagName.toLowerCase()).toBe('div');
+ expect(element.childNodes.length).toBe(1);
+ element = element.firstChild;
+ }
+ expect(element.tagName.toLowerCase()).toBe('div');
+ expect(element.childNodes.length).toBe(0);
+ });
+ });
+ itRenders('should reconnect multi-child hierarchies of components', render => {
+ const Component = (props) =>
+
+
+
+
+ )
+ .then(element => {
+ expect(element.tagName.toLowerCase()).toBe('div');
+ expect(element.childNodes.length).toBe(2);
+ for (var i = 0; i < 2; i++) {
+ var child = element.childNodes[i];
+ expect(child.tagName.toLowerCase()).toBe('div');
+ expect(child.childNodes.length).toBe(2);
+ for (var j = 0; j < 2; j++) {
+ var grandchild = child.childNodes[j];
+ expect(grandchild.tagName.toLowerCase()).toBe('div');
+ expect(grandchild.childNodes.length).toBe(0);
+ }
+ }
+ });
+ });
+
+ itRenders('renders a div with a child', render =>
+ render( ).then(e => {
+ expect(e.id).toBe('parent');
+ expect(e.childNodes.length).toBe(5);
+ expect(e.childNodes[0].id).toBe('child1');
+ expect(e.childNodes[0].childNodes.length).toBe(0);
+ expectTextNode(e.childNodes[1], ' ');
+ expect(e.childNodes[4].id).toBe('child2');
+ expect(e.childNodes[4].childNodes.length).toBe(0);
+ }));
+ itRenders('renders a div with a child surrounded by whitespace', render =>
+ render( ).then(e => { // eslint-disable-line no-multi-spaces
+ expect(e.id).toBe('parent');
+ expect(e.childNodes.length).toBe(7);
+ expectTextNode(e.childNodes[0], ' ');
+ expect(e.childNodes[3].id).toBe('child');
+ expect(e.childNodes[3].childNodes.length).toBe(0);
+ expectTextNode(e.childNodes[4], ' ');
+ }));
+
+ itThrowsOnRender('throws when rendering null', render => render(null));
+ itThrowsOnRender('throws when rendering false', render => render(false));
+ itThrowsOnRender('throws when rendering undefined', render => render(undefined));
+ itThrowsOnRender('throws when rendering number', render => render(30));
+ itThrowsOnRender('throws when rendering string', render => render('foo'));
+ });
+
+ describe('form controls', function() {
+ // simple inputs
+ // -------------
+ itRenders('can render an input with a value', (render) => {
+ return Promise.all([
+ render( {}}/>).then(e =>
+ expect(e.getAttribute('value') || e.value).toBe('foo')),
+ render().then(e =>
+ expect(e.getAttribute('value') || e.value).toBe('foo')),
+ ]);
+ });
+
+ itRenders('can render an input with a value and no onChange/readOnly', render => {
+ return render(, 1)
+ .then(element => expect(element.getAttribute('value') || element.value).toBe('foo'));
+ });
+
+ itRenders('can render an input with a defaultValue', (render) => {
+ return render().then(e => {
+ expect(e.getAttribute('value') || e.value).toBe('foo');
+ expect(e.getAttribute('defaultValue')).toBe(null);
+ });
+ });
+
+ itRenders('can render an input with both a value and defaultValue part 1', render => {
+ return render(, 1)
+ .then(element => {
+ expect(element.getAttribute('value') || element.value).toBe('foo');
+ expect(element.getAttribute('defaultValue')).toBe(null);
+ });
+ });
+
+ itRenders('can render an input with both a value and defaultValue part 2', render => {
+ return render(, 1)
+ .then(element => {
+ expect(element.getAttribute('value') || element.value).toBe('foo');
+ expect(element.getAttribute('defaultValue')).toBe(null);
+ });
+ });
+
+ // checkboxes
+ // ----------
+ itRenders('can render a checkbox that is checked', (render) => {
+ return Promise.all([
+ render( {}}/>)
+ .then(e => expect(e.checked).toBe(true)),
+ render()
+ .then(e => expect(e.checked).toBe(true)),
+ ]);
+ });
+
+ itRenders('can render a checkbox that is checked and no onChange/readOnly', render => {
+ return render(, 1)
+ .then(element => expect(element.checked).toBe(true));
+ });
+
+ itRenders('can render a checkbox with defaultChecked', (render) => {
+ return render().then(e => {
+ expect(e.checked).toBe(true);
+ expect(e.getAttribute('defaultChecked')).toBe(null);
+ });
+ });
+
+ itRenders('can render a checkbox with both a checked and defaultChecked part 1', render => {
+ return render(, 1)
+ .then(element => {
+ expect(element.checked).toBe(true);
+ expect(element.getAttribute('defaultChecked')).toBe(null);
+ });
+ });
+
+ itRenders('can render a checkbox with both a checked and defaultChecked part 2', render => {
+ return render(, 1)
+ .then(element => {
+ expect(element.checked).toBe(true);
+ expect(element.getAttribute('defaultChecked')).toBe(null);
+ });
+ });
+
+ // textareas
+ // ---------
+ itRenders('can render a textarea with a value', (render) => {
+ return Promise.all([
+ render(
{}}/>).then(e => expect(e.getAttribute('onCustomEvent')).toBe(null)),
+ ]);
+ });
+ });
+
+ describe('components and children', function() {
+ function expectNode(node, type, value) {
+ expect(node).not.toBe(null);
+ expect(node.nodeType).toBe(type);
+ expect(node.nodeValue).toMatch(value);
+ }
+
+ function expectTextNode(node, text) {
+ expectNode(node, COMMENT_NODE_TYPE, ' react-text: [0-9]+ ');
+ if (text.length > 0) {
+ node = node.nextSibling;
+ expectNode(node, TEXT_NODE_TYPE, text);
+ }
+ expectNode(node.nextSibling, COMMENT_NODE_TYPE, ' /react-text ');
+ }
+
+ function expectEmptyNode(node) {
+ expectNode(node, COMMENT_NODE_TYPE, ' react-empty: [0-9]+ ');
+ }
+
+ itRenders('renders a div with text', render =>
+ render(Text ).then(e => {
+ expect(e.tagName.toLowerCase()).toBe('nonstandard');
+ expect(e.childNodes.length).toBe(1);
+ expectNode(e.firstChild, TEXT_NODE_TYPE, 'Text');
+ }));
+ itRenders('renders a custom element with text', render =>
+ render(Text ).then(e => {
+ expect(e.tagName.toLowerCase()).toBe('custom-element');
+ expect(e.childNodes.length).toBe(1);
+ expectNode(e.firstChild, TEXT_NODE_TYPE, 'Text');
+ }));
+ itRenders('renders an svg element', render =>
+ render().then(e => {
+ expect(e.childNodes.length).toBe(0);
+ expect(e.tagName.toLowerCase()).toBe('svg');
+ expect(e.namespaceURI).toBe('http://www.w3.org/2000/svg');
+ }));
+ itRenders('renders svg element with an xlink', render =>
+ render().then(e => {
+ e = e.firstChild;
+ expect(e.childNodes.length).toBe(0);
+ expect(e.tagName.toLowerCase()).toBe('image');
+ expect(e.namespaceURI).toBe('http://www.w3.org/2000/svg');
+ expect(e.getAttributeNS('http://www.w3.org/1999/xlink', 'href')).toBe('http://i.imgur.com/w7GCRPb.png');
+ }));
+ itRenders('renders a math element', render =>
+ render().then(e => {
+ expect(e.childNodes.length).toBe(0);
+ expect(e.tagName.toLowerCase()).toBe('math');
+ expect(e.namespaceURI).toBe('http://www.w3.org/1998/Math/MathML');
+ }));
+ // specially wrapped components
+ // (see the big switch near the beginning ofReactDOMComponent.mountComponent)
+ itRenders('renders an img', render =>
+ render(![]()
).then(e => {
+ expect(e.childNodes.length).toBe(0);
+ expect(e.nextSibling).toBe(null);
+ expect(e.tagName.toLowerCase()).toBe('img');
+ }));
+ itRenders('renders a button', render =>
+ render().then(e => {
+ expect(e.childNodes.length).toBe(0);
+ expect(e.nextSibling).toBe(null);
+ expect(e.tagName.toLowerCase()).toBe('button');
+ }));
+
+ itRenders('renders a number as single child',
+ render => render(
).then(e => {
+ expect(e.childNodes.length).toBe(1);
+ expect(e.firstChild.tagName.toLowerCase()).toBe('span');
+ expect(e.firstChild.getAttribute('id')).toBe('child');
+ expect(e.firstChild.childNodes.length).toBe(0);
+ }));
+ itRenders('renders a null component as empty', (render) => {
+ const NullComponent = () => null;
+ return render(Text
).then(e => {
+ expect(e.tagName.toLowerCase()).toBe('div');
+ expect(e.childNodes.length).toBe(1);
+ expectNode(e.firstChild, TEXT_NODE_TYPE, 'Text');
+ }));
+ itRenders('renders a div with text with flanking whitespace', render =>
+ render( Text
).then(e => {
+ expect(e.childNodes.length).toBe(1);
+ expectNode(e.childNodes[0], TEXT_NODE_TYPE, ' Text ');
+ }));
+ itRenders('renders a div with text', render =>
+ render({"Text"}
).then(e => {
+ expect(e.childNodes.length).toBe(1);
+ expectNode(e.firstChild, TEXT_NODE_TYPE, 'Text');
+ }));
+ itRenders('renders a div with blank text child', render =>
+ render({''}
).then(e => {
+ expect(e.childNodes.length).toBe(0);
+ }));
+ itRenders('renders a div with blank text children', render =>
+ render({''}{''}{''}
).then(e => {
+ expect(e.childNodes.length).toBe(6);
+ expectTextNode(e.childNodes[0], '');
+ expectTextNode(e.childNodes[2], '');
+ expectTextNode(e.childNodes[4], '');
+ }));
+ itRenders('renders a div with whitespace children', render =>
+ render({' '}{' '}{' '}
).then(e => {
+ expect(e.childNodes.length).toBe(9);
+ expectTextNode(e.childNodes[0], ' ');
+ expectTextNode(e.childNodes[3], ' ');
+ expectTextNode(e.childNodes[6], ' ');
+ }));
+ itRenders('renders a div with text sibling to a node', render =>
+ render(TextMore Text
).then(e => {
+ expect(e.childNodes.length).toBe(4);
+ expectTextNode(e.childNodes[0], 'Text');
+ expect(e.childNodes[3].tagName.toLowerCase()).toBe('span');
+ expect(e.childNodes[3].childNodes.length).toBe(1);
+ expectNode(e.childNodes[3].firstChild, TEXT_NODE_TYPE, 'More Text');
+ }));
+ itRenders('renders a non-standard element with text', render =>
+ render({3}
).then(e => expect(e.textContent).toBe('3')));
+ // zero is falsey, so it could look like no children if the code isn't careful.
+ itRenders('renders zero as single child',
+ render => render({0}
).then(e => expect(e.textContent).toBe('0')));
+ itRenders('renders null single child as blank',
+ render => render({null}
).then(e => expect(e.childNodes.length).toBe(0)));
+ itRenders('renders false single child as blank',
+ render => render({false}
).then(e => expect(e.childNodes.length).toBe(0)));
+ itRenders('renders undefined single child as blank',
+ render => render({undefined}
).then(e => expect(e.childNodes.length).toBe(0)));
+
+ itRenders('renders a div with dangerouslySetInnerHTML',
+ render => render("}}>{null}foo
).then(e => {
+ expect(e.childNodes.length).toBe(3);
+ expectTextNode(e.childNodes[0], 'foo');
+ });
+ });
+
+ itRenders('renders false children as blank', (render) => {
+ return render({false}foo
).then(e => {
+ expect(e.childNodes.length).toBe(3);
+ expectTextNode(e.childNodes[0], 'foo');
+ });
+ });
+
+ itRenders('renders null and false children together as blank', (render) => {
+ return render({false}{null}foo{null}{false}
).then(e => {
+ expect(e.childNodes.length).toBe(3);
+ expectTextNode(e.childNodes[0], 'foo');
+ });
+ });
+
+ itRenders('renders only null and false children as blank', (render) => {
+ return render({false}{null}{null}{false}
).then(e => {
+ expect(e.childNodes.length).toBe(0);
+ });
+ });
+
+ itRenders('renders leading blank children with comments when there are multiple children', (render) => {
+ return render({''}foo
).then(e => {
+ expect(e.childNodes.length).toBe(5);
+ expectTextNode(e.childNodes[0], '');
+ expectTextNode(e.childNodes[2], 'foo');
+ });
+ });
+
+ itRenders('renders trailing blank children with comments when there are multiple children', (render) => {
+ return render(foo{''}
).then(e => {
+ expect(e.childNodes.length).toBe(5);
+ expectTextNode(e.childNodes[0], 'foo');
+ expectTextNode(e.childNodes[3], '');
+ });
+ });
+
+ itRenders('renders an element with just one text child without comments', (render) => {
+ return render(foo
).then(e => {
+ expect(e.childNodes.length).toBe(1);
+ expectNode(e.firstChild, TEXT_NODE_TYPE, 'foo');
+ });
+ });
+
+ itRenders('renders an element with two text children with comments', (render) => {
+ return render({'foo'}{'bar'}
).then(e => {
+ expect(e.childNodes.length).toBe(6);
+ expectTextNode(e.childNodes[0], 'foo');
+ expectTextNode(e.childNodes[3], 'bar');
+ });
+ });
+
+ itRenders('renders an element with number and text children with comments', (render) => {
+ return render({'foo'}{40}
).then(e => {
+ expect(e.childNodes.length).toBe(6);
+ expectTextNode(e.childNodes[0], 'foo');
+ expectTextNode(e.childNodes[3], '40');
+ });
+ });
+ itRenders('renders a newline-eating tag with content not starting with \\n',
+ render => render(Hello).then(e => expect(e.textContent).toBe('Hello'))); + itRenders('renders a newline-eating tag with content starting with \\n', + render => render(
{"\nHello"}).then(e => expect(e.textContent).toBe('\nHello')));
+ itRenders('renders a normal tag with content starting with \\n',
+ render => render({"\nHello"}
).then(e => expect(e.textContent).toBe('\nHello')));
+
+ itRenders('renders stateless, React.createClass, class, and factory components', (render) => {
+ const StatelessComponent = () => foo
;
+ const RccComponent = React.createClass({
+ render: function() {
+ return foo
;
+ },
+ });
+ class ClassComponent extends React.Component {
+ render() {
+ return foo
;
+ }
+ }
+ const FactoryComponent = () => {
+ return {
+ render: function() {
+ return foo
;
+ },
+ };
+ };
+ return Promise.all(
+ [StatelessComponent, RccComponent, ClassComponent, FactoryComponent].map((Component) => {
+ return render({'Text"'}
).then(e => {
+ expect(e.childNodes.length).toBe(1);
+ expectNode(e.firstChild, TEXT_NODE_TYPE, 'Text"');
+ });
+ });
+
+ itRenders('escapes >,<, and & as multiple children', render => {
+ return render({'Text1"'}{'Text2"'}
).then(e => {
+ expect(e.childNodes.length).toBe(6);
+ expectTextNode(e.childNodes[0], 'Text1"');
+ expectTextNode(e.childNodes[3], 'Text2"');
+ });
+ });
+
+ itRenders('renders single child hierarchies of components', render => {
+ const Component = (props) => {props.children}
;
+ return render(
+ {props.children}
;
+ return render(
+ ).then(e => {
+ expect(e.id).toBe('parent');
+ expect(e.childNodes.length).toBe(1);
+ expect(e.childNodes[0].id).toBe('child');
+ expect(e.childNodes[0].childNodes.length).toBe(0);
+ }));
+ itRenders('renders a div with multiple children', render =>
+ render(
).then(e => {
+ expect(e.id).toBe('parent');
+ expect(e.childNodes.length).toBe(2);
+ expect(e.childNodes[0].id).toBe('child1');
+ expect(e.childNodes[0].childNodes.length).toBe(0);
+ expect(e.childNodes[1].id).toBe('child2');
+ expect(e.childNodes[1].childNodes.length).toBe(0);
+ }));
+ itRenders('renders a div with multiple children separated by whitespace', render =>
+ render(