import ReactTestUtils from "../../lib/ReactTestUtils"; import React from '../../src/May'; import { render, unmountComponentAtNode, findDOMNode } from '../../src/may-dom/MayDom' var ReactDOM = { render: render, unmountComponentAtNode: unmountComponentAtNode, findDOMNode: findDOMNode } React.render = render; import ReactDOMServer from '../../src/may-server/MayServer' // import React from "../dist/ReactANU"; // var ReactDOM = React; // var React = require('react');//hyphenate // var ReactDOM = require('react-dom'); //https://github.com/facebook/react/blob/master/src/isomorphic/children/__tests__/ReactChildren-test.js describe("ReactComponent", function () { // this.timeout(200000); it("should throw on invalid render targets", () => { var container = document.createElement("div"); // jQuery objects are basically arrays; people often pass them in by mistake expect(function() { ReactDOM.render(
, [container]); }).toThrowError(/container参数错误/); }); it("should throw when supplying a ref outside of render method", () => { var instance =
; instance = ReactTestUtils.renderIntoDocument(instance); }); it('mayRender', () => { spyOn(console, 'error'); var container = document.createElement('div'); class Child extends React.Component { // constructor(props){ // super(props); // this.state={val2:'I wonder'}; // } render() { return (
{this.props.key} {this.props.val}
); } } class Parent extends React.Component { constructor() { super(); this.state = { val: 'I wonder' }; this.Change = this.Change.bind(this); } Change() { this.setState({ val: 'I see' }); } onFocus() { this.refs.inputRef.focus() } render() { var item = []; return (
{this.state.val === 'I wonder' ? '' : } 666  {this.state.val} {this.state.val !== 'I wonder' ? : }
) } } //this._updateDOMChildren React.render(, container); expect(console.error.calls.count()).toBe(0); }); it("should warn when children are mutated during render", () => { function Wrapper(props) { props.children[1] =

; // Mutation is illegal return

