From d9692540aa6908ce160d971fcc9c0c8fbaae14a1 Mon Sep 17 00:00:00 2001
From: Adi <adids1221@gmail.com>
Date: Tue, 16 Jan 2024 15:50:52 +0200
Subject: [PATCH 01/14] new driver for hint testing

---
 src/components/hint/Hint.driver.new.ts       | 27 +++++++
 src/components/hint/__tests__/index.spec.tsx | 83 +++++++++-----------
 src/testkit/index.ts                         |  1 +
 3 files changed, 65 insertions(+), 46 deletions(-)
 create mode 100644 src/components/hint/Hint.driver.new.ts

diff --git a/src/components/hint/Hint.driver.new.ts b/src/components/hint/Hint.driver.new.ts
new file mode 100644
index 0000000000..59043c918e
--- /dev/null
+++ b/src/components/hint/Hint.driver.new.ts
@@ -0,0 +1,27 @@
+import {HintProps} from './index';
+import {useComponentDriver, ComponentProps, usePressableDriver, ViewDriver} from '../../testkit';
+import {ViewStyle, StyleSheet} from 'react-native';
+
+export const HintDriver = (props: ComponentProps) => {
+  const driver = usePressableDriver<HintProps>(useComponentDriver(props));
+
+  const modalDriver = ViewDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.modal`
+  });
+
+  const contentDriver = ViewDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.message`
+  });
+
+  const getContentStyle = (): ViewStyle => {
+    return StyleSheet.flatten(contentDriver.getProps().style) as ViewStyle;
+  };
+
+  const getModalExists = (): boolean => {
+    return modalDriver.exists();
+  };
+
+  return {getContentStyle, getModalExists, ...driver};
+};
diff --git a/src/components/hint/__tests__/index.spec.tsx b/src/components/hint/__tests__/index.spec.tsx
index 102f87985b..efe21e94ee 100644
--- a/src/components/hint/__tests__/index.spec.tsx
+++ b/src/components/hint/__tests__/index.spec.tsx
@@ -1,16 +1,11 @@
 import React from 'react';
-import {Hint} from 'react-native-ui-lib';
-import {Colors} from '../../../style';
-import {findStyle} from '../../../uilib-test-renderer';
-import {HintDriver} from '../Hint.driver';
+import {render} from '@testing-library/react-native';
+import {Hint, Colors} from 'react-native-ui-lib';
+import {HintDriver} from '../Hint.driver.new';
 
