Merge pull request #155 from airbnb/lmr--mount-unmount

Added mount/unmount APIs to ReactWrapper

docs/README.md

@@ -77,6 +77,8 @@
     * [setProps(nextProps)](/docs/api/ReactWrapper/setProps.md)
     * [setContext(context)](/docs/api/ReactWrapper/setContext.md)
     * [instance()](/docs/api/ReactWrapper/instance.md)
+    * [unmount()](/docs/api/ReactWrapper/unmount.md)
+    * [mount()](/docs/api/ReactWrapper/mount.md)
     * [update()](/docs/api/ReactWrapper/update.md)
     * [type()](/docs/api/ReactWrapper/type.md)
     * [forEach(fn)](/docs/api/ReactWrapper/forEach.md)

docs/api/ReactWrapper/mount.md

@@ -0,0 +1,51 @@
+# `.mount() => Self`
+
+A method that re-mounts the component. This can be used to simulate a component going through
+an unmount/mount lifecycle.
+
+#### Returns
+
+`ReactWrapper`: Returns itself.
+
+
+
+#### Example
+
+```jsx
+const willMount = sinon.spy();
+const didMount = sinon.spy();
+const willUnmount = sinon.spy();
+
+class Foo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.componentWillUnmount = willUnmount;
+    this.componentWillMount = willMount;
+    this.componentDidMount = didMount;
+  }
+  render() {
+    return (
+      <div className={this.props.id}>
+        {this.props.id}
+      </div>
+    );
+  }
+}
+const wrapper = mount(<Foo id="foo" />);
+expect(willMount.callCount).to.equal(1);
+expect(didMount.callCount).to.equal(1);
+expect(willUnmount.callCount).to.equal(0);
+wrapper.unmount();
+expect(willMount.callCount).to.equal(1);
+expect(didMount.callCount).to.equal(1);
+expect(willUnmount.callCount).to.equal(1);
+wrapper.mount();
+expect(willMount.callCount).to.equal(2);
+expect(didMount.callCount).to.equal(2);
+expect(willUnmount.callCount).to.equal(1);
+```
+
+
+#### Related Methods
+
+- [`.unmount() => Self`](unmount.md)

docs/api/ReactWrapper/unmount.md

@@ -0,0 +1,47 @@
+# `.unmount() => Self`
+
+A method that re-mounts the component. This can be used to simulate a component going through
+an unmount/mount lifecycle.
+
+#### Returns
+
+`ReactWrapper`: Returns itself.
+
+
+
+#### Example
+
+```jsx
+const willMount = sinon.spy();
+const didMount = sinon.spy();
+const willUnmount = sinon.spy();
+
+class Foo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.componentWillUnmount = willUnmount;
+    this.componentWillMount = willMount;
+    this.componentDidMount = didMount;
+  }
+  render() {
+    return (
+      <div className={this.props.id}>
+        {this.props.id}
+      </div>
+    );
+  }
+}
+const wrapper = mount(<Foo id="foo" />);
+expect(willMount.callCount).to.equal(1);
+expect(didMount.callCount).to.equal(1);
+expect(willUnmount.callCount).to.equal(0);
+wrapper.unmount();
+expect(willMount.callCount).to.equal(1);
+expect(didMount.callCount).to.equal(1);
+expect(willUnmount.callCount).to.equal(1);
+```
+
+
+#### Related Methods
+
+- [`.mount() => Self`](mount.md)

docs/api/mount.md

@@ -136,6 +136,12 @@ Manually sets context of the root component.
 #### [`.instance() => ReactComponent`](ReactWrapper/instance.md)
 Returns the instance of the root component.
 
+#### [`.unmount() => ReactWrapper`](ReactWrapper/unmount.md)
+A method that un-mounts the component.
+
+#### [`.mount() => ReactWrapper`](ReactWrapper/mount.md)
+A method that re-mounts the component.
+
 #### [`.update() => ReactWrapper`](ReactWrapper/update.md)
 Calls `.forceUpdate()` on the root component instance.
 

package.json

@@ -10,11 +10,11 @@
     "version": "npm run build",
     "clean": "rimraf build",
     "lint": "eslint src/**",
-    "test": "mocha --compilers js:babel-core/register --recursive src/**/__tests__/*.js",
+    "test": "mocha --compilers js:babel-core/register --recursive withDom.js src/**/__tests__/*.js",
     "check": "npm run lint && npm run test:all",
     "build": "babel src --out-dir build",
-    "test:watch": "mocha --compilers js:babel-core/register --recursive src/**/__tests__/*.js --watch",
-    "test:only": "mocha --compilers js:babel-core/register --watch",
+    "test:only": "mocha --compilers js:babel-core/register --watch withDom.js",
+    "test:watch": "mocha --compilers js:babel-core/register --recursive withDom.js src/**/__tests__/*.js --watch",
     "test:describeWithDOMOnly": "mocha --compilers js:babel-core/register --recursive src/**/__tests__/describeWithDOM/describeWithDOMOnly-spec.js",
     "test:describeWithDOMSkip": "mocha --compilers js:babel-core/register --recursive src/**/__tests__/describeWithDOM/describeWithDOMSkip-spec.js",
     "test:all": "npm run react:13 && npm test && npm run test:describeWithDOMOnly && npm run test:describeWithDOMSkip && npm run react:14 && npm test && npm run test:describeWithDOMOnly && npm run test:describeWithDOMSkip",

src/ReactWrapper.js

@@ -138,6 +138,38 @@ export default class ReactWrapper {
     return this;
   }
 
