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({