Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ReactTestUtils to addons #1112

Merged
merged 2 commits into from
Feb 19, 2014
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/_data/nav_docs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@
title: Two-Way Binding Helpers
- id: class-name-manipulation
title: Class Name Manipulation
- id: test-utils
title: Test Utilities
- id: examples
title: Examples
- title: Reference
Expand Down
7 changes: 4 additions & 3 deletions docs/docs/09-addons.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@ next: animation.html

`React.addons` is where we park some useful utilities for building React apps. **These should be considered experimental** but will eventually be rolled into core or a blessed utilities library:

- `ReactTransitions`, for dealing with animations and transitions that are usually not simple to implement, such as before a component's removal.
- `ReactLink`, to simplify the coordination between user's form input data and and the component's state.
- `classSet`, for manipulating the DOM `class` string a bit more cleanly.
- [`ReactTransitions`](animation.html), for dealing with animations and transitions that are usually not simple to implement, such as before a component's removal.
- [`ReactLink`](two-way-binding-helpers.html), to simplify the coordination between user's form input data and and the component's state.
- [`classSet`](class-name-manipulation.html), for manipulating the DOM `class` string a bit more cleanly.
- [`ReactTestUtils`](test-utils.html), simple helpers for writing test cases (unminified build only).

To get the add-ons, use `react-with-addons.js` (and its minified counterpart) rather than the common `react.js`.
2 changes: 1 addition & 1 deletion docs/docs/09.3-class-name-manipulation.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: Class Name Manipulation
layout: docs
permalink: class-name-manipulation.html
prev: two-way-binding-helpers.html
next: examples.html
next: test-utils.html
---

`classSet()` is a neat utility for easily manipulating the DOM `class` string.
Expand Down
78 changes: 78 additions & 0 deletions docs/docs/09.4-test-utils.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
---
id: test-utils
title: Test Utilities
layout: docs
permalink: test-utils.html
prev: class-name-manipulation.html
next: examples.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)

Render a component into a detached DOM node in the document. **This function requires a DOM.**

#### boolean isComponentOfType(ReactComponent instance, function componentClass)

Returns true if `instance` is an instance of a React `componentClass`.

#### boolean isDOMComponent(ReactComponent instance)

Returns true if `instance` is a DOM component (such as a `<div>` or `<span>`).

#### boolean isCompositeComponent(ReactComponent instance)`

Returns true if `instance` is a composite component (created with `React.createClass()`)

#### boolean isCompositeComponentWithType(ReactComponent instance, function componentClass)

The combination of `isComponentOfType()` and `isCompositeComponent()`.

#### boolean isTextComponent(ReactComponent instance)

Returns true if `instance` is a plain text component.

#### array findAllInRenderedTree(ReactComponent tree, function test)

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.

#### array scryRenderedDOMComponentsWithClass(ReactCompoennt tree, string className)

Finds all instance of components in the rendered tree that are DOM components with the class name matching `className`.

#### ReactComponent findRenderedDOMComponentWithClass(ReactComponent 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.

#### array scryRenderedDOMComponentsWithTag(ReactComponent tree, string tagName)

Finds all instance of components in the rendered tree that are DOM components with the tag name matching `tagName`.

#### ReactComponent findRenderedDOMComponentWithTag(ReactComponent tree, 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.

#### array scryRenderedComponentsWithType(ReactComponent tree, function componentClass)

Finds all instances of components with type equal to `componentClass`.

#### ReactComponent findRenderedComponentWithType(ReactComponent tree, function componentClass)

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.

#### 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.

#### Simulate.{eventName}({ReactComponent|DOMElement} element, object nativeEventData)

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`.**

> 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.

Example usage: `React.addons.TestUtils.Simulate.click(myComponent)`

`Simulate` has a method for every event that React understands.
4 changes: 4 additions & 0 deletions src/browser/ReactWithAddons.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,5 +42,9 @@ React.addons = {
cloneWithProps: cloneWithProps
};

if (__DEV__) {
React.addons.TestUtils = require('ReactTestUtils');
}

module.exports = React;