+  /**
+   * A method that unmounts the component. This can be used to simulate a component going through
+   * and unmount/mount lifecycle.
+   *
+   * @returns {ReactWrapper}
+   */
+  unmount() {
+    if (this.root !== this) {
+      throw new Error('ReactWrapper::unmount() can only be called on the root');
+    }
+    this.single(() => {
+      this.component.setState({ mount: false });
+    });
+    return this;
+  }
+
+  /**
+   * A method that re-mounts the component. This can be used to simulate a component going through
+   * an unmount/mount lifecycle.
+   *
+   * @returns {ReactWrapper}
+   */
+  mount() {
+    if (this.root !== this) {
+      throw new Error('ReactWrapper::mount() can only be called on the root');
+    }
+    this.single(() => {
+      this.component.setState({ mount: true });
+    });
+    return this;
+  }
+
   /**
    * A method that sets the props of the root component, and re-renders. Useful for when you are
    * wanting to test how the component behaves over time with changing props. Calling this, for

src/ReactWrapperComponent.jsx

@@ -26,6 +26,7 @@ export default function createWrapperComponent(node, options = {}) {
 
     getInitialState() {
       return {
+        mount: true,
         props: this.props.props,
         context: this.props.context,
       };
@@ -62,8 +63,10 @@ export default function createWrapperComponent(node, options = {}) {
 
     render() {
       const { Component } = this.props;
+      const { mount, props } = this.state;
+      if (!mount) return null;
       return (
-        <Component {...this.state.props} />
+        <Component {...props} />
       );
     },
   };

src/__tests__/ReactWrapper-spec.js

@@ -1,13 +1,12 @@
+import { describeWithDOM, describeIf } from './_helpers';
 import React from 'react';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import {
   mount,
   render,
   ReactWrapper,
-  describeWithDOM,
 } from '../';
-import { describeIf } from './_helpers';
 import { REACT013 } from '../version';
 
 describeWithDOM('mount', () => {
@@ -490,6 +489,68 @@ describeWithDOM('mount', () => {
     });
   });
 
+
+  describe('.mount()', () => {
+    it('should call componentWillUnmount()', () => {
+      const willMount = sinon.spy();
+      const didMount = sinon.spy();
+      const willUnmount = sinon.spy();
+
+      class Foo extends React.Component {
+        constructor(props) {
+          super(props);
+          this.componentWillUnmount = willUnmount;
+          this.componentWillMount = willMount;
+          this.componentDidMount = didMount;
+        }
+        render() {
+          return (
+            <div className={this.props.id}>
+              {this.props.id}
+            </div>
+          );
+        }
+      }
+      const wrapper = mount(<Foo id="foo" />);
+      expect(willMount.callCount).to.equal(1);
+      expect(didMount.callCount).to.equal(1);
+      expect(willUnmount.callCount).to.equal(0);
+      wrapper.unmount();
+      expect(willMount.callCount).to.equal(1);
+      expect(didMount.callCount).to.equal(1);
+      expect(willUnmount.callCount).to.equal(1);
+      wrapper.mount();
+      expect(willMount.callCount).to.equal(2);
+      expect(didMount.callCount).to.equal(2);
+      expect(willUnmount.callCount).to.equal(1);
+    });
+  });
+
+  describe('.unmount()', () => {
+    it('should call componentWillUnmount()', () => {
+      const spy = sinon.spy();
+
+      class Foo extends React.Component {
+        constructor(props) {
+          super(props);
+          this.componentWillUnmount = spy;
+        }
+        render() {
+          return (
+            <div className={this.props.id}>
+              {this.props.id}
+            </div>
+          );
+        }
+      }
+      const wrapper = mount(<Foo id="foo" />);
+      expect(spy.calledOnce).to.equal(false);
+      wrapper.unmount();
+      expect(spy.calledOnce).to.equal(true);
+    });
+
+  });
+
   describe('.simulate(eventName, data)', () => {
 
     it('should simulate events', () => {

src/__tests__/Utils-spec.js

@@ -1,4 +1,5 @@
-import React from 'react/addons';
+import { describeWithDOM } from './_helpers.js';
+import React from 'react';
 import { expect } from 'chai';
 import sinon from 'sinon';
 import {
@@ -12,10 +13,7 @@ import {
   selectorType,
   mapNativeEventNames,
 } from '../Utils';
-import {
-  describeWithDOM,
-  mount,
-} from '../';
+import { mount } from '../';
 
 describe('Utils', () => {
 

src/__tests__/_helpers.js

@@ -1,3 +1,14 @@
+export function describeWithDOM(a, b) {
+  describe('(uses jsdom)', () => {
+    if (global.document) {
+      describe(a, b);
+    } else {
+      // if jsdom isn't available, skip every test in this describe context
+      describe.skip(a, b);
+    }
+  });
+}
+
 /**
  * Simple wrapper around mocha describe which allows a boolean to be passed in first which
  * determines whether or not the test will be run

withDom.js

@@ -0,0 +1,22 @@
+if (!global.document) {
+  try {
+    const jsdom = require('jsdom').jsdom; // could throw
+
+    const exposedProperties = ['window', 'navigator', 'document'];
+
+    global.document = jsdom('');
+    global.window = document.defaultView;
+    Object.keys(document.defaultView).forEach((property) => {
+      if (typeof global[property] === 'undefined') {
+        exposedProperties.push(property);
+        global[property] = document.defaultView[property];
+      }
+    });
+
+    global.navigator = {
+      userAgent: 'node.js',
+    };
+  } catch (e) {
+    // jsdom is not supported...
+  }
+}