diff --git a/suite-native/module-trading/src/components/general/PickerCloseButton.tsx b/suite-native/module-trading/src/components/general/PickerCloseButton.tsx deleted file mode 100644 index 3d2f2a3ca7c2..000000000000 --- a/suite-native/module-trading/src/components/general/PickerCloseButton.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { useMemo } from 'react'; - -import { LinearGradient } from 'expo-linear-gradient'; - -import { hexToRgba } from '@suite-common/suite-utils'; -import { Box, Button, ButtonProps, VStack } from '@suite-native/atoms'; -import { Translation } from '@suite-native/intl'; -import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; - -export type PickerCloseButtonProps = Omit< - ButtonProps, - 'children' | 'colorScheme' | 'viewLeft' | 'viewRight' ->; - -export const PICKER_BUTTON_HEIGHT = 52 as const; - -const GRADIENT_START = { x: 0.5, y: 0.5 } as const; -const GRADIENT_END = { x: 0.5, y: 0 } as const; - -const spacerStyle = prepareNativeStyle(({ colors, spacings }) => ({ - backgroundColor: colors.backgroundSurfaceElevation0, - height: spacings.sp32, -})); - -export const PickerCloseButton = (props: PickerCloseButtonProps) => { - const { - utils: { - colors: { backgroundSurfaceElevation0 }, - }, - applyStyle, - } = useNativeStyles(); - - const gradientColors = useMemo<[string, string]>( - () => [backgroundSurfaceElevation0, hexToRgba(backgroundSurfaceElevation0, 0.1)], - [backgroundSurfaceElevation0], - ); - - return ( - - - - - - - - - ); -}; diff --git a/suite-native/module-trading/src/components/general/SheetHeaderTitle.tsx b/suite-native/module-trading/src/components/general/SheetHeaderTitle.tsx index f4d1eb4a1c3e..276952aee2bf 100644 --- 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) => ( @@ -26,7 +28,7 @@ export const SheetHeaderTitle = ({ colorScheme="tertiaryElevation0" size="medium" accessibilityRole="button" - accessibilityLabel="Close" + accessibilityLabel={leftButtonA11yLabel} /> )} diff --git a/suite-native/module-trading/src/components/general/TradeableAssetsSheet/TradeableAssetsSheetHeader.tsx b/suite-native/module-trading/src/components/general/TradeableAssetsSheet/TradeableAssetsSheetHeader.tsx index d3f616fcf316..514808390306 100644 --- a/suite-native/module-trading/src/components/general/TradeableAssetsSheet/TradeableAssetsSheetHeader.tsx +++ b/suite-native/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)} > - + diff --git a/suite-native/module-trading/src/components/general/TradeableAssetsSheet/__tests__/TradeableAssetsSheetHeader.comp.test.tsx b/suite-native/module-trading/src/components/general/TradeableAssetsSheet/__tests__/TradeableAssetsSheetHeader.comp.test.tsx index 793d05be4101..b7657f0b86ab 100644 --- a/suite-native/module-trading/src/components/general/TradeableAssetsSheet/__tests__/TradeableAssetsSheetHeader.comp.test.tsx +++ b/suite-native/module-trading/src/components/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(); + it('should display "Coins" and do not display tabs by default', () => { - const { getByText, queryByText } = render(); + 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( - , - ); + 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(); + const { queryByText } = renderComponent(); expect(queryByText('Cancel')).toBeNull(); }); it('should display cancel button after focusing search input', () => { - const { getByPlaceholderText, getByText } = render(); + 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 index 7f300814a22b..36dc030b6903 100644 --- 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(); - await waitFor(() => expect(getByText('Trading placeholder')).toBeDefined()); + const { getAllByText } = renderWithStore(); + await waitFor(() => expect(getAllByText('Buy').length).toBe(2)); }); });