diff --git a/tests/ui/FloatingActionButtonTest.tsx b/tests/ui/FloatingActionButtonTest.tsx index ed32b967bbb5..3cc89dd3e600 100644 --- a/tests/ui/FloatingActionButtonTest.tsx +++ b/tests/ui/FloatingActionButtonTest.tsx @@ -2,6 +2,7 @@ import {NavigationContainer} from '@react-navigation/native'; import {cleanup, fireEvent, render, screen} from '@testing-library/react-native'; import React from 'react'; import FloatingActionButton from '@components/FloatingActionButton'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import colors from '@styles/theme/colors'; import CONST from '@src/CONST'; @@ -20,7 +21,8 @@ jest.mock('@components/ProductTrainingContext', () => ({ })); // useResponsiveLayout determines LHB visibility. Mock a wide layout to keep behaviour deterministic. -jest.mock('@hooks/useResponsiveLayout', () => (): {shouldUseNarrowLayout: boolean} => ({shouldUseNarrowLayout: false})); +jest.mock('@hooks/useResponsiveLayout', () => jest.fn()); +const mockedUseResponsiveLayout = useResponsiveLayout as jest.MockedFunction; // Mock useIsHomeRouteActive to avoid navigation state issues jest.mock('@navigation/helpers/useIsHomeRouteActive', () => (): boolean => false); @@ -51,6 +53,10 @@ describe('FloatingActionButton hover', () => { jest.clearAllMocks(); }); + beforeAll(() => { + mockedUseResponsiveLayout.mockReturnValue({...CONST.NAVIGATION_TESTS.DEFAULT_USE_RESPONSIVE_LAYOUT_VALUE, shouldUseNarrowLayout: false}); + }); + it('changes background color on hover', () => { renderFAB(); const fab = screen.getByTestId('floating-action-button'); @@ -69,4 +75,23 @@ describe('FloatingActionButton hover', () => { fireEvent(fab, 'hoverOut'); expect(animatedContainer).not.toHaveStyle({backgroundColor: colors.productDark500}); }); + + it('should render animated button if LHB is visible', () => { + renderFAB(); + + // Get the animated container by testID + const animatedContainer = screen.getByTestId('fab-animated-container'); + + expect(animatedContainer).toBeVisible(); + }); + + it('should render regular button if LHB is not visible', () => { + mockedUseResponsiveLayout.mockReturnValue({...CONST.NAVIGATION_TESTS.DEFAULT_USE_RESPONSIVE_LAYOUT_VALUE, shouldUseNarrowLayout: true}); + renderFAB(); + + // Get the container by testID + const container = screen.getByTestId('fab-container'); + + expect(container).toBeVisible(); + }); }); diff --git a/tests/ui/FloatingReceiptButtonTest.tsx b/tests/ui/FloatingReceiptButtonTest.tsx new file mode 100644 index 000000000000..af24e8bc22f9 --- /dev/null +++ b/tests/ui/FloatingReceiptButtonTest.tsx @@ -0,0 +1,47 @@ +import {NavigationContainer} from '@react-navigation/native'; +import {cleanup, fireEvent, render, screen} from '@testing-library/react-native'; +import React from 'react'; +import FloatingReceiptButton from '@components/FloatingReceiptButton'; +import colors from '@styles/theme/colors'; +import CONST from '@src/CONST'; + +describe('FloatingReceiptButton hover', () => { + const onPress = jest.fn(); + + const renderFAB = () => + render( + + + , + ); + + afterEach(() => { + cleanup(); + jest.clearAllMocks(); + }); + + it('changes background color on hover', () => { + renderFAB(); + + // Get the receipt button by testID + const frb = screen.getByTestId('floating-receipt-button'); + + // Get the container by testID + const container = screen.getByTestId('floating-receipt-button-container'); + + // Before hover, should not have greenHover background + expect(container).not.toHaveStyle({backgroundColor: colors.greenHover}); + + // Test hover in + fireEvent(frb, 'hoverIn'); + expect(container).toHaveStyle({backgroundColor: colors.greenHover}); + + // Test hover out + fireEvent(frb, 'hoverOut'); + expect(container).not.toHaveStyle({backgroundColor: colors.greenHover}); + }); +});