diff --git a/app/components/Views/Snaps/components/KeyringAccountListItem/KeyringAccountListItem.constants.ts b/app/components/Views/Snaps/components/KeyringAccountListItem/KeyringAccountListItem.constants.ts index 462b2aafc211..bd27e3902d6f 100644 --- a/app/components/Views/Snaps/components/KeyringAccountListItem/KeyringAccountListItem.constants.ts +++ b/app/components/Views/Snaps/components/KeyringAccountListItem/KeyringAccountListItem.constants.ts @@ -1,3 +1,4 @@ ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps) export const KEYRING_ACCOUNT_LIST_ITEM = 'keyring-account-list-item'; +export const KEYRING_ACCOUNT_LIST_ITEM_BUTTON = 'keyring-account-list-item-button'; ///: END:ONLY_INCLUDE_IF diff --git a/app/components/Views/Snaps/components/KeyringAccountListItem/KeyringAccountListItem.tsx b/app/components/Views/Snaps/components/KeyringAccountListItem/KeyringAccountListItem.tsx index aa7701c1d09c..2b4973190c19 100644 --- a/app/components/Views/Snaps/components/KeyringAccountListItem/KeyringAccountListItem.tsx +++ b/app/components/Views/Snaps/components/KeyringAccountListItem/KeyringAccountListItem.tsx @@ -17,16 +17,16 @@ import Text, { TextVariant, } from '../../../../../component-library/components/Texts/Text'; import { strings } from '../../../../../../locales/i18n'; -import { KEYRING_ACCOUNT_LIST_ITEM } from './KeyringAccountListItem.constants'; +import { KEYRING_ACCOUNT_LIST_ITEM, KEYRING_ACCOUNT_LIST_ITEM_BUTTON } from './KeyringAccountListItem.constants'; interface KeyringAccountListItemProps { account: InternalAccount; snapUrl: string; } -export default function KeyringAccountListItem({ +const KeyringAccountListItem = ({ account, snapUrl, -}: KeyringAccountListItemProps) { +}: KeyringAccountListItemProps) => { const { styles } = useStyles(stylesheet, {}); return ( @@ -50,6 +50,7 @@ export default function KeyringAccountListItem({ ); } + +export default React.memo(KeyringAccountListItem); ///: END:ONLY_INCLUDE_IF diff --git a/app/components/Views/Snaps/components/KeyringAccountListItem/test/KeyringAccountListItem.test.tsx b/app/components/Views/Snaps/components/KeyringAccountListItem/test/KeyringAccountListItem.test.tsx new file mode 100644 index 000000000000..272cef798e2a --- /dev/null +++ b/app/components/Views/Snaps/components/KeyringAccountListItem/test/KeyringAccountListItem.test.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { render, fireEvent } from '@testing-library/react-native'; +import KeyringAccountListItem from '../KeyringAccountListItem'; +import { Linking } from 'react-native'; +import { toChecksumHexAddress } from '@metamask/controller-utils'; +import { KEYRING_ACCOUNT_LIST_ITEM, KEYRING_ACCOUNT_LIST_ITEM_BUTTON } from '../KeyringAccountListItem.constants'; +import { MOCK_ADDRESS_1, createMockSnapInternalAccount } from '../../../../../../util/test/accountsControllerTestUtils'; + +jest.mock('react-native/Libraries/Linking/Linking', () => ({ + openURL: jest.fn(), +})); + +describe('KeyringAccountListItem', () => { + + const mockInternalAccount = createMockSnapInternalAccount( + MOCK_ADDRESS_1, + 'Snap Account 1', + ); + + const mockSnapUrl = `https://etherscan.io/address/${MOCK_ADDRESS_1.toLowerCase()}`; + + it('renders correctly', () => { + const { getByTestId, getByText } = render( + , + ); + + expect(getByTestId(KEYRING_ACCOUNT_LIST_ITEM)).toBeTruthy(); + expect(getByText('Snap Account 1')).toBeTruthy(); + expect(getByText(toChecksumHexAddress(MOCK_ADDRESS_1))).toBeTruthy(); + }); + + it('opens snap URL when export button is pressed', () => { + const { getByTestId } = render( + , + ); + + const exportButton = getByTestId(KEYRING_ACCOUNT_LIST_ITEM_BUTTON); + fireEvent.press(exportButton); + + expect(Linking.openURL).toHaveBeenCalledWith(mockSnapUrl); + }); +});