Checking changes (#624)

Author: SelyankinFyodor

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

@@ -296,6 +296,36 @@ describe('option control', () => {
     expect(Widget.option.mock.calls[0]).toEqual(['complexOption.a', 123]);
   });
 
+  it('extra option call for check changes', () => {
+    const { rerender } = render(
+      <ControlledComponent everyOption={123} anotherOption="const" />,
+    );
+
+    Widget.option.mockImplementation((name: string) => {
+      if (name === 'everyOption') {
+        Widget.option('anotherOption', 'changed');
+        return undefined;
+      }
+      if (name === undefined) {
+        return {
+          everyOption: 234,
+          abotherOption: 'changed',
+        };
+      }
+      return undefined;
+    });
+
+    rerender(
+      <ControlledComponent everyOption={234} anotherOption="const" />,
+    );
+
+    jest.runAllTimers();
+
+    expect(Widget.option.mock.calls.length).toBe(2);
+    expect(Widget.option.mock.calls[0]).toEqual(['everyOption', 234]);
+    expect(Widget.option.mock.calls[1]).toEqual(['anotherOption', 'changed']);
+  });
+
   it('should not rolls back complex option if shallow equals', () => {
     render(
       <ControlledComponent complexOption={{ a: 123, b: 234 }} />,

packages/devextreme-react/src/core/__tests__/test-component.ts

@@ -1,15 +1,22 @@
 /* eslint-disable max-classes-per-file */
 import { Component } from '../component';
 
-const eventHandlers: { [index: string]: (e?: any) => void } = {};
+const eventHandlers: { [index: string]: ((e?: any) => void)[] } = {};
 
 const Widget = {
   option: jest.fn(),
   resetOption: jest.fn(),
   beginUpdate: jest.fn(),
   endUpdate: jest.fn(),
   on: (event: string, handler: (e: any) => void): void => {
-    eventHandlers[event] = handler;
+    if (eventHandlers[event]) {
+      eventHandlers[event].push(handler);
+    } else {
+      eventHandlers[event] = [handler];
+    }
+  },
+  off: (event: string, handler: (e: any) => void) => {
+    eventHandlers[event] = eventHandlers[event].filter((e) => e !== handler);
   },
   dispose: jest.fn(),
 };
@@ -22,6 +29,7 @@ class TestComponent<P = any> extends Component<P> {
   protected useDeferUpdateFlag = true;
 
   _createWidget(element?: Element): void {
+    eventHandlers.optionChanged = [];
     Widget.option.mockImplementation((name: string) => name === 'integrationOptions.useDeferUpdateForTemplates');
 
     super._createWidget(element);
@@ -33,11 +41,11 @@ class TestPortalComponent<P = any> extends TestComponent<P> {
 }
 
 function fireOptionChange(fullName: string, value: unknown): void {
-  eventHandlers.optionChanged({
+  eventHandlers.optionChanged?.forEach((e) => e({
     name: fullName.split('.')[0],
     fullName,
     value,
-  });
+  }));
 }
 
 export {

packages/devextreme-react/src/core/options-manager.ts

@@ -62,6 +62,12 @@ class OptionsManager {
   }
 
   public update(config: IConfigNode): void {
+    const changedOptions:Array<[string, any]> = [];
+    const optionChangedHandler = ({ value, fullName }) => {
+      changedOptions.push([fullName, value]);
+    };
+    this.instance.on('optionChanged', optionChangedHandler);
+
     const changes = getChanges(config, this.currentConfig);
 
     if (!changes.options && !changes.templates && !changes.removedOptions.length) {
@@ -92,6 +98,14 @@ class OptionsManager {
     });
 
     this.isUpdating = false;
+    this.instance.off('optionChanged', optionChangedHandler);
+
+    changedOptions.forEach(([name, value]) => {
+      const currentPropValue = config.options[name];
+      if (config.options.hasOwnProperty(name) && currentPropValue !== value) {
+        this.setValue(name, currentPropValue);
+      }
+    });
     this.currentConfig = config;
     this.instance.endUpdate();
   }