FeatureHighlight - migrate to new api, remove unsafe method (#1290)

* migrate to new api, remove unsafe method

* using optional chaning

* Remove duplicated test, change test to match new api

* replace check for all props and check only what needed

* removed spreaded previous state + check if getTarget has change

Author: mendyEdri

src/components/featureHighlight/__tests__/index.spec.js

@@ -45,48 +45,22 @@ describe('FeatureHighlight', () => {
       const getTargetMock = jest.fn();
       getTargetMock.mockReturnValue(mockTarget);
       const uut = new FeatureHighlight({getTarget: getTargetMock});
-      jest.spyOn(uut, 'findTargetNode').mockImplementation(() => 23);
-      jest.spyOn(uut, 'setState').mockImplementation(() => {});
-      jest.useFakeTimers();
-
-      // Act
-      uut.setTargetPosition();
+      jest.spyOn(FeatureHighlight, 'getDerivedStateFromProps');
+      jest.spyOn(FeatureHighlight, 'findTargetNode').mockImplementation(() => 23);
 
-      // Assert
-      expect(uut.findTargetNode).toHaveBeenCalledWith(mockTarget);
-      expect(uut.setState).toHaveBeenCalledWith({node: 23});
-
-      expect(mockTarget.measureInWindow).not.toBeCalled();
-      // expect(setTimeout).toHaveBeenCalledTimes(0);
-      jest.runAllTimers();
-      // jest.advanceTimersByTime(0); // available in Jest 21
-      expect(setTimeout).toHaveBeenCalledTimes(1);
-      expect(mockTarget.measureInWindow).toBeCalled();
-    });
-  });
-
-  describe('setTargetPosition', () => {
-    it('targetPosition should be equal to component position', () => {
-      // Arrange
-      const mockTarget = {measureInWindow: jest.fn()};
-      const getTargetMock = jest.fn();
-      getTargetMock.mockReturnValue(mockTarget);
-      const uut = new FeatureHighlight({getTarget: getTargetMock});
-      jest.spyOn(uut, 'findTargetNode').mockImplementation(() => 23);
-      jest.spyOn(uut, 'setState').mockImplementation(() => {});
       jest.useFakeTimers();
 
       // Act
-      uut.setTargetPosition();
+      FeatureHighlight.getDerivedStateFromProps({getTarget: getTargetMock});
+      uut.setTargetPosition({getTarget: getTargetMock});
 
       // Assert
-      expect(uut.findTargetNode).toHaveBeenCalledWith(mockTarget);
-      expect(uut.setState).toHaveBeenCalledWith({node: 23});
-
+      expect(FeatureHighlight.getDerivedStateFromProps).toHaveBeenCalledWith({getTarget: getTargetMock});
       expect(mockTarget.measureInWindow).not.toBeCalled();
-      // expect(setTimeout).toHaveBeenCalledTimes(0);
+      expect(FeatureHighlight.findTargetNode).toHaveBeenCalledWith(mockTarget);
+
       jest.runAllTimers();
-      // jest.advanceTimersByTime(0); // available in Jest 21
+      
       expect(setTimeout).toHaveBeenCalledTimes(1);
       expect(mockTarget.measureInWindow).toBeCalled();
     });

src/components/featureHighlight/index.js

@@ -148,11 +148,31 @@ class FeatureHighlight extends BaseComponent {
     this.setTargetPosition();
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setTargetPosition(nextProps);
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (prevState?.getTarget === nextProps?.getTarget) {
+      return null;
+    }
+    
+    const target = nextProps?.getTarget?.();
+    const node = FeatureHighlight.findTargetNode(target);
+    if (node && node !== prevState?.node) {
+      return {getTarget: nextProps?.getTarget, node};
+    }
+    return null;
   }
 
-  componentDidUpdate() {
+  shouldSetTargetPosition = (nextProps) => {
+    return (
+      nextProps.getTarget() !== this.props.getTarget() ||
+      nextProps.title !== this.props.title ||
+      nextProps.visible !== this.props.visible
+    );
+  }
+
+  componentDidUpdate(nextProps) {
+    if (this.shouldSetTargetPosition(nextProps)) {
+      this.setTargetPosition();
+    }
     if (this.viewRef) {
       this.setAccessibilityFocus(this.viewRef);
     }
@@ -163,7 +183,7 @@ class FeatureHighlight extends BaseComponent {
     AccessibilityInfo.setAccessibilityFocus(reactTag);
   }
 
-  findTargetNode(target) {
+  static findTargetNode(target) {
     return findNodeHandle(target);
   }
 
@@ -181,9 +201,6 @@ class FeatureHighlight extends BaseComponent {
   setTargetPosition(props = this.props) {
     if (props.getTarget !== undefined) {
       const target = props.getTarget();
-
-      const node = this.findTargetNode(target);
-      this.setState({node});
       if (target) {
         setTimeout(() => {
           target.measureInWindow((x, y, width, height) => {