@samitouri / QOS-React-2 / commits / 99b80938af

Update Simulate docs and reorg a little bit

Ben Alpert committed Feb 19, 2014 at 11:16 UTC 99b80938af2fe9edce427f30f768bc88e3f929a8
1 file changed +91 -29
docs/docs/09.4-test-utils.md
+91 -29
@@ -9,70 +9,132 @@ next: clone-with-props.html
9
10 `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)).
11
12 -#### ReactComponent renderIntoDocument(ReactComponent instance)
12 +### Simulate
13 +
14 +```javascript
15 +Simulate.{eventName}({ReactComponent|DOMElement} element, object eventData)
16 +```
17 +
18 +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`.**
19 +
20 +Example usage:
21 +
22 +```javascript
23 +React.addons.TestUtils.Simulate.click(myComponent);
24 +React.addons.TestUtils.Simulate.change(myComponent);
25 +React.addons.TestUtils.Simulate.keydown(myComponent, {key: "Enter"});
26 +```
27 +
28 +`Simulate` has a method for every event that React understands.
29 +
30 +### renderIntoDocument
31 +
32 +```javascript
33 +ReactComponent renderIntoDocument(ReactComponent instance)
34 +```
35
36 Render a component into a detached DOM node in the document. **This function requires a DOM.**
37
16 -#### boolean isComponentOfType(ReactComponent instance, function componentClass)
38 +### mockComponent
39 +
40 +```javascript
41 +object mockComponent(function componentClass, string? tagName)
42 +```
43 +
44 +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.
45 +
46 +### isComponentOfType
47 +
48 +```javascript
49 +boolean isComponentOfType(ReactComponent instance, function componentClass)
50 +```
51
52 Returns true if `instance` is an instance of a React `componentClass`.
53
20 -#### boolean isDOMComponent(ReactComponent instance)
54 +### isDOMComponent
55 +
56 +```javascript
57 +boolean isDOMComponent(ReactComponent instance)
58 +```
59
60 Returns true if `instance` is a DOM component (such as a `<div>` or `<span>`).
61
24 -#### boolean isCompositeComponent(ReactComponent instance)`
62 +### isCompositeComponent
63 +
64 +```javascript
65 +boolean isCompositeComponent(ReactComponent instance)`
66 +```
67
68 Returns true if `instance` is a composite component (created with `React.createClass()`)
69
28 -#### boolean isCompositeComponentWithType(ReactComponent instance, function componentClass)
70 +### isCompositeComponentWithType
71 +
72 +```javascript
73 +boolean isCompositeComponentWithType(ReactComponent instance, function componentClass)
74 +```
75
76 The combination of `isComponentOfType()` and `isCompositeComponent()`.
77
32 -#### boolean isTextComponent(ReactComponent instance)
78 +### isTextComponent
79 +
80 +```javascript
81 +boolean isTextComponent(ReactComponent instance)
82 +```
83
84 Returns true if `instance` is a plain text component.
85
36 -#### array findAllInRenderedTree(ReactComponent tree, function test)
86 +### findAllInRenderedTree
87
38 -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.
88 +```javascript
89 +array findAllInRenderedTree(ReactComponent tree, function test)
90 +```
91
40 -#### array scryRenderedDOMComponentsWithClass(ReactCompoennt tree, string className)
92 +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.
93
42 -Finds all instance of components in the rendered tree that are DOM components with the class name matching `className`.
94 +### scryRenderedDOMComponentsWithClass
95
44 -#### ReactComponent findRenderedDOMComponentWithClass(ReactComponent tree, string className)
96 +```javascript
97 +array scryRenderedDOMComponentsWithClass(ReactCompoennt tree, string className)
98 +```
99
46 -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.
100 +Finds all instance of components in the rendered tree that are DOM components with the class name matching `className`.
101
48 -#### array scryRenderedDOMComponentsWithTag(ReactComponent tree, string tagName)
102 +### findRenderedDOMComponentWithClass
103
50 -Finds all instance of components in the rendered tree that are DOM components with the tag name matching `tagName`.
104 +```javascript
105 +ReactComponent findRenderedDOMComponentWithClass(ReactComponent tree, string className)
106 +```
107
52 -#### ReactComponent findRenderedDOMComponentWithTag(ReactComponent tree, string tagName)
108 +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.
109
54 -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.
110 +### scryRenderedDOMComponentsWithTag
111
56 -#### array scryRenderedComponentsWithType(ReactComponent tree, function componentClass)
112 +```javascript
113 +array scryRenderedDOMComponentsWithTag(ReactComponent tree, string tagName)
114 +```
115
58 -Finds all instances of components with type equal to `componentClass`.
116 +Finds all instance of components in the rendered tree that are DOM components with the tag name matching `tagName`.
117
60 -#### ReactComponent findRenderedComponentWithType(ReactComponent tree, function componentClass)
118 +### findRenderedDOMComponentWithTag
119
62 -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.
120 +```javascript
121 +ReactComponent findRenderedDOMComponentWithTag(ReactComponent tree, string tagName)
122 +```
123
64 -#### object mockComponent(function componentClass, string? tagName)
124 +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.
125
66 -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.
126 +### scryRenderedComponentsWithType
127
68 -#### Simulate.{eventName}({ReactComponent|DOMElement} element, object nativeEventData)
128 +```javascript
129 +array scryRenderedComponentsWithType(ReactComponent tree, function componentClass)
130 +```
131
70 -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`.**
132 +Finds all instances of components with type equal to `componentClass`.
133
72 -> Note:
73 ->
74 -> 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.
134 +### findRenderedComponentWithType
135
76 -Example usage: `React.addons.TestUtils.Simulate.click(myComponent)`
136 +```javascript
137 +ReactComponent findRenderedComponentWithType(ReactComponent tree, function componentClass)
138 +```
139
78 -`Simulate` has a method for every event that React understands.
140 +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.