Browse Source

Update Simulate docs and reorg a little bit

main
Ben Alpert 11 years ago
parent
commit
8258cb2440
  1. 120
      docs/09.4-test-utils.md

120
docs/09.4-test-utils.md

@ -9,70 +9,132 @@ next: clone-with-props.html
`React.addons.TestUtils` makes it easy to test React components in the testing framework of your choice (we use [Jasmine](http://pivotal.github.io/jasmine/) with [jsdom](https://github.com/tmpvar/jsdom)).
#### ReactComponent renderIntoDocument(ReactComponent instance)
### Simulate
```javascript
Simulate.{eventName}({ReactComponent|DOMElement} element, object eventData)
```
Simulate an event dispatch on a React component instance or browser DOM node with optional `eventData` event data. **This is possibly the single most useful utility in `ReactTestUtils`.**
Example usage:
```javascript
React.addons.TestUtils.Simulate.click(myComponent);
React.addons.TestUtils.Simulate.change(myComponent);
React.addons.TestUtils.Simulate.keydown(myComponent, {key: "Enter"});
```
`Simulate` has a method for every event that React understands.
### renderIntoDocument
```javascript
ReactComponent renderIntoDocument(ReactComponent instance)
```
Render a component into a detached DOM node in the document. **This function requires a DOM.**
#### boolean isComponentOfType(ReactComponent instance, function componentClass)
### mockComponent
```javascript
object mockComponent(function componentClass, string? tagName)
```
Pass a mocked component module to this method to augment it with useful methods that allow it to be used as a dummy React component. Instead of rendering as usual, the component will become a simple `<div>` (or other tag if `mockTagName` is provided) containing any provided children.
### isComponentOfType
```javascript
boolean isComponentOfType(ReactComponent instance, function componentClass)
```
Returns true if `instance` is an instance of a React `componentClass`.
#### boolean isDOMComponent(ReactComponent instance)
### isDOMComponent
```javascript
boolean isDOMComponent(ReactComponent instance)
```
Returns true if `instance` is a DOM component (such as a `<div>` or `<span>`).
#### boolean isCompositeComponent(ReactComponent instance)`
### isCompositeComponent
```javascript
boolean isCompositeComponent(ReactComponent instance)`
```
Returns true if `instance` is a composite component (created with `React.createClass()`)
#### boolean isCompositeComponentWithType(ReactComponent instance, function componentClass)
### isCompositeComponentWithType
```javascript
boolean isCompositeComponentWithType(ReactComponent instance, function componentClass)
```
The combination of `isComponentOfType()` and `isCompositeComponent()`.
#### boolean isTextComponent(ReactComponent instance)
### isTextComponent
```javascript
boolean isTextComponent(ReactComponent instance)
```
Returns true if `instance` is a plain text component.
#### array findAllInRenderedTree(ReactComponent tree, function test)
### findAllInRenderedTree
Traverse all components in `tree` and accumulate all components where `test(component)` is true. This is not that useful on its own, but it's used as a primitive for other test utils.
```javascript
array findAllInRenderedTree(ReactComponent tree, function test)
```
#### array scryRenderedDOMComponentsWithClass(ReactCompoennt tree, string className)
Traverse all components in `tree` and accumulate all components where `test(component)` is true. This is not that useful on its own, but it's used as a primitive for other test utils.
Finds all instance of components in the rendered tree that are DOM components with the class name matching `className`.
### scryRenderedDOMComponentsWithClass
#### ReactComponent findRenderedDOMComponentWithClass(ReactComponent tree, string className)
```javascript
array scryRenderedDOMComponentsWithClass(ReactCompoennt tree, string className)
```
Like `scryRenderedDOMComponentsWithClass()` but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.
Finds all instance of components in the rendered tree that are DOM components with the class name matching `className`.
#### array scryRenderedDOMComponentsWithTag(ReactComponent tree, string tagName)
### findRenderedDOMComponentWithClass
Finds all instance of components in the rendered tree that are DOM components with the tag name matching `tagName`.
```javascript
ReactComponent findRenderedDOMComponentWithClass(ReactComponent tree, string className)
```
#### ReactComponent findRenderedDOMComponentWithTag(ReactComponent tree, string tagName)
Like `scryRenderedDOMComponentsWithClass()` but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.
Like `scryRenderedDOMComponentsWithTag()` but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.
### scryRenderedDOMComponentsWithTag
#### array scryRenderedComponentsWithType(ReactComponent tree, function componentClass)
```javascript
array scryRenderedDOMComponentsWithTag(ReactComponent tree, string tagName)
```
Finds all instances of components with type equal to `componentClass`.
Finds all instance of components in the rendered tree that are DOM components with the tag name matching `tagName`.
#### ReactComponent findRenderedComponentWithType(ReactComponent tree, function componentClass)
### findRenderedDOMComponentWithTag
Same as `scryRenderedComponentsWithType()` but expects there to be one result and returns that one result, or throws exception if there is any other number of matches besides one.
```javascript
ReactComponent findRenderedDOMComponentWithTag(ReactComponent tree, string tagName)
```
#### object mockComponent(function componentClass, string? tagName)
Like `scryRenderedDOMComponentsWithTag()` but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.
Pass a mocked component module to this method to augment it with useful methods that allow it to be used as a dummy React component. Instead of rendering as usual, the component will become a simple `<div>` (or other tag if `mockTagName` is provided) containing any provided children.
### scryRenderedComponentsWithType
#### Simulate.{eventName}({ReactComponent|DOMElement} element, object nativeEventData)
```javascript
array scryRenderedComponentsWithType(ReactComponent tree, function componentClass)
```
Simulate an event dispatch on a React component instance or browser DOM node with optional `nativeEventData` event data. **This is possibly the single most useful utility in `ReactTestUtils`.**
Finds all instances of components with type equal to `componentClass`.
> Note:
>
> This helper is used to simulate browser events, so synthetic React events like `change` are not available. If you want to test `change`, simulate the underlying `input` browser event.
### findRenderedComponentWithType
Example usage: `React.addons.TestUtils.Simulate.click(myComponent)`
```javascript
ReactComponent findRenderedComponentWithType(ReactComponent tree, function componentClass)
```
`Simulate` has a method for every event that React understands.
Same as `scryRenderedComponentsWithType()` but expects there to be one result and returns that one result, or throws exception if there is any other number of matches besides one.

Loading…
Cancel
Save