Merge pull request #55216 from Shahidullah-Muffakir/fix/55032

Add tooltip for the inactive tab in the create expense page when the tab title is hidden

Author: NikkiWines

src/components/TabSelector/TabSelectorItem.tsx

@@ -1,6 +1,7 @@
 import React, {useState} from 'react';
 import {Animated} from 'react-native';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import Tooltip from '@components/Tooltip';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type IconAsset from '@src/types/utils/IconAsset';
@@ -49,29 +50,34 @@ function TabSelectorItem({
     const [isHovered, setIsHovered] = useState(false);
 
     return (
-        <AnimatedPressableWithFeedback
-            accessibilityLabel={title}
-            style={[styles.tabSelectorButton, styles.tabBackground(isHovered, isActive, backgroundColor), styles.userSelectNone]}
-            wrapperStyle={[styles.flexGrow1]}
-            onPress={onPress}
-            onHoverIn={() => setIsHovered(true)}
-            onHoverOut={() => setIsHovered(false)}
-            role={CONST.ROLE.BUTTON}
-            dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
+        <Tooltip
+            shouldRender={!shouldShowLabelWhenInactive && !isActive}
+            text={title}
         >
-            <TabIcon
-                icon={icon}
-                activeOpacity={styles.tabOpacity(isHovered, isActive, activeOpacity, inactiveOpacity).opacity}
-                inactiveOpacity={styles.tabOpacity(isHovered, isActive, inactiveOpacity, activeOpacity).opacity}
-            />
-            {(shouldShowLabelWhenInactive || isActive) && (
-                <TabLabel
-                    title={title}
+            <AnimatedPressableWithFeedback
+                accessibilityLabel={title}
+                style={[styles.tabSelectorButton, styles.tabBackground(isHovered, isActive, backgroundColor), styles.userSelectNone]}
+                wrapperStyle={[styles.flexGrow1]}
+                onPress={onPress}
+                onHoverIn={() => setIsHovered(true)}
+                onHoverOut={() => setIsHovered(false)}
+                role={CONST.ROLE.BUTTON}
+                dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
+            >
+                <TabIcon
+                    icon={icon}
                     activeOpacity={styles.tabOpacity(isHovered, isActive, activeOpacity, inactiveOpacity).opacity}
                     inactiveOpacity={styles.tabOpacity(isHovered, isActive, inactiveOpacity, activeOpacity).opacity}
                 />
-            )}
-        </AnimatedPressableWithFeedback>
+                {(shouldShowLabelWhenInactive || isActive) && (
+                    <TabLabel
+                        title={title}
+                        activeOpacity={styles.tabOpacity(isHovered, isActive, activeOpacity, inactiveOpacity).opacity}
+                        inactiveOpacity={styles.tabOpacity(isHovered, isActive, inactiveOpacity, activeOpacity).opacity}
+                    />
+                )}
+            </AnimatedPressableWithFeedback>
+        </Tooltip>
     );
 }
 

tests/ui/components/TabSelectorItem.tsx

@@ -0,0 +1,77 @@
+import {render} from '@testing-library/react-native';
+import React from 'react';
+import TabSelectorItem from '@components/TabSelector/TabSelectorItem';
+import Tooltip from '@components/Tooltip';
+
+// Mock the Tooltip component since it uses portals which aren't supported in RNTL
+jest.mock('@components/Tooltip');
+
+describe('TabSelectorItem Component', () => {
+    const title = 'Test Tab';
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should show tooltip for inactive tab with hidden label', () => {
+        // Given an inactive tab with a hidden label
+        render(
+            <TabSelectorItem
+                title={title}
+                shouldShowLabelWhenInactive={false}
+                isActive={false}
+            />,
+        );
+
+        // Then the tooltip should be rendered with correct content because the label is hidden
+        expect(Tooltip).toHaveBeenCalledWith(
+            expect.objectContaining({
+                shouldRender: true,
+                text: title,
+            }),
+            expect.any(Object),
+        );
+    });
+
+    it('should not show tooltip for active tab', () => {
+        // Given an active tab
+        render(
+            <TabSelectorItem
+                title={title}
+                shouldShowLabelWhenInactive={false}
+                isActive
+            />,
+        );
+
+        // When hovering over the tab button
+        // Then the tooltip should not render because the tab is active
+        expect(Tooltip).toHaveBeenCalledWith(
+            expect.objectContaining({
+                shouldRender: false,
+                text: title,
+            }),
+            expect.any(Object),
+        );
+    });
+
+    it('should not show tooltip when label is visible', () => {
+        // Given an inactive tab with visible label
+        render(
+            <TabSelectorItem
+                title={title}
+                shouldShowLabelWhenInactive
+                isActive={false}
+            />,
+        );
+
+        // When hovering over the tab button
+        // Then the tooltip should not render because the label is already visible
+        expect(Tooltip).toHaveBeenCalledWith(
+            expect.objectContaining({
+                shouldRender: false,
+                text: title,
+            }),
+            expect.any(Object),
+        );
+    });
+});