diff --git a/src/components/UI/Form/WhatsAppEditor/WhatsAppEditor.test.tsx b/src/components/UI/Form/WhatsAppEditor/WhatsAppEditor.test.tsx index 47b3fc4c8..806783fc3 100644 --- a/src/components/UI/Form/WhatsAppEditor/WhatsAppEditor.test.tsx +++ b/src/components/UI/Form/WhatsAppEditor/WhatsAppEditor.test.tsx @@ -1,4 +1,4 @@ -import { render, fireEvent } from '@testing-library/react'; +import { render, fireEvent, waitFor } from '@testing-library/react'; import draftJs, { EditorState, ContentState } from 'draft-js'; import { vi } from 'vitest'; @@ -6,6 +6,13 @@ import WhatsAppEditor from './WhatsAppEditor'; const mockHandleKeyCommand = vi.fn(); +const mockObserve = vi.fn(); +global.ResizeObserver = vi.fn().mockImplementation(() => ({ + observe: mockObserve, + unobserve: vi.fn(), + disconnect: vi.fn(), +})); + vi.spyOn(draftJs, 'Editor').mockImplementation((props: any, _context: any) => { const input: any = ( ', () => { expect(mockHandleKeyCommand).toHaveBeenCalled(); }); - test('testing change size callback', () => { - const { getByTestId } = render(); - fireEvent.click(getByTestId('resizer')); - expect(handleHeightChange).toHaveBeenCalled(); + test('resize observer event is called', async () => { + render(); + await waitFor(() => { + expect(mockObserve).toHaveBeenCalled(); + }); }); // since we are mocking emoji mart picker we need to implement the following functionalities diff --git a/src/components/UI/Form/WhatsAppEditor/WhatsAppEditor.tsx b/src/components/UI/Form/WhatsAppEditor/WhatsAppEditor.tsx index 890bffffd..9b1ea22c4 100644 --- a/src/components/UI/Form/WhatsAppEditor/WhatsAppEditor.tsx +++ b/src/components/UI/Form/WhatsAppEditor/WhatsAppEditor.tsx @@ -82,8 +82,10 @@ export const WhatsAppEditor = ({ return getDefaultKeyBinding(e); }; - const onResize = useCallback((height: any) => { - handleHeightChange(height - 40); + const onResize = useCallback((width: number | undefined, height: number | undefined) => { + if (height) { + handleHeightChange(height - 40); + } }, []); const { ref } = useResizeDetector({