-const HintTestComponent = ({
-  showHint,
-  color
-}: {
-  showHint: boolean;
-  color?: string;
-}) => {
+const TEST_ID = 'Hint';
+
+const HintTestComponent = ({showHint, color}: {showHint: boolean; color?: string}) => {
   return (
     <Hint
       visible={showHint}
@@ -23,47 +18,43 @@ const HintTestComponent = ({
       color={color}
       removePaddings
       enableShadow
-      testID={'Hint'}
+      testID={TEST_ID}
     />
   );
 };
 
+//TODO: Add test for onPress functionality
 describe('Hint Screen component test', () => {
-  afterEach(() => {
-    HintDriver.clear();
-  });
-
-  it('Test Hint component background color', async () => {
-    const expectedColor = Colors.$backgroundPrimaryHeavy;
-    const component = <HintTestComponent showHint/>;
-
-    const driver = new HintDriver({component, testID: 'Hint'});
-    expect(await driver.getElement()).toBeTruthy();
-
-    const hintContent = await driver.getHintContent();
-    let color = findStyle('backgroundColor', hintContent);
-
-    expect(color).toBe(expectedColor);
-    expect(hintContent).toBeTruthy();
-
-    const WhiteHint = <HintTestComponent showHint color={Colors.white}/>;
-    const WhiteHintDriver = new HintDriver({component: WhiteHint, testID: 'Hint'});
-
-    const WhiteHintContent = await WhiteHintDriver.getHintContent();
-    color = findStyle('backgroundColor', WhiteHintContent);
-    expect(color).toBe(Colors.white);
-  });
-
-  it('Test Hint modal is not visible when showHint is false', async () => {
-    const component = <HintTestComponent showHint={false}/>;
-    const driver = new HintDriver({component, testID: 'Hint'});
-    expect(await driver.getHintModal()).toBeFalsy();
+  describe('Test Hint style, background color:', () => {
+    it('Test Hint component background color', async () => {
+      const expectedColor = Colors.$backgroundPrimaryHeavy;
+      const renderTree = render(<HintTestComponent showHint/>);
+      const driver = HintDriver({renderTree, testID: TEST_ID});
+      expect(await driver.getElement()).toBeTruthy();
+
+      let contentColor = await driver.getContentStyle().backgroundColor;
+      expect(contentColor).toBe(expectedColor);
+
+      const whiteHintRenderTree = render(<HintTestComponent showHint color={Colors.white}/>);
+      const whiteHintDriver = HintDriver({renderTree: whiteHintRenderTree, testID: TEST_ID});
+
+      contentColor = await whiteHintDriver.getContentStyle().backgroundColor;
+      expect(contentColor).toBe(Colors.white);
+    });
   });
 
-  it('Test Hint modal is visible when showHint is true', async () => {
-    const component = <HintTestComponent showHint/>;
-    const driver = new HintDriver({component, testID: 'Hint'});
-    expect(await driver.getElement()).toBeTruthy();
-    expect(await driver.getHintModal()).toBeTruthy();
+  describe('Test Hint modal visibility:', () => {
+    it('Test Hint modal is not visible when showHint is false', async () => {
+      const renderTree = render(<HintTestComponent showHint={false}/>);
+      const driver = HintDriver({renderTree, testID: TEST_ID});
+      expect(await driver.getModalExists()).toBeFalsy();
+    });
+
+    it('Test Hint modal is visible when showHint is true', async () => {
+      const renderTree = render(<HintTestComponent showHint/>);
+      const driver = HintDriver({renderTree, testID: TEST_ID});
+      expect(await driver.exists()).toBeTruthy();
+      expect(await driver.getModalExists()).toBeTruthy();
+    });
   });
 });
diff --git a/src/testkit/index.ts b/src/testkit/index.ts
index a9d9c913cc..d7f7e83e7d 100644
--- a/src/testkit/index.ts
+++ b/src/testkit/index.ts
@@ -10,3 +10,4 @@ export {SortableListItemDriver} from '../components/sortableList/SortableListIte
 export {TextDriver} from '../components/text/Text.driver.new';
 export {TextFieldDriver} from '../components/textField/TextField.driver.new';
 export {ViewDriver} from '../components/view/View.driver.new';
+export {HintDriver} from '../components/hint/Hint.driver.new';

From ea2828c52c9e6fc4705a8f34b0fbf7695fca60e1 Mon Sep 17 00:00:00 2001
From: Adi <adids1221@gmail.com>
Date: Tue, 16 Jan 2024 17:05:32 +0200
Subject: [PATCH 02/14] onPress & onBackgroundPress tests

---
 src/components/hint/Hint.driver.new.ts       | 25 +++++++--
 src/components/hint/__tests__/index.spec.tsx | 57 +++++++++++++++++---
 src/components/hint/index.tsx                | 16 ++++--
 3 files changed, 84 insertions(+), 14 deletions(-)

diff --git a/src/components/hint/Hint.driver.new.ts b/src/components/hint/Hint.driver.new.ts
index 59043c918e..ff7b563215 100644
--- a/src/components/hint/Hint.driver.new.ts
+++ b/src/components/hint/Hint.driver.new.ts
@@ -1,4 +1,5 @@
 import {HintProps} from './index';
+import {TouchableOpacityProps} from '../touchableOpacity';
 import {useComponentDriver, ComponentProps, usePressableDriver, ViewDriver} from '../../testkit';
 import {ViewStyle, StyleSheet} from 'react-native';
 
@@ -15,13 +16,31 @@ export const HintDriver = (props: ComponentProps) => {
     testID: `${props.testID}.message`
   });
 
+  const hintTouchableDriver = usePressableDriver<TouchableOpacityProps>(useComponentDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}`
+  }));
+
+  const overlayTouchableDriver = usePressableDriver<TouchableOpacityProps>(useComponentDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.overlay`
+  }));
+
   const getContentStyle = (): ViewStyle => {
     return StyleSheet.flatten(contentDriver.getProps().style) as ViewStyle;
   };
 
-  const getModalExists = (): boolean => {
-    return modalDriver.exists();
+  const getModal = () => {
+    return modalDriver;
+  };
+
+  const getHintTouchable = () => {
+    return hintTouchableDriver;
+  };
+
+  const getOverlayTouchable = () => {
+    return overlayTouchableDriver;
   };
 
-  return {getContentStyle, getModalExists, ...driver};
+  return {getContentStyle, getModal, getHintTouchable, getOverlayTouchable, ...driver};
 };
diff --git a/src/components/hint/__tests__/index.spec.tsx b/src/components/hint/__tests__/index.spec.tsx
index efe21e94ee..6cb48b53a3 100644
--- a/src/components/hint/__tests__/index.spec.tsx
+++ b/src/components/hint/__tests__/index.spec.tsx
@@ -1,11 +1,21 @@
 import React from 'react';
-import {render} from '@testing-library/react-native';
+import {waitFor, render} from '@testing-library/react-native';
 import {Hint, Colors} from 'react-native-ui-lib';
 import {HintDriver} from '../Hint.driver.new';
 
 const TEST_ID = 'Hint';
 
-const HintTestComponent = ({showHint, color}: {showHint: boolean; color?: string}) => {
+const HintTestComponent = ({
+  showHint,
+  color,
+  onPress,
+  onBackgroundPress
+}: {
+  showHint: boolean;
+  color?: string;
+  onPress?: Function;
+  onBackgroundPress?: Function;
+}) => {
   return (
     <Hint
       visible={showHint}
@@ -14,7 +24,8 @@ const HintTestComponent = ({showHint, color}: {showHint: boolean; color?: string
       useSideTip
       key={'1'}
       targetFrame={{x: 1, y: 1, height: 1, width: 1}}
-      onBackgroundPress={() => {}}
+      onBackgroundPress={onBackgroundPress}
+      onPress={onPress}
       color={color}
       removePaddings
       enableShadow
@@ -47,14 +58,48 @@ describe('Hint Screen component test', () => {
     it('Test Hint modal is not visible when showHint is false', async () => {
       const renderTree = render(<HintTestComponent showHint={false}/>);
       const driver = HintDriver({renderTree, testID: TEST_ID});
-      expect(await driver.getModalExists()).toBeFalsy();
+      expect(await driver.getModal().exists()).toBeFalsy();
     });
 
     it('Test Hint modal is visible when showHint is true', async () => {
-      const renderTree = render(<HintTestComponent showHint/>);
+      const renderTree = render(<HintTestComponent showHint onBackgroundPress={() => {}}/>);
       const driver = HintDriver({renderTree, testID: TEST_ID});
       expect(await driver.exists()).toBeTruthy();
-      expect(await driver.getModalExists()).toBeTruthy();
+      expect(await driver.getModal().exists()).toBeTruthy();
+    });
+  });
+
+  describe('Test Hint onPress & onBackgroundPress', () => {
+    let onPressCallback: jest.Mock;
+    beforeEach(() => (onPressCallback = jest.fn()));
+    afterEach(() => onPressCallback.mockClear());
+
+    it('should trigger onPress callback', async () => {
+      const renderTree = render(<HintTestComponent showHint onPress={onPressCallback}/>);
+      const driver = HintDriver({renderTree, testID: TEST_ID});
+      driver.getHintTouchable().press();
+      await waitFor(() => expect(onPressCallback).toHaveBeenCalledTimes(1));
+    });
+
+    // it('should trigger onBackgroundPress callback', async () => {
+    //   const renderTree = render(<HintTestComponent showHint onBackgroundPress={onPressCallback}/>);
+    //   const driver = HintDriver({renderTree, testID: TEST_ID});
+    //   expect(driver.getOverlayTouchable().exists()).toBeTruthy();
+    //   driver.getOverlayTouchable().press();
+    //   await waitFor(() => expect(onPressCallback).toHaveBeenCalledTimes(1));
+    // });
+
+    it('should not trigger onPress callback when onPress isn\'t passed', async () => {
+      const renderTree = render(<HintTestComponent showHint/>);
+      const driver = HintDriver({renderTree, testID: TEST_ID});
+      driver.getHintTouchable().press();
+      await waitFor(() => expect(onPressCallback).toHaveBeenCalledTimes(0));
+    });
+
+    it('should not create touchable overlay driver when onBackgroundPress isn\'t passed', async () => {
+      const renderTree = render(<HintTestComponent showHint/>);
+      const driver = HintDriver({renderTree, testID: TEST_ID});
+      expect(driver.getOverlayTouchable().exists()).toBeFalsy();
     });
   });
 });
diff --git a/src/components/hint/index.tsx b/src/components/hint/index.tsx
index 7ae4b3f633..9690370e92 100644
--- a/src/components/hint/index.tsx
+++ b/src/components/hint/index.tsx
@@ -425,10 +425,13 @@ class Hint extends Component<HintProps, HintState> {
             }
           ]}
           pointerEvents="box-none"
-          testID={`${testID}.overlay`}
         >
           {onBackgroundPress && (
-            <TouchableWithoutFeedback style={StyleSheet.absoluteFillObject} onPress={onBackgroundPress}>
+            <TouchableWithoutFeedback
+              style={StyleSheet.absoluteFillObject}
+              onPress={onBackgroundPress}
+              testID={`${testID}.overlay`}
+            >
               <View flex/>
             </TouchableWithoutFeedback>
           )}
@@ -480,7 +483,11 @@ class Hint extends Component<HintProps, HintState> {
       >
         {customContent}
         {!customContent && icon && <Image source={icon} style={[styles.icon, iconStyle]}/>}
-        {!customContent && <Text recorderTag={'unmask'} style={[styles.hintMessage, messageStyle]}>{message}</Text>}
+        {!customContent && (
+          <Text recorderTag={'unmask'} style={[styles.hintMessage, messageStyle]}>
+            {message}
+          </Text>
+        )}
       </View>
     );
   }
@@ -501,9 +508,8 @@ class Hint extends Component<HintProps, HintState> {
             this.getHintAnimatedStyle()
           ]}
           pointerEvents="box-none"
-          testID={testID}
         >
-          <TouchableOpacity activeOpacity={opacity} onPress={onPress}>
+          <TouchableOpacity activeOpacity={opacity} onPress={onPress} testID={`${testID}`}>
             {this.renderContent()}
           </TouchableOpacity>
           {this.renderHintTip()}

From ee0c75770f2d102039213ba9dd62ad88dcecdcfb Mon Sep 17 00:00:00 2001
From: Adi <adids1221@gmail.com>
Date: Wed, 17 Jan 2024 14:24:49 +0200
Subject: [PATCH 03/14] testing icon on Hint

---
 src/components/hint/Hint.driver.new.ts       | 19 +++++++---
 src/components/hint/__tests__/index.spec.tsx | 37 +++++++++++++++++---
 src/components/hint/index.tsx                |  2 +-
 3 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/src/components/hint/Hint.driver.new.ts b/src/components/hint/Hint.driver.new.ts
index ff7b563215..e921679438 100644
--- a/src/components/hint/Hint.driver.new.ts
+++ b/src/components/hint/Hint.driver.new.ts
@@ -1,6 +1,6 @@
 import {HintProps} from './index';
 import {TouchableOpacityProps} from '../touchableOpacity';
-import {useComponentDriver, ComponentProps, usePressableDriver, ViewDriver} from '../../testkit';
+import {useComponentDriver, ComponentProps, usePressableDriver, ViewDriver, ImageDriver} from '../../testkit';
 import {ViewStyle, StyleSheet} from 'react-native';
 
 export const HintDriver = (props: ComponentProps) => {
@@ -26,14 +26,23 @@ export const HintDriver = (props: ComponentProps) => {
     testID: `${props.testID}.overlay`
   }));
 
-  const getContentStyle = (): ViewStyle => {
-    return StyleSheet.flatten(contentDriver.getProps().style) as ViewStyle;
-  };
+  const iconDriver = ImageDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.icon`
+  });
 
   const getModal = () => {
     return modalDriver;
   };
 
+  const getIcon = () => {
+    return iconDriver;
+  };
+
+  const getContentStyle = (): ViewStyle => {
+    return StyleSheet.flatten(contentDriver.getProps().style) as ViewStyle;
+  };
+
   const getHintTouchable = () => {
     return hintTouchableDriver;
   };
@@ -42,5 +51,5 @@ export const HintDriver = (props: ComponentProps) => {
     return overlayTouchableDriver;
   };
 
-  return {getContentStyle, getModal, getHintTouchable, getOverlayTouchable, ...driver};
+  return {getContentStyle, getModal, getIcon, getHintTouchable, getOverlayTouchable, ...driver};
 };
diff --git a/src/components/hint/__tests__/index.spec.tsx b/src/components/hint/__tests__/index.spec.tsx
index 6cb48b53a3..12cce4f0ae 100644
--- a/src/components/hint/__tests__/index.spec.tsx
+++ b/src/components/hint/__tests__/index.spec.tsx
@@ -5,16 +5,22 @@ import {HintDriver} from '../Hint.driver.new';
 
 const TEST_ID = 'Hint';
 
+const settingsIcon = require('../../../assets/icons/check.png');
+
 const HintTestComponent = ({
   showHint,
   color,
   onPress,
-  onBackgroundPress
+  onBackgroundPress,
+  useModal,
+  useIcon
 }: {
   showHint: boolean;
   color?: string;
   onPress?: Function;
   onBackgroundPress?: Function;
+  useModal?: boolean;
+  useIcon?: boolean;
 }) => {
   return (
     <Hint
@@ -30,13 +36,15 @@ const HintTestComponent = ({
       removePaddings
       enableShadow
       testID={TEST_ID}
+      useModal={useModal}
+      icon={useIcon ? settingsIcon : undefined}
     />
   );
 };
 
 //TODO: Add test for onPress functionality
 describe('Hint Screen component test', () => {
-  describe('Test Hint style, background color:', () => {
+  describe('Test Hint style:', () => {
     it('Test Hint component background color', async () => {
       const expectedColor = Colors.$backgroundPrimaryHeavy;
       const renderTree = render(<HintTestComponent showHint/>);
@@ -54,6 +62,20 @@ describe('Hint Screen component test', () => {
     });
   });
 
+  describe('Test Hint icon', () => {
+    it('Hint should include icon', async () => {
+      const renderTree = render(<HintTestComponent showHint useIcon/>);
+      const driver = HintDriver({renderTree, testID: TEST_ID});
+      expect(driver.getIcon().exists()).toBeTruthy();
+    });
+
+    it('Hint shouldn\'t include icon', async () => {
+      const renderTree = render(<HintTestComponent showHint/>);
+      const driver = HintDriver({renderTree, testID: TEST_ID});
+      expect(driver.getIcon().exists()).toBeFalsy();
+    });
+  });
+
   describe('Test Hint modal visibility:', () => {
     it('Test Hint modal is not visible when showHint is false', async () => {
       const renderTree = render(<HintTestComponent showHint={false}/>);
@@ -81,11 +103,14 @@ describe('Hint Screen component test', () => {
       await waitFor(() => expect(onPressCallback).toHaveBeenCalledTimes(1));
     });
 
+    //TODO - fix this test for onBackgroundTest
     // it('should trigger onBackgroundPress callback', async () => {
-    //   const renderTree = render(<HintTestComponent showHint onBackgroundPress={onPressCallback}/>);
+    //   jest.useFakeTimers();
+    //   const renderTree = render(<HintTestComponent showHint onBackgroundPress={onPressCallback} useModal={false}/>);
     //   const driver = HintDriver({renderTree, testID: TEST_ID});
-    //   expect(driver.getOverlayTouchable().exists()).toBeTruthy();
-    //   driver.getOverlayTouchable().press();
+    //   act(() => {
+    //     driver.getOverlayTouchable().press();
+    //   });
     //   await waitFor(() => expect(onPressCallback).toHaveBeenCalledTimes(1));
     // });
 
@@ -102,4 +127,6 @@ describe('Hint Screen component test', () => {
       expect(driver.getOverlayTouchable().exists()).toBeFalsy();
     });
   });
+
+  describe('Test Hint tip', () => {});
 });
diff --git a/src/components/hint/index.tsx b/src/components/hint/index.tsx
index 9690370e92..01fbd80cf6 100644
--- a/src/components/hint/index.tsx
+++ b/src/components/hint/index.tsx
@@ -482,7 +482,7 @@ class Hint extends Component<HintProps, HintState> {
         ref={this.hintRef}
       >
         {customContent}
-        {!customContent && icon && <Image source={icon} style={[styles.icon, iconStyle]}/>}
+        {!customContent && icon && <Image source={icon} style={[styles.icon, iconStyle]} testID={`${testID}.icon`}/>}
         {!customContent && (
           <Text recorderTag={'unmask'} style={[styles.hintMessage, messageStyle]}>
             {message}

From 44c64186a886fbcd9044df58c22a36d3264328c9 Mon Sep 17 00:00:00 2001
From: Adi <adids1221@gmail.com>
Date: Mon, 22 Jan 2024 11:00:16 +0200
Subject: [PATCH 04/14] removed on background press test

---
 jestSetup/jest-setup.js                      | 12 +++++++++
 src/components/hint/Hint.driver.new.ts       | 11 +++++++--
 src/components/hint/__tests__/index.spec.tsx | 26 +++++++++-----------
 src/components/hint/index.tsx                |  2 +-
 4 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/jestSetup/jest-setup.js b/jestSetup/jest-setup.js
index 15d9d4f2e5..4338988e8d 100644
--- a/jestSetup/jest-setup.js
+++ b/jestSetup/jest-setup.js
@@ -1,4 +1,5 @@
 import {NativeModules, AccessibilityInfo, Animated} from 'react-native';
+import React from 'react';
 // ========= Mock Object.defineProperty to always allow overriding =========
 const originalDefineProperty = Object.defineProperty;
 Object.defineProperty = (obj, prop, desc) => {
@@ -15,6 +16,17 @@ Object.defineProperties = (obj, props) => {
   return obj;
 };
 // =========================================================================
+const OriginalReactComponent = React.Component;
+Object.defineProperty(React, 'Component', {
+  value: class MockedReactComponent extends OriginalReactComponent {
+    componentDidMount() {
+      super.componentDidMount?.();
+      this.props.onLayout?.({nativeEvent: {layout: {}}});
+      console.log(`MOCK MOCK MOCK! this.measureInWindow:`, this.measureInWindow);
+      this.measureInWindow?.({nativeEvent: {layout: {}}});
+    }
+  }
+});
 
 global._UILIB_TESTING = true;
 
diff --git a/src/components/hint/Hint.driver.new.ts b/src/components/hint/Hint.driver.new.ts
index e921679438..d640acaa33 100644
--- a/src/components/hint/Hint.driver.new.ts
+++ b/src/components/hint/Hint.driver.new.ts
@@ -1,12 +1,19 @@
 import {HintProps} from './index';
 import {TouchableOpacityProps} from '../touchableOpacity';
-import {useComponentDriver, ComponentProps, usePressableDriver, ViewDriver, ImageDriver} from '../../testkit';
+import {
+  useComponentDriver,
+  ComponentProps,
+  usePressableDriver,
+  ViewDriver,
+  ImageDriver,
+  ModalDriver
+} from '../../testkit';
 import {ViewStyle, StyleSheet} from 'react-native';
 
 export const HintDriver = (props: ComponentProps) => {
   const driver = usePressableDriver<HintProps>(useComponentDriver(props));
 
-  const modalDriver = ViewDriver({
+  const modalDriver = ModalDriver({
     renderTree: props.renderTree,
     testID: `${props.testID}.modal`
   });
diff --git a/src/components/hint/__tests__/index.spec.tsx b/src/components/hint/__tests__/index.spec.tsx
index 12cce4f0ae..9a789e37f8 100644
--- a/src/components/hint/__tests__/index.spec.tsx
+++ b/src/components/hint/__tests__/index.spec.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, {useRef} from 'react';
 import {waitFor, render} from '@testing-library/react-native';
-import {Hint, Colors} from 'react-native-ui-lib';
+import {Hint, Colors, Button} from 'react-native-ui-lib';
 import {HintDriver} from '../Hint.driver.new';
 
 const TEST_ID = 'Hint';
@@ -12,6 +12,7 @@ const HintTestComponent = ({
   color,
   onPress,
   onBackgroundPress,
+  useTargetFrame = true,
   useModal,
   useIcon
 }: {
@@ -19,9 +20,11 @@ const HintTestComponent = ({
   color?: string;
   onPress?: Function;
   onBackgroundPress?: Function;
+  useTargetFrame?: boolean;
   useModal?: boolean;
   useIcon?: boolean;
 }) => {
+  const ref = useRef();
   return (
     <Hint
       visible={showHint}
@@ -29,7 +32,7 @@ const HintTestComponent = ({
       position={Hint.positions.TOP}
       useSideTip
       key={'1'}
-      targetFrame={{x: 1, y: 1, height: 1, width: 1}}
+      targetFrame={useTargetFrame && {x: 1, y: 1, height: 1, width: 1}}
       onBackgroundPress={onBackgroundPress}
       onPress={onPress}
       color={color}
@@ -38,7 +41,10 @@ const HintTestComponent = ({
       testID={TEST_ID}
       useModal={useModal}
       icon={useIcon ? settingsIcon : undefined}
-    />
+      ref={ref}
+    >
+      <Button round $backgroundDefault/>
+    </Hint>
   );
 };
 
@@ -92,6 +98,7 @@ describe('Hint Screen component test', () => {
   });
 
   describe('Test Hint onPress & onBackgroundPress', () => {
+    //TODO - add test for onBackgroundTest, should mock measureInWindow functionally to test it
     let onPressCallback: jest.Mock;
     beforeEach(() => (onPressCallback = jest.fn()));
     afterEach(() => onPressCallback.mockClear());
@@ -103,17 +110,6 @@ describe('Hint Screen component test', () => {
       await waitFor(() => expect(onPressCallback).toHaveBeenCalledTimes(1));
     });
 
-    //TODO - fix this test for onBackgroundTest
-    // it('should trigger onBackgroundPress callback', async () => {
-    //   jest.useFakeTimers();
-    //   const renderTree = render(<HintTestComponent showHint onBackgroundPress={onPressCallback} useModal={false}/>);
-    //   const driver = HintDriver({renderTree, testID: TEST_ID});
-    //   act(() => {
-    //     driver.getOverlayTouchable().press();
-    //   });
-    //   await waitFor(() => expect(onPressCallback).toHaveBeenCalledTimes(1));
-    // });
-
     it('should not trigger onPress callback when onPress isn\'t passed', async () => {
       const renderTree = render(<HintTestComponent showHint/>);
       const driver = HintDriver({renderTree, testID: TEST_ID});
diff --git a/src/components/hint/index.tsx b/src/components/hint/index.tsx
index 01fbd80cf6..0fa52241a5 100644
--- a/src/components/hint/index.tsx
+++ b/src/components/hint/index.tsx
@@ -411,6 +411,7 @@ class Hint extends Component<HintProps, HintState> {
   renderOverlay() {
     const {targetLayoutInWindow} = this.state;
     const {onBackgroundPress, backdropColor, testID} = this.props;
+    console.log(`inside renderOverlay, targetLayoutInWindow:`, targetLayoutInWindow);
     if (targetLayoutInWindow) {
       const containerPosition = this.getContainerPosition() as {top: number; left: number};
       return (
@@ -558,7 +559,6 @@ class Hint extends Component<HintProps, HintState> {
 
   renderChildren() {
     const {targetFrame} = this.props;
-
     if (!targetFrame && isValidElement(this.props.children)) {
       return React.cloneElement<any>(this.props.children, {
         key: 'clone',

From 8511ef596b19a4a004f299a0afe034449c2fd463 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Wed, 7 Feb 2024 17:08:50 +0200
Subject: [PATCH 05/14] fixed most of the review notes

---
 jestSetup/jest-setup.js                      |  1 -
 src/components/hint/Hint.driver.new.ts       | 14 +++++------
 src/components/hint/__tests__/index.spec.tsx | 25 +++++++++++++-------
 src/components/hint/index.tsx                |  3 +--
 4 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/jestSetup/jest-setup.js b/jestSetup/jest-setup.js
index 4338988e8d..7e867af1e4 100644
--- a/jestSetup/jest-setup.js
+++ b/jestSetup/jest-setup.js
@@ -22,7 +22,6 @@ Object.defineProperty(React, 'Component', {
     componentDidMount() {
       super.componentDidMount?.();
       this.props.onLayout?.({nativeEvent: {layout: {}}});
-      console.log(`MOCK MOCK MOCK! this.measureInWindow:`, this.measureInWindow);
       this.measureInWindow?.({nativeEvent: {layout: {}}});
     }
   }
diff --git a/src/components/hint/Hint.driver.new.ts b/src/components/hint/Hint.driver.new.ts
index d640acaa33..3ec191b7a9 100644
--- a/src/components/hint/Hint.driver.new.ts
+++ b/src/components/hint/Hint.driver.new.ts
@@ -28,7 +28,7 @@ export const HintDriver = (props: ComponentProps) => {
     testID: `${props.testID}`
   }));
 
-  const overlayTouchableDriver = usePressableDriver<TouchableOpacityProps>(useComponentDriver({
+  const overlayDriver = usePressableDriver<TouchableOpacityProps>(useComponentDriver({
     renderTree: props.renderTree,
     testID: `${props.testID}.overlay`
   }));
@@ -46,17 +46,17 @@ export const HintDriver = (props: ComponentProps) => {
     return iconDriver;
   };
 
-  const getContentStyle = (): ViewStyle => {
-    return StyleSheet.flatten(contentDriver.getProps().style) as ViewStyle;
+  const getBackgroundColor = (): ViewStyle => {
+    return StyleSheet.flatten(contentDriver.getProps().style).backgroundColor as ViewStyle;
   };
 
   const getHintTouchable = () => {
     return hintTouchableDriver;
   };
 
-  const getOverlayTouchable = () => {
-    return overlayTouchableDriver;
+  const getOverlay = () => {
+    return overlayDriver;
   };
-
-  return {getContentStyle, getModal, getIcon, getHintTouchable, getOverlayTouchable, ...driver};
+  
+  return {getBackgroundColor, getModal, getIcon, getHintTouchable, getOverlay, ...driver};
 };
diff --git a/src/components/hint/__tests__/index.spec.tsx b/src/components/hint/__tests__/index.spec.tsx
index 9a789e37f8..50548519a0 100644
--- a/src/components/hint/__tests__/index.spec.tsx
+++ b/src/components/hint/__tests__/index.spec.tsx
@@ -48,8 +48,8 @@ const HintTestComponent = ({
   );
 };
 
-//TODO: Add test for onPress functionality
 describe('Hint Screen component test', () => {
+  //TODO: Add test for Hint tip position
   describe('Test Hint style:', () => {
     it('Test Hint component background color', async () => {
       const expectedColor = Colors.$backgroundPrimaryHeavy;
@@ -57,13 +57,13 @@ describe('Hint Screen component test', () => {
       const driver = HintDriver({renderTree, testID: TEST_ID});
       expect(await driver.getElement()).toBeTruthy();
 
-      let contentColor = await driver.getContentStyle().backgroundColor;
+      let contentColor = await driver.getBackgroundColor();
       expect(contentColor).toBe(expectedColor);
 
       const whiteHintRenderTree = render(<HintTestComponent showHint color={Colors.white}/>);
       const whiteHintDriver = HintDriver({renderTree: whiteHintRenderTree, testID: TEST_ID});
 
-      contentColor = await whiteHintDriver.getContentStyle().backgroundColor;
+      contentColor = await whiteHintDriver.getBackgroundColor();
       expect(contentColor).toBe(Colors.white);
     });
   });
@@ -82,6 +82,14 @@ describe('Hint Screen component test', () => {
     });
   });
 
+  describe('Test Hint content', () => {
+    it('Hint should include message', async () => {
+      const renderTree = render(<HintTestComponent showHint/>);
+      const message = renderTree.getByTestId(`${TEST_ID}.text`).props.children;
+      expect(message).toBe('Hint message to hint things');
+    });
+  });
+
   describe('Test Hint modal visibility:', () => {
     it('Test Hint modal is not visible when showHint is false', async () => {
       const renderTree = render(<HintTestComponent showHint={false}/>);
@@ -93,12 +101,11 @@ describe('Hint Screen component test', () => {
       const renderTree = render(<HintTestComponent showHint onBackgroundPress={() => {}}/>);
       const driver = HintDriver({renderTree, testID: TEST_ID});
       expect(await driver.exists()).toBeTruthy();
-      expect(await driver.getModal().exists()).toBeTruthy();
+      expect(await driver.getModal().isVisible()).toBeTruthy();
     });
   });
 
-  describe('Test Hint onPress & onBackgroundPress', () => {
-    //TODO - add test for onBackgroundTest, should mock measureInWindow functionally to test it
+  describe('Test Hint onPress', () => {
     let onPressCallback: jest.Mock;
     beforeEach(() => (onPressCallback = jest.fn()));
     afterEach(() => onPressCallback.mockClear());
@@ -116,13 +123,13 @@ describe('Hint Screen component test', () => {
       driver.getHintTouchable().press();
       await waitFor(() => expect(onPressCallback).toHaveBeenCalledTimes(0));
     });
+  });
 
+  describe('Test Hint  onBackgroundPress', () => {
     it('should not create touchable overlay driver when onBackgroundPress isn\'t passed', async () => {
       const renderTree = render(<HintTestComponent showHint/>);
       const driver = HintDriver({renderTree, testID: TEST_ID});
-      expect(driver.getOverlayTouchable().exists()).toBeFalsy();
+      expect(driver.getOverlay().exists()).toBeFalsy();
     });
   });
-
-  describe('Test Hint tip', () => {});
 });
diff --git a/src/components/hint/index.tsx b/src/components/hint/index.tsx
index 0fa52241a5..2f64afe3de 100644
--- a/src/components/hint/index.tsx
+++ b/src/components/hint/index.tsx
@@ -411,7 +411,6 @@ class Hint extends Component<HintProps, HintState> {
   renderOverlay() {
     const {targetLayoutInWindow} = this.state;
     const {onBackgroundPress, backdropColor, testID} = this.props;
-    console.log(`inside renderOverlay, targetLayoutInWindow:`, targetLayoutInWindow);
     if (targetLayoutInWindow) {
       const containerPosition = this.getContainerPosition() as {top: number; left: number};
       return (
@@ -485,7 +484,7 @@ class Hint extends Component<HintProps, HintState> {
         {customContent}
         {!customContent && icon && <Image source={icon} style={[styles.icon, iconStyle]} testID={`${testID}.icon`}/>}
         {!customContent && (
-          <Text recorderTag={'unmask'} style={[styles.hintMessage, messageStyle]}>
+          <Text recorderTag={'unmask'} style={[styles.hintMessage, messageStyle]} testID={`${testID}.text`}>
             {message}
           </Text>
         )}

From a74a46c106f0cc98cef9f98d1d5c78b9a020c86a Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Fri, 16 Feb 2024 16:09:33 +0200
Subject: [PATCH 06/14] fixed review notes

---
 src/components/hint/Hint.driver.new.ts       | 40 +++++++++++++++++---
 src/components/hint/__tests__/index.spec.tsx |  6 +--
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/components/hint/Hint.driver.new.ts b/src/components/hint/Hint.driver.new.ts
index 3ec191b7a9..b9360de8a8 100644
--- a/src/components/hint/Hint.driver.new.ts
+++ b/src/components/hint/Hint.driver.new.ts
@@ -6,7 +6,8 @@ import {
   usePressableDriver,
   ViewDriver,
   ImageDriver,
-  ModalDriver
+  ModalDriver,
+  TextDriver
 } from '../../testkit';
 import {ViewStyle, StyleSheet} from 'react-native';
 
@@ -23,7 +24,12 @@ export const HintDriver = (props: ComponentProps) => {
     testID: `${props.testID}.message`
   });
 
-  const hintTouchableDriver = usePressableDriver<TouchableOpacityProps>(useComponentDriver({
+  const textDriver = TextDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.text`
+  });
+
+  const hintPressableDriver = usePressableDriver<TouchableOpacityProps>(useComponentDriver({
     renderTree: props.renderTree,
     testID: `${props.testID}`
   }));
