react 0.14.0-beta1 → 0.14.0

package/lib/createHierarchyRenderer.js

@@ -0,0 +1,85 @@
+/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule createHierarchyRenderer
+ */
+
+'use strict';
+
+var React = require('./React');
+
+/**
+ * Creates a render method that makes it easier to create, render, and inspect a
+ * hierarchy of mock React component classes.
+ *
+ * A component class is created for each of the supplied render methods. Each
+ * render method is invoked with the classes created using the render methods
+ * that come after it in the supplied list of render methods.
+ *
+ *   var renderHierarchy = createHierarchyRenderer(
+ *     function ComponentA(ComponentB, ComponentC) {...},
+ *     function ComponentB(ComponentC) {...},
+ *     function ComponentC() {...}
+ *   );
+ *
+ * When the hierarchy is invoked, a two-dimensional array is returned. Each
+ * array corresponds to a supplied render method and contains the instances
+ * returned by that render method in the order it was invoked.
+ *
+ *   var instances = renderHierarchy(
+ *     function(ComponentA[, ComponentB, ComponentC]) {
+ *       ReactDOM.render(<ComponentA />, ...);
+ *     })
+ *   );
+ *   instances[0][0]; // First return value of first render method.
+ *   instances[1][0]; // First return value of second render method.
+ *   instances[1][1]; // Second return value of second render method.
+ *
+ * Refs should be used to reference components that are not the return value of
+ * render methods.
+ *
+ *   expect(instances[0][0].refs.X).toBe(...);
+ *
+ * NOTE: The component classes created for each render method are re-used for
+ * each invocation of the hierarchy renderer. If new classes are needed, you
+ * should re-execute `createHierarchyRenderer` with the same arguments.
+ *
+ * @param {array<function>} ...renderMethods
+ * @return {function}
+ */
+function createHierarchyRenderer() {
+  for (var _len = arguments.length, renderMethods = Array(_len), _key = 0; _key < _len; _key++) {
+    renderMethods[_key] = arguments[_key];
+  }
+
+  var instances;
+  var Components = renderMethods.reduceRight(function (ComponentsAccumulator, renderMethod, depth) {
+    var Component = React.createClass({
+      displayName: renderMethod.name,
+      render: function () {
+        instances[depth].push(this);
+        return renderMethod.apply(this, ComponentsAccumulator);
+      }
+    });
+    return [Component].concat(ComponentsAccumulator);
+  }, []);
+  /**
+   * @param {function} renderComponent
+   * @return {array<array<*>>}
+   */
+  function renderHierarchy(renderComponent) {
+    instances = renderMethods.map(function () {
+      return [];
+    });
+    renderComponent.apply(null, Components);
+    return instances;
+  }
+  return renderHierarchy;
+}
+
+module.exports = createHierarchyRenderer;

package/lib/dangerousStyleValue.js

@@ -12,7 +12,7 @@
 
 'use strict';
 
-var CSSProperty = require("./CSSProperty");
+var CSSProperty = require('./CSSProperty');
 
 var isUnitlessNumber = CSSProperty.isUnitlessNumber;
 

package/lib/deprecated.js

@@ -11,8 +11,8 @@
 
 'use strict';
 
-var assign = require("./Object.assign");
-var warning = require("./warning");
+var assign = require('./Object.assign');
+var warning = require('fbjs/lib/warning');
 
 /**
  * This will log a single deprecation notice per function and forward the call
@@ -20,19 +20,20 @@ var warning = require("./warning");
  *
  * @param {string} fnName The name of the function
  * @param {string} newModule The module that fn will exist in
+ * @param {string} newPackage The module that fn will exist in
  * @param {*} ctx The context this forwarded call should run in
  * @param {function} fn The function to forward on to
  * @return {function} The function that will warn once and then call fn
  */
-function deprecated(fnName, newModule, ctx, fn) {
+function deprecated(fnName, newModule, newPackage, ctx, fn) {
   var warned = false;
-  if ('production' !== process.env.NODE_ENV) {
+  if (process.env.NODE_ENV !== 'production') {
     var newFn = function () {
-      'production' !== process.env.NODE_ENV ? warning(warned,
+      process.env.NODE_ENV !== 'production' ? warning(warned,
       // Require examples in this string must be split to prevent React's
       // build tools from mistaking them for real requires.
       // Otherwise the build tools will attempt to build a '%s' module.
-      '`require' + '("react").%s` is deprecated. Please use `require' + '("%s").%s` ' + 'instead.', fnName, newModule, fnName) : undefined;
+      'React.%s is deprecated. Please use %s.%s from require' + '(\'%s\') ' + 'instead.', fnName, newModule, fnName, newPackage) : undefined;
       warned = true;
       return fn.apply(ctx, arguments);
     };

package/lib/findDOMNode.js

@@ -12,12 +12,12 @@
 
 'use strict';
 
-var ReactCurrentOwner = require("./ReactCurrentOwner");
-var ReactInstanceMap = require("./ReactInstanceMap");
-var ReactMount = require("./ReactMount");
+var ReactCurrentOwner = require('./ReactCurrentOwner');
+var ReactInstanceMap = require('./ReactInstanceMap');
+var ReactMount = require('./ReactMount');
 
-var invariant = require("./invariant");
-var warning = require("./warning");
+var invariant = require('fbjs/lib/invariant');
+var warning = require('fbjs/lib/warning');
 
 /**
  * Returns the DOM node rendered by this element.
@@ -26,10 +26,10 @@ var warning = require("./warning");
  * @return {?DOMElement} The root node of this element.
  */
 function findDOMNode(componentOrElement) {
-  if ('production' !== process.env.NODE_ENV) {
+  if (process.env.NODE_ENV !== 'production') {
     var owner = ReactCurrentOwner.current;
     if (owner !== null) {
-      'production' !== process.env.NODE_ENV ? warning(owner._warnedAboutRefsInRender, '%s is accessing getDOMNode or findDOMNode inside its render(). ' + 'render() should be a pure function of props and state. It should ' + 'never access something that requires stale data from the previous ' + 'render, such as refs. Move this logic to componentDidMount and ' + 'componentDidUpdate instead.', owner.getName() || 'A component') : undefined;
+      process.env.NODE_ENV !== 'production' ? warning(owner._warnedAboutRefsInRender, '%s is accessing getDOMNode or findDOMNode inside its render(). ' + 'render() should be a pure function of props and state. It should ' + 'never access something that requires stale data from the previous ' + 'render, such as refs. Move this logic to componentDidMount and ' + 'componentDidUpdate instead.', owner.getName() || 'A component') : undefined;
       owner._warnedAboutRefsInRender = true;
     }
   }
@@ -42,8 +42,8 @@ function findDOMNode(componentOrElement) {
   if (ReactInstanceMap.has(componentOrElement)) {
     return ReactMount.getNodeFromInstance(componentOrElement);
   }
-  !(componentOrElement.render == null || typeof componentOrElement.render !== 'function') ? 'production' !== process.env.NODE_ENV ? invariant(false, 'Component (with keys: %s) contains `render` method ' + 'but is not mounted in the DOM', Object.keys(componentOrElement)) : invariant(false) : undefined;
-  !false ? 'production' !== process.env.NODE_ENV ? invariant(false, 'Element appears to be neither ReactComponent nor DOMNode (keys: %s)', Object.keys(componentOrElement)) : invariant(false) : undefined;
+  !(componentOrElement.render == null || typeof componentOrElement.render !== 'function') ? process.env.NODE_ENV !== 'production' ? invariant(false, 'findDOMNode was called on an unmounted component.') : invariant(false) : undefined;
+  !false ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Element appears to be neither ReactComponent nor DOMNode (keys: %s)', Object.keys(componentOrElement)) : invariant(false) : undefined;
 }
 
 module.exports = findDOMNode;

package/lib/flattenChildren.js

@@ -11,8 +11,8 @@
 
 'use strict';
 
-var traverseAllChildren = require("./traverseAllChildren");
-var warning = require("./warning");
+var traverseAllChildren = require('./traverseAllChildren');
+var warning = require('fbjs/lib/warning');
 
 /**
  * @param {function} traverseContext Context passed through traversal.
@@ -23,8 +23,8 @@ function flattenSingleChildIntoContext(traverseContext, child, name) {
   // We found a component instance.
   var result = traverseContext;
   var keyUnique = result[name] === undefined;
-  if ('production' !== process.env.NODE_ENV) {
-    'production' !== process.env.NODE_ENV ? warning(keyUnique, 'flattenChildren(...): Encountered two children with the same key, ' + '`%s`. Child keys must be unique; when two children share a key, only ' + 'the first child will be used.', name) : undefined;
+  if (process.env.NODE_ENV !== 'production') {
+    process.env.NODE_ENV !== 'production' ? warning(keyUnique, 'flattenChildren(...): Encountered two children with the same key, ' + '`%s`. Child keys must be unique; when two children share a key, only ' + 'the first child will be used.', name) : undefined;
   }
   if (keyUnique && child != null) {
     result[name] = child;

package/lib/getEventKey.js

@@ -12,7 +12,7 @@
 
 'use strict';
 
-var getEventCharCode = require("./getEventCharCode");
+var getEventCharCode = require('./getEventCharCode');
 
 /**
  * Normalization of deprecated HTML5 `key` values

package/lib/{isTextNode.js → getTestDocument.js}

@@ -6,20 +6,16 @@
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
  *
- * @providesModule isTextNode
- * @typechecks
+ * @providesModule getTestDocument
  */
 
 'use strict';
 
-var isNode = require("./isNode");
-
-/**
- * @param {*} object The object to check.
- * @return {boolean} Whether or not the object is a DOM text node.
- */
-function isTextNode(object) {
-  return isNode(object) && object.nodeType == 3;
+function getTestDocument(markup) {
+  document.open();
+  document.write(markup || '<!doctype html><html><meta charset=utf-8><title>test doc</title>');
+  document.close();
+  return document;
 }
 
-module.exports = isTextNode;
+module.exports = getTestDocument;

package/lib/getTextContentAccessor.js

@@ -11,7 +11,7 @@
 
 'use strict';
 
-var ExecutionEnvironment = require("./ExecutionEnvironment");
+var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');
 
 var contentKey = null;
 

package/lib/instantiateReactComponent.js

@@ -12,13 +12,13 @@
 
 'use strict';
 
-var ReactCompositeComponent = require("./ReactCompositeComponent");
-var ReactEmptyComponent = require("./ReactEmptyComponent");
-var ReactNativeComponent = require("./ReactNativeComponent");
+var ReactCompositeComponent = require('./ReactCompositeComponent');
+var ReactEmptyComponent = require('./ReactEmptyComponent');
+var ReactNativeComponent = require('./ReactNativeComponent');
 
-var assign = require("./Object.assign");
-var invariant = require("./invariant");
-var warning = require("./warning");
+var assign = require('./Object.assign');
+var invariant = require('fbjs/lib/invariant');
+var warning = require('fbjs/lib/warning');
 
 // To avoid a cyclic dependency, we create the final class in this module
 var ReactCompositeComponentWrapper = function () {};
@@ -58,19 +58,17 @@ function instantiateReactComponent(node) {
   var instance;
 
   if (node === null || node === false) {
-    node = ReactEmptyComponent.emptyElement;
-  }
-
-  if (typeof node === 'object') {
+    instance = new ReactEmptyComponent(instantiateReactComponent);
+  } else if (typeof node === 'object') {
     var element = node;
-    !(element && (typeof element.type === 'function' || typeof element.type === 'string')) ? 'production' !== process.env.NODE_ENV ? invariant(false, 'Element type is invalid: expected a string (for built-in components) ' + 'or a class/function (for composite components) but got: %s.%s', element.type == null ? element.type : typeof element.type, getDeclarationErrorAddendum(element._owner)) : invariant(false) : undefined;
+    !(element && (typeof element.type === 'function' || typeof element.type === 'string')) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Element type is invalid: expected a string (for built-in components) ' + 'or a class/function (for composite components) but got: %s.%s', element.type == null ? element.type : typeof element.type, getDeclarationErrorAddendum(element._owner)) : invariant(false) : undefined;
 
     // Special case string values
     if (typeof element.type === 'string') {
       instance = ReactNativeComponent.createInternalComponent(element);
     } else if (isInternalComponentType(element.type)) {
       // This is temporarily available for custom components that are not string
-      // represenations. I.e. ART. Once those are updated to use the string
+      // representations. I.e. ART. Once those are updated to use the string
       // representation, we can drop this code path.
       instance = new element.type(element);
     } else {
@@ -79,11 +77,11 @@ function instantiateReactComponent(node) {
   } else if (typeof node === 'string' || typeof node === 'number') {
     instance = ReactNativeComponent.createInstanceForText(node);
   } else {
-    !false ? 'production' !== process.env.NODE_ENV ? invariant(false, 'Encountered invalid React node of type %s', typeof node) : invariant(false) : undefined;
+    !false ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Encountered invalid React node of type %s', typeof node) : invariant(false) : undefined;
   }
 
-  if ('production' !== process.env.NODE_ENV) {
-    'production' !== process.env.NODE_ENV ? warning(typeof instance.construct === 'function' && typeof instance.mountComponent === 'function' && typeof instance.receiveComponent === 'function' && typeof instance.unmountComponent === 'function', 'Only React Components can be mounted.') : undefined;
+  if (process.env.NODE_ENV !== 'production') {
+    process.env.NODE_ENV !== 'production' ? warning(typeof instance.construct === 'function' && typeof instance.mountComponent === 'function' && typeof instance.receiveComponent === 'function' && typeof instance.unmountComponent === 'function', 'Only React Components can be mounted.') : undefined;
   }
 
   // Sets up the instance. This can probably just move into the constructor now.
@@ -95,14 +93,14 @@ function instantiateReactComponent(node) {
   instance._mountIndex = 0;
   instance._mountImage = null;
 
-  if ('production' !== process.env.NODE_ENV) {
+  if (process.env.NODE_ENV !== 'production') {
     instance._isOwnerNecessary = false;
     instance._warnedAboutRefsInRender = false;
   }
 
   // Internal instances should fully constructed at this point, so they should
   // not get any new fields added to them at this point.
-  if ('production' !== process.env.NODE_ENV) {
+  if (process.env.NODE_ENV !== 'production') {
     if (Object.preventExtensions) {
       Object.preventExtensions(instance);
     }

package/lib/isEventSupported.js

@@ -11,7 +11,7 @@
 
 'use strict';
 
-var ExecutionEnvironment = require("./ExecutionEnvironment");
+var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');
 
 var useHasFeature;
 if (ExecutionEnvironment.canUseDOM) {

package/lib/onlyChild.js

@@ -10,9 +10,9 @@
  */
 'use strict';
 
-var ReactElement = require("./ReactElement");
+var ReactElement = require('./ReactElement');
 
-var invariant = require("./invariant");
+var invariant = require('fbjs/lib/invariant');
 
 /**
  * Returns the first child in a collection of children and verifies that there
@@ -26,7 +26,7 @@ var invariant = require("./invariant");
  * structure.
  */
 function onlyChild(children) {
-  !ReactElement.isValidElement(children) ? 'production' !== process.env.NODE_ENV ? invariant(false, 'onlyChild must be passed a children with exactly one child.') : invariant(false) : undefined;
+  !ReactElement.isValidElement(children) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'onlyChild must be passed a children with exactly one child.') : invariant(false) : undefined;
   return children;
 }
 

package/lib/quoteAttributeValueForBrowser.js

@@ -11,7 +11,7 @@
 
 'use strict';
 
-var escapeTextContentForBrowser = require("./escapeTextContentForBrowser");
+var escapeTextContentForBrowser = require('./escapeTextContentForBrowser');
 
 /**
  * Escapes attribute value to prevent scripting attacks.

package/lib/reactComponentExpect.js

@@ -0,0 +1,216 @@
+/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule reactComponentExpect
+ * @nolint
+ */
+
+'use strict';
+
+var ReactInstanceMap = require('./ReactInstanceMap');
+var ReactTestUtils = require('./ReactTestUtils');
+
+var assign = require('./Object.assign');
+var invariant = require('fbjs/lib/invariant');
+
+function reactComponentExpect(instance) {
+  if (instance instanceof reactComponentExpectInternal) {
+    return instance;
+  }
+
+  if (!(this instanceof reactComponentExpect)) {
+    return new reactComponentExpect(instance);
+  }
+
+  expect(instance).not.toBeNull();
+  expect(instance).not.toBeUndefined();
+
+  !ReactTestUtils.isCompositeComponent(instance) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'reactComponentExpect(...): instance must be a composite component') : invariant(false) : undefined;
+  var internalInstance = ReactInstanceMap.get(instance);
+
+  expect(typeof internalInstance).toBe('object');
+  expect(typeof internalInstance.constructor).toBe('function');
+  expect(ReactTestUtils.isElement(internalInstance)).toBe(false);
+
+  return new reactComponentExpectInternal(internalInstance);
+}
+
+function reactComponentExpectInternal(internalInstance) {
+  this._instance = internalInstance;
+}
+
+assign(reactComponentExpectInternal.prototype, {
+  // Getters -------------------------------------------------------------------
+
+  /**
+   * @instance: Retrieves the backing instance.
+   */
+  instance: function () {
+    return this._instance.getPublicInstance();
+  },
+
+  /**
+   * There are two types of components in the world.
+   * - A component created via React.createClass() - Has a single child
+   *   subComponent - the return value from the .render() function. This
+   *   function @subComponent expects that this._instance is component created
+   *   with React.createClass().
+   * - A primitive DOM component - which has many renderedChildren, each of
+   *   which may have a name that is unique with respect to its siblings. This
+   *   method will fail if this._instance is a primitive component.
+   *
+   * TL;DR: An instance may have a subComponent (this._renderedComponent) or
+   * renderedChildren, but never both. Neither will actually show up until you
+   * render the component (simply instantiating is not enough).
+   */
+  expectRenderedChild: function () {
+    this.toBeCompositeComponent();
+    var child = this._instance._renderedComponent;
+    // TODO: Hide ReactEmptyComponent instances here?
+    return new reactComponentExpectInternal(child);
+  },
+
+  /**
+   * The nth child of a DOMish component instance that is not falsy.
+   */
+  expectRenderedChildAt: function (childIndex) {
+    // Currently only dom components have arrays of children, but that will
+    // change soon.
+    this.toBeDOMComponent();
+    var renderedChildren = this._instance._renderedChildren || {};
+    for (var name in renderedChildren) {
+      if (!renderedChildren.hasOwnProperty(name)) {
+        continue;
+      }
+      if (renderedChildren[name]) {
+        if (renderedChildren[name]._mountIndex === childIndex) {
+          return new reactComponentExpectInternal(renderedChildren[name]);
+        }
+      }
+    }
+    throw new Error('Child:' + childIndex + ' is not found');
+  },
+
+  toBeDOMComponentWithChildCount: function (count) {
+    this.toBeDOMComponent();
+    var renderedChildren = this._instance._renderedChildren;
+    expect(renderedChildren).toBeTruthy();
+    expect(Object.keys(renderedChildren).length).toBe(count);
+    return this;
+  },
+
+  toBeDOMComponentWithNoChildren: function () {
+    this.toBeDOMComponent();
+    expect(this._instance._renderedChildren).toBeFalsy();
+    return this;
+  },
+
+  // Matchers ------------------------------------------------------------------
+
+  toBeComponentOfType: function (constructor) {
+    expect(this._instance._currentElement.type === constructor).toBe(true);
+    return this;
+  },
+
+  /**
+   * A component that is created with React.createClass. Just duck typing
+   * here.
+   */
+  toBeCompositeComponent: function () {
+    expect(typeof this.instance() === 'object' && typeof this.instance().render === 'function').toBe(true);
+    return this;
+  },
+
+  toBeCompositeComponentWithType: function (constructor) {
+    this.toBeCompositeComponent();
+    expect(this._instance._currentElement.type === constructor).toBe(true);
+    return this;
+  },
+
+  toBeTextComponentWithValue: function (val) {
+    var elementType = typeof this._instance._currentElement;
+    expect(elementType === 'string' || elementType === 'number').toBe(true);
+    expect(this._instance._stringText).toBe(val);
+    return this;
+  },
+
+  toBeEmptyComponent: function () {
+    var element = this._instance._currentElement;
+    return element === null || element === false;
+  },
+
+  toBePresent: function () {
+    expect(this.instance()).toBeTruthy();
+    return this;
+  },
+
+  /**
+   * A terminal type of component representing some virtual dom node. Just duck
+   * typing here.
+   */
+  toBeDOMComponent: function () {
+    expect(ReactTestUtils.isDOMComponent(this.instance())).toBe(true);
+    return this;
+  },
+
+  /**
+   * @deprecated
+   * @see toBeComponentOfType
+   */
+  toBeDOMComponentWithTag: function (tag) {
+    this.toBeDOMComponent();
+    expect(this.instance().tagName).toBe(tag.toUpperCase());
+    return this;
+  },
+
+  /**
+   * Check that internal state values are equal to a state of expected values.
+   */
+  scalarStateEqual: function (stateNameToExpectedValue) {
+    expect(this.instance()).toBeTruthy();
+    for (var stateName in stateNameToExpectedValue) {
+      if (!stateNameToExpectedValue.hasOwnProperty(stateName)) {
+        continue;
+      }
+      expect(this.instance().state[stateName]).toEqual(stateNameToExpectedValue[stateName]);
+    }
+    return this;
+  },
+
+  /**
+   * Check a set of props are equal to a set of expected values - only works
+   * with scalars.
+   */
+  scalarPropsEqual: function (propNameToExpectedValue) {
+    expect(this.instance()).toBeTruthy();
+    for (var propName in propNameToExpectedValue) {
+      if (!propNameToExpectedValue.hasOwnProperty(propName)) {
+        continue;
+      }
+      expect(this.instance().props[propName]).toEqual(propNameToExpectedValue[propName]);
+    }
+    return this;
+  },
+
+  /**
+   * Check a set of props are equal to a set of expected values - only works
+   * with scalars.
+   */
+  scalarContextEqual: function (contextNameToExpectedValue) {
+    expect(this.instance()).toBeTruthy();
+    for (var contextName in contextNameToExpectedValue) {
+      if (!contextNameToExpectedValue.hasOwnProperty(contextName)) {
+        continue;
+      }
+      expect(this.instance().context[contextName]).toEqual(contextNameToExpectedValue[contextName]);
+    }
+    return this;
+  }
+});
+
+module.exports = reactComponentExpect;