it('should mutate the document html', function() {
var html = '<html><head><title>test</title></head><body>test</body></html>';
var testDocument = getTestDocument() || document;
mutateHTMLNodeWithMarkup(testDocument.documentElement, html);
expect(testDocument.body.innerHTML).toBe('test');
});
it('should support injected wrapper components as DOM components', () => {
const getTestDocument = require('getTestDocument');
const injectedDOMComponents = [
'button',
'form',
'iframe',
'img',
'input',
'option',
'select',
'textarea',
];
injectedDOMComponents.forEach(function(type) {
const testComponent = ReactTestUtils.renderIntoDocument(
React.createElement(type),
);
expect(testComponent.tagName).toBe(type.toUpperCase());
expect(ReactTestUtils.isDOMComponent(testComponent)).toBe(true);
});
// Full-page components (html, head, body) can't be rendered into a div
// directly...
class Root extends React.Component {
render() {
return (
<html ref="html">
<head ref="head">
<title>hello</title>
</head>
<body ref="body">
hello, world
</body>
</html>
);
}
}
const markup = ReactDOMServer.renderToString(<Root />);
const testDocument = getTestDocument(markup);
const component = ReactDOMFeatureFlags.useFiber
? ReactDOM.hydrate(<Root />, testDocument)
: ReactDOM.render(<Root />, testDocument);
expect(component.refs.html.tagName).toBe('HTML');
expect(component.refs.head.tagName).toBe('HEAD');
expect(component.refs.body.tagName).toBe('BODY');
expect(ReactTestUtils.isDOMComponent(component.refs.html)).toBe(true);
expect(ReactTestUtils.isDOMComponent(component.refs.head)).toBe(true);
expect(ReactTestUtils.isDOMComponent(component.refs.body)).toBe(true);
});
it('should support injected wrapper components as DOM components', function() {
var getTestDocument = require('getTestDocument');
var injectedDOMComponents = [
'button',
'form',
'iframe',
'img',
'input',
'option',
'select',
'textarea'
];
injectedDOMComponents.forEach(function(type) {
var component = ReactTestUtils.renderIntoDocument(
React.createElement(type)
);
expect(component.tagName).toBe(type.toUpperCase());
expect(ReactTestUtils.isDOMComponent(component)).toBe(true);
});
// Full-page components (html, head, body) can't be rendered into a div
// directly...
var Root = React.createClass({
render: function() {
return (
<html ref="html">
<head ref="head">
<title>hello</title>
</head>
<body ref="body">
hello, world
</body>
</html>
);
}
});
var markup = React.renderToString(<Root />);
var testDocument = getTestDocument(markup);
var component = React.render(<Root />, testDocument);
expect(component.refs.html.tagName).toBe('HTML');
expect(component.refs.head.tagName).toBe('HEAD');
expect(component.refs.body.tagName).toBe('BODY');
expect(ReactTestUtils.isDOMComponent(component.refs.html)).toBe(true);
expect(ReactTestUtils.isDOMComponent(component.refs.head)).toBe(true);
expect(ReactTestUtils.isDOMComponent(component.refs.body)).toBe(true);
});
it('should change attributes', function() {
var html = '<html><head><title>test</title></head><body>test</body></html>';
var testDocument = getTestDocument() || document;
mutateHTMLNodeWithMarkup(testDocument.documentElement, html);
expect(!!testDocument.documentElement.getAttribute('lang')).toBe(false);
var html2 = '<html lang="en"><head><title>test</title></head>' +
'<body>test</body></html>';
mutateHTMLNodeWithMarkup(testDocument.documentElement, html2);
expect(testDocument.documentElement.getAttribute('lang')).toBe('en');
mutateHTMLNodeWithMarkup(testDocument.documentElement, html);
expect(!!testDocument.documentElement.getAttribute('lang')).toBe(false);
});
// Create node from HTML string
function createNode(html) {
var node = (getTestDocument() || document).createElement('div');
node.innerHTML = html;
return node;
}