fixup! feat(suite-native): Mobile Trade: Token picker modal visual stub

trezor · Feb 6, 2025 · 64dcba0 · 64dcba0
1 parent 0b34677
commit 64dcba0
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 61 deletions.
diff --git a/suite-native/module-trading/src/components/general/PickerCloseButton.tsx b/suite-native/module-trading/src/components/general/PickerCloseButton.tsx
diff --git a/suite-native/module-trading/src/components/general/SheetHeaderTitle.tsx b/suite-native/module-trading/src/components/general/SheetHeaderTitle.tsx
@@ -10,11 +10,13 @@ export type SheetHeaderTitleProps = {
 } & RequireAllOrNone<{
     onLeftButtonPress: () => void;
     leftButtonIcon: IconName;
+    leftButtonA11yLabel: string;
 }>;
 
 export const SheetHeaderTitle = ({
     onLeftButtonPress,
     leftButtonIcon,
+    leftButtonA11yLabel,
     children,
 }: SheetHeaderTitleProps) => (
     <HStack alignItems="center" justifyContent="space-between">
@@ -26,7 +28,7 @@ export const SheetHeaderTitle = ({
                     colorScheme="tertiaryElevation0"
                     size="medium"
                     accessibilityRole="button"
-                    accessibilityLabel="Close"
+                    accessibilityLabel={leftButtonA11yLabel}
                 />
             </Box>
         )}

diff --git a/...module-trading/src/components/general/TradeableAssetsSheet/TradeableAssetsSheetHeader.tsx b/...module-trading/src/components/general/TradeableAssetsSheet/TradeableAssetsSheetHeader.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated';
 
 import { BottomSheetGrabber, VStack } from '@suite-native/atoms';
-import { Translation } from '@suite-native/intl';
+import { Translation, useTranslate } from '@suite-native/intl';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
 import { SheetHeaderTitle } from '../SheetHeaderTitle';
@@ -24,6 +24,7 @@ const wrapperStyle = prepareNativeStyle<{}>(({ spacings }) => ({
 
 export const TradeableAssetsSheetHeader = ({ onClose }: TradeableAssetsSheetHeaderProps) => {
     const { applyStyle } = useNativeStyles();
+    const { translate } = useTranslate();
 
     const [isFilterActive, setIsFilterActive] = useState(false);
     const [filterValue, setFilterValue] = useState('');
@@ -37,7 +38,11 @@ export const TradeableAssetsSheetHeader = ({ onClose }: TradeableAssetsSheetHead
                         entering={FadeIn.duration(FOCUS_ANIMATION_DURATION)}
                         exiting={FadeOut.duration(FOCUS_ANIMATION_DURATION)}
                     >
-                        <SheetHeaderTitle leftButtonIcon="x" onLeftButtonPress={onClose}>
+                        <SheetHeaderTitle
+                            leftButtonIcon="x"
+                            onLeftButtonPress={onClose}
+                            leftButtonA11yLabel={translate('generic.buttons.close')}
+                        >
                             <Translation id="moduleTrading.tradeableAssetsSheet.title" />
                         </SheetHeaderTitle>
                     </Animated.View>

diff --git a/...omponents/general/TradeableAssetsSheet/__tests__/TradeableAssetsSheetHeader.comp.test.tsx b/...omponents/general/TradeableAssetsSheet/__tests__/TradeableAssetsSheetHeader.comp.test.tsx
@@ -3,17 +3,18 @@ import { fireEvent, render } from '@suite-native/test-utils';
 import { TradeableAssetsSheetHeader } from '../TradeableAssetsSheetHeader';
 
 describe('TradeableAssetsSheetHeader', () => {
+    const renderComponent = (onClose = jest.fn()) =>
+        render(<TradeableAssetsSheetHeader onClose={onClose} />);
+
     it('should display "Coins" and do not display tabs by default', () => {
-        const { getByText, queryByText } = render(<TradeableAssetsSheetHeader />);
+        const { getByText, queryByText } = renderComponent();
 
         expect(getByText('Coins')).toBeDefined();
         expect(queryByText('All')).toBeNull();
     });
 
     it('should display tabs after focusing search input', () => {
-        const { getByPlaceholderText, getByText, queryByText } = render(
-            <TradeableAssetsSheetHeader />,
-        );
+        const { getByPlaceholderText, getByText, queryByText } = renderComponent();
 
         fireEvent(getByPlaceholderText('Search'), 'focus');
 
@@ -22,16 +23,25 @@ describe('TradeableAssetsSheetHeader', () => {
     });
 
     it('should not display cancel button by default', () => {
-        const { queryByText } = render(<TradeableAssetsSheetHeader />);
+        const { queryByText } = renderComponent();
 
         expect(queryByText('Cancel')).toBeNull();
     });
 
     it('should display cancel button after focusing search input', () => {
-        const { getByPlaceholderText, getByText } = render(<TradeableAssetsSheetHeader />);
+        const { getByPlaceholderText, getByText } = renderComponent();
 
         fireEvent(getByPlaceholderText('Search'), 'focus');
 
         expect(getByText('Cancel')).toBeDefined();
     });
+
+    it('should call onClose when close button is pressed ', () => {
+        const onClose = jest.fn();
+        const { getByLabelText } = renderComponent(onClose);
+
+        fireEvent.press(getByLabelText('Close'));
+
+        expect(onClose).toHaveBeenCalled();
+    });
 });
diff --git a/suite-native/module-trading/src/navigation/__tests__/TradingStackNavigator.comp.test.tsx b/suite-native/module-trading/src/navigation/__tests__/TradingStackNavigator.comp.test.tsx
@@ -4,7 +4,7 @@ import { TradingStackNavigator } from '../TradingStackNavigator';
 
 describe('TradingStackNavigator', () => {
     it('should render', async () => {
-        const { getByText } = renderWithStore(<TradingStackNavigator />);
-        await waitFor(() => expect(getByText('Trading placeholder')).toBeDefined());
+        const { getAllByText } = renderWithStore(<TradingStackNavigator />);
+        await waitFor(() => expect(getAllByText('Buy').length).toBe(2));
     });
 });