Merge branch 'master' into interpolated_children

enzymejs · Oct 11, 2016 · 298bd6c · 298bd6c
2 parents 106c89e + d041930
commit 298bd6c
Show file tree

Hide file tree

Showing 30 changed files with 668 additions and 360 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -8,61 +8,39 @@ node_js:
 before_install:
   - 'if [ "${TRAVIS_NODE_VERSION}" != "0.9" ]; then case "$(npm --version)" in 1.*) npm install -g npm@1.4.28 ;; 2.*) npm install -g npm@2 ;; esac ; fi'
   - 'if [ "${TRAVIS_NODE_VERSION}" != "0.6" ] && [ "${TRAVIS_NODE_VERSION}" != "0.9" ]; then npm install -g npm; fi'
-before_script: "sh install-relevant-react.sh"
+before_script:
+  - "sh install-relevant-react.sh"
+  - if [ -n "${KARMA-}" ]; then export CHROME_BIN=chromium-browser; export DISPLAY=:99.0; sh -e /etc/init.d/xvfb start; fi
 script:
-  - 'if [ -z "$REACT" ] && [ "${TRAVIS_NODE_VERSION}" = "4" ]; then npm run test:env -- "${EXAMPLE}" ; elif [ -z "$REACT" ]; then echo "Test Skipped" ; elif [ "${TRAVIS_NODE_VERSION}" = "4" ]; then npm run lint && npm run travis ; elif [ "${TRAVIS_NODE_VERSION}" = "0.12" ] || [ "${TRAVIS_NODE_VERSION}" = "0.10" ]; then npm run travis ; else npm test ; fi'
+  - 'if [ -n "${EXAMPLE-}" ]; then npm run test:env -- "${EXAMPLE}" ; elif [ -n "${LINT-}" ]; then npm run lint; elif [ -n "${KARMA-}" ]; then npm run test:karma -- --single-run; elif [ -n "${REACT-}" ]; then npm run travis; else false ; fi'
 after_script:
   - 'if [ "${TRAVIS_NODE_VERSION}" = "4" ] || [ "${TRAVIS_NODE_VERSION}" = "0.12" ]; then cat ./coverage/lcov.info | ./node_modules/.bin/coveralls ; fi'
+sudo: false
+matrix:
+  fast_finish: true
+  include:
+   - node_js: "node"
+     env: LINT=true
+   - node_js: "node"
+     env: EXAMPLE=mocha
+   - node_js: "node"
+     env: EXAMPLE=karma
+   - node_js: "node"
+     env: EXAMPLE=react-native
+   - node_js: "node"
+     env: EXAMPLE=karma-webpack
+   - node_js: "node"
+     env: EXAMPLE=jest
+   - node_js: "node"
+     env: KARMA=true REACT=0.13
+   - node_js: "node"
+     env: KARMA=true REACT=0.14
+   - node_js: "node"
+     env: KARMA=true REACT=15
+  allow_failures:
+    - node_js: "node"
+      env: EXAMPLE=react-native
 env:
   - REACT=0.13
   - REACT=0.14
   - REACT=15