@@ -50,13 +56,35 @@ export const HintDriver = (props: ComponentProps) => {
     return StyleSheet.flatten(contentDriver.getProps().style).backgroundColor as ViewStyle;
   };
 
-  const getHintTouchable = () => {
-    return hintTouchableDriver;
+  const getMessage = () => {
+    return textDriver.getText();
+  };
+
+  const getHintPressable = () => {
+    return hintPressableDriver;
   };
 
   const getOverlay = () => {
     return overlayDriver;
   };
-  
-  return {getBackgroundColor, getModal, getIcon, getHintTouchable, getOverlay, ...driver};
+
+  const hintPress = () => {
+    return hintPressableDriver.press();
+  };
+
+  const hintPressOnBackground = () => {
+    return overlayDriver.press();
+  };
+
+  return {
+    getBackgroundColor,
+    getModal,
+    getIcon,
+    getMessage,
+    getHintPressable,
+    getOverlay,
+    hintPress,
+    hintPressOnBackground,
+    ...driver
+  };
 };
diff --git a/src/components/hint/__tests__/index.spec.tsx b/src/components/hint/__tests__/index.spec.tsx
index 50548519a0..9615ac19d9 100644
--- a/src/components/hint/__tests__/index.spec.tsx
+++ b/src/components/hint/__tests__/index.spec.tsx
@@ -101,7 +101,7 @@ describe('Hint Screen component test', () => {
       const renderTree = render(<HintTestComponent showHint onBackgroundPress={() => {}}/>);
       const driver = HintDriver({renderTree, testID: TEST_ID});
       expect(await driver.exists()).toBeTruthy();
-      expect(await driver.getModal().isVisible()).toBeTruthy();
+      expect(await driver.getModal().isVisible()).toBeFalsy();
     });
   });
 
