How to use inferno-compat - 10 common examples

it('should not allow update state inside of getInitialState', function() {
    spyOn(console, 'error');
    var StatefulComponent = React.createClass({
      getInitialState: function() {
        this.setState({ stateField: 'something' });

        return { stateField: 'somethingelse' };
      },
      render: function() {
        return <div>;
      }
    });
    expect(() =&gt; renderIntoDocument()).toThrow();
    // expect(console.error.calls.count()).toBe(1);
    // expect(console.error.argsForCall[0][0]).toBe(
    //   'Warning: setState(...): Can only update a mounted or ' +
    //   'mounting component. This usually means you called setState() on an ' +
    //   'unmounted component. This is a no-op. Please check the code for the ' +
    //   'StatefulComponent component.'</div>

it('should batch unmounts', function() {
    var outer;
    var Inner = React.createClass({
      render: function() {
        return <div>;
      },
      componentWillUnmount: function() {
        // This should get silently ignored (maybe with a warning), but it
        // shouldn't break React.
        outer.setState({ showInner: false });
      }
    });
    var Outer = React.createClass({
      getInitialState: function() {
        return { showInner: true };
      },
      render: function() {
        return <div>{this.state.showInner &amp;&amp; }</div>;
      }</div>

it('should call nested lifecycle methods in the right order', function() {
    var log;
    var logger = function(msg) {
      return function() {
        // return true for shouldComponentUpdate
        log.push(msg);
        return true;
      };
    };
    var Outer = React.createClass({
      render: function() {
        return (
          <div>
            
          </div>
        );
      },
      componentWillMount: logger('outer componentWillMount'),
      componentDidMount: logger('outer componentDidMount'),
      componentWillReceiveProps: logger('outer componentWillReceiveProps'),
      shouldComponentUpdate: logger('outer shouldComponentUpdate'),
      componentWillUpdate: logger('outer componentWillUpdate'),
      componentDidUpdate: logger('outer componentDidUpdate'),
      componentWillUnmount: logger('outer componentWillUnmount')
    });
    var Inner = React.createClass({

exports.create = function(obj) {
	var children = [];
	for (var key in obj) {
		if (obj.hasOwnProperty(key)) {
			var child = [].concat(obj[ key ]);
			for (var i = 0; i < child.length; i++) {
				var c = child[ i ];
				// if unkeyed, clone attrs and inject key
				if (inferno.isValidElement(c) && !(c.props && c.props.key)) {
					var a = {};
					if (c.props) for (var j in c.props) a[ j ] = c.props[ j ];
					a.key = key + '.' + i;
					c = inferno.createElement(c.type, a, c.children);
				}
				if (c != null) children.push(c);
			}
		}
	}
	return children;
};

export function withApollo(
  WrappedComponent,
  operationOptions: OperationOption = {},
) {

  const withDisplayName = `withApollo(${getDisplayName(WrappedComponent)})`;

  class WithApollo extends Component {
    static displayName = withDisplayName;
    static WrappedComponent = WrappedComponent;
    static contextTypes = { client: PropTypes.object.isRequired };

    // data storage
    private client: ApolloClient; // apollo client

    constructor(props, context) {
      super(props, context);
      this.client = context.client;

      invariant(!!this.client,
          `Could not find "client" in the context of ` +
          `"${withDisplayName}". ` +
          `Wrap the root component in an `,
        );

    }

/* tslint:disable:no-unused-variable */
import ApolloClient, { ApolloStore } from 'apollo-client';
/* tslint:enable:no-unused-variable */

import invariant = require('invariant');

export declare interface ProviderProps {
  store?: Store;
  immutable?: boolean;
  client: ApolloClient;
}

export default class ApolloProvider extends Component {
  static propTypes = {
    store: PropTypes.shape({
      subscribe: PropTypes.func.isRequired,
      dispatch: PropTypes.func.isRequired,
      getState: PropTypes.func.isRequired,
    }),
    client: PropTypes.object.isRequired,
    immutable: PropTypes.bool,
    children: PropTypes.element.isRequired,
  };

  static childContextTypes = {
    store: PropTypes.object,
    client: PropTypes.object.isRequired,
  };

  static contextTypes = {
    store: PropTypes.object,
  };

/* tslint:enable:no-unused-variable */

import invariant = require('invariant');

export declare interface ProviderProps {
  store?: Store;
  immutable?: boolean;
  client: ApolloClient;
}

export default class ApolloProvider extends Component {
  static propTypes = {
    store: PropTypes.shape({
      subscribe: PropTypes.func.isRequired,
      dispatch: PropTypes.func.isRequired,
      getState: PropTypes.func.isRequired,
    }),
    client: PropTypes.object.isRequired,
    immutable: PropTypes.bool,
    children: PropTypes.element.isRequired,
  };

  static childContextTypes = {
    store: PropTypes.object,
    client: PropTypes.object.isRequired,
  };

  static contextTypes = {
    store: PropTypes.object,
  };

  constructor(props, context) {

/* tslint:disable:no-unused-variable */
import ApolloClient, { ApolloStore } from 'apollo-client';
/* tslint:enable:no-unused-variable */

import invariant = require('invariant');

export declare interface ProviderProps {
  store?: Store;
  immutable?: boolean;
  client: ApolloClient;
}

export default class ApolloProvider extends Component {
  static propTypes = {
    store: PropTypes.shape({
      subscribe: PropTypes.func.isRequired,
      dispatch: PropTypes.func.isRequired,
      getState: PropTypes.func.isRequired,
    }),
    client: PropTypes.object.isRequired,
    immutable: PropTypes.bool,
    children: PropTypes.element.isRequired,
  };

  static childContextTypes = {
    store: PropTypes.object,
    client: PropTypes.object.isRequired,
  };

  static contextTypes = {
    store: PropTypes.object,

it('Should automatically add px suffix to whitelisted numeric style properties', () => {
    render(<div style="{{">foo</div>, container);

    expect(innerHTML(container.innerHTML)).toBe(innerHTML(`<div style="width: 10px; z-index: 1;">foo</div>`));
  });

it('should export instance', () => {
      class App extends Component {
        render() {
          return null;
        }
        componentDidMount() {
          this.renderInner();
        }
        renderInner() {
          const wrapper = document.createElement('div');
          this.inner = unstable_renderSubtreeIntoContainer(this, , wrapper);
        }
      }
      const root = document.createElement('div');
      const app = render(, root);
      expect(typeof app.inner.getNode === 'function').toEqual(true);
    });