Merge pull request #2724 from glific/bug/resizer

Fixed issue with resizer

src/components/UI/Form/WhatsAppEditor/WhatsAppEditor.test.tsx

@@ -1,11 +1,18 @@
-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';
 
 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 = (
     <input
@@ -51,10 +58,11 @@ describe('<WhatsAppEditor/>', () => {
     expect(mockHandleKeyCommand).toHaveBeenCalled();
   });
 
-  test('testing change size callback', () => {
-    const { getByTestId } = render(<WhatsAppEditor {...defaultProps(editorContent)} />);
-    fireEvent.click(getByTestId('resizer'));
-    expect(handleHeightChange).toHaveBeenCalled();
+  test('resize observer event is called', async () => {
+    render(<WhatsAppEditor {...defaultProps(editorContent)} />);
+    await waitFor(() => {
+      expect(mockObserve).toHaveBeenCalled();
+    });
   });
 
   // since we are mocking emoji mart picker we need to implement the following functionalities

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