-  - EXAMPLE=mocha
-  - EXAMPLE=karma
-  - EXAMPLE=react-native
-  - EXAMPLE=karma-webpack
-  - EXAMPLE=jest
-sudo: false
-matrix:
-  fast_finish: true
-  exclude:
-  - node_js: "5"
-    env: EXAMPLE=mocha
-  - node_js: "5"
-    env: EXAMPLE=karma
-  - node_js: "5"
-    env: EXAMPLE=react-native
-  - node_js: "5"
-    env: EXAMPLE=karma-webpack
-  - node_js: "5"
-    env: EXAMPLE=jest
-  - node_js: "4"
-    env: EXAMPLE=mocha
-  - node_js: "4"
-    env: EXAMPLE=karma
-  - node_js: "4"
-    env: EXAMPLE=react-native
-  - node_js: "4"
-    env: EXAMPLE=karma-webpack
-  - node_js: "4"
-    env: EXAMPLE=jest
-  - node_js: "0.12"
-    env: EXAMPLE=mocha
-  - node_js: "0.12"
-    env: EXAMPLE=karma
-  - node_js: "0.12"
-    env: EXAMPLE=react-native
-  - node_js: "0.12"
-    env: EXAMPLE=karma-webpack
-  - node_js: "0.12"
-    env: EXAMPLE=jest
-  - node_js: "0.10"
-    env: EXAMPLE=mocha
-  - node_js: "0.10"
-    env: EXAMPLE=karma
-  - node_js: "0.10"
-    env: EXAMPLE=react-native
-  - node_js: "0.10"
-    env: EXAMPLE=karma-webpack
-  - node_js: "0.10"
-    env: EXAMPLE=jest
diff --git a/INTHEWILD.md b/INTHEWILD.md
@@ -10,6 +10,9 @@ Organizations
  - [Hudl](http://hudl.github.io/)
  - [NET-A-PORTER](https://github.com/NET-A-PORTER)
  - [Rangle.io](https://github.com/rangle)
+ - [GoDaddy](https://github.com/godaddy)
+ - [Airware](https://github.com/airware)
+ - [Flatiron School](https://github.com/flatiron-labs)
 
 Projects
 ----------
@@ -18,3 +21,4 @@ Projects
  - [Reactstrap](https://github.com/reactstrap/reactstrap)
  - [Recompose](https://github.com/acdlite/recompose)
  - [Reapop](https://github.com/LouisBarranqueiro/reapop)
+ - [React Dates](https://github.com/airbnb/react-dates)
diff --git a/docs/GLOSSARY.md b/docs/GLOSSARY.md
@@ -2,7 +2,7 @@
 
 A Selector in enzyme is similar to a CSS selector, but can be a number of other things as well in
 order to easily specify a criteria by which you want to find nodes in a enzyme wrapper. See the
-Selector page for more information.
+[Selector page](/docs/api/selector.md) for more information.
 
 # wrapper
 

diff --git a/docs/api/ReactWrapper/html.md b/docs/api/ReactWrapper/html.md
@@ -1,6 +1,6 @@
 # `.html() => String`
 
-Returns a string of the rendered HTML markup of the current render tree.
+Returns a string of the rendered HTML markup of the current render tree. See also [.debug()](debug.md)
 
 Note: can only be called on a wrapper of a single node.
 

diff --git a/docs/api/ShallowWrapper/dive.md b/docs/api/ShallowWrapper/dive.md
@@ -0,0 +1,52 @@
+# `.dive([options]) => ShallowWrapper`
+
+Shallow render the one non-DOM child of the current wrapper, and return a wrapper around the result.
+
+NOTE: can only be called on wrapper of a single non-DOM component element node.
+
+
+#### Arguments
+
+1. `options` (`Object` [optional]):
+- `options.context`: (`Object` [optional]): Context to be passed into the component
+
+
+
+#### Returns
+
+`ShallowWrapper`: A new wrapper that wraps the current node after it's been shallow rendered.
+
+
+
+#### Examples
+
+```jsx
+class Bar extends React.Component {
+  render() {
+    return (
+      <div>
+        <div className="in-bar" />
+      </div>
+    );
+  }
+}
+```
+
+```jsx
+class Foo extends React.Component {
+  render() {
+    return (
+      <div>
+        <Bar />
+      </div>
+    );
+  }
+}
+```
+
+```jsx
+const wrapper = shallow(<Foo />);
+expect(wrapper.find('.in-bar')).to.have.length(0);
+expect(wrapper.find(Bar)).to.have.length(1);
+expect(wrapper.find(Bar).dive().find('.in-bar')).to.have.length(1);
+```
diff --git a/docs/api/ShallowWrapper/hasClass.md b/docs/api/ShallowWrapper/hasClass.md
@@ -11,7 +11,7 @@ Returns whether or not the current node has a `className` prop including the pas
 
 #### Returns
 
-`Boolean`: whether or not the current node has the class or note.
+`Boolean`: whether or not the current node has the class or not.
 
 
 

diff --git a/docs/api/ShallowWrapper/parents.md b/docs/api/ShallowWrapper/parents.md
@@ -2,7 +2,7 @@
 
 Returns a wrapper around all of the parents/ancestors of the wrapper. Does not include the node
 in the current wrapper. Optionally, a selector can be provided and it will filter the parents by
-this selector
+this selector.
 
 Note: can only be called on a wrapper of a single node.
 

diff --git a/docs/api/ShallowWrapper/prop.md b/docs/api/ShallowWrapper/prop.md
@@ -1,22 +1,45 @@
 # `.prop(key) => Any`
 
-Returns the prop value for the node of the current wrapper with the provided key.
+Returns the prop value for the root node of the wrapper with the provided key.
+`.prop(key)` can only be called on a wrapper of a single node.
 
-NOTE: can only be called on a wrapper of a single node.
+NOTE: When called on a shallow wrapper, `.prop(key)` will return values for
+props on the root node that the component *renders*, not the component itself.
+To return the props for the entire React component, use `wrapper.instance().props`.
+See [`.instance() => ReactComponent`](instance.md)
 
 #### Arguments
 
 1. `key` (`String`): The prop name such that this will return value will be the `this.props[key]`
-of the component instance.
+of the root node of the component.
 
 
 
 #### Example
 
 
 ```jsx
-const wrapper = shallow(<MyComponent foo={10} />);
-expect(wrapper.prop('foo')).to.equal(10);
+const MyComponent = React.createClass({
+  render() {
+    return (
+        <div className="foo bar" includedProp={this.props.includedProp}>Hello</div>
+    )
+  }
+})
+const wrapper = shallow(<MyComponent includedProp="Success!" excludedProp="I'm not included" />);
+expect(wrapper.prop('includedProp')).to.equal("Success!");
+
+// 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.
+
+wrapper.prop('includedProp');
+// "Success!"
+
+wrapper.prop('excludedProp');
+// undefined
+
+wrapper.instance().props.excludedProp;
+// "I'm not included"
 ```
 
 

diff --git a/docs/api/ShallowWrapper/props.md b/docs/api/ShallowWrapper/props.md
@@ -1,16 +1,38 @@
 # `.props() => Object`
 
-Returns the props hash for the current node of the wrapper.
+Returns the props hash for the root node of the wrapper. `.props()` can only be
+called on a wrapper of a single node.
 
-NOTE: can only be called on a wrapper of a single node.
+NOTE: When called on a shallow wrapper, `.props()` will return values for
+props on the root node that the component *renders*, not the component itself.
+To return the props for the entire React component, use `wrapper.instance().props`.
+See [`.instance() => ReactComponent`](instance.md)
 
 
 #### Example
 
 
 ```jsx
-const wrapper = shallow(<MyComponent foo={10} />);
-expect(wrapper.props().foo).to.equal(10);
+const MyComponent = React.createClass({
+  render() {
+    return (
+        <div className="foo bar" includedProp={this.props.includedProp}>Hello</div>
+    )
+  }
+})
+const wrapper = shallow(<MyComponent includedProp="Success!" excludedProp="I'm not included" />);
+expect(wrapper.props().includedProp).to.equal("Success!");
+
+// Warning: .props() only returns props that are passed to the root node,
+// which does not include excludedProp in this example.
+// See the note above about wrapper.instance().props.
+
+wrapper.props();
+// {children: "Hello", className: "foo bar", includedProp="Success!"}
+
+wrapper.instance().props;
+// {children: "Hello", className: "foo bar", includedProp:"Success!", excludedProp: "I'm not included"}
+
 ```
 
 

diff --git a/docs/api/mount.md b/docs/api/mount.md
@@ -1,7 +1,7 @@
 # Full Rendering API (`mount(...)`)
 
-Full DOM rendering is ideal for use cases where you have components that may interact with DOM apis,
-or may require the full lifecycle in order to fully test the component (ie, `componentDidMount`
+Full DOM rendering is ideal for use cases where you have components that may interact with DOM APIs,
+or may require the full lifecycle in order to fully test the component (i.e., `componentDidMount`
 etc.)
 
 Full DOM rendering requires that a full DOM API be available at the global scope. This means that
@@ -12,11 +12,13 @@ implemented completely in JS.
 
 ```jsx
 import { mount } from 'enzyme';
+import sinon from 'sinon';
+import Foo from './Foo';
 
 describe('<Foo />', () => {
 
   it('calls componentDidMount', () => {
-    spy(Foo.prototype, 'componentDidMount');
+    sinon.spy(Foo.prototype, 'componentDidMount');
     const wrapper = mount(<Foo />);
     expect(Foo.prototype.componentDidMount.calledOnce).to.equal(true);
   });
@@ -29,7 +31,7 @@ describe('<Foo />', () => {
   });
 
   it('simulates click events', () => {
-    const onButtonClick = spy();
+    const onButtonClick = sinon.spy();
     const wrapper = mount(
       <Foo onButtonClick={onButtonClick} />
     );
@@ -186,28 +188,28 @@ Maps the current array of nodes to another array.
 #### [`.matchesElement(node) => Boolean`](ReactWrapper/matchesElement.md)
 Returns whether or not a given react element matches the current render tree.
 
-#### [`.reduce(fn[, initialValue]) => Any`](/docs/api/ReactWrapper/reduce.md)
+#### [`.reduce(fn[, initialValue]) => Any`](ReactWrapper/reduce.md)
 Reduces the current array of nodes to a value
 
-#### [`.reduceRight(fn[, initialValue]) => Any`](/docs/api/ReactWrapper/reduceRight.md)
+#### [`.reduceRight(fn[, initialValue]) => Any`](ReactWrapper/reduceRight.md)
 Reduces the current array of nodes to a value, from right to left.
 
 #### [`.tap(intercepter) => Self`](ReactWrapper/tap.md)
 Taps into the wrapper method chain. Helpful for debugging.
 
-#### [`.some(selector) => Boolean`](/docs/api/ReactWrapper/some.md)
+#### [`.some(selector) => Boolean`](ReactWrapper/some.md)
 Returns whether or not any of the nodes in the wrapper match the provided selector.
 
-#### [`.someWhere(predicate) => Boolean`](/docs/api/ReactWrapper/someWHere.md)
+#### [`.someWhere(predicate) => Boolean`](ReactWrapper/someWhere.md)
 Returns whether or not any of the nodes in the wrapper pass the provided predicate function.
 
-#### [`.every(selector) => Boolean`](/docs/api/ReactWrapper/every.md)
+#### [`.every(selector) => Boolean`](ReactWrapper/every.md)
 Returns whether or not all of the nodes in the wrapper match the provided selector.
 
-#### [`.everyWhere(predicate) => Boolean`](/docs/api/ReactWrapper/everyWhere.md)
+#### [`.everyWhere(predicate) => Boolean`](ReactWrapper/everyWhere.md)
 Returns whether or not all of the nodes in the wrapper pass the provided predicate function.
 
-#### [`.ref(refName) => ReactWrapper`](/docs/api/ReactWrapper/ref.md)
+#### [`.ref(refName) => ReactWrapper`](ReactWrapper/ref.md)
 Returns a wrapper of the node that matches the provided reference name.
 
 #### [`.detach() => void`](ReactWrapper/detach.md)

diff --git a/docs/api/shallow.md b/docs/api/shallow.md
@@ -187,23 +187,26 @@ Iterates through each node of the current wrapper and executes the provided func
 #### [`.map(fn) => Array`](ShallowWrapper/map.md)
 Maps the current array of nodes to another array.
 
-#### [`.reduce(fn[, initialValue]) => Any`](/docs/api/ShallowWrapper/reduce.md)
+#### [`.reduce(fn[, initialValue]) => Any`](ShallowWrapper/reduce.md)
 Reduces the current array of nodes to a value
 
-#### [`.reduceRight(fn[, initialValue]) => Any`](/docs/api/ShallowWrapper/reduceRight.md)
+#### [`.reduceRight(fn[, initialValue]) => Any`](ShallowWrapper/reduceRight.md)
 Reduces the current array of nodes to a value, from right to left.
 
 #### [`.tap(intercepter) => Self`](ShallowWrapper/tap.md)
 Taps into the wrapper method chain. Helpful for debugging.
 
-#### [`.some(selector) => Boolean`](/docs/api/ShallowWrapper/some.md)
+#### [`.some(selector) => Boolean`](ShallowWrapper/some.md)
 Returns whether or not any of the nodes in the wrapper match the provided selector.
 
-#### [`.someWhere(predicate) => Boolean`](/docs/api/ShallowWrapper/someWhere.md)
+#### [`.someWhere(predicate) => Boolean`](ShallowWrapper/someWhere.md)
 Returns whether or not any of the nodes in the wrapper pass the provided predicate function.
 
-#### [`.every(selector) => Boolean`](/docs/api/ShallowWrapper/every.md)
+#### [`.every(selector) => Boolean`](ShallowWrapper/every.md)
 Returns whether or not all of the nodes in the wrapper match the provided selector.
 
-#### [`.everyWhere(predicate) => Boolean`](/docs/api/ShallowWrapper/everyWhere.md)
+#### [`.everyWhere(predicate) => Boolean`](ShallowWrapper/everyWhere.md)
 Returns whether or not all of the nodes in the wrapper pass the provided predicate function.
+
+#### [`.dive([options]) => ShallowWrapper`](ShallowWrapper/dive.md)
+Shallow render the one non-DOM child of the current wrapper, and return a wrapper around the result.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,7 +11,7 @@ Returns whether or not the current node has a `className` prop including the pas

		#### Returns

		`Boolean`: whether or not the current node has the class or note.
		`Boolean`: whether or not the current node has the class or not.



Expand Down