From c441be80db8ca4ad684de7cf8a7dea606a939112 Mon Sep 17 00:00:00 2001
From: Anastasios <anastas3993@gmail.com>
Date: Mon, 11 Nov 2024 14:06:20 +0400
Subject: [PATCH] feat: add bns v2 names integration test

---
 .../stacks/stacks-crypto-assets.tsx           | 14 ++++++++--
 src/app/features/container/container.tsx      |  2 +-
 .../components/account-list-unavailable.tsx   |  0
 .../components/switch-account-list-item.tsx   | 11 +++++++-
 .../switch-account-sheet.tsx}                 |  0
 .../transaction-error/error-messages.tsx      |  2 +-
 tests/mocks/mock-stacks-bns.ts                | 14 ++++++++++
 tests/selectors/account.selectors.ts          |  7 +++++
 tests/specs/bns-names/bns-names.spec.ts       | 28 +++++++++++++++++++
 9 files changed, 73 insertions(+), 5 deletions(-)
 rename src/app/features/dialogs/{switch-account-dialog => switch-account-sheet}/components/account-list-unavailable.tsx (100%)
 rename src/app/features/dialogs/{switch-account-dialog => switch-account-sheet}/components/switch-account-list-item.tsx (87%)
 rename src/app/features/dialogs/{switch-account-dialog/switch-account-dialog.tsx => switch-account-sheet/switch-account-sheet.tsx} (100%)
 create mode 100644 tests/selectors/account.selectors.ts
 create mode 100644 tests/specs/bns-names/bns-names.spec.ts

diff --git a/src/app/features/collectibles/components/stacks/stacks-crypto-assets.tsx b/src/app/features/collectibles/components/stacks/stacks-crypto-assets.tsx
index 8c8d6cbc1ec..d57e072d22f 100644
--- a/src/app/features/collectibles/components/stacks/stacks-crypto-assets.tsx
+++ b/src/app/features/collectibles/components/stacks/stacks-crypto-assets.tsx
@@ -16,7 +16,7 @@ interface StacksCryptoAssetsProps {
   address: string;
 }
 export function StacksCryptoAssets({ address }: StacksCryptoAssetsProps) {
-  const names = useGetBnsNamesOwnedByAddressQuery(address).data?.names;
+  const bnsNames = useGetBnsNamesOwnedByAddressQuery(address).data?.names;
 
   const stacksNftsMetadataResp = useStacksNonFungibleTokensMetadata(address);
 
@@ -29,13 +29,23 @@ export function StacksCryptoAssets({ address }: StacksCryptoAssetsProps) {
     }
   }, [stacksNftsMetadataResp.length]);
 