{props.children}
; } var instance = ReactTestUtils.renderIntoDocument( ); expect(ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, "p").length).toBe(1); }); it("should warn when children are mutated during update", () => { class Wrapper extends React.Component { componentDidMount() { this.props.children[1] =

; // Mutation is illegal this.forceUpdate(); } render() { return

{this.props.children}
; } } var instance = ReactTestUtils.renderIntoDocument( ); expect(ReactTestUtils.scryRenderedDOMComponentsWithTag(instance, "p").length).toBe(1); }); it("should support refs on owned components", () => { var innerObj = {}; var outerObj = {}; class Wrapper extends React.Component { getObject = () => { return this.props.object; }; render() { return
{this.props.children}
; } } class Component extends React.Component { render() { var inner = ; var outer = ( {inner} ); return outer; } componentDidMount() { expect(this.refs.inner.getObject()).toEqual(innerObj); expect(this.refs.outer.getObject()).toEqual(outerObj); } } ReactTestUtils.renderIntoDocument(); }); it("should not have refs on unmounted components", () => { class Parent extends React.Component { render() { return (
); } componentDidMount() { expect(this.refs && this.refs.test).toEqual(null); } } class Child extends React.Component { render() { return
; } } ReactTestUtils.renderIntoDocument(} />); }); it("should support new-style refs", () => { var innerObj = {}; var outerObj = {}; class Wrapper extends React.Component { getObject = () => { return this.props.object; }; render() { return
{this.props.children}
; } } var mounted = false; class Component extends React.Component { render() { var inner = (this.innerRef = c)} />; var outer = ( (this.outerRef = c)}> {inner} ); return outer; } componentDidMount() { expect(this.innerRef.getObject()).toEqual(innerObj); expect(this.outerRef.getObject()).toEqual(outerObj); mounted = true; } } ReactTestUtils.renderIntoDocument(); expect(mounted).toBe(true); }); it("should support new-style refs with mixed-up owners", () => { class Wrapper extends React.Component { getTitle = () => { return this.props.title; }; render() { return this.props.getContent(); } } var mounted = false; class Component extends React.Component { getInner = () => { // (With old-style refs, it's impossible to get a ref to this div // because Wrapper is the current owner when this function is called.) return
(this.innerRef = c)} />; }; render() { return (this.wrapperRef = c)} getContent={this.getInner} />; } componentDidMount() { // Check .props.title to make sure we got the right elements back expect(this.wrapperRef.getTitle()).toBe("wrapper"); expect(ReactDOM.findDOMNode(this.innerRef).className).toBe("inner"); mounted = true; } } ReactTestUtils.renderIntoDocument(); expect(mounted).toBe(true); }); /** * ------------------ The Life-Cycle of a Composite Component ------------------ * * - constructor: Initialization of state. The instance is now retained. * - componentWillMount * - render * - [children's constructors] * - [children's componentWillMount and render] * - [children's componentDidMount] * - componentDidMount * * Update Phases: * - componentWillReceiveProps (only called if parent updated) * - shouldComponentUpdate * - componentWillUpdate * - render * - [children's constructors or receive props phases] * - componentDidUpdate * * - componentWillUnmount * - [children's componentWillUnmount] * - [children destroyed] * - (destroyed): The instance is now blank, released by React and ready for GC. * * ----------------------------------------------------------------------------- */ it("should call refs at the correct time", () => { var log = []; class Inner extends React.Component { render() { log.push(`inner ${this.props.id} render`); return
; } componentDidMount() { log.push(`inner ${this.props.id} componentDidMount`); } componentDidUpdate() { log.push(`inner ${this.props.id} componentDidUpdate`); } componentWillUnmount() { log.push(`inner ${this.props.id} componentWillUnmount`); } } class Outer extends React.Component { render() { return (
{ log.push(`ref 1 got ${c ? `instance ${c.props.id}` : "null"}`); }} /> { log.push(`ref 2 got ${c ? `instance ${c.props.id}` : "null"}`); }} />
); } componentDidMount() { log.push("outer componentDidMount"); } componentDidUpdate() { log.push("outer componentDidUpdate"); } componentWillUnmount() { log.push("outer componentWillUnmount"); } } // mount, update, unmount var container = document.createElement("div"); log.push("start mount"); ReactDOM.render(, container); log.push("start update"); ReactDOM.render(, container); log.push("start unmount"); ReactDOM.unmountComponentAtNode(container); //eslint-disable indent expect(log).toEqual([ "start mount", "inner 1 render", "inner 2 render", "inner 1 componentDidMount", "ref 1 got instance 1", "inner 2 componentDidMount", "ref 2 got instance 2", "outer componentDidMount", "start update", // Stack resets refs before rendering "ref 1 got null", "inner 1 render", "ref 2 got null", "inner 2 render", "inner 1 componentDidUpdate", "ref 1 got instance 1", "inner 2 componentDidUpdate", "ref 2 got instance 2", "outer componentDidUpdate", "start unmount", "outer componentWillUnmount", "ref 1 got null", "inner 1 componentWillUnmount", "ref 2 got null", "inner 2 componentWillUnmount" ]); }); it("includes owner name in the error about badly-typed elements", () => { spyOn(console, "error"); var X = 'undefined'; function Indirection(props) { return
{props.children}
; } function Bar() { return ( ); } function Foo() { return ; } ReactTestUtils.renderIntoDocument() }); it("throws if a plain object is used as a child", () => { var children = { x: , y: , z: }; var element =
{[children]}
; var container = document.createElement("div"); var ex; try { ReactDOM.render(element, container); } catch (e) { ex = e; } // expect(ex).toBeDefined(); }); it("throws if a plain object even if it is in an owner", () => { class Foo extends React.Component { render() { var children = { a: , b: , c: }; return
{[children]}
; } } var container = document.createElement("div"); var ex; try { ReactDOM.render(, container); } catch (e) { ex = e; } // expect(ex).toBeDefined(); }); it("throws if a plain object is used as a child when using SSR", async () => { var children = { x: , y: , z: }; var element =
{[children]}
; var ex; try { ReactDOMServer.renderToString(element); } catch (e) { ex = e; console.warn(e); } // expect(ex).toBeDefined(); }); it("throws if a plain object even if it is in an owner when using SSR", async () => { class Foo extends React.Component { render() { var children = { a: , b: , c: }; return
{[children]}
; } } var container = document.createElement("div"); var ex; try { ReactDOMServer.renderToString(, container); } catch (e) { ex = e; console.warn(e); } // expect(ex).toBeDefined(); }); });