chore: adding tests fixing lint errors

Author: georgewrmarshall

ui/components/multichain-accounts/add-wallet-modal/add-wallet-modal.test.tsx

@@ -3,11 +3,28 @@ import { screen, fireEvent } from '@testing-library/react';
 import { renderWithProvider } from '../../../../test/jest';
 import { AddWalletModal } from './add-wallet-modal';
 
+const mockHistoryPush = jest.fn();
+const mockOpenExtensionInBrowser = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    push: mockHistoryPush,
+  }),
+}));
+
 describe('AddWalletModal', () => {
   const mockOnClose = jest.fn();
 
   beforeEach(() => {
     mockOnClose.mockClear();
+    mockHistoryPush.mockClear();
+    mockOpenExtensionInBrowser.mockClear();
+
+    // @ts-expect-error mocking platform
+    global.platform = {
+      openExtensionInBrowser: mockOpenExtensionInBrowser,
+    };
   });
 
   it('renders the modal when isOpen is true', () => {
@@ -24,12 +41,47 @@ describe('AddWalletModal', () => {
     expect(screen.getByText('Add a hardware wallet')).toBeInTheDocument();
   });
 
-  it('calls onClose when a wallet option is clicked', () => {
+  it('calls onClose and navigates when import wallet option is clicked', () => {
     renderWithProvider(<AddWalletModal isOpen={true} onClose={mockOnClose} />);
 
     fireEvent.click(screen.getByText('Import a wallet'));
 
     expect(mockOnClose).toHaveBeenCalledTimes(1);
+    expect(mockHistoryPush).toHaveBeenCalledWith('/import-srp');
+  });
+
+  it('calls onClose and navigates when import account option is clicked', () => {
+    renderWithProvider(<AddWalletModal isOpen={true} onClose={mockOnClose} />);
+
+    fireEvent.click(screen.getByText('Import an account'));
+
+    expect(mockOnClose).toHaveBeenCalledTimes(1);
+    expect(mockHistoryPush).toHaveBeenCalledWith('/new-account');
+  });
+
+  it('calls onClose and opens hardware wallet route in expanded view', () => {
+    renderWithProvider(<AddWalletModal isOpen={true} onClose={mockOnClose} />);
+
+    fireEvent.click(screen.getByText('Add a hardware wallet'));
+
+    expect(mockOnClose).toHaveBeenCalledTimes(1);
+    expect(mockOpenExtensionInBrowser).toHaveBeenCalledWith(
+      '/new-account/connect',
+    );
+    expect(mockHistoryPush).not.toHaveBeenCalled();
+  });
+
+  it('falls back to history.push when openExtensionInBrowser is not available for hardware wallet', () => {
+    // @ts-expect-error mocking platform
+    global.platform = {};
+
+    renderWithProvider(<AddWalletModal isOpen={true} onClose={mockOnClose} />);
+
+    fireEvent.click(screen.getByText('Add a hardware wallet'));
+
+    expect(mockOnClose).toHaveBeenCalledTimes(1);
+    expect(mockOpenExtensionInBrowser).not.toHaveBeenCalled();
+    expect(mockHistoryPush).toHaveBeenCalledWith('/new-account/connect');
   });
 
   it('does not render when isOpen is false', () => {

ui/components/multichain-accounts/add-wallet-modal/add-wallet-modal.tsx

@@ -78,7 +78,17 @@ export const AddWalletModal: React.FC<AddWalletModalProps> = ({
 
   const handleOptionClick = (option: WalletOption) => {
     onClose?.();
-    history.push(option.route);
+    
+    // Hardware wallet connections require expanded view
+    if (option.id === 'hardware-wallet') {
+      if (global.platform.openExtensionInBrowser) {
+        global.platform.openExtensionInBrowser(option.route);
+      } else {
+        history.push(option.route);
+      }
+    } else {
+      history.push(option.route);
+    }
   };
 
   return (

ui/pages/multichain-accounts/account-list/account-list.test.tsx

@@ -7,17 +7,21 @@ import configureStore from '../../../store/store';
 import { AccountList } from './account-list';
 
 const mockHistoryGoBack = jest.fn();
+const mockHistoryPush = jest.fn();
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useHistory: () => ({
     goBack: mockHistoryGoBack,
+    push: mockHistoryPush,
   }),
 }));
 
 describe('AccountList', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    // Disable reselect dev mode checks for testing
+    process.env.NODE_ENV = 'production';
   });
 
   const renderComponent = () => {
@@ -68,6 +72,10 @@ describe('AccountList', () => {
         current: {
           back: 'Back',
           accounts: 'Accounts',
+          addWallet: 'Add wallet',
+          importAWallet: 'Import a wallet',
+          importAnAccount: 'Import an account',
+          addAHardwareWallet: 'Add a hardware wallet',
         },
       },
     });
@@ -100,4 +108,19 @@ describe('AccountList', () => {
 
     expect(mockHistoryGoBack).toHaveBeenCalledTimes(1);
   });
+
+  it('opens the add wallet modal when the add wallet button is clicked', () => {
+    renderComponent();
+
+    // First, let's verify the button is rendered by looking for it with role
+    const addWalletButton = screen.getByRole('button', { name: 'Add wallet' });
+    expect(addWalletButton).toBeInTheDocument();
+
+    fireEvent.click(addWalletButton);
+
+    // The modal renders with portal, so we need to look for modal content
+    expect(screen.getByText('Import a wallet')).toBeInTheDocument();
+    expect(screen.getByText('Import an account')).toBeInTheDocument();
+    expect(screen.getByText('Add a hardware wallet')).toBeInTheDocument();
+  });
 });

ui/pages/multichain-accounts/account-list/account-list.tsx

@@ -11,19 +11,14 @@ import {
   ButtonIcon,
   ButtonIconSize,
   IconName,
-  Text,
 } from '@metamask/design-system-react';
 import {
   Content,
   Footer,
   Header,
   Page,
 } from '../../../components/multichain/pages/page';
-import {
-  Display,
-  FlexDirection,
-  TextVariant,
-} from '../../../helpers/constants/design-system';
+import { TextVariant } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { MultichainAccountList } from '../../../components/multichain-accounts/multichain-account-list';
 import { getAccountTree } from '../../../selectors/multichain-accounts/account-tree';