Skip to content

feat: support multiple params in event handlers #203

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

Merged
merged 1 commit into from
Jul 16, 2019
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
8 changes: 4 additions & 4 deletions docs/API.md
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ Get the rendered component JSON representation, e.g. for snapshot testing.
## `fireEvent`

```ts
fireEvent(element: ReactTestInstance, eventName: string, data?: *): void
fireEvent(element: ReactTestInstance, eventName: string, ...data: Array<any>): void
```

Fires native-like event with data.
Expand Down Expand Up @@ -161,7 +161,7 @@ fireEvent(getByPlaceholder('my placeholder'), 'blur');
## `fireEvent[eventName]`

```ts
fireEvent[eventName](element: ReactTestInstance, data?: *): void
fireEvent[eventName](element: ReactTestInstance, ...data: Array<any>): void
```

Convenience methods for common events like: `press`, `changeText`, `scroll`.
Expand All @@ -187,7 +187,7 @@ const { getByTestId } = render(
fireEvent.press(getByTestId('button'));
```

### `fireEvent.changeText: (element: ReactTestInstance, data?: *) => void`
### `fireEvent.changeText: (element: ReactTestInstance, ...data: Array<any>) => void`

Invokes `changeText` event handler on the element or parent element in the tree.

Expand All @@ -207,7 +207,7 @@ const { getByTestId } = render(
fireEvent.changeText(getByTestId('text-input'), CHANGE_TEXT);
```

### `fireEvent.scroll: (element: ReactTestInstance, data?: *) => void`
### `fireEvent.scroll: (element: ReactTestInstance, ...data: Array<any>) => void`

Invokes `scroll` event handler on the element or parent element in the tree.

Expand Down
12 changes: 12 additions & 0 deletions src/__tests__/fireEvent.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -148,3 +148,15 @@ test('custom component with custom event name', () => {

expect(handlePress).toHaveBeenCalled();
});

test('event with multiple handler parameters', () => {
const handlePress = jest.fn();

const { getByTestId } = render(
<CustomEventComponentWithCustomName handlePress={handlePress} />
);

fireEvent(getByTestId('my-custom-button'), 'handlePress', 'param1', 'param2');

expect(handlePress).toHaveBeenCalledWith('param1', 'param2');
});
22 changes: 13 additions & 9 deletions src/fireEvent.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ const findEventHandler = (
const invokeEvent = (
element: ReactTestInstance,
eventName: string,
data?: any,
callsite?: any
callsite?: any,
...data: Array<any>
) => {
const handler = findEventHandler(element, eventName, callsite);

Expand All @@ -41,7 +41,7 @@ const invokeEvent = (
let returnValue;

act(() => {
returnValue = handler(data);
returnValue = handler(...data);
});

return returnValue;
Expand All @@ -51,13 +51,17 @@ const toEventHandlerName = (eventName: string) =>
`on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`;

const pressHandler = (element: ReactTestInstance) =>
invokeEvent(element, 'press', undefined, pressHandler);
const changeTextHandler = (element: ReactTestInstance, data?: *) =>
invokeEvent(element, 'changeText', data, changeTextHandler);
const scrollHandler = (element: ReactTestInstance, data?: *) =>
invokeEvent(element, 'scroll', data, scrollHandler);
invokeEvent(element, 'press', pressHandler);
const changeTextHandler = (element: ReactTestInstance, ...data: Array<any>) =>
invokeEvent(element, 'changeText', changeTextHandler, ...data);
const scrollHandler = (element: ReactTestInstance, ...data: Array<any>) =>
invokeEvent(element, 'scroll', scrollHandler, ...data);

const fireEvent = invokeEvent;
const fireEvent = (
element: ReactTestInstance,
eventName: string,
...data: Array<any>
) => invokeEvent(element, eventName, fireEvent, ...data);

fireEvent.press = pressHandler;
fireEvent.changeText = changeTextHandler;
Expand Down
1 change: 1 addition & 0 deletions typings/__tests__/index.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,7 @@ tree.unmount();
// fireEvent API tests
fireEvent(getByNameString, 'press');
fireEvent(getByNameString, 'press', 'data');
fireEvent(getByNameString, 'press', 'param1', 'param2');
fireEvent.press(getByNameString);
fireEvent.changeText(getByNameString, 'string');
fireEvent.scroll(getByNameString, 'eventData');
Expand Down
6 changes: 3 additions & 3 deletions typings/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -97,13 +97,13 @@ export interface RenderAPI extends GetByAPI, QueryByAPI, A11yAPI {
export type FireEventFunction = (
element: ReactTestInstance,
eventName: string,
data?: any
...data: Array<any>
) => any;

export type FireEventAPI = FireEventFunction & {
press: (element: ReactTestInstance) => any;
changeText: (element: ReactTestInstance, data?: any) => any;
scroll: (element: ReactTestInstance, data?: any) => any;
changeText: (element: ReactTestInstance, ...data: Array<any>) => any;
scroll: (element: ReactTestInstance, ...data: Array<any>) => any;
};

export type WaitForElementFunction = <T = any>(
Expand Down