improve props updating test

Author: ajivanyandev

packages/devextreme-react/src/core/__tests__/props-updating.test.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable max-classes-per-file */
-import { cleanup, render } from '@testing-library/react';
+import { cleanup, render, fireEvent } from '@testing-library/react';
 import * as React from 'react';
 import { memo } from 'react';
 import { act } from 'react-dom/test-utils';
@@ -188,24 +188,40 @@ describe('option update', () => {
     expect(Widget.option.mock.calls[1][1]).toEqual(ref.current?.instance().element());
   });
 
-  it('provides component ref instance inside onOptionChanged during option sync', () => {
+  it('keeps component ref defined when controlled selection triggers optionChanged', () => {
     const ref = React.createRef<TestComponentRef>();
+    const clickInstances: Array<ReturnType<TestComponentRef['instance']> | undefined> = [];
     const optionChangedInstances: Array<ReturnType<TestComponentRef['instance']> | undefined> = [];
 
-    const handleOptionChanged = () => {
-      optionChangedInstances.push(ref.current?.instance());
-    };
+    const SelectionScenario = () => {
+      const [selectedRowKeys, setSelectedRowKeys] = React.useState<number[]>([]);
 
-    const renderComponent = (text: string) => (
-      <TestComponent
-        ref={ref}
-        text={text}
-        onOptionChanged={handleOptionChanged}
-        independentEvents={['onOptionChanged']}
-      />
-    );
+      const handleClick = React.useCallback(() => {
+        clickInstances.push(ref.current?.instance());
+        setSelectedRowKeys((prev) => [...prev, prev.length + 1]);
+      }, []);
+
+      const handleOptionChanged = React.useCallback((e: { fullName?: string }) => {
+        if (e.fullName === 'selectedRowKeys') {
+          optionChangedInstances.push(ref.current?.instance());
+        }
+      }, []);
+
+      return (
+        <>
+          <button type="button" onClick={handleClick}>Test</button>
+          <TestComponent
+            ref={ref}
+            selectedRowKeys={selectedRowKeys}
+            selection={{ mode: 'multiple' }}
+            onOptionChanged={handleOptionChanged}
+            independentEvents={['onOptionChanged']}
+          />
+        </>
+      );
+    };
 
-    const { rerender } = render(renderComponent('value-1'));
+    const { getByText } = render(<SelectionScenario />);
 
     let currentOnOptionChanged = WidgetClass.mock.calls[0][1].onOptionChanged;
 
@@ -221,7 +237,7 @@ describe('option update', () => {
         return undefined;
       }
 
-      if (name === 'text' && typeof currentOnOptionChanged === 'function') {
+      if (name === 'selectedRowKeys' && typeof currentOnOptionChanged === 'function') {
         currentOnOptionChanged({
           component: Widget,
           element: undefined,
@@ -236,8 +252,12 @@ describe('option update', () => {
       return undefined;
     });
 
-    rerender(renderComponent('value-2'));
+    act(() => {
+      fireEvent.click(getByText('Test'));
+    });
 
+    expect(clickInstances).toHaveLength(1);
+    expect(clickInstances[0]).toBeTruthy();
     expect(optionChangedInstances).toHaveLength(1);
     expect(optionChangedInstances[0]).toBeTruthy();
   });