-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #593 from seznam/cnsqa-1727
feat: add renderHookWithContext to ITL
- Loading branch information
Showing
17 changed files
with
369 additions
and
225 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@ima/testing-library": minor | ||
| --- | ||
|
|
||
| Add `renderHookWithContext`, see the [docs](https://imajs.io/basic-features/testing/#renderhookwithcontext) for more details. |
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
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
16 changes: 7 additions & 9 deletions
16
packages/react-page-renderer/src/hooks/__tests__/componentUtilsSpec.js
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 |
|---|---|---|
| @@ -1,15 +1,13 @@ | ||
| import { renderHook } from '../../testUtils'; | ||
| import { renderHookWithContext } from '@ima/testing-library'; | ||
|
|
||
| import { useComponentUtils } from '../componentUtils'; | ||
|
|
||
| describe('useComponentUtils', () => { | ||
| let result; | ||
| let contextMock = { $Utils: { CustomContextHelper: {} } }; | ||
|
|
||
| it('should return componentUtils', () => { | ||
| renderHook(() => { | ||
| result = useComponentUtils(); | ||
| }, contextMock); | ||
| it('should return componentUtils', async () => { | ||
| const { result, contextValue } = await renderHookWithContext(() => | ||
| useComponentUtils() | ||
| ); | ||
|
|
||
| expect(Object.keys(result).includes('CustomContextHelper')).toBeTruthy(); | ||
| expect(result.current).toBe(contextValue.$Utils); | ||
| }); | ||
| }); |
23 changes: 10 additions & 13 deletions
23
packages/react-page-renderer/src/hooks/__tests__/cssClassesSpec.js
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 |
|---|---|---|
| @@ -1,20 +1,17 @@ | ||
| import { renderHook } from '../../testUtils'; | ||
| import { getContextValue, renderHookWithContext } from '@ima/testing-library'; | ||
|
|
||
| import { useCssClasses } from '../cssClasses'; | ||
|
|
||
| describe('useCssClasses', () => { | ||
| let result; | ||
| let contextMock = { | ||
| $Utils: { | ||
| $CssClasses: () => '$CssClasses', | ||
| }, | ||
| }; | ||
| it('should return shortcut to $CssClasses utility', async () => { | ||
| const contextValue = await getContextValue(); | ||
|
|
||
| contextValue.$Utils.$CssClasses = jest.fn().mockReturnValue('$CssClasses'); | ||
|
|
||
| it('should return shortcut to $CssClasses utility', () => { | ||
| renderHook(() => { | ||
| result = useCssClasses(); | ||
| }, contextMock); | ||
| const { result } = await renderHookWithContext(() => useCssClasses(), { | ||
| contextValue, | ||
| }); | ||
|
|
||
| expect(typeof result === 'function').toBe(true); | ||
| expect(result()).toBe('$CssClasses'); | ||
| expect(result.current()).toBe('$CssClasses'); | ||
| }); | ||
| }); |
61 changes: 49 additions & 12 deletions
61
packages/react-page-renderer/src/hooks/__tests__/dispatcherSpec.js
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 |
|---|---|---|
| @@ -1,22 +1,59 @@ | ||
| import React from 'react'; | ||
| import { getContextValue, renderHookWithContext } from '@ima/testing-library'; | ||
|
|
||
| import { renderHook } from '../../testUtils'; | ||
| import { useDispatcher } from '../dispatcher'; | ||
|
|
||
| /** | ||
| * Create dispatcher mock instance and set it to context value. | ||
| * @param {import('@ima/testing-library').ContextValue} contextValue | ||
| * @returns {object} dispatcher mock | ||
| */ | ||
| function mockDispatcher(contextValue) { | ||
| const dispatcher = { | ||
| fire: jest.fn(), | ||
| listen: jest.fn(), | ||
| unlisten: jest.fn(), | ||
| }; | ||
|
|
||
| contextValue.$Utils.$Dispatcher = dispatcher; | ||
|
|
||
| return dispatcher; | ||
| } | ||
|
|
||
| describe('useDispatcher', () => { | ||
| let result; | ||
| it('should return `fire` callback', async () => { | ||
| const { result } = await renderHookWithContext(() => useDispatcher()); | ||
|
|
||
| beforeEach(() => { | ||
| jest.spyOn(React, 'useEffect').mockImplementation(f => f()); | ||
| expect(result.current.fire).toBeInstanceOf(Function); | ||
| }); | ||
|
|
||
| it('should return `fire` callback', () => { | ||
| renderHook(() => { | ||
| result = useDispatcher(); | ||
| }); | ||
| it('should call listen/unlisten/fire methods', async () => { | ||
| const listenerArgs = ['foo', 'bar']; | ||
| const contextValue = await getContextValue(); | ||
|
|
||
| const dispatcher = mockDispatcher(contextValue); | ||
|
|
||
| const { result, unmount } = await renderHookWithContext( | ||
| () => useDispatcher(...listenerArgs), | ||
| { contextValue } | ||
| ); | ||
|
|
||
| // Only listen should be called on component mount | ||
| expect(dispatcher.listen).toHaveBeenCalledTimes(1); | ||
| expect(dispatcher.listen).toHaveBeenCalledWith(...listenerArgs); | ||
| expect(dispatcher.unlisten).toHaveBeenCalledTimes(0); | ||
| expect(dispatcher.fire).toHaveBeenCalledTimes(0); | ||
|
|
||
| result.current.fire(); | ||
|
|
||
| // The hook fire method should call dispatcher fire method | ||
| expect(dispatcher.fire).toHaveBeenCalledTimes(1); | ||
|
|
||
| unmount(); | ||
|
|
||
| expect(result).toEqual({ | ||
| fire: expect.any(Function), | ||
| }); | ||
| // Only unlisten should be called on component unmount | ||
| expect(dispatcher.listen).toHaveBeenCalledTimes(1); | ||
| expect(dispatcher.unlisten).toHaveBeenCalledTimes(1); | ||
| expect(dispatcher.unlisten).toHaveBeenCalledWith(...listenerArgs); | ||
| expect(dispatcher.fire).toHaveBeenCalledTimes(1); | ||
| }); | ||
| }); |
90 changes: 64 additions & 26 deletions
90
packages/react-page-renderer/src/hooks/__tests__/eventBusSpec.js
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 |
|---|---|---|
| @@ -1,38 +1,76 @@ | ||
| import React from 'react'; | ||
| import { getContextValue, renderHookWithContext } from '@ima/testing-library'; | ||
|
|
||
| import { renderHook } from '../../testUtils'; | ||
| import { useEventBus } from '../eventBus'; | ||
|
|
||
| /** | ||
| * Create eventBus mock instance and set it to context value. | ||
| * @param {import('@ima/testing-library').ContextValue} contextValue | ||
| * @returns {object} eventBus mock | ||
| */ | ||
| function mockEventBus(contextValue) { | ||
| let listener = null; | ||
| const eventBus = { | ||
| fire: jest.fn(() => { | ||
| if (listener) { | ||
| listener(); | ||
| } | ||
| }), | ||
| listen: jest.fn((_, __, fn) => { | ||
| listener = fn; | ||
| }), | ||
| unlisten: jest.fn(), | ||
| }; | ||
|
|
||
| contextValue.$Utils.$EventBus = eventBus; | ||
|
|
||
| return eventBus; | ||
| } | ||
|
|
||
| describe('useEventBus', () => { | ||
| let result, context; | ||
|
|
||
| beforeEach(() => { | ||
| jest.spyOn(React, 'useEffect').mockImplementation(f => f()); | ||
| context = { | ||
| $Utils: { | ||
| $EventBus: { | ||
| listen: jest.fn(), | ||
| unlisten: jest.fn(), | ||
| }, | ||
| }, | ||
| }; | ||
| it('should return `fire` callback', async () => { | ||
| const { result } = await renderHookWithContext(() => useEventBus()); | ||
|
|
||
| expect(result.current.fire).toBeInstanceOf(Function); | ||
| }); | ||
|
|
||
| it('should return `fire` callback', () => { | ||
| renderHook(() => { | ||
| const ref = React.createRef(null); | ||
| it('should call listen/unlisten/fire methods', async () => { | ||
| const listener = jest.fn(); | ||
| const listenerArgs = ['eventTarget', 'eventName']; | ||
| const contextValue = await getContextValue(); | ||
|
|
||
| const eventBus = mockEventBus(contextValue); | ||
|
|
||
| const { result, unmount } = await renderHookWithContext( | ||
| () => useEventBus(...listenerArgs, listener), | ||
| { contextValue } | ||
| ); | ||
|
|
||
| // Only listen should be called on component mount | ||
| expect(eventBus.listen).toHaveBeenCalledTimes(1); | ||
| expect(eventBus.listen).toHaveBeenCalledWith( | ||
| ...listenerArgs, | ||
| expect.any(Function) | ||
| ); | ||
| expect(listener).toHaveBeenCalledTimes(0); | ||
| expect(eventBus.unlisten).toHaveBeenCalledTimes(0); | ||
| expect(eventBus.fire).toHaveBeenCalledTimes(0); | ||
|
|
||
| result.current.fire(); | ||
|
|
||
| // The hook fire method should call eventBus fire method and trigger listener | ||
| expect(eventBus.fire).toHaveBeenCalledTimes(1); | ||
| expect(listener).toHaveBeenCalledTimes(1); | ||
|
|
||
| result = useEventBus(ref, 'event', () => {}); | ||
| }, context); | ||
| unmount(); | ||
|
|
||
| expect(result).toEqual({ | ||
| fire: expect.any(Function), | ||
| }); | ||
| expect(context.$Utils.$EventBus.listen).toHaveBeenCalledWith( | ||
| { current: null }, | ||
| 'event', | ||
| // Only unlisten should be called on component unmount | ||
| expect(eventBus.listen).toHaveBeenCalledTimes(1); | ||
| expect(listener).toHaveBeenCalledTimes(1); | ||
| expect(eventBus.unlisten).toHaveBeenCalledTimes(1); | ||
| expect(eventBus.unlisten).toHaveBeenCalledWith( | ||
| ...listenerArgs, | ||
| expect.any(Function) | ||
| ); | ||
| expect(context.$Utils.$EventBus.unlisten).not.toHaveBeenCalledWith(); | ||
| expect(eventBus.fire).toHaveBeenCalledTimes(1); | ||
| }); | ||
| }); |
27 changes: 12 additions & 15 deletions
27
packages/react-page-renderer/src/hooks/__tests__/linkSpec.js
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 |
|---|---|---|
| @@ -1,22 +1,19 @@ | ||
| import { renderHook } from '../../testUtils'; | ||
| import { getContextValue, renderHookWithContext } from '@ima/testing-library'; | ||
|
|
||
| import { useLink } from '../link'; | ||
|
|
||
| describe('useLink', () => { | ||
| let result; | ||
| let contextMock = { | ||
| $Utils: { | ||
| $Router: { | ||
| link: () => '$Router.link() function', | ||
| }, | ||
| }, | ||
| }; | ||
| it('should return shortcut to $Router.link utility', async () => { | ||
| const contextValue = await getContextValue(); | ||
|
|
||
| contextValue.$Utils.$Router.link = jest | ||
| .fn() | ||
| .mockReturnValue('$Router.link'); | ||
|
|
||
| it('should return shortcut to router link', () => { | ||
| renderHook(() => { | ||
| result = useLink(); | ||
| }, contextMock); | ||
| const { result } = await renderHookWithContext(() => useLink(), { | ||
| contextValue, | ||
| }); | ||
|
|
||
| expect(typeof result === 'function').toBe(true); | ||
| expect(result()).toBe('$Router.link() function'); | ||
| expect(result.current()).toBe('$Router.link'); | ||
| }); | ||
| }); |
Oops, something went wrong.