+  function isBnsV2Collectible(name: string) {
+    return bnsNames?.includes(name);
+  }
+
   return (
     <>
-      {(names ?? []).map(name => (
+      {(bnsNames ?? []).map(name => (
         <StacksBnsName bnsName={parseIfValidPunycode(name)} key={name} />
       ))}
+
       {stacksNftsMetadataResp.map((nft, i) => {
         if (!nft || !nft.metadata) return null;
+
+        if (isBnsV2Collectible(nft.metadata?.name ?? '')) {
+          return null;
+        }
+
         return <StacksNonFungibleTokens key={i} metadata={nft.metadata} />;
       })}
     </>
diff --git a/src/app/features/container/container.tsx b/src/app/features/container/container.tsx
index bdc0cfbeca8..bc819ce393a 100644
--- a/src/app/features/container/container.tsx
+++ b/src/app/features/container/container.tsx
@@ -11,7 +11,7 @@ import {
 } from '@app/common/app-analytics';
 import { ContainerLayout } from '@app/components/layout';
 import { LoadingSpinner } from '@app/components/loading-spinner';
-import { SwitchAccountSheet } from '@app/features/dialogs/switch-account-dialog/switch-account-dialog';
+import { SwitchAccountSheet } from '@app/features/dialogs/switch-account-sheet/switch-account-sheet';
 import { InAppMessages } from '@app/features/hiro-messages/in-app-messages';
 import { useOnChangeAccount } from '@app/routes/hooks/use-on-change-account';
 import { useOnSignOut } from '@app/routes/hooks/use-on-sign-out';
diff --git a/src/app/features/dialogs/switch-account-dialog/components/account-list-unavailable.tsx b/src/app/features/dialogs/switch-account-sheet/components/account-list-unavailable.tsx
similarity index 100%
rename from src/app/features/dialogs/switch-account-dialog/components/account-list-unavailable.tsx
rename to src/app/features/dialogs/switch-account-sheet/components/account-list-unavailable.tsx
diff --git a/src/app/features/dialogs/switch-account-dialog/components/switch-account-list-item.tsx b/src/app/features/dialogs/switch-account-sheet/components/switch-account-list-item.tsx
similarity index 87%
rename from src/app/features/dialogs/switch-account-dialog/components/switch-account-list-item.tsx
rename to src/app/features/dialogs/switch-account-sheet/components/switch-account-list-item.tsx
index c04ab6a1814..3057cdae7b3 100644
--- a/src/app/features/dialogs/switch-account-dialog/components/switch-account-list-item.tsx
+++ b/src/app/features/dialogs/switch-account-sheet/components/switch-account-list-item.tsx
@@ -1,5 +1,7 @@
 import { memo } from 'react';
 
+import { getSwitchAccountSheetAccountNameSelector } from '@tests/selectors/account.selectors';
+
 import { useAccountDisplayName } from '@app/common/hooks/account/use-account-names';
 import { useSwitchAccount } from '@app/common/hooks/account/use-switch-account';
 import { useLoading } from '@app/common/hooks/use-loading';
@@ -43,7 +45,14 @@ export const SwitchAccountListItem = memo(
     return (
       <AccountListItemLayout
         accountAddresses={<AcccountAddresses index={index} />}
-        accountName={<AccountNameLayout isLoading={isFetchingBnsName}>{name}</AccountNameLayout>}
+        accountName={
+          <AccountNameLayout
+            data-testid={getSwitchAccountSheetAccountNameSelector(index)}
+            isLoading={isFetchingBnsName}
+          >
+            {name}
+          </AccountNameLayout>
+        }
         avatar={
           <AccountAvatarItem
             index={index}
diff --git a/src/app/features/dialogs/switch-account-dialog/switch-account-dialog.tsx b/src/app/features/dialogs/switch-account-sheet/switch-account-sheet.tsx
similarity index 100%
rename from src/app/features/dialogs/switch-account-dialog/switch-account-dialog.tsx
rename to src/app/features/dialogs/switch-account-sheet/switch-account-sheet.tsx
diff --git a/src/app/features/stacks-transaction-request/transaction-error/error-messages.tsx b/src/app/features/stacks-transaction-request/transaction-error/error-messages.tsx
index ae884899866..4d72255639e 100644
--- a/src/app/features/stacks-transaction-request/transaction-error/error-messages.tsx
+++ b/src/app/features/stacks-transaction-request/transaction-error/error-messages.tsx
@@ -14,7 +14,7 @@ import { analytics } from '@shared/utils/analytics';
 
 import { useScrollLock } from '@app/common/hooks/use-scroll-lock';
 import { stacksValue } from '@app/common/stacks-utils';
-import { SwitchAccountSheet } from '@app/features/dialogs/switch-account-dialog/switch-account-dialog';
+import { SwitchAccountSheet } from '@app/features/dialogs/switch-account-sheet/switch-account-sheet';
 import { ErrorMessage } from '@app/features/stacks-transaction-request/transaction-error/error-message';
 import { useCurrentStacksAccountAddress } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';
diff --git a/tests/mocks/mock-stacks-bns.ts b/tests/mocks/mock-stacks-bns.ts
index 9f7daeeb513..2b559b7bb86 100644
--- a/tests/mocks/mock-stacks-bns.ts
+++ b/tests/mocks/mock-stacks-bns.ts
@@ -11,3 +11,17 @@ export async function mockMainnetTestAccountStacksBnsNameRequest(page: Page) {
     })
   );
 }
+
+const mockedBnsV2NamesResponse = {
+  total: 1,
+  current_burn_block: 869830,
+  limit: 50,
+  offset: 0,
+  names: [{ full_name: 'leather.btc', name_string: 'leather', namespace_string: 'btc' }],
+};
+
+export async function mockBnsV2NamesRequest(page: Page) {
+  await page.route(`**/api.bnsv2.com/names/address/${TEST_ACCOUNT_1_STX_ADDRESS}/valid`, route =>
+    route.fulfill({ json: mockedBnsV2NamesResponse })
+  );
+}
diff --git a/tests/selectors/account.selectors.ts b/tests/selectors/account.selectors.ts
new file mode 100644
index 00000000000..eac3139a318
--- /dev/null
+++ b/tests/selectors/account.selectors.ts
@@ -0,0 +1,7 @@
+export function getSwitchAccountSheetAccountNameSelector(index: number) {
+  return AccountSelectors.SwitchAccountSheetAccountName.replace('{index}', index.toString());
+}
+
+export const AccountSelectors = {
+  SwitchAccountSheetAccountName: 'switch-account-sheet-account-name-{index}',
+};
diff --git a/tests/specs/bns-names/bns-names.spec.ts b/tests/specs/bns-names/bns-names.spec.ts
new file mode 100644
index 00000000000..7f458a276af
--- /dev/null
+++ b/tests/specs/bns-names/bns-names.spec.ts
@@ -0,0 +1,28 @@
+import { mockBnsV2NamesRequest } from '@tests/mocks/mock-stacks-bns';
+import { getSwitchAccountSheetAccountNameSelector } from '@tests/selectors/account.selectors';
+import { SettingsSelectors } from '@tests/selectors/settings.selectors';
+
+import { test } from '../../fixtures/fixtures';
+
+const ACCOUNT_ONE_NAME = 'leather.btc';
+
+test.describe('Bns v2 names', () => {
+  test.beforeEach(async ({ extensionId, globalPage, onboardingPage }) => {
+    await globalPage.setupAndUseApiCalls(extensionId);
+    await mockBnsV2NamesRequest(globalPage.page);
+    await onboardingPage.signInWithTestAccount(extensionId);
+  });
+
+  test('that correctly shows bns v2 account name', async ({ page }) => {
+    const accountName = page.getByTestId(SettingsSelectors.CurrentAccountDisplayName);
+
+    const accountNameText = await accountName.innerText();
+    test.expect(accountNameText).toEqual(ACCOUNT_ONE_NAME);
+    await accountName.click();
+
+    const accountOneName = page.getByTestId(getSwitchAccountSheetAccountNameSelector(0));
+    const accountOneNameText = await accountOneName.innerText();
+
+    test.expect(accountOneNameText).toEqual(ACCOUNT_ONE_NAME);
+  });
+});