@@ -113,14 +113,14 @@ describe('Hint Screen component test', () => {
     it('should trigger onPress callback', async () => {
       const renderTree = render(<HintTestComponent showHint onPress={onPressCallback}/>);
       const driver = HintDriver({renderTree, testID: TEST_ID});
-      driver.getHintTouchable().press();
+      driver.hintPress();
       await waitFor(() => expect(onPressCallback).toHaveBeenCalledTimes(1));
     });
 
     it('should not trigger onPress callback when onPress isn\'t passed', async () => {
       const renderTree = render(<HintTestComponent showHint/>);
       const driver = HintDriver({renderTree, testID: TEST_ID});
-      driver.getHintTouchable().press();
+      driver.hintPress();
       await waitFor(() => expect(onPressCallback).toHaveBeenCalledTimes(0));
     });
   });

From 048de98c6dd77f027a5faa6fd9459ec0af476d55 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Sun, 18 Feb 2024 11:38:14 +0200
Subject: [PATCH 07/14] fix the test that failed

---
 src/components/hint/__tests__/index.spec.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/hint/__tests__/index.spec.tsx b/src/components/hint/__tests__/index.spec.tsx
index 9615ac19d9..408f19f8a1 100644
--- a/src/components/hint/__tests__/index.spec.tsx
+++ b/src/components/hint/__tests__/index.spec.tsx
@@ -101,7 +101,7 @@ describe('Hint Screen component test', () => {
       const renderTree = render(<HintTestComponent showHint onBackgroundPress={() => {}}/>);
       const driver = HintDriver({renderTree, testID: TEST_ID});
       expect(await driver.exists()).toBeTruthy();
-      expect(await driver.getModal().isVisible()).toBeFalsy();
+      expect(await driver.getModal().isVisible()).toBeTruthy();
     });
   });
 

From 7b80c458bc34ac882122154b292a8c414925ff0e Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Sun, 18 Feb 2024 16:52:38 +0200
Subject: [PATCH 08/14] fixed most of the review notes

---
 src/components/hint/Hint.driver.new.ts       | 28 +++-----------------
 src/components/hint/__tests__/index.spec.tsx | 12 ++++-----
 2 files changed, 10 insertions(+), 30 deletions(-)

diff --git a/src/components/hint/Hint.driver.new.ts b/src/components/hint/Hint.driver.new.ts
index b9360de8a8..9da56e5cb6 100644
--- a/src/components/hint/Hint.driver.new.ts
+++ b/src/components/hint/Hint.driver.new.ts
@@ -6,8 +6,7 @@ import {
   usePressableDriver,
   ViewDriver,
   ImageDriver,
-  ModalDriver,
-  TextDriver
+  ModalDriver
 } from '../../testkit';
 import {ViewStyle, StyleSheet} from 'react-native';
 
@@ -24,11 +23,6 @@ export const HintDriver = (props: ComponentProps) => {
     testID: `${props.testID}.message`
   });
 
-  const textDriver = TextDriver({
-    renderTree: props.renderTree,
-    testID: `${props.testID}.text`
-  });
-
   const hintPressableDriver = usePressableDriver<TouchableOpacityProps>(useComponentDriver({
     renderTree: props.renderTree,
     testID: `${props.testID}`
@@ -44,10 +38,6 @@ export const HintDriver = (props: ComponentProps) => {
     testID: `${props.testID}.icon`
   });
 
-  const getModal = () => {
-    return modalDriver;
-  };
-
   const getIcon = () => {
     return iconDriver;
   };
@@ -56,14 +46,6 @@ export const HintDriver = (props: ComponentProps) => {
     return StyleSheet.flatten(contentDriver.getProps().style).backgroundColor as ViewStyle;
   };
 
-  const getMessage = () => {
-    return textDriver.getText();
-  };
-
-  const getHintPressable = () => {
-    return hintPressableDriver;
-  };
-
   const getOverlay = () => {
     return overlayDriver;
   };
@@ -72,19 +54,17 @@ export const HintDriver = (props: ComponentProps) => {
     return hintPressableDriver.press();
   };
 
-  const hintPressOnBackground = () => {
+  const pressOnBackground = () => {
     return overlayDriver.press();
   };
 
   return {
     getBackgroundColor,
-    getModal,
     getIcon,
-    getMessage,
-    getHintPressable,
     getOverlay,
     hintPress,
-    hintPressOnBackground,
+    pressOnBackground,
+    modalDriver,
     ...driver
   };
 };
diff --git a/src/components/hint/__tests__/index.spec.tsx b/src/components/hint/__tests__/index.spec.tsx
index 408f19f8a1..92979e02ac 100644
--- a/src/components/hint/__tests__/index.spec.tsx
+++ b/src/components/hint/__tests__/index.spec.tsx
@@ -90,18 +90,18 @@ describe('Hint Screen component test', () => {
     });
   });
 
-  describe('Test Hint modal visibility:', () => {
-    it('Test Hint modal is not visible when showHint is false', async () => {
-      const renderTree = render(<HintTestComponent showHint={false}/>);
+  describe('Test Hint  visibility:', () => {
+    it('Test Hint is not visible when showHint is false', async () => {
+      const renderTree = render(<HintTestComponent showHint={false} onBackgroundPress={() => {}}/>);
       const driver = HintDriver({renderTree, testID: TEST_ID});
-      expect(await driver.getModal().exists()).toBeFalsy();
+      expect(await driver.modalDriver.exists()).toBeFalsy();
     });
 
-    it('Test Hint modal is visible when showHint is true', async () => {
+    it('Test Hint  is visible when showHint is true', async () => {
       const renderTree = render(<HintTestComponent showHint onBackgroundPress={() => {}}/>);
       const driver = HintDriver({renderTree, testID: TEST_ID});
       expect(await driver.exists()).toBeTruthy();
-      expect(await driver.getModal().isVisible()).toBeTruthy();
+      expect(await driver.modalDriver.isVisible()).toBeTruthy();
     });
   });
 

From 19d685c2024fa9c6148455d58d85b65119e94b02 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Mon, 19 Feb 2024 15:08:06 +0200
Subject: [PATCH 09/14] removed test when hint isn't visible

---
 src/components/hint/__tests__/index.spec.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/hint/__tests__/index.spec.tsx b/src/components/hint/__tests__/index.spec.tsx
index 92979e02ac..41852f95e7 100644
--- a/src/components/hint/__tests__/index.spec.tsx
+++ b/src/components/hint/__tests__/index.spec.tsx
@@ -43,7 +43,7 @@ const HintTestComponent = ({
       icon={useIcon ? settingsIcon : undefined}
       ref={ref}
     >
-      <Button round $backgroundDefault/>
+      <Button round $backgroundDefault label="Hint Button"/>
     </Hint>
   );
 };
@@ -91,12 +91,7 @@ describe('Hint Screen component test', () => {
   });
 
   describe('Test Hint  visibility:', () => {
-    it('Test Hint is not visible when showHint is false', async () => {
-      const renderTree = render(<HintTestComponent showHint={false} onBackgroundPress={() => {}}/>);
-      const driver = HintDriver({renderTree, testID: TEST_ID});
-      expect(await driver.modalDriver.exists()).toBeFalsy();
-    });
-
+    //Note: Cannot test Hint when showHint is false, the component isn't rendered and return null or the children.
     it('Test Hint  is visible when showHint is true', async () => {
       const renderTree = render(<HintTestComponent showHint onBackgroundPress={() => {}}/>);
       const driver = HintDriver({renderTree, testID: TEST_ID});

From 9e11b4e91ebbb9d4f9382621dc6e49a8bf0d53eb Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Mon, 8 Apr 2024 19:47:12 +0300
Subject: [PATCH 10/14] fixed ts errors

---
 src/components/hint/Hint.driver.new.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/hint/Hint.driver.new.ts b/src/components/hint/Hint.driver.new.ts
index 9da56e5cb6..421d08e078 100644
--- a/src/components/hint/Hint.driver.new.ts
+++ b/src/components/hint/Hint.driver.new.ts
@@ -1,5 +1,3 @@
-import {HintProps} from './index';
-import {TouchableOpacityProps} from '../touchableOpacity';
 import {
   useComponentDriver,
   ComponentProps,
@@ -11,7 +9,7 @@ import {
 import {ViewStyle, StyleSheet} from 'react-native';
 
 export const HintDriver = (props: ComponentProps) => {
-  const driver = usePressableDriver<HintProps>(useComponentDriver(props));
+  const driver = usePressableDriver(useComponentDriver(props));
 
   const modalDriver = ModalDriver({
     renderTree: props.renderTree,
@@ -23,12 +21,12 @@ export const HintDriver = (props: ComponentProps) => {
     testID: `${props.testID}.message`
   });
 
-  const hintPressableDriver = usePressableDriver<TouchableOpacityProps>(useComponentDriver({
+  const hintPressableDriver = usePressableDriver(useComponentDriver({
     renderTree: props.renderTree,
     testID: `${props.testID}`
   }));
 
-  const overlayDriver = usePressableDriver<TouchableOpacityProps>(useComponentDriver({
+  const overlayDriver = usePressableDriver(useComponentDriver({
     renderTree: props.renderTree,
     testID: `${props.testID}.overlay`
   }));
@@ -43,7 +41,7 @@ export const HintDriver = (props: ComponentProps) => {
   };
 
   const getBackgroundColor = (): ViewStyle => {
-    return StyleSheet.flatten(contentDriver.getProps().style).backgroundColor as ViewStyle;
+    return StyleSheet.flatten(contentDriver.getStyle()).backgroundColor as ViewStyle;
   };
 
   const getOverlay = () => {

From a714528ec787fe7adfcaeb762f7b14de21e57ad8 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Mon, 8 Apr 2024 19:50:06 +0300
Subject: [PATCH 11/14] small fixes

---
 src/components/hint/Hint.driver.new.ts       | 10 +++++++---
 src/components/hint/__tests__/index.spec.tsx |  4 ++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/hint/Hint.driver.new.ts b/src/components/hint/Hint.driver.new.ts
index 421d08e078..bc3c1f4a77 100644
--- a/src/components/hint/Hint.driver.new.ts
+++ b/src/components/hint/Hint.driver.new.ts
@@ -44,10 +44,14 @@ export const HintDriver = (props: ComponentProps) => {
     return StyleSheet.flatten(contentDriver.getStyle()).backgroundColor as ViewStyle;
   };
 
-  const getOverlay = () => {
+  const getOnBackgroundPressTouchable = () => {
     return overlayDriver;
   };
 
+  const getIsModalVisible = () => {
+    return modalDriver.isVisible();
+  };
+
   const hintPress = () => {
     return hintPressableDriver.press();
   };
@@ -59,10 +63,10 @@ export const HintDriver = (props: ComponentProps) => {
   return {
     getBackgroundColor,
     getIcon,
-    getOverlay,
+    getOnBackgroundPressTouchable,
     hintPress,
     pressOnBackground,
-    modalDriver,
+    getIsModalVisible,
     ...driver
   };
 };
diff --git a/src/components/hint/__tests__/index.spec.tsx b/src/components/hint/__tests__/index.spec.tsx
index 41852f95e7..029c4540f2 100644
--- a/src/components/hint/__tests__/index.spec.tsx
+++ b/src/components/hint/__tests__/index.spec.tsx
@@ -96,7 +96,7 @@ describe('Hint Screen component test', () => {
       const renderTree = render(<HintTestComponent showHint onBackgroundPress={() => {}}/>);
       const driver = HintDriver({renderTree, testID: TEST_ID});
       expect(await driver.exists()).toBeTruthy();
-      expect(await driver.modalDriver.isVisible()).toBeTruthy();
+      expect(await driver.getIsModalVisible()).toBeTruthy();
     });
   });
 
@@ -124,7 +124,7 @@ describe('Hint Screen component test', () => {
     it('should not create touchable overlay driver when onBackgroundPress isn\'t passed', async () => {
       const renderTree = render(<HintTestComponent showHint/>);
       const driver = HintDriver({renderTree, testID: TEST_ID});
-      expect(driver.getOverlay().exists()).toBeFalsy();
+      expect(driver.getOnBackgroundPressTouchable().exists()).toBeFalsy();
     });
   });
 });

From a96f9c25113e6d7821dddf9dd4f505a6c83d4e90 Mon Sep 17 00:00:00 2001
From: adids1221 <adids1221@gmail.com>
Date: Tue, 9 Apr 2024 09:51:16 +0300
Subject: [PATCH 12/14] fixed review notes

---
 src/components/hint/Hint.driver.new.ts       | 23 ++++++++------------
 src/components/hint/__tests__/index.spec.tsx |  8 +++----
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/components/hint/Hint.driver.new.ts b/src/components/hint/Hint.driver.new.ts
index bc3c1f4a77..3bd6b43722 100644
--- a/src/components/hint/Hint.driver.new.ts
+++ b/src/components/hint/Hint.driver.new.ts
@@ -21,11 +21,6 @@ export const HintDriver = (props: ComponentProps) => {
     testID: `${props.testID}.message`
   });
 
-  const hintPressableDriver = usePressableDriver(useComponentDriver({
-    renderTree: props.renderTree,
-    testID: `${props.testID}`
-  }));
-
   const overlayDriver = usePressableDriver(useComponentDriver({
     renderTree: props.renderTree,
     testID: `${props.testID}.overlay`
@@ -44,16 +39,16 @@ export const HintDriver = (props: ComponentProps) => {
     return StyleSheet.flatten(contentDriver.getStyle()).backgroundColor as ViewStyle;
   };
 
-  const getOnBackgroundPressTouchable = () => {
-    return overlayDriver;
+  const isBackgroundExists = () => {
+    return overlayDriver.exists();
   };
 
-  const getIsModalVisible = () => {
+  const isModalVisible = () => {
     return modalDriver.isVisible();
   };
 
-  const hintPress = () => {
-    return hintPressableDriver.press();
+  const press = () => {
+    return driver.press();
   };
 
   const pressOnBackground = () => {
@@ -63,10 +58,10 @@ export const HintDriver = (props: ComponentProps) => {
   return {
     getBackgroundColor,
     getIcon,
-    getOnBackgroundPressTouchable,
-    hintPress,
+    isBackgroundExists,
     pressOnBackground,
-    getIsModalVisible,
-    ...driver
+    isModalVisible,
+    ...driver,
+    press
   };
 };
diff --git a/src/components/hint/__tests__/index.spec.tsx b/src/components/hint/__tests__/index.spec.tsx
index 029c4540f2..341039ed84 100644
--- a/src/components/hint/__tests__/index.spec.tsx
+++ b/src/components/hint/__tests__/index.spec.tsx
@@ -96,7 +96,7 @@ describe('Hint Screen component test', () => {
       const renderTree = render(<HintTestComponent showHint onBackgroundPress={() => {}}/>);
       const driver = HintDriver({renderTree, testID: TEST_ID});
       expect(await driver.exists()).toBeTruthy();
-      expect(await driver.getIsModalVisible()).toBeTruthy();
+      expect(await driver.isModalVisible()).toBeTruthy();
     });
   });
 
@@ -108,14 +108,14 @@ describe('Hint Screen component test', () => {
     it('should trigger onPress callback', async () => {
       const renderTree = render(<HintTestComponent showHint onPress={onPressCallback}/>);
       const driver = HintDriver({renderTree, testID: TEST_ID});
-      driver.hintPress();
+      driver.press();
       await waitFor(() => expect(onPressCallback).toHaveBeenCalledTimes(1));
     });
 
     it('should not trigger onPress callback when onPress isn\'t passed', async () => {
       const renderTree = render(<HintTestComponent showHint/>);
       const driver = HintDriver({renderTree, testID: TEST_ID});
-      driver.hintPress();
+      driver.press();
       await waitFor(() => expect(onPressCallback).toHaveBeenCalledTimes(0));
     });
   });
@@ -124,7 +124,7 @@ describe('Hint Screen component test', () => {
     it('should not create touchable overlay driver when onBackgroundPress isn\'t passed', async () => {
       const renderTree = render(<HintTestComponent showHint/>);
       const driver = HintDriver({renderTree, testID: TEST_ID});
-      expect(driver.getOnBackgroundPressTouchable().exists()).toBeFalsy();
+      expect(driver.isBackgroundExists()).toBeFalsy();
     });
   });
 });

From c3acf27c8d7a7a70dbd50fd93faa2e26f8a3a087 Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Tue, 30 Jul 2024 14:25:55 +0300
Subject: [PATCH 13/14] Fix test

---
 src/components/hint/__tests__/index.spec.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/hint/__tests__/index.spec.tsx b/src/components/hint/__tests__/index.spec.tsx
index 341039ed84..90c018f09f 100644
--- a/src/components/hint/__tests__/index.spec.tsx
+++ b/src/components/hint/__tests__/index.spec.tsx
@@ -85,7 +85,7 @@ describe('Hint Screen component test', () => {
   describe('Test Hint content', () => {
     it('Hint should include message', async () => {
       const renderTree = render(<HintTestComponent showHint/>);
-      const message = renderTree.getByTestId(`${TEST_ID}.text`).props.children;
+      const message = renderTree.getByTestId(`${TEST_ID}.message.text`).props.children;
       expect(message).toBe('Hint message to hint things');
     });
   });

From 836b56fc31f5200308a6609bbd55467259d1cdb8 Mon Sep 17 00:00:00 2001
From: M-i-k-e-l <michaelle@wix.com>
Date: Tue, 30 Jul 2024 14:42:53 +0300
Subject: [PATCH 14/14] Fix tests and more

---
 jestSetup/jest-setup.js                      | 11 -----------
 src/components/hint/__tests__/index.spec.tsx |  2 +-
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/jestSetup/jest-setup.js b/jestSetup/jest-setup.js
index 7e867af1e4..15d9d4f2e5 100644
--- a/jestSetup/jest-setup.js
+++ b/jestSetup/jest-setup.js
@@ -1,5 +1,4 @@
 import {NativeModules, AccessibilityInfo, Animated} from 'react-native';
-import React from 'react';
 // ========= Mock Object.defineProperty to always allow overriding =========
 const originalDefineProperty = Object.defineProperty;
 Object.defineProperty = (obj, prop, desc) => {
@@ -16,16 +15,6 @@ Object.defineProperties = (obj, props) => {
   return obj;
 };
 // =========================================================================
-const OriginalReactComponent = React.Component;
-Object.defineProperty(React, 'Component', {
-  value: class MockedReactComponent extends OriginalReactComponent {
-    componentDidMount() {
-      super.componentDidMount?.();
-      this.props.onLayout?.({nativeEvent: {layout: {}}});
-      this.measureInWindow?.({nativeEvent: {layout: {}}});
-    }
-  }
-});
 
 global._UILIB_TESTING = true;
 
diff --git a/src/components/hint/__tests__/index.spec.tsx b/src/components/hint/__tests__/index.spec.tsx
index 90c018f09f..31d08aa2ed 100644
--- a/src/components/hint/__tests__/index.spec.tsx
+++ b/src/components/hint/__tests__/index.spec.tsx
@@ -1,6 +1,6 @@
 import React, {useRef} from 'react';
 import {waitFor, render} from '@testing-library/react-native';
-import {Hint, Colors, Button} from 'react-native-ui-lib';
+import {Hint, Colors, Button} from '../../../';
 import {HintDriver} from '../Hint.driver.new';
 
 const TEST_ID = 'Hint';