From e5783ea3f69c5cae128a28c8920373b2e303286c Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Mon, 4 Mar 2024 16:52:49 +0000
Subject: [PATCH] fix: wallet dropdown tests, remove unused props

---
 .../vega-wallet-connect-button.spec.tsx       | 64 +++++++++++++++----
 .../vega-wallet-connect-button.tsx            | 19 +-----
 2 files changed, 55 insertions(+), 28 deletions(-)

diff --git a/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.spec.tsx b/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.spec.tsx
index 876c34091..a3e235b87 100644
--- a/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.spec.tsx
+++ b/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.spec.tsx
@@ -1,21 +1,57 @@
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
 import { VegaWalletConnectButton } from './vega-wallet-connect-button';
-import { truncateByChars } from '@vegaprotocol/utils';
 import userEvent from '@testing-library/user-event';
 import {
   mockConfig,
   MockedWalletProvider,
 } from '@vegaprotocol/wallet-react/testing';
+import { MockedProvider, type MockedResponse } from '@apollo/react-testing';
+import {
+  PartyProfilesDocument,
+  type PartyProfilesQuery,
+} from './__generated__/PartyProfiles';
 
 jest.mock('../../lib/hooks/use-get-current-route-id', () => ({
   useGetCurrentRouteId: jest.fn().mockReturnValue('current-route-id'),
 }));
 
+const key = { publicKey: '123456__123456', name: 'test' };
+const key2 = { publicKey: 'abcdef__abcdef', name: 'test2' };
+const keys = [key, key2];
+const keyProfile = {
+  __typename: 'PartyProfile' as const,
+  partyId: key.publicKey,
+  alias: `${key.name} alias`,
+  metadata: [],
+};
+
 const renderComponent = (mockOnClick = jest.fn()) => {
+  const partyProfilesMock: MockedResponse<PartyProfilesQuery> = {
+    request: {
+      query: PartyProfilesDocument,
+      variables: { partyIds: keys.map((k) => k.publicKey) },
+    },
+    result: {
+      data: {
+        partiesProfilesConnection: {
+          __typename: 'PartiesProfilesConnection',
+          edges: [
+            {
+              __typename: 'PartyProfileEdge',
+              node: keyProfile,
+            },
+          ],
+        },
+      },
+    },
+  };
+
   return (
-    <MockedWalletProvider>
-      <VegaWalletConnectButton onClick={mockOnClick} />
-    </MockedWalletProvider>
+    <MockedProvider mocks={[partyProfilesMock]}>
+      <MockedWalletProvider>
+        <VegaWalletConnectButton onClick={mockOnClick} />
+      </MockedWalletProvider>
+    </MockedProvider>
   );
 };
 
@@ -43,10 +79,6 @@ describe('VegaWalletConnectButton', () => {
   });
 
   it('should open dropdown and refresh keys when connected', async () => {
-    const key = { publicKey: '123456__123456', name: 'test' };
-    const key2 = { publicKey: 'abcdef__abcdef', name: 'test2' };
-    const keys = [key, key2];
-
     mockConfig.store.setState({
       status: 'connected',
       keys,
@@ -61,14 +93,22 @@ describe('VegaWalletConnectButton', () => {
 
     expect(screen.queryByTestId('connect-vega-wallet')).not.toBeInTheDocument();
     const button = screen.getByTestId('manage-vega-wallet');
-    expect(button).toHaveTextContent(truncateByChars(key.publicKey));
+    expect(button).toHaveTextContent(key.name);
 
     fireEvent.click(button);
 
     expect(await screen.findByRole('menu')).toBeInTheDocument();
-    expect(await screen.findAllByRole('menuitemradio')).toHaveLength(
-      keys.length
+    const menuItems = await screen.findAllByRole('menuitemradio');
+    expect(menuItems).toHaveLength(keys.length);
+
+    expect(within(menuItems[0]).getByTestId('alias')).toHaveTextContent(
+      keyProfile.alias
     );
+
+    expect(within(menuItems[1]).getByTestId('alias')).toHaveTextContent(
+      'No alias'
+    );
+
     expect(refreshKeys).toHaveBeenCalled();
 
     fireEvent.click(screen.getByTestId(`key-${key2.publicKey}`));
diff --git a/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx b/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx
index 9af221e51..31f8b0358 100644
--- a/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx
+++ b/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx
@@ -156,27 +156,14 @@ const KeypairRadioGroup = ({
           (e) => e.node.partyId === pk.publicKey
         );
         return (
-          <KeypairItem
-            key={pk.publicKey}
-            pk={pk}
-            alias={profile?.node.alias}
-            active={pk.publicKey === pubKey}
-          />
+          <KeypairItem key={pk.publicKey} pk={pk} alias={profile?.node.alias} />
         );
       })}
     </TradingDropdownRadioGroup>
   );
 };
 
-const KeypairItem = ({
-  pk,
-  alias,
-  active,
-}: {
-  pk: Key;
-  alias: string | undefined;
-  active: boolean;
-}) => {
+const KeypairItem = ({ pk, alias }: { pk: Key; alias: string | undefined }) => {
   const t = useT();
   const [copied, setCopied] = useCopyTimeout();
   const setOpen = useProfileDialogStore((store) => store.setOpen);
@@ -207,7 +194,7 @@ const KeypairItem = ({
           data-testid={`key-${pk.publicKey}`}
         >
           <Tooltip description={t('Public facing key alias. Click to edit')}>
-            <button onClick={() => setOpen(pk.publicKey)}>
+            <button data-testid="alias" onClick={() => setOpen(pk.publicKey)}>
               {alias ? alias : t('No alias')}
             </button>
           </Tooltip>