Replace getHtmlElement and getRootElement to using rootElementRef (De…

…vExpress#14826)

jest.config.js

@@ -12,11 +12,10 @@ module.exports = {
     },
     collectCoverageFrom: [
         './js/renovation/**/*.tsx',
-        '!./js/renovation/ui/list.tsx',
-        '!./js/renovation/ui/select_box.tsx',
         '!./js/renovation/**/*.j.tsx',
         '!./js/renovation/**/__tests__/**/*',
         '!./js/renovation/utils/render_template.tsx',
+        '!./js/renovation/ui/list.tsx',
     ],
     coverageDirectory: './js/renovation/code_coverage',
     coverageThreshold: {

js/renovation/ui/__tests__/check_box.test.tsx

@@ -134,7 +134,9 @@ describe('CheckBox', () => {
       const restAttributes = { attr1: 'value1', attr2: 'value2' };
       const onWidgetKeyDown = (): null => null;
       const onWidgetClick = (): null => null;
+      const target = {};
       const checkBox = mount(viewFunction({
+        target,
         ...renderOptions,
         props: renderProps,
         restAttributes,
@@ -143,6 +145,7 @@ describe('CheckBox', () => {
         onWidgetClick,
       } as any) as any); // eslint-disable-line  @typescript-eslint/no-explicit-any
       expect(checkBox.find(Widget).props()).toMatchObject({
+        rootElementRef: target,
         ...renderOptions,
         ...renderProps,
         ...restAttributes,
@@ -500,7 +503,7 @@ describe('CheckBox', () => {
             validationStatus: 'invalid',
             validationErrors: [{ message: 'error message' }],
           });
-          expect(aria.describedby).not.toBe(undefined);
+          expect(aria.describedby).not.toBeUndefined();
         });
         /* eslint-enable spellcheck/spell-checker */
       });
@@ -551,26 +554,6 @@ describe('CheckBox', () => {
         });
       });
 
-      describe('target', () => {
-        it('should return widget "rootElement" call result', () => {
-          const checkBox = new CheckBox({});
-          const targetMock = 'result';
-          checkBox.widgetRef = { getRootElement: jest.fn(() => targetMock) } as any;
-
-          const { target } = checkBox;
-          expect(target).toBe(targetMock);
-          expect(checkBox.widgetRef.getRootElement).toHaveBeenCalledTimes(1);
-          expect(checkBox.widgetRef.getRootElement).toHaveBeenCalledWith();
-        });
-
-        it('should return undefined when widgetRef is not defined', () => {
-          const checkBox = new CheckBox({});
-
-          const { target } = checkBox;
-          expect(target).toBe(undefined);
-        });
-      });
-
       describe('shouldShowValidationMessage', () => {
         it('should return true when isValid=false, validationStatus="invalid" and there are validation errors', () => {
           const checkBox = new CheckBox({

js/renovation/ui/__tests__/number_box.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import { NumberBox, NumberBoxProps, viewFunction as NumberBoxView } from '../number_box';
 import { DomComponentWrapper } from '../common/dom_component_wrapper';
 import LegacyNumberBox from '../../../ui/number_box';
@@ -9,30 +9,20 @@ jest.mock('../../../ui/number_box', () => jest.fn());
 describe('NumberBox', () => {
   describe('View', () => {
     it('default render', () => {
-      const rootElementRef = {} as HTMLDivElement;
+      const rootElementRef = { } as HTMLDivElement;
+      const componentProps = new NumberBoxProps();
       const props = {
-        rootElementRef,
-        props: new NumberBoxProps(),
+        props: { ...componentProps, rootElementRef },
         restAttributes: { 'rest-attributes': 'true' },
       } as Partial<NumberBox>;
-      const tree = mount(<NumberBoxView {...props as any} /> as any);
+      const tree = shallow(<NumberBoxView {...props as any} /> as any);
 
       expect(tree.find(DomComponentWrapper).props()).toMatchObject({
-        rootElementRef,
-        componentProps: props.props,
+        rootElementRef: {},
+        componentProps,
         componentType: LegacyNumberBox,
         'rest-attributes': 'true',
       });
     });
   });
-
-  describe('Logic', () => {
-    it('getHtmlElement', () => {
-      const rootElementRef = {} as HTMLDivElement;
-      const component = new NumberBox({});
-      component.rootElementRef = rootElementRef;
-
-      expect(component.getHtmlElement()).toEqual(rootElementRef);
-    });
-  });
 });

js/renovation/ui/__tests__/overlay.test.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import React from 'react';
-import { mount } from 'enzyme';
-import DxOverlay from '../../../ui/overlay';
+import { shallow } from 'enzyme';
+import LegacyOverlay from '../../../ui/overlay';
 import { viewFunction as OverlayView, OverlayProps, Overlay } from '../overlay';
 import { DomComponentWrapper } from '../common/dom_component_wrapper';
 
@@ -10,15 +10,18 @@ jest.mock('../../../ui/overlay', () => jest.fn());
 describe('Overlay', () => {
   describe('View', () => {
     it('default render', () => {
+      const rootElementRef = { } as HTMLDivElement;
+      const componentProps = new OverlayProps();
       const props = {
-        props: new OverlayProps(),
+        props: { ...componentProps, rootElementRef },
         restAttributes: { 'rest-attributes': 'true' },
       } as Partial<Overlay>;
-      const tree = mount(<OverlayView {...props as any} /> as any);
+      const tree = shallow(<OverlayView {...props as any} /> as any);
 
       expect(tree.find(DomComponentWrapper).props()).toMatchObject({
-        componentProps: props.props,
-        componentType: DxOverlay,
+        rootElementRef: {},
+        componentProps,
+        componentType: LegacyOverlay,
         'rest-attributes': 'true',
       });
     });

js/renovation/ui/__tests__/select_box.test.tsx

@@ -1,23 +1,26 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import React from 'react';
-import { mount } from 'enzyme';
-import DxSelectBox from '../../../ui/select_box';
+import { shallow } from 'enzyme';
+import LegacySelectBox from '../../../ui/select_box';
 import { viewFunction as SelectBoxView, SelectBoxProps, SelectBox } from '../select_box';
 import { DomComponentWrapper } from '../common/dom_component_wrapper';
 
-jest.mock('../../../ui/validation_message', () => jest.fn());
+jest.mock('../../../ui/select_box', () => jest.fn());
 
 describe('Selectbox', () => {
   it('View render', () => {
+    const rootElementRef = { } as HTMLDivElement;
+    const componentProps = new SelectBoxProps();
     const props = {
-      props: new SelectBoxProps(),
+      props: { ...componentProps, rootElementRef },
       restAttributes: { 'rest-attributes': 'true' },
     } as Partial<SelectBox>;
-    const tree = mount(<SelectBoxView {...props as any} /> as any);
+    const tree = shallow(<SelectBoxView {...props as any} /> as any);
 
     expect(tree.find(DomComponentWrapper).props()).toMatchObject({
-      componentProps: props.props,
-      componentType: DxSelectBox,
+      rootElementRef: {},
+      componentProps,
+      componentType: LegacySelectBox,
       'rest-attributes': 'true',
     });
   });

js/renovation/ui/__tests__/validation_message.test.tsx

@@ -1,23 +1,26 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import React from 'react';
-import { mount } from 'enzyme';
-import DxValidationMessage from '../../../ui/validation_message';
+import { shallow } from 'enzyme';
+import LegacyValidationMessage from '../../../ui/validation_message';
 import { viewFunction as ValidationMessageView, ValidationMessageProps, ValidationMessage } from '../validation_message';
 import { DomComponentWrapper } from '../common/dom_component_wrapper';
 
 jest.mock('../../../ui/validation_message', () => jest.fn());
 
 describe('ValidationMessage', () => {
   it('View render', () => {
+    const rootElementRef = { } as HTMLDivElement;
+    const componentProps = new ValidationMessageProps();
     const props = {
-      props: new ValidationMessageProps(),
+      props: { ...componentProps, rootElementRef },
       restAttributes: { 'rest-attributes': 'true' },
     } as Partial<ValidationMessage>;
-    const tree = mount(<ValidationMessageView {...props as any} /> as any);
+    const tree = shallow(<ValidationMessageView {...props as any} />);
 
     expect(tree.find(DomComponentWrapper).props()).toMatchObject({
-      componentProps: props.props,
-      componentType: DxValidationMessage,
+      rootElementRef: {},
+      componentProps,
+      componentType: LegacyValidationMessage,
       'rest-attributes': 'true',
     });
   });

js/renovation/ui/check_box.tsx

@@ -55,6 +55,7 @@ export const viewFunction = (viewModel: CheckBox): JSX.Element => {
     <Widget // eslint-disable-line jsx-a11y/no-access-key
       // eslint-disable-next-line  @typescript-eslint/no-explicit-any
       ref={viewModel.widgetRef as any}
+      rootElementRef={viewModel.target}
       accessKey={viewModel.props.accessKey}
       activeStateEnabled={viewModel.props.activeStateEnabled}
       classes={viewModel.cssClasses}
@@ -78,13 +79,13 @@ export const viewFunction = (viewModel: CheckBox): JSX.Element => {
       {...viewModel.restAttributes} // eslint-disable-line react/jsx-props-no-spreading
     >
       {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-      <input ref={viewModel.inputRef} type="hidden" value={`${viewModel.props.value}`} {...name && { name }} />
+      <input ref={viewModel.inputRef as any} type="hidden" value={`${viewModel.props.value}`} {...name && { name }} />
       <div className="dx-checkbox-container">
-        <span className="dx-checkbox-icon" ref={viewModel.iconRef} />
+        <span className="dx-checkbox-icon" ref={viewModel.iconRef as any} />
         {text && (<span className="dx-checkbox-text">{text}</span>)}
       </div>
       {viewModel.props.useInkRipple
-                && <InkRipple config={inkRippleConfig} ref={viewModel.inkRippleRef} />}
+                && <InkRipple config={inkRippleConfig} ref={viewModel.inkRippleRef as any} />}
       {viewModel.rendered && viewModel.shouldShowValidationMessage
                 && (
                 <ValidationMessage
@@ -161,9 +162,7 @@ export class CheckBox extends JSXComponent(CheckBoxProps) {
 
   @Ref() widgetRef!: Widget;
 
-  get target(): HTMLDivElement {
-    return this.widgetRef?.getRootElement();
-  }
+  @Ref() target!: HTMLDivElement;
 
   @Effect({ run: 'once' })
   afterInitEffect(): EffectReturn {

js/renovation/ui/common/__tests__/widget.test.tsx

@@ -572,6 +572,26 @@ describe('Widget', () => {
           expect(getEventHandlers(EVENT.hiding)).toBe(undefined);
         });
       });
+
+      describe('setRootElementRef', () => {
+        it('set rootElementRef to div ref', () => {
+          const widgetRef = {} as HTMLDivElement;
+          const component = new Widget({
+            rootElementRef: {},
+          } as WidgetProps);
+          component.widgetRef = widgetRef;
+          component.setRootElementRef();
+
+          expect(component.props.rootElementRef).toBe(component.widgetRef);
+        });
+
+        it('hasnt rootElementRef', () => {
+          const component = new Widget({ });
+          component.widgetRef = {} as HTMLDivElement;
+          component.setRootElementRef();
+          expect(component.props.rootElementRef).toBeUndefined();
+        });
+      });
     });
 
     describe('Methods', () => {
@@ -588,28 +608,10 @@ describe('Widget', () => {
           expect(widget.focused).toBe(true);
         });
       });
-
-      describe('getRootElement', () => {
-        it('should return widgetRef', () => {
-          const widget = new Widget({});
-          const mockRef = jest.fn();
-          widget.widgetRef = mockRef as any;
-
-          expect(widget.getRootElement()).toBe(mockRef);
-        });
-      });
     });
   });
 
   describe('Logic', () => {
-    it('getHtmlElement', () => {
-      const widgetRef = {} as HTMLDivElement;
-      const component = new Widget({});
-      component.widgetRef = widgetRef;
-
-      expect(component.getHtmlElement()).toEqual(widgetRef);
-    });
-
     describe('Getters', () => {
       describe('attributes', () => {
         it('should return ARIA labels', () => {

js/renovation/ui/common/widget.tsx

@@ -10,6 +10,7 @@ import {
   Ref,
   Slot,
   Consumer,
+  ForwardRef,
 } from 'devextreme-generator/component_declaration/common';
 import '../../../events/click';
 import '../../../events/hover';
@@ -85,6 +86,8 @@ export const viewFunction = (viewModel: Widget): JSX.Element => {
 
 @ComponentBindings()
 export class WidgetProps extends BaseWidgetProps {
+  @ForwardRef() rootElementRef?: HTMLDivElement;
+
   @OneWay() _feedbackHideTimeout?: number = 400;
 
   @OneWay() _feedbackShowTimeout?: number = 30;
@@ -134,11 +137,6 @@ export class Widget extends JSXComponent(WidgetProps) {
   @Ref()
   widgetRef!: HTMLDivElement;
 
-  @Method()
-  getHtmlElement(): HTMLDivElement {
-    return this.widgetRef;
-  }
-
   @Consumer(ConfigContext)
   config?: ConfigContextValue;
 
@@ -161,9 +159,11 @@ export class Widget extends JSXComponent(WidgetProps) {
     return globalConfig().rtlEnabled;
   }
 
-  @Method()
-  getRootElement(): HTMLDivElement {
-    return this.widgetRef;
+  @Effect({ run: 'once' }) setRootElementRef(): void {
+    const { rootElementRef } = this.props;
+    if (rootElementRef) {
+      this.props.rootElementRef = this.widgetRef;
+    }
   }
 
   @Effect()

js/renovation/ui/number_box.tsx

@@ -1,5 +1,5 @@
 import {
-  Ref, Component, ComponentBindings, JSXComponent, OneWay, Event, TwoWay, Method, React,
+  Component, ComponentBindings, JSXComponent, OneWay, Event, TwoWay, React,
 } from 'devextreme-generator/component_declaration/common';
 /* eslint-disable-next-line import/named */
 import LegacyNumberBox from '../../ui/number_box';
@@ -8,14 +8,13 @@ import { DomComponentWrapper } from './common/dom_component_wrapper';
 import { EventCallback } from './common/event_callback.d';
 
 export const viewFunction = ({
-  rootElementRef,
-  props,
+  props: { rootElementRef, ...componentProps },
   restAttributes,
 }: NumberBox): JSX.Element => (
   <DomComponentWrapper
     rootElementRef={rootElementRef as any}
     componentType={LegacyNumberBox}
-    componentProps={props}
+    componentProps={componentProps}
   // eslint-disable-next-line react/jsx-props-no-spreading
     {...restAttributes}
   />
@@ -53,12 +52,4 @@ export class NumberBoxProps extends WidgetProps {
   defaultOptionRules: null,
   view: viewFunction,
 })
-export class NumberBox extends JSXComponent(NumberBoxProps) {
-  @Ref()
-  rootElementRef!: HTMLDivElement;
-
-  @Method()
-  getHtmlElement(): HTMLDivElement {
-    return this.rootElementRef;
-  }
-}
+export class NumberBox extends JSXComponent(NumberBoxProps) {}