-
Notifications
You must be signed in to change notification settings - Fork 723
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test(xychart): add PointerEvent tests (#952)
* test(xychart): add tests for useEventEmitter sources, usePointerEventEmitters, usePointerEventHandlers * test(xychart/useEventEmitter,usePointerEventHandlers): add more assertions
- Loading branch information
1 parent
dd11a5c
commit 4c82b1c
Showing
4 changed files
with
202 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
55 changes: 55 additions & 0 deletions
55
packages/visx-xychart/test/hooks/usePointerEventEmitters.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
import React, { useEffect } from 'react'; | ||
import { mount } from 'enzyme'; | ||
import { EventEmitterProvider, useEventEmitter } from '../../src'; | ||
import usePointerEventEmitters from '../../src/hooks/usePointerEventEmitters'; | ||
|
||
describe('usePointerEventEmitters', () => { | ||
it('should be defined', () => { | ||
expect(usePointerEventEmitters).toBeDefined(); | ||
}); | ||
|
||
it('should provide an emitter for each callback specified', () => { | ||
expect.assertions(1); | ||
|
||
const Component = () => { | ||
const emitters = usePointerEventEmitters({ source: 'visx', onPointerOut: false }); | ||
expect(emitters).toEqual({ | ||
onPointerMove: expect.any(Function), | ||
onPointerOut: undefined, | ||
onPointerUp: expect.any(Function), | ||
}); | ||
return null; | ||
}; | ||
|
||
mount( | ||
<EventEmitterProvider> | ||
<Component /> | ||
</EventEmitterProvider>, | ||
); | ||
}); | ||
it('emitters should emit events', () => { | ||
expect.assertions(1); | ||
|
||
const Component = () => { | ||
const source = 'sourceId'; | ||
const listener = jest.fn(); | ||
useEventEmitter('pointerup', listener, [source]); | ||
const emitters = usePointerEventEmitters({ source }); | ||
|
||
useEffect(() => { | ||
if (emitters.onPointerUp) { | ||
emitters.onPointerUp((new MouseEvent('pointerup') as unknown) as React.PointerEvent); | ||
expect(listener).toHaveBeenCalledTimes(1); | ||
} | ||
}); | ||
|
||
return null; | ||
}; | ||
|
||
mount( | ||
<EventEmitterProvider> | ||
<Component /> | ||
</EventEmitterProvider>, | ||
); | ||
}); | ||
}); |
103 changes: 103 additions & 0 deletions
103
packages/visx-xychart/test/hooks/usePointerEventHandlers.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,103 @@ | ||
import React, { useEffect } from 'react'; | ||
import { mount } from 'enzyme'; | ||
import { EventEmitterProvider, useEventEmitter, DataContext } from '../../src'; | ||
import usePointerEventHandlers, { | ||
POINTER_EVENTS_ALL, | ||
} from '../../src/hooks/usePointerEventHandlers'; | ||
import getDataContext from '../mocks/getDataContext'; | ||
|
||
const series1 = { key: 'series1', data: [{}], xAccessor: () => 4, yAccessor: () => 7 }; | ||
const series2 = { key: 'series2', data: [{}], xAccessor: () => 4, yAccessor: () => 7 }; | ||
// avoids a lot of coercing of types | ||
const getEvent = (eventType: string) => | ||
(new MouseEvent(eventType) as unknown) as React.PointerEvent; | ||
|
||
describe('usePointerEventHandlers', () => { | ||
function setup(children: React.ReactNode) { | ||
return mount( | ||
<DataContext.Provider value={getDataContext([series1, series2])}> | ||
<EventEmitterProvider>{children}</EventEmitterProvider> | ||
</DataContext.Provider>, | ||
); | ||
} | ||
|
||
it('should be defined', () => { | ||
expect(usePointerEventHandlers).toBeDefined(); | ||
}); | ||
it('should invoke handlers for each pointer event handler specified', () => { | ||
expect.assertions(3); | ||
|
||
const Component = () => { | ||
const sourceId = 'sourceId'; | ||
const pointerMoveListener = jest.fn(); | ||
const pointerOutListener = jest.fn(); | ||
const pointerUpListener = jest.fn(); | ||
const emit = useEventEmitter(); | ||
|
||
usePointerEventHandlers({ | ||
sources: [sourceId], | ||
dataKey: series1.key, | ||
onPointerMove: pointerMoveListener, | ||
onPointerOut: pointerOutListener, | ||
onPointerUp: pointerUpListener, | ||
}); | ||
|
||
useEffect(() => { | ||
if (emit) { | ||
emit('pointermove', getEvent('pointermove'), sourceId); | ||
emit('pointermove', getEvent('pointermove'), 'invalidSource'); | ||
expect(pointerMoveListener).toHaveBeenCalledTimes(1); | ||
|
||
emit('pointerout', getEvent('pointerout'), sourceId); | ||
emit('pointerout', getEvent('pointerout'), 'invalidSource'); | ||
expect(pointerOutListener).toHaveBeenCalledTimes(1); | ||
|
||
emit('pointerup', getEvent('pointerup'), sourceId); | ||
emit('pointerup', getEvent('pointerup'), 'invalidSource'); | ||
expect(pointerUpListener).toHaveBeenCalledTimes(1); | ||
} | ||
}); | ||
|
||
return null; | ||
}; | ||
|
||
setup(<Component />); | ||
}); | ||
|
||
it('should invoke handlers once for each dataKey specified', () => { | ||
expect.assertions(4); | ||
|
||
const Component = () => { | ||
const sourceId = 'sourceId'; | ||
const pointerMoveListenerAll = jest.fn(); | ||
const pointerMoveListenerMultipleKeys = jest.fn(); | ||
const emit = useEventEmitter(); | ||
|
||
usePointerEventHandlers({ | ||
sources: [sourceId], | ||
dataKey: POINTER_EVENTS_ALL, | ||
onPointerMove: pointerMoveListenerAll, | ||
}); | ||
usePointerEventHandlers({ | ||
sources: [sourceId], | ||
dataKey: [series1.key, series2.key], | ||
onPointerMove: pointerMoveListenerMultipleKeys, | ||
}); | ||
|
||
useEffect(() => { | ||
if (emit) { | ||
emit('pointermove', getEvent('pointermove'), sourceId); | ||
expect(pointerMoveListenerAll).toHaveBeenCalledTimes(2); | ||
expect(pointerMoveListenerMultipleKeys).toHaveBeenCalledTimes(2); | ||
emit('pointermove', getEvent('pointermove'), 'invalidSource'); | ||
expect(pointerMoveListenerAll).toHaveBeenCalledTimes(2); | ||
expect(pointerMoveListenerMultipleKeys).toHaveBeenCalledTimes(2); | ||
} | ||
}); | ||
|
||
return null; | ||
}; | ||
|
||
setup(<Component />); | ||
}); | ||
}); |