Skip to content

Commit af47056

Browse files
committed
add docs
1 parent aecbee4 commit af47056

1 file changed

Lines changed: 89 additions & 2 deletions

File tree

packages/docs-gesture-handler/docs/guides/testing.mdx

Lines changed: 89 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,94 @@ In order to load mocks provided by RNGH, add the following to your jest config:
6262

6363
## Testing Gestures' and Gesture handlers' callbacks
6464

65-
RNGH provides APIs, specifically [`fireGestureHandler`](#firegesturehandler) and [`getByGestureTestId`](#getbygesturetestid), to trigger selected handlers.
65+
RNGH provides the following APIs for triggering selected handlers:
66+
67+
- [`createGestureController`](#creategesturecontroller) to imperatively control a gesture lifecycle one step at a time.
68+
- [`fireGestureHandler`](#firegesturehandler) to dispatch a complete event stream.
69+
- [`getByGestureTestId`](#getbygesturetestid) to find a gesture by its test ID.
70+
71+
### createGestureController
72+
73+
```ts
74+
import { createGestureController } from 'react-native-gesture-handler/jest-utils';
75+
76+
createGestureController: (componentOrGesture) => GestureController;
77+
```
78+
79+
Creates an imperative controller that dispatches gesture lifecycle events one step
80+
at a time. This allows the test to assert application state between lifecycle steps
81+
without manually supplying `state`, `oldState`, or `handlerTag`.
82+
83+
`componentOrGesture` can be:
84+
85+
- A Gesture Handler component found using a Jest query such as `getByTestId`.
86+
- A gesture object.
87+
- A gesture test ID string.
88+
89+
When a gesture object is passed directly, the event payload type is inferred from
90+
the gesture. Every lifecycle method accepts an optional partial event payload and
91+
fills omitted handler-specific properties with defaults.
92+
93+
The controller exposes these methods:
94+
95+
| Method | Behavior |
96+
| ------------ | ---------------------------------------------------------------------------------------------------------------- |
97+
| `begin()` | Starts a stream and calls `onBegin`. If the previous stream finished, the controller resets it before beginning. |
98+
| `activate()` | Activates a begun stream and calls `onActivate`. |
99+
| `update()` | Dispatches an update for an active stream and calls `onUpdate`. It can be called multiple times. |
100+
| `end()` | Ends a begun or active stream. Calls `onDeactivate` if active, then `onFinalize` with `canceled: false`. |
101+
| `fail()` | Fails a begun or active stream. Calls `onDeactivate` if active, then `onFinalize` with `canceled: true`. |
102+
| `cancel()` | Cancels a begun or active stream. Calls `onDeactivate` if active, then `onFinalize` with `canceled: true`. |
103+
| `getState()` | Returns the controller's current state without dispatching an event. |
104+
105+
After `end()`, `fail()`, or `cancel()`, the terminal state remains available through
106+
`getState()`. Calling `begin()` again starts another stream with the same controller.
107+
Calling methods in an invalid order throws an error. State-machine fields such as
108+
`state`, `oldState`, `handlerTag`, and `nativeEvent` cannot be supplied in event
109+
payloads because the controller manages them internally.
110+
111+
```tsx
112+
test('updates application state after each gesture step', () => {
113+
const onBegin = jest.fn();
114+
const onActivate = jest.fn();
115+
const onUpdate = jest.fn();
116+
const onFinalize = jest.fn();
117+
118+
const panGesture = renderHook(() =>
119+
usePanGesture({
120+
disableReanimated: true,
121+
onBegin,
122+
onActivate,
123+
onUpdate,
124+
onFinalize,
125+
})
126+
).result.current;
127+
128+
const controller = createGestureController(panGesture);
129+
130+
controller.begin();
131+
expect(onBegin).toHaveBeenCalledTimes(1);
132+
133+
controller.activate();
134+
expect(onActivate).toHaveBeenCalledTimes(1);
135+
136+
controller.update({ translationX: 50 });
137+
expect(onUpdate).toHaveBeenCalledWith(
138+
expect.objectContaining({ translationX: 50 })
139+
);
140+
141+
controller.end();
142+
expect(onFinalize).toHaveBeenCalledWith(
143+
expect.objectContaining({ canceled: false })
144+
);
145+
});
146+
```
147+
148+
:::note
149+
`createGestureController` controls lifecycle events directly. It does not generate
150+
pointer input, run platform gesture recognizers, or evaluate relations between
151+
gestures.
152+
:::
66153

67154
### fireGestureHandler
68155

@@ -133,7 +220,7 @@ components.
133220
`testID` must be unique among components rendered in test.
134221
:::
135222

136-
## Example
223+
## fireGestureHandler example
137224

138225
Extracted from RNGH tests, check [`api_v3.test.tsx`](https://github.com/software-mansion/react-native-gesture-handler/blob/main/packages/react-native-gesture-handler/src/__tests__/api_v3.test.tsx) for full implementation.
139226

0 commit comments

Comments
 (0)