fix: add e2e test

app/components/Views/NftDetails/NftDetails.tsx

@@ -218,68 +218,75 @@ const NftDetails = () => {
             {renderDescription()}
           </View>
           <View style={styles.generalInfoFrame}>
-            <NftDetailsBox
-              titleTextStyle={styles.generalInfoTitleTextStyle}
-              titleStyle={styles.generalInfoTitleStyle}
-              valueStyle={styles.generalInfoValueStyle}
-              title={strings('nft_details.bought_for')}
-              value={
-                hasLastSalePrice
-                  ? formatCurrency(
-                      `${collectible.lastSale?.price?.amount?.usd}`,
-                      currentCurrency,
-                    )
-                  : strings('nft_details.data_unavailable')
-              }
-              valueTextStyle={
-                hasLastSalePrice
-                  ? styles.generalInfoValueTextStyle
-                  : styles.generalInfoTitleTextStyle
-              }
-              icon={
-                hasLastSalePrice && collectible?.lastSale?.orderSource ? (
-                  <TouchableOpacity onPress={() => viewLastSalePriceSource()}>
-                    <Icon
-                      name={IconName.Export}
-                      size={IconSize.Xs}
-                      style={styles.iconExport}
-                    />
-                  </TouchableOpacity>
-                ) : null
-              }
-            />
-            <NftDetailsBox
-              titleTextStyle={styles.generalInfoTitleTextStyle}
-              titleStyle={styles.generalInfoTitleStyle}
-              valueStyle={styles.generalInfoValueStyle}
-              title={strings('nft_details.highest_floor_price')}
-              value={
-                hasFloorAskPrice
-                  ? formatCurrency(
-                      `${collectible.collection?.floorAsk?.price?.amount?.usd}`,
-                      currentCurrency,
-                    )
-                  : strings('nft_details.price_unavailable')
-              }
-              valueTextStyle={
-                hasFloorAskPrice
-                  ? styles.generalInfoValueTextStyle
-                  : styles.generalInfoTitleTextStyle
-              }
-              icon={
-                hasFloorAskPrice ? (
-                  <TouchableOpacity
-                    onPress={() => viewHighestFloorPriceSource()}
-                  >
-                    <Icon
-                      name={IconName.Export}
-                      size={IconSize.Xs}
-                      style={styles.iconExport}
-                    />
-                  </TouchableOpacity>
-                ) : null
-              }
-            />
+            {hasLastSalePrice || hasFloorAskPrice ? (
+              <>
+                <NftDetailsBox
+                  titleTextStyle={styles.generalInfoTitleTextStyle}
+                  titleStyle={styles.generalInfoTitleStyle}
+                  valueStyle={styles.generalInfoValueStyle}
+                  title={strings('nft_details.bought_for')}
+                  value={
+                    hasLastSalePrice
+                      ? formatCurrency(
+                          `${collectible.lastSale?.price?.amount?.usd}`,
+                          currentCurrency,
+                        )
+                      : strings('nft_details.data_unavailable')
+                  }
+                  valueTextStyle={
+                    hasLastSalePrice
+                      ? styles.generalInfoValueTextStyle
+                      : styles.generalInfoTitleTextStyle
+                  }
+                  icon={
+                    hasLastSalePrice && collectible?.lastSale?.orderSource ? (
+                      <TouchableOpacity
+                        onPress={() => viewLastSalePriceSource()}
+                      >
+                        <Icon
+                          name={IconName.Export}
+                          size={IconSize.Xs}
+                          style={styles.iconExport}
+                        />
+                      </TouchableOpacity>
+                    ) : null
+                  }
+                />
+                <NftDetailsBox
+                  titleTextStyle={styles.generalInfoTitleTextStyle}
+                  titleStyle={styles.generalInfoTitleStyle}
+                  valueStyle={styles.generalInfoValueStyle}
+                  title={strings('nft_details.highest_floor_price')}
+                  value={
+                    hasFloorAskPrice
+                      ? formatCurrency(
+                          `${collectible.collection?.floorAsk?.price?.amount?.usd}`,
+                          currentCurrency,
+                        )
+                      : strings('nft_details.price_unavailable')
+                  }
+                  valueTextStyle={
+                    hasFloorAskPrice
+                      ? styles.generalInfoValueTextStyle
+                      : styles.generalInfoTitleTextStyle
+                  }
+                  icon={
+                    hasFloorAskPrice ? (
+                      <TouchableOpacity
+                        onPress={() => viewHighestFloorPriceSource()}
+                      >
+                        <Icon
+                          name={IconName.Export}
+                          size={IconSize.Xs}
+                          style={styles.iconExport}
+                        />
+                      </TouchableOpacity>
+                    ) : null
+                  }
+                />
+              </>
+            ) : null}
+
             {collectible.rarityRank ? (
               <NftDetailsBox
                 titleTextStyle={styles.generalInfoTitleTextStyle}

e2e/pages/AddCustomTokenView.js

@@ -35,6 +35,10 @@ export default class AddCustomTokenView {
     await TestHelpers.tap(CUSTOM_TOKEN_BACK_BUTTON_ID);
   }
 
+  static async tapCollectible(name) {
+    await TestHelpers.tap(name);
+  }
+
   static async tapNextButton() {
     await TestHelpers.tap(NEXT_BUTTON_CUSTOM_IMPORT);
   }

e2e/specs/assets/nft-details.spec.js

@@ -0,0 +1,65 @@
+'use strict';
+
+import { SmokeAssets } from '../../tags';
+import TestHelpers from '../../helpers';
+import { loginToApp } from '../../viewHelper';
+import FixtureBuilder from '../../fixtures/fixture-builder';
+import {
+  withFixtures,
+  defaultGanacheOptions,
+} from '../../fixtures/fixture-helper';
+import { SMART_CONTRACTS } from '../../../app/util/test/smart-contracts';
+import WalletView from '../../pages/wallet/WalletView';
+import AddCustomTokenView from '../../pages/AddCustomTokenView';
+import Assertions from '../../utils/Assertions';
+import enContent from '../../../locales/languages/en.json';
+
+describe(SmokeAssets('NFT Details page'), () => {
+  const NFT_CONTRACT = SMART_CONTRACTS.NFTS;
+  beforeAll(async () => {
+    jest.setTimeout(170000);
+    await TestHelpers.reverseServerPort();
+  });
+
+  it('show nft details', async () => {
+    await withFixtures(
+      {
+        dapp: true,
+        fixture: new FixtureBuilder()
+          .withGanacheNetwork()
+          .withPermissionControllerConnectedToTestDapp()
+          .build(),
+        restartDevice: true,
+        ganacheOptions: defaultGanacheOptions,
+        smartContract: NFT_CONTRACT,
+      },
+      async ({ contractRegistry }) => {
+        const nftsAddress = await contractRegistry.getContractAddress(
+          NFT_CONTRACT,
+        );
+
+        await loginToApp();
+
+        await WalletView.tapNftTab();
+        await WalletView.scrollDownOnNFTsTab();
+        // Tap on the add collectibles button
+        await WalletView.tapImportNFTButton();
+        await AddCustomTokenView.isVisible();
+        await AddCustomTokenView.typeInNFTAddress(nftsAddress);
+        await AddCustomTokenView.typeInNFTIdentifier(1);
+        // Click on nft
+        await AddCustomTokenView.tapCollectible(
+          'collectible-Test Dapp NFTs #1-1',
+        );
+
+        await Assertions.checkIfTextIsDisplayed(enContent.nft_details.token_id);
+        await Assertions.checkIfTextIsDisplayed(
+          enContent.nft_details.contract_address,
+        );
+        await Assertions.checkIfTextIsDisplayed(
+          enContent.nft_details.token_standard,
+        );
+      },
+    );
+  });
+});