hm-react-cli/package-modules/anujs/packages/render/dom/__tests__/ReactDOMFiber-test.js

Create a Huimei React project by module

'use strict';

const React = require('react');
const ReactDOM = require('react-dom');
const ReactTestUtils = require('test-utils');
const PropTypes = require('prop-types');

describe('ReactDOMFiber', () => {
	let container;

	beforeEach(() => {
	
		container = document.createElement('div');
	});
	afterEach(() => {
		ReactDOM.unmountComponentAtNode(container);
	}, 5000);

	it('should render strings as children', () => {
		const Box = ({ value }) => <div>{value}</div>;

		ReactDOM.render(<Box value="foo" />, container);
		expect(container.textContent).toEqual('foo');
	});

	it('should render numbers as children', () => {
		const Box = ({ value }) => <div>{value}</div>;

		ReactDOM.render(<Box value={10} />, container);

		expect(container.textContent).toEqual('10');
	});

	it('should be called a callback argument', () => {
		// mounting phase
		let called = false;
		ReactDOM.render(<div>Foo</div>, container, () => (called = true));
		expect(called).toEqual(true);

		// updating phase
		called = false;
		ReactDOM.render(<div>Foo</div>, container, () => (called = true));
		expect(called).toEqual(true);
	});

	it('should call a callback argument when the same element is re-rendered', () => {
		class Foo extends React.Component {
			render() {
				return <div>Foo</div>;
			}
		}
		const element = <Foo />;

		// mounting phase
		let called = false;
		ReactDOM.render(element, container, () => (called = true));
		expect(called).toEqual(true);

		// updating phase
		called = false;
		ReactDOM.unstable_batchedUpdates(() => {
			ReactDOM.render(element, container, () => (called = true));
		});
		expect(called).toEqual(true);
	});

	it('should render a component returning strings directly from render', () => {
		const Text = ({ value }) => value;

		ReactDOM.render(<Text value="foo" />, container);
		expect(container.textContent).toEqual('foo');
	});

	it('should render a component returning numbers directly from render', () => {
		const Text = ({ value }) => value;

		ReactDOM.render(<Text value={10} />, container);

		expect(container.textContent).toEqual('10');
	});

	it('finds the DOM Text node of a string child', () => {
		class Text extends React.Component {
			render() {
				return this.props.value;
			}
		}

		let instance = null;
		ReactDOM.render(<Text value="foo" ref={ref => (instance = ref)} />, container);

		const textNode = ReactDOM.findDOMNode(instance);
		expect(textNode).toBe(container.firstChild);
		expect(textNode.nodeType).toBe(3);
		expect(textNode.nodeValue).toBe('foo');
	});

	it('finds the first child when a component returns a fragment', () => {
		class Fragment extends React.Component {
			render() {
				return [<div key="a" />, <span key="b" />];
			}
		}

		let instance = null;
		ReactDOM.render(<Fragment ref={ref => (instance = ref)} />, container);

		expect(container.childNodes.length).toBe(2);

		const firstNode = ReactDOM.findDOMNode(instance);
		expect(firstNode).toBe(container.firstChild);
		expect(firstNode.tagName).toBe('DIV');
	});

	it('finds the first child even when fragment is nested', () => {
		class Wrapper extends React.Component {
			render() {
				return this.props.children;
			}
		}

		class Fragment extends React.Component {
			render() {
				return [
					<Wrapper key="a">
						<div />
					</Wrapper>,
					<span key="b" />,
				];
			}
		}

		let instance = null;
		ReactDOM.render(<Fragment ref={ref => (instance = ref)} />, container);

		expect(container.childNodes.length).toBe(2);

		const firstNode = ReactDOM.findDOMNode(instance);
		expect(firstNode).toBe(container.firstChild);
		expect(firstNode.tagName).toBe('DIV');
	});

	it('finds the first child even when first child renders null', () => {
		class NullComponent extends React.Component {
			render() {
				return null;
			}
		}

		class Fragment extends React.Component {
			render() {
				return [<NullComponent key="a" />, <div key="b" />, <span key="c" />];
			}
		}

		let instance = null;
		ReactDOM.render(<Fragment ref={ref => (instance = ref)} />, container);

		expect(container.childNodes.length).toBe(2);

		const firstNode = ReactDOM.findDOMNode(instance);
		expect(firstNode).toBe(container.firstChild);
		expect(firstNode.tagName).toBe('DIV');
	});

	let svgEls, htmlEls, mathEls;
	const expectSVG = { ref: el => svgEls.push(el) };
	const expectHTML = { ref: el => htmlEls.push(el) };
	const expectMath = { ref: el => mathEls.push(el) };

	const usePortal = function(tree) {
		return ReactDOM.createPortal(tree, document.createElement('div'));
	};

	const assertNamespacesMatch = function(tree) {
		container = document.createElement('div');
		svgEls = [];
		htmlEls = [];
		mathEls = [];

		ReactDOM.render(tree, container);
		svgEls.forEach(el => {
			expect(el.namespaceURI).toBe('http://www.w3.org/2000/svg');
		});
		htmlEls.forEach(el => {
			expect(el.namespaceURI).toBe('http://www.w3.org/1999/xhtml');
		});
		mathEls.forEach(el => {
			expect(el.namespaceURI).toBe('http://www.w3.org/1998/Math/MathML');
		});

		ReactDOM.unmountComponentAtNode(container);
		expect(container.innerHTML).toBe('');
	};

	it('should render one portal', () => {
		const portalContainer = document.createElement('div');

		ReactDOM.render(<div>{ReactDOM.createPortal(<div>portal</div>, portalContainer)}</div>, container);
		expect(portalContainer.innerHTML).toBe('<div>portal</div>');
		expect(container.innerHTML).toBe('<div></div>');

		ReactDOM.unmountComponentAtNode(container);
		expect(portalContainer.innerHTML).toBe('');
		expect(container.innerHTML).toBe('');
	});

	// TODO: remove in React 17
	it('should support unstable_createPortal alias', () => {
		const portalContainer = document.createElement('div');
		const createPortal = ReactDOM.createPortal;

		expect(() =>
			ReactDOM.render(<div>{createPortal(<div>portal</div>, portalContainer)}</div>, container)
		).toLowPriorityWarnDev(
			'The ReactDOM.unstable_createPortal() alias has been deprecated, ' +
				'and will be removed in React 17+. Update your code to use ' +
				'ReactDOM.createPortal() instead. It has the exact same API, ' +
				'but without the "unstable_" prefix.'
		);
		expect(portalContainer.innerHTML).toBe('<div>portal</div>');
		expect(container.innerHTML).toBe('<div></div>');

		ReactDOM.unmountComponentAtNode(container);
		expect(portalContainer.innerHTML).toBe('');
		expect(container.innerHTML).toBe('');
	});

	it('should render many portals', () => {
		const portalContainer1 = document.createElement('div');
		const portalContainer2 = document.createElement('div');

		const ops = [];
		class Child extends React.Component {
			componentDidMount() {
				ops.push(`${this.props.name} componentDidMount`);
			}
			componentDidUpdate() {
				ops.push(`${this.props.name} componentDidUpdate`);
			}
			componentWillUnmount() {
				ops.push(`${this.props.name} componentWillUnmount`);
			}
			render() {
				return <div>{this.props.name}</div>;
			}
		}

		class Parent extends React.Component {
			componentDidMount() {
				ops.push(`Parent:${this.props.step} componentDidMount`);
			}
			componentDidUpdate() {
				ops.push(`Parent:${this.props.step} componentDidUpdate`);
			}
			componentWillUnmount() {
				ops.push(`Parent:${this.props.step} componentWillUnmount`);
			}
			render() {
				const { step } = this.props;
				return [
					<Child key="a" name={`normal[0]:${step}`} />,
					ReactDOM.createPortal(<Child key="b" name={`portal1[0]:${step}`} />, portalContainer1),
					<Child key="c" name={`normal[1]:${step}`} />,
					ReactDOM.createPortal(
						[<Child key="d" name={`portal2[0]:${step}`} />, <Child key="e" name={`portal2[1]:${step}`} />],
						portalContainer2
					),
				];
			}
		}

		ReactDOM.render(<Parent step="a" />, container);
		expect(portalContainer1.innerHTML).toBe('<div>portal1[0]:a</div>');
		expect(portalContainer2.innerHTML).toBe('<div>portal2[0]:a</div><div>portal2[1]:a</div>');
		expect(container.innerHTML).toBe('<div>normal[0]:a</div><div>normal[1]:a</div>');
		expect(ops).toEqual([
			'normal[0]:a componentDidMount',
			'portal1[0]:a componentDidMount',
			'normal[1]:a componentDidMount',
			'portal2[0]:a componentDidMount',
			'portal2[1]:a componentDidMount',
			'Parent:a componentDidMount',
		]);

		ops.length = 0;
		ReactDOM.render(<Parent step="b" />, container);
		expect(portalContainer1.innerHTML).toBe('<div>portal1[0]:b</div>');
		expect(portalContainer2.innerHTML).toBe('<div>portal2[0]:b</div><div>portal2[1]:b</div>');
		expect(container.innerHTML).toBe('<div>normal[0]:b</div><div>normal[1]:b</div>');
		expect(ops).toEqual([
			'normal[0]:b componentDidUpdate',
			'portal1[0]:b componentDidUpdate',
			'normal[1]:b componentDidUpdate',
			'portal2[0]:b componentDidUpdate',
			'portal2[1]:b componentDidUpdate',
			'Parent:b componentDidUpdate',
		]);

		ops.length = 0;
		ReactDOM.unmountComponentAtNode(container);
		expect(portalContainer1.innerHTML).toBe('');
		expect(portalContainer2.innerHTML).toBe('');
		expect(container.innerHTML).toBe('');
		expect(ops).toEqual([
			'Parent:b componentWillUnmount',
			'normal[0]:b componentWillUnmount',
			'portal1[0]:b componentWillUnmount',
			'normal[1]:b componentWillUnmount',
			'portal2[0]:b componentWillUnmount',
			'portal2[1]:b componentWillUnmount',
		]);
	});
	it("复杂的插入点机制测试", () => {
        function prev(el){
			return el.previousSibling || {}
		}
		var div = document.createElement("div")
		class InnerBox extends React.PureComponent {
			state = {
				current: 0,
			}
			componentDidMount() {
				console.log('InnerBox render');
				setTimeout(() => {
					console.log('current跟上次不一样)');
					this.setState({ current: 1 }, ()=>{
						expect(prev(this.refs.aaa).id).toBe("a2")
					});
				}, 50);
				setTimeout(() => {
					console.log('current跟上次一样，dom位置互换');
					this.setState({ current: 1 }, ()=>{
						expect(prev(this.refs.aaa).id).toBe("a2")
					});
				}, 100);
				setTimeout(() => {
					console.log('current跟上次不一样，dom位置复原');
					this.setState({ current: 2 }, ()=>{
						expect(prev(this.refs.aaa).id).toBe("a2")
					});
				}, 150);
				setTimeout(() => {
					console.log('current跟上次一样，dom位置互换');
					this.setState({ current: 2 }, ()=>{
						expect(prev(this.refs.aaa).id).toBe("a2")
					});
				}, 200);
			}
			render() {
				console.log('inner render trigger');
				return (
					<div id="a3" ref="aaa">
						<div style={{ height: 100 }}>内部组件{this.state.current}</div>
					</div>
				);
			}
			
		};

		class WrapBox extends React.PureComponent {
			state = {
				value: 1,
			}
			componentDidMount() {
				console.log('WrapBox render');
				// 此处如果在组件创建以后，再次setState，会导致dom位置错误的现象发生
				setTimeout(() => {
					console.log('父容器state值改变');
					this.setState({
						value: 1,
					});
				}, 70);
			}
			render() {
				console.log('wrap render trigger');
				return (
					<quoteblock>
						<div id="a1">标题区域1</div>
						<div id="a2">标题区域2</div>
						<InnerBox />
						<div id="a4">标题区域3</div>
					</quoteblock>
				);
			}
		}
	
		ReactDOM.render(
			<div>
				<WrapBox />
				<div>hello anu!</div>
			</div>,
			div
		);
		
	})

	it('should render nested portals', () => {
		const portalContainer1 = document.createElement('div');
		const portalContainer2 = document.createElement('div');
		const portalContainer3 = document.createElement('div');

		ReactDOM.render(
			[
				<div key="a">normal[0]</div>,
				ReactDOM.createPortal(
					[
						<div key="b">portal1[0]</div>,
						ReactDOM.createPortal(<div key="c">portal2[0]</div>, portalContainer2),
						ReactDOM.createPortal(<div key="d">portal3[0]</div>, portalContainer3),
						<div key="e">portal1[1]</div>,
					],
					portalContainer1
				),
				<div key="f">normal[1]</div>,
			],
			container
		);
		expect(portalContainer1.innerHTML).toBe('<div>portal1[0]</div><div>portal1[1]</div>');
		expect(portalContainer2.innerHTML).toBe('<div>portal2[0]</div>');
		expect(portalContainer3.innerHTML).toBe('<div>portal3[0]</div>');
		expect(container.innerHTML).toBe('<div>normal[0]</div><div>normal[1]</div>');

		ReactDOM.unmountComponentAtNode(container);
		expect(portalContainer1.innerHTML).toBe('');
		expect(portalContainer2.innerHTML).toBe('');
		expect(portalContainer3.innerHTML).toBe('');
		expect(container.innerHTML).toBe('');
	});

	it('should reconcile portal children', () => {
		const portalContainer = document.createElement('div');

		ReactDOM.render(<div>{ReactDOM.createPortal(<div>portal:1</div>, portalContainer)}</div>, container);
		expect(portalContainer.innerHTML).toBe('<div>portal:1</div>');
		expect(container.innerHTML).toBe('<div></div>');

		ReactDOM.render(<div>{ReactDOM.createPortal(<div>portal:2</div>, portalContainer)}</div>, container);
		expect(portalContainer.innerHTML).toBe('<div>portal:2</div>');
		expect(container.innerHTML).toBe('<div></div>');

		ReactDOM.render(<div>{ReactDOM.createPortal(<p>portal:3</p>, portalContainer)}</div>, container);
		expect(portalContainer.innerHTML).toBe('<p>portal:3</p>');
		expect(container.innerHTML).toBe('<div></div>');

		ReactDOM.render(<div>{ReactDOM.createPortal(['Hi', 'Bye'], portalContainer)}</div>, container);
		expect(portalContainer.innerHTML).toBe('HiBye');
		expect(container.innerHTML).toBe('<div></div>');

		ReactDOM.render(<div>{ReactDOM.createPortal(['Bye', 'Hi'], portalContainer)}</div>, container);
		expect(portalContainer.innerHTML).toBe('ByeHi');
		expect(container.innerHTML).toBe('<div></div>');

		ReactDOM.render(<div>{ReactDOM.createPortal(null, portalContainer)}</div>, container);
		expect(portalContainer.innerHTML).toBe('');
		expect(container.innerHTML).toBe('<div></div>');
	});

	it('should keep track of namespace across portals (simple)', () => {
		assertNamespacesMatch(
			<svg {...expectSVG}>
				<image {...expectSVG} />
				{usePortal(<div {...expectHTML} />)}
				<image {...expectSVG} />
			</svg>
		);
		assertNamespacesMatch(
			<math {...expectMath}>
				<mi {...expectMath} />
				{usePortal(<div {...expectHTML} />)}
				<mi {...expectMath} />
			</math>
		);
		assertNamespacesMatch(
			<div {...expectHTML}>
				<p {...expectHTML} />
				{usePortal(
					<svg {...expectSVG}>
						<image {...expectSVG} />
					</svg>
				)}
				<p {...expectHTML} />
			</div>
		);
	});

	it('should keep track of namespace across portals (medium)', () => {
		assertNamespacesMatch(
			<svg {...expectSVG}>
				<image {...expectSVG} />
				{usePortal(<div {...expectHTML} />)}
				<image {...expectSVG} />
				{usePortal(<div {...expectHTML} />)}
				<image {...expectSVG} />
			</svg>
		);
		assertNamespacesMatch(
			<div {...expectHTML}>
				<math {...expectMath}>
					<mi {...expectMath} />
					{usePortal(
						<svg {...expectSVG}>
							<image {...expectSVG} />
						</svg>
					)}
				</math>
				<p {...expectHTML} />
			</div>
		);
		assertNamespacesMatch(
			<math {...expectMath}>
				<mi {...expectMath} />
				{usePortal(
					<svg {...expectSVG}>
						<image {...expectSVG} />
						<foreignObject {...expectSVG}>
							<p {...expectHTML} />
							<math {...expectMath}>
								<mi {...expectMath} />
							</math>
							<p {...expectHTML} />
						</foreignObject>
						<image {...expectSVG} />
					</svg>
				)}
				<mi {...expectMath} />
			</math>
		);
		assertNamespacesMatch(
			<div {...expectHTML}>
				{usePortal(
					<svg {...expectSVG}>
						{usePortal(<div {...expectHTML} />)}
						<image {...expectSVG} />
					</svg>
				)}
				<p {...expectHTML} />
			</div>
		);
		assertNamespacesMatch(
			<svg {...expectSVG}>
				<svg {...expectSVG}>
					{usePortal(<div {...expectHTML} />)}
					<image {...expectSVG} />
				</svg>
				<image {...expectSVG} />
			</svg>
		);
	});

	it('should keep track of namespace across portals (complex)', () => {
		assertNamespacesMatch(
			<div {...expectHTML}>
				{usePortal(
					<svg {...expectSVG}>
						<image {...expectSVG} />
					</svg>
				)}
				<p {...expectHTML} />
				<svg {...expectSVG}>
					<image {...expectSVG} />
				</svg>
				<svg {...expectSVG}>
					<svg {...expectSVG}>
						<image {...expectSVG} />
					</svg>
					<image {...expectSVG} />
				</svg>
				<p {...expectHTML} />
			</div>
		);
		assertNamespacesMatch(
			<div {...expectHTML}>
				<svg {...expectSVG}>
					<svg {...expectSVG}>
						<image {...expectSVG} />
						{usePortal(
							<svg {...expectSVG}>
								<image {...expectSVG} />
								<svg {...expectSVG}>
									<image {...expectSVG} />
								</svg>
								<image {...expectSVG} />
							</svg>
						)}
						<image {...expectSVG} />
						<foreignObject {...expectSVG}>
							<p {...expectHTML} />
							{usePortal(<p {...expectHTML} />)}
							<p {...expectHTML} />
						</foreignObject>
					</svg>
					<image {...expectSVG} />
				</svg>
				<p {...expectHTML} />
			</div>
		);
		assertNamespacesMatch(
			<div {...expectHTML}>
				<svg {...expectSVG}>
					<foreignObject {...expectSVG}>
						<p {...expectHTML} />
						{usePortal(
							<svg {...expectSVG}>
								<image {...expectSVG} />
								<svg {...expectSVG}>
									<image {...expectSVG} />
									<foreignObject {...expectSVG}>
										<p {...expectHTML} />
									</foreignObject>
									{usePortal(<p {...expectHTML} />)}
								</svg>
								<image {...expectSVG} />
							</svg>
						)}
						<p {...expectHTML} />
					</foreignObject>
					<image {...expectSVG} />
				</svg>
				<p {...expectHTML} />
			</div>
		);
	});

	it('should unwind namespaces on uncaught errors', () => {
		function BrokenRender() {
			throw new Error('Hello');
		}

		expect(() => {
			assertNamespacesMatch(
				<svg {...expectSVG}>
					<BrokenRender />
				</svg>
			);
		}).toThrow('Hello');
		assertNamespacesMatch(<div {...expectHTML} />);
	});

	it('should unwind namespaces on caught errors', () => {
		function BrokenRender() {
			throw new Error('Hello');
		}

		class ErrorBoundary extends React.Component {
			state = { error: null };
			componentDidCatch(error) {
				this.setState({ error });
			}
			render() {
				if (this.state.error) {
					return <p {...expectHTML} />;
				}
				return this.props.children;
			}
		}

		assertNamespacesMatch(
			<svg {...expectSVG}>
				<foreignObject {...expectSVG}>
					<ErrorBoundary>
						<math {...expectMath}>
							<BrokenRender />
						</math>
					</ErrorBoundary>
				</foreignObject>
				<image {...expectSVG} />
			</svg>
		);
		assertNamespacesMatch(<div {...expectHTML} />);
	});

	it('should unwind namespaces on caught errors in a portal', () => {
		function BrokenRender() {
			throw new Error('Hello');
		}

		class ErrorBoundary extends React.Component {
			state = { error: null };
			componentDidCatch(error) {
				this.setState({ error });
			}
			render() {
				if (this.state.error) {
					return <image {...expectSVG} />;
				}
				return this.props.children;
			}
		}

		assertNamespacesMatch(
			<svg {...expectSVG}>
				<ErrorBoundary>
					{usePortal(
						<div {...expectHTML}>
							<math {...expectMath}>
								<BrokenRender />)
							</math>
						</div>
					)}
				</ErrorBoundary>
				{usePortal(<div {...expectHTML} />)}
			</svg>
		);
	});

	it('should pass portal context when rendering subtree elsewhere', () => {
		const portalContainer = document.createElement('div');

		class Component extends React.Component {
			static contextTypes = {
				foo: PropTypes.string.isRequired,
			};

			render() {
				return <div>{this.context.foo}</div>;
			}
		}

		class Parent extends React.Component {
			static childContextTypes = {
				foo: PropTypes.string.isRequired,
			};

			getChildContext() {
				return {
					foo: 'bar',
				};
			}

			render() {
				return ReactDOM.createPortal(<Component />, portalContainer);
			}
		}

		ReactDOM.render(<Parent />, container);
		expect(container.innerHTML).toBe('');
		expect(portalContainer.innerHTML).toBe('<div>bar</div>');
	});

	it('should update portal context if it changes due to setState', () => {
		const portalContainer = document.createElement('div');

		class Component extends React.Component {
			static contextTypes = {
				foo: PropTypes.string.isRequired,
				getFoo: PropTypes.func.isRequired,
			};

			render() {
				return <div>{this.context.foo + '-' + this.context.getFoo()}</div>;
			}
		}

		class Parent extends React.Component {
			static childContextTypes = {
				foo: PropTypes.string.isRequired,
				getFoo: PropTypes.func.isRequired,
			};

			state = {
				bar: 'initial',
			};

			getChildContext() {
				return {
					foo: this.state.bar,
					getFoo: () => this.state.bar,
				};
			}

			render() {
				return ReactDOM.createPortal(<Component />, portalContainer);
			}
		}

		const instance = ReactDOM.render(<Parent />, container);
		expect(portalContainer.innerHTML).toBe('<div>initial-initial</div>');
		expect(container.innerHTML).toBe('');
		instance.setState({ bar: 'changed' });
		expect(portalContainer.innerHTML).toBe('<div>changed-changed</div>');
		expect(container.innerHTML).toBe('');
	});

	it('should update portal context if it changes due to re-render', () => {
		const portalContainer = document.createElement('div');

		class Component extends React.Component {
			static contextTypes = {
				foo: PropTypes.string.isRequired,
				getFoo: PropTypes.func.isRequired,
			};

			render() {
				return <div>{this.context.foo + '-' + this.context.getFoo()}</div>;
			}
		}

		class Parent extends React.Component {
			static childContextTypes = {
				foo: PropTypes.string.isRequired,
				getFoo: PropTypes.func.isRequired,
			};

			getChildContext() {
				return {
					foo: this.props.bar,
					getFoo: () => this.props.bar,
				};
			}

			render() {
				return ReactDOM.createPortal(<Component />, portalContainer);
			}
		}

		ReactDOM.render(<Parent bar="initial" />, container);
		expect(portalContainer.innerHTML).toBe('<div>initial-initial</div>');
		expect(container.innerHTML).toBe('');
		ReactDOM.render(<Parent bar="changed" />, container);
		expect(portalContainer.innerHTML).toBe('<div>changed-changed</div>');
		expect(container.innerHTML).toBe('');
	});

	it('findDOMNode should find dom element after expanding a fragment', () => {
		class MyNode extends React.Component {
			render() {
				return !this.props.flag ? [<div key="a" />] : [<span key="b" />, <div key="a" />];
			}
		}

		const myNodeA = ReactDOM.render(<MyNode />, container);
		const a = ReactDOM.findDOMNode(myNodeA);
		expect(a.tagName).toBe('DIV');

		const myNodeB = ReactDOM.render(<MyNode flag={true} />, container);
		expect(myNodeA === myNodeB).toBe(true);

		const b = ReactDOM.findDOMNode(myNodeB);
		expect(b.tagName).toBe('SPAN');
	});

	it('should bubble events from the portal to the parent', () => {
		const portalContainer = document.createElement('div');

		const ops = [];
		let portal = null;

		ReactDOM.render(
			<div onClick={() => ops.push('parent clicked')}>
				{ReactDOM.createPortal(
					<div onClick={() => ops.push('portal clicked')} ref={n => (portal = n)}>
						portal
					</div>,
					portalContainer
				)}
			</div>,
			container
		);

		expect(portal.tagName).toBe('DIV');

		const fakeNativeEvent = {};
		ReactTestUtils.simulateNativeEventOnNode('topClick', portal, fakeNativeEvent);

		expect(ops).toEqual(['portal clicked', 'parent clicked']);
	});

	it('should not onMouseLeave when staying in the portal', () => {
		console.log('现在无法模仿onMouseLeave');
		return;
		const portalContainer = document.createElement('div');

		let ops = [];
		let firstTarget = null;
		let secondTarget = null;
		let thirdTarget = null;

		function simulateMouseMove(from, to) {
			if (from) {
				ReactTestUtils.simulateNativeEventOnNode('topMouseOut', from, {
					target: from,
					relatedTarget: to,
				});
			}
			if (to) {
				ReactTestUtils.simulateNativeEventOnNode('topMouseOver', to, {
					target: to,
					relatedTarget: from,
				});
			}
		}

		ReactDOM.render(
			<div>
				<div onMouseEnter={() => ops.push('enter parent')} onMouseLeave={() => ops.push('leave parent')}>
					<div ref={n => (firstTarget = n)} />
					{ReactDOM.createPortal(
						<div
							onMouseEnter={() => ops.push('enter portal')}
							onMouseLeave={() => ops.push('leave portal')}
							ref={n => (secondTarget = n)}
						>
							portal
						</div>,
						portalContainer
					)}
				</div>
				<div ref={n => (thirdTarget = n)} />
			</div>,
			container
		);

		simulateMouseMove(null, firstTarget);
		expect(ops).toEqual(['enter parent']);

		ops = [];

		simulateMouseMove(firstTarget, secondTarget);
		expect(ops).toEqual([
			// Parent did not invoke leave because we're still inside the portal.
			'enter portal',
		]);

		ops = [];

		simulateMouseMove(secondTarget, thirdTarget);
		expect(ops).toEqual([
			'leave portal',
			'leave parent', // Only when we leave the portal does onMouseLeave fire.
		]);
	});

	it('should throw on bad createPortal argument', () => {
		ReactDOM.createPortal(<div>portal</div>, document.createElement('div'));
		/*
    expect(() => {
      ReactDOM.createPortal(<div>portal</div>, null);
    }).toThrow('Target container is not a DOM element.');
    expect(() => {
      ReactDOM.createPortal(<div>portal</div>, document.createTextNode('hi'));
    }).toThrow('Target container is not a DOM element.');
    */
	});

	it('should warn for non-functional event listeners', () => {
		class Example extends React.Component {
			render() {
				return <div onClick="woops" />;
			}
		}
		expect(() => ReactDOM.render(<Example />, container)).toWarnDev(
			'Expected `onClick` listener to be a function, instead got a value of `string` type.\n' +
				'    in div (at **)\n' +
				'    in Example (at **)'
		);
	});

	it('should warn with a special message for `false` event listeners', () => {
		class Example extends React.Component {
			render() {
				return <div onClick={false} />;
			}
		}
		expect(() => ReactDOM.render(<Example />, container)).toWarnDev(
			'Expected `onClick` listener to be a function, instead got `false`.\n\n' +
				'If you used to conditionally omit it with onClick={condition && value}, ' +
				'pass onClick={condition ? value : undefined} instead.\n',
			'    in div (at **)\n' + '    in Example (at **)'
		);
	});

	it('should not update event handlers until commit', () => {
		let ops = [];
		const handlerA = () => ops.push('A');
		const handlerB = () => ops.push('B');

		class Example extends React.Component {
			state = { flip: false, count: 0 };
			flip() {
				this.setState({ flip: true, count: this.state.count + 1 });
			}
			tick() {
				this.setState({ count: this.state.count + 1 });
			}
			render() {
				const useB = !this.props.forceA && this.state.flip;
				return <div onClick={useB ? handlerB : handlerA} />;
			}
		}

		class Click extends React.Component {
			constructor() {
				super();
				click(node);
			}
			render() {
				return null;
			}
		}

		let inst;
		ReactDOM.render([<Example key="a" ref={n => (inst = n)} />], container);
		const node = container.firstChild;
		expect(node.tagName).toEqual('DIV');

		function click(target) {
			const fakeNativeEvent = {};
			ReactTestUtils.simulateNativeEventOnNode('topClick', target, fakeNativeEvent);
		}

		click(node);

		expect(ops).toEqual(['A']);
		ops = [];

		// Render with the other event handler.
		inst.flip();

		click(node);

		expect(ops).toEqual(['B']);
		ops = [];

		// Rerender without changing any props.
		inst.tick();

		click(node);

		expect(ops).toEqual(['B']);
		ops = [];

		// Render a flip back to the A handler. The second component invokes the
		// click handler during render to simulate a click during an aborted
		// render. I use this hack because at current time we don't have a way to
		// test aborted ReactDOM renders.
		ReactDOM.render([<Example key="a" forceA={true} />, <Click key="b" />], container);

		// Because the new click handler has not yet committed, we should still
		// invoke B.
		expect(ops).toEqual(['B']);
		ops = [];

		// Any click that happens after commit, should invoke A.
		click(node);
		expect(ops).toEqual(['A']);
	});

	it('should not crash encountering low-priority tree', () => {
		ReactDOM.render(
			<div hidden={true}>
				<div />
			</div>,
			container
		);
	});

	it('should not warn when rendering into an empty container', () => {
		ReactDOM.render(<div>foo</div>, container);
		expect(container.innerHTML).toBe('<div>foo</div>');
		ReactDOM.render(null, container);
		expect(container.innerHTML).toBe('');
		ReactDOM.render(<div>bar</div>, container);
		expect(container.innerHTML).toBe('<div>bar</div>');
	});
	

	it('should warn when doing an update to a container manually updated outside of React', () => {
		// when not messing with the DOM outside of React
		ReactDOM.render(<div>foo</div>, container);
		ReactDOM.render(<div>bar</div>, container);
		expect(container.innerHTML).toBe('<div>bar</div>');
		// then we mess with the DOM before an update
		container.innerHTML = '<div>MEOW.</div>';
		// expect(() => ReactDOM.render(<div>baz</div>, container)).toWarnDev(
		//   'render(...): ' +
		//     'It looks like the React-rendered content of this container was ' +
		//     'removed without using React. This is not supported and will ' +
		//     'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +
		//     'to empty a container.',
		// );
	});

	it('should warn when doing an update to a container manually cleared outside of React', () => {
		// when not messing with the DOM outside of React
		ReactDOM.render(<div>foo</div>, container);
		ReactDOM.render(<div>bar</div>, container);
		expect(container.innerHTML).toBe('<div>bar</div>');
		// then we mess with the DOM before an update
		container.innerHTML = '';
		// expect(() => ReactDOM.render(<div>baz</div>, container)).toWarnDev(
		//   'render(...): ' +
		//     'It looks like the React-rendered content of this container was ' +
		//     'removed without using React. This is not supported and will ' +
		//     'cause errors. Instead, call ReactDOM.unmountComponentAtNode ' +
		//     'to empty a container.',
		// );
	});

	it('should render a text component with a text DOM node on the same document as the container', () => {
		console.log("这不测试有问题，iframe无法跨域")
		return
		// 1. Create a new document through the use of iframe
		// 2. Set up the spy to make asserts when a text component
		//    is rendered inside the iframe container
		const textContent = 'Hello world';
		const iframe = document.createElement('iframe');
	
		document.body.appendChild(iframe);
		const iframeDocument = iframe.contentDocument;
		iframeDocument.domain = document.domain;
		iframeDocument.write('<!DOCTYPE html><html><head></head><body><div></div></body></html>');
		iframeDocument.close();
		const iframeContainer = iframeDocument.body.firstChild;

		let actualDocument;
		let textNode;
		//anu只使用insertBefore
		let oldInsertBefore = iframeContainer.insertBefore;
		iframeContainer.insertBefore = function(node, insertPoint) {
			actualDocument = node.ownerDocument;
			textNode = node;
			return oldInsertBefore.call(this, node, insertPoint);
		};
		// spyOnDevAndProd(iframeContainer, 'appendChild').and.callFake(node => {
		//   actualDocument = node.ownerDocument;
		//   textNode = node;
		// });

		ReactDOM.render(textContent, iframeContainer);

		expect(textNode.textContent).toBe(textContent);
		// expect(actualDocument).not.toBe(document);
		expect(actualDocument).toBe(iframeDocument);
		expect(iframeContainer.appendChild).toHaveBeenCalledTimes(1);
	});

	it('should mount into a document fragment', () => {
		const fragment = document.createDocumentFragment();
		ReactDOM.render(<div>foo</div>, fragment);
		expect(container.innerHTML.trim()).toBe('');
		container.appendChild(fragment);
		expect(container.innerHTML.trim()).toBe('<div>foo</div>');
	});
});