Merge branch 'master' into Issue-1669-instanceDocs

.babelrc

@@ -1,6 +1,9 @@
 {
   "presets": ["airbnb"],
   "plugins": [
-    ["transform-replace-object-assign", "object.assign"],
+    ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }],
+  ],
+  ignore: [
+    "packages/enzyme-test-suite/test/_helpers/untranspiled*",
   ],
 }

.eslintrc

@@ -6,6 +6,7 @@
     "mocha": true
   },
   "rules": {
+    "react/jsx-one-expression-per-line": 0, // TODO: re-enable once fixed
     "id-length": 0,
     "new-cap": [2, { "capIsNewExceptions": ["AND"] }],
     "react/jsx-pascal-case": [2, { "allowAllCaps": true }],

.travis.yml

@@ -1,5 +1,6 @@
 language: node_js
 node_js:
+  - "10"
   - "8"
   - "6"
   - "4"

SUMMARY.md

@@ -42,6 +42,7 @@
     * [forEach(fn)](/docs/api/ShallowWrapper/forEach.md)
     * [get(index)](/docs/api/ShallowWrapper/get.md)
     * [hasClass(className)](/docs/api/ShallowWrapper/hasClass.md)
+    * [hostNodes()](/docs/api/ShallowWrapper/hostNodes.md)
     * [html()](/docs/api/ShallowWrapper/html.md)
     * [instance()](/docs/api/ShallowWrapper/instance.md)
     * [is(selector)](/docs/api/ShallowWrapper/is.md)
@@ -54,7 +55,7 @@
     * [not(selector)](/docs/api/ShallowWrapper/not.md)
     * [parent()](/docs/api/ShallowWrapper/parent.md)
     * [parents()](/docs/api/ShallowWrapper/parents.md)
-    * [prop([key])](/docs/api/ShallowWrapper/prop.md)
+    * [prop(key)](/docs/api/ShallowWrapper/prop.md)
     * [props()](/docs/api/ShallowWrapper/props.md)
     * [reduce(fn[, initialValue])](/docs/api/ShallowWrapper/reduce.md)
     * [reduceRight(fn[, initialValue])](/docs/api/ShallowWrapper/reduceRight.md)
@@ -96,6 +97,7 @@
     * [forEach(fn)](/docs/api/ReactWrapper/forEach.md)
     * [get(index)](/docs/api/ReactWrapper/get.md)
     * [hasClass(className)](/docs/api/ReactWrapper/hasClass.md)
+    * [hostNodes()](/docs/api/ReactWrapper/hostNodes.md)
     * [html()](/docs/api/ReactWrapper/html.md)
     * [instance()](/docs/api/ReactWrapper/instance.md)
     * [is(selector)](/docs/api/ReactWrapper/is.md)
@@ -109,7 +111,7 @@
     * [not(selector)](/docs/api/ReactWrapper/not.md)
     * [parent()](/docs/api/ReactWrapper/parent.md)
     * [parents()](/docs/api/ReactWrapper/parents.md)
-    * [prop([key])](/docs/api/ReactWrapper/prop.md)
+    * [prop(key)](/docs/api/ReactWrapper/prop.md)
     * [props()](/docs/api/ReactWrapper/props.md)
     * [reduce(fn[, initialValue])](/docs/api/ReactWrapper/reduce.md)
     * [reduceRight(fn[, initialValue])](/docs/api/ReactWrapper/reduceRight.md)

docs/api/ReactWrapper/detach.md

@@ -3,12 +3,12 @@
 Detaches the react tree from the DOM. Runs `ReactDOM.unmountComponentAtNode()` under the hood.
 
 This method will most commonly be used as a "cleanup" method if you decide to use the
-`attachTo` option in `mount(node, options)`.
+`attachTo` or `hydrateIn` option in `mount(node, options)`.
 
 The method is intentionally not "fluent" (in that it doesn't return `this`) because you should
 not be doing anything with this wrapper after this method is called.
 
-Using the `attachTo` is not generally recommended unless it is absolutely necessary to test
+Using `attachTo`/`hydrateIn` is not generally recommended unless it is absolutely necessary to test
 something.  It is your responsibility to clean up after yourself at the end of the test if you do
 decide to use it, though.
 
@@ -21,6 +21,10 @@ With the `attachTo` option, you can mount components to attached DOM elements:
 // render a component directly into document.body
 const wrapper = mount(<Bar />, { attachTo: document.body });
 
+// Or, with the `hydrateIn` option, you can mount components on top of existing DOM elements:
+// hydrate a component directly onto document.body
+const hydratedWrapper = mount(<Bar />, { hydrateIn: document.body });
+
 // we can see that the component is rendered into the document
 expect(wrapper.find('.in-bar')).to.have.length(1);
 expect(document.body.childNodes).to.have.length(1);
@@ -44,6 +48,8 @@ expect(div.childNodes).to.have.length(0);
 
 // mount a component passing div into the `attachTo` option
 const wrapper = mount(<Foo />, { attachTo: div });
+// or, mount a component passing div into the `hydrateIn` option
+const hydratedWrapper = mount(<Foo />, { hydrateIn: div });
 
 // we can see now the component is rendered into the document
 expect(wrapper.find('.in-foo')).to.have.length(1);

docs/api/ReactWrapper/exists.md

@@ -1,11 +1,18 @@
-# `.exists() => Boolean`
+# `.exists([selector]) => Boolean`
+
+Returns whether or not the current node exists. Or, if a selector is passed in, whether that selector has any matching results.
+
+
+
+#### Arguments
+
+1. `selector` ([`EnzymeSelector`](../selector.md) [optional]): The selector to check existence for.
 
-Returns whether or not the current node exists.
 
 
 #### Returns
 
-`Boolean`: whether or not the current node exists.
+`Boolean`: whether or not the current node exists, or the selector had any results.
 
 
 
@@ -14,5 +21,6 @@ Returns whether or not the current node exists.
 
 ```jsx
 const wrapper = mount(<div className="some-class" />);
+expect(wrapper.exists('.some-class')).to.equal(true);
 expect(wrapper.find('.other-class').exists()).to.equal(false);
 ```

docs/api/ReactWrapper/matchesElement.md

@@ -26,9 +26,11 @@ class MyComponent extends React.Component {
     super(props);
     this.handleClick = this.handleClick.bind(this);
   }
+
   handleClick() {
     /* ... */
   }
+
   render() {
     return (
       <button type="button" onClick={this.handleClick} className="foo bar">Hello</button>

docs/api/ReactWrapper/mount.md

@@ -26,6 +26,7 @@ class Foo extends React.Component {
     this.componentWillMount = willMount;
     this.componentDidMount = didMount;
   }
+
   render() {
     const { id } = this.props;
     return (

docs/api/ReactWrapper/setContext.md

@@ -25,7 +25,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 function SimpleComponent(props, context) {
-  return <div>{context.name}</div>;
+  const { name } = context;
+  return <div>{name}</div>;
 }
 SimpleComponent.contextTypes = {
   name: PropTypes.string,

docs/api/ReactWrapper/setProps.md

@@ -25,11 +25,12 @@ NOTE: can only be called on a wrapper instance that is also the root instance.
 #### Example
 
 ```jsx
+import React from 'react';
 import PropTypes from 'prop-types';
 
 function Foo({ name }) {
   return (
-    <div className={this.props.name} />
+    <div className={name} />
   );
 }
 Foo.propTypes = {

docs/api/ReactWrapper/setState.md

@@ -29,9 +29,11 @@ class Foo extends React.Component {
     super(props);
     this.state = { name: 'foo' };
   }
+
   render() {
+    const { name } = this.state;
     return (
-      <div className={this.state.name} />
+      <div className={name} />
     );
   }
 }

docs/api/ReactWrapper/simulate.md

@@ -24,6 +24,7 @@ class Foo extends React.Component {
     super(props);
     this.state = { count: 0 };
   }
+
   render() {
     const { count } = this.state;
     return (

docs/api/ReactWrapper/type.md

@@ -1,25 +1,51 @@
-# `.type() => String|Function`
+# `.type() => String|Function|null`
 
 Returns the type of the current node of this wrapper. If it's a composite component, this will be
-the component constructor. If it's a native DOM node, it will be a string of the tag name.
+the component constructor. If it's a native DOM node, it will be a string of the tag name. If it's `null`, it will be `null`.
 
 Note: can only be called on a wrapper of a single node.
 
 
 #### Returns
 
-`String|Function`: The type of the current node
+`String|Function|null`: The type of the current node
 
 
 
 #### Examples
 
 ```jsx
-const wrapper = mount(<div />);
+function Foo() {
+  return <div />;
+}
+const wrapper = mount(<Foo />);
 expect(wrapper.type()).to.equal('div');
 ```
 
 ```jsx
+function Foo() {
+  return (
+    <div>
+      <button type="button" className="btn">Button</button>
+    </div>
+  );
+}
+const wrapper = mount(<Foo />);
+expect(wrapper.find('.btn').type()).to.equal('button');
+```
+
+```jsx
+function Foo() {
+  return <Bar />;
+}
 const wrapper = mount(<Foo />);
-expect(wrapper.type()).to.equal(Foo);
+expect(wrapper.type()).to.equal(Bar);
+```
+
+```jsx
+function Null() {
+  return null;
+}
+const wrapper = mount(<Null />);
+expect(wrapper.type()).to.equal(null);
 ```

docs/api/ReactWrapper/unmount.md

@@ -26,6 +26,7 @@ class Foo extends React.Component {
     this.componentWillMount = willMount;
     this.componentDidMount = didMount;
   }
+
   render() {
     const { id } = this.props;
     return (

docs/api/ReactWrapper/update.md

@@ -20,6 +20,7 @@ class ImpureRender extends React.Component {
     super(props);
     this.count = 0;
   }
+
   render() {
     this.count += 1;
     return <div>{this.count}</div>;

docs/api/ShallowWrapper/exists.md

@@ -1,18 +1,26 @@
-# `.exists() => Boolean`
+# `.exists([selector]) => Boolean`
+
+Returns whether or not the current node exists. Or, if a selector is passed in, whether that selector has any matching results.
+
+
+
+#### Arguments
+
+1. `selector` ([`EnzymeSelector`](../selector.md) [optional]): The selector to check existence for.
 
-Returns whether or not the current node exists.
 
 
 #### Returns
 
-`Boolean`: whether or not the current node exists.
+`Boolean`: whether or not the current node exists, or the selector had any results.
 
 
 
 #### Example
 
 
 ```jsx
-const wrapper = shallow(<div className="some-class" />);
+const wrapper = mount(<div className="some-class" />);
+expect(wrapper.exists('.some-class')).to.equal(true);
 expect(wrapper.find('.other-class').exists()).to.equal(false);
 ```

docs/api/ShallowWrapper/html.md

@@ -43,4 +43,5 @@ expect(wrapper.html()).to.equal('<div><b>important</b></div>');
 
 #### Related Methods
 
-[`.text() => String`](text.md)
+- [`.text() => String`](text.md)
+- [`.debug() => String`](debug.md)

docs/api/ShallowWrapper/matchesElement.md

@@ -26,9 +26,11 @@ class MyComponent extends React.Component {
     super(props);
     this.handleClick = this.handleClick.bind(this);
   }
+
   handleClick() {
     // ...
   }
+
   render() {
     return (
       <button type="button" onClick={this.handleClick} className="foo bar">Hello</button>

docs/api/ShallowWrapper/prop.md

@@ -20,11 +20,34 @@ of the root node of the component.
 
 ```jsx
 import PropTypes from 'prop-types';
-
-function MyComponent({ includedProp }) {
-  return (
-    <div className="foo bar" includedProp={includedProp}>Hello</div>
-  );
+import ValidateNumberInputComponent from './ValidateNumberInputComponent';
+
+class MyComponent extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.state = {
+      number: 0,
+    };
+    this.onValidNumberInput = this.onValidNumberInput.bind(this);
+  }
+
+  onValidNumberInput(e) {
+    const number = e.target.value;
+    if (!number || typeof number === 'number') {
+      this.setState({ number });
+    }
+  }
+
+  render() {
+    const { includedProp } = this.props;
+    const { number } = this.state;
+    return (
+      <div className="foo bar" includedProp={includedProp}>
+        <ValidateNumberInputComponent onChangeHandler={onValidNumberInput} number={number} />
+      </div>
+    );
+  }
 }
 MyComponent.propTypes = {
   includedProp: PropTypes.string.isRequired,
@@ -33,6 +56,14 @@ MyComponent.propTypes = {
 const wrapper = shallow(<MyComponent includedProp="Success!" excludedProp="I'm not included" />);
 expect(wrapper.prop('includedProp')).to.equal('Success!');
 
+const validInput = 1;
+wrapper.find('ValidNumberInputComponent').prop('onChangeHandler')(validInput);
+expect(wrapper.state('number')).to.equal(number);
+
+const invalidInput = 'invalid input';
+wrapper.find('ValidNumberInputComponent').prop('onChangeHandler')(invalidInput);
+expect(wrapper.state('number')).to.equal(0);
+
 // Warning: .prop(key) only returns values for props that exist in the root node.
 // See the note above about wrapper.instance().props to return all props in the React component.
 

docs/api/ShallowWrapper/setContext.md

@@ -21,6 +21,7 @@ NOTE: can only be called on a wrapper instance that is also the root instance.
 #### Example
 
 ```jsx
+import React from 'react';
 import PropTypes from 'prop-types';
 
 function SimpleComponent(props, context) {

docs/api/ShallowWrapper/setProps.md

@@ -25,6 +25,7 @@ NOTE: can only be called on a wrapper instance that is also the root instance.
 #### Example
 
 ```jsx
+import React from 'react';
 import PropTypes from 'prop-types';
 
 function Foo({ name }) {

docs/api/ShallowWrapper/setState.md

@@ -29,6 +29,7 @@ class Foo extends React.Component {
     super(props);
     this.state = { name: 'foo' };
   }
+
   render() {
     const { name } = this.state;
     return (