Merge pull request #8577 from LedgerHQ/support/qaa-347

[QAA-347] Adding NFT e2e tests

.changeset/thick-peas-hear.md

@@ -0,0 +1,6 @@
+---
+"ledger-live-desktop": minor
+"@ledgerhq/live-common": minor
+---
+
+Adding New E2E tests

apps/ledger-live-desktop/src/renderer/drawers/NFTViewerDrawer/index.tsx

@@ -239,7 +239,7 @@ const NFTViewerDrawer = ({ account, nftId, height }: NFTViewerDrawerProps) => {
               </Skeleton>
             </Text>
             <Text
-              data-testId="nft-name-sendDrawer"
+              data-testid="nft-name-sendDrawer"
               ff="Inter|SemiBold"
               fontSize={7}
               lineHeight="29px"
@@ -279,7 +279,7 @@ const NFTViewerDrawer = ({ account, nftId, height }: NFTViewerDrawerProps) => {
           </Skeleton>
           <NFTActions>
             <Button
-              data-testId="nft-send-button-sendDrawer"
+              data-testid="nft-send-button-sendDrawer"
               style={{
                 flex: 1,
                 justifyContent: "center",
@@ -366,7 +366,13 @@ const NFTViewerDrawer = ({ account, nftId, height }: NFTViewerDrawerProps) => {
                   skeleton={floorPriceLoading}
                   title={t("NFT.viewer.attributes.floorPrice")}
                   value={
-                    <Text mb={1} lineHeight="15.73px" fontSize={4} color="palette.text.shade60">
+                    <Text
+                      mb={1}
+                      data-testid="nft-floor-price"
+                      lineHeight="15.73px"
+                      fontSize={4}
+                      color="palette.text.shade60"
+                    >
                       {floorPrice} {ticker}
                     </Text>
                   }

apps/ledger-live-desktop/src/renderer/drawers/OperationDetails/index.tsx

@@ -371,7 +371,7 @@ const OperationD = (props: Props) => {
         <Box flex={1} mb={2} alignItems="center">
           <Skeleton show={show} width={160} barHeight={16} minHeight={32}>
             <Text
-              data-testId="nft-name-operationDrawer"
+              data-testid="nft-name-operationDrawer"
               ff="Inter|SemiBold"
               textAlign="center"
               fontSize={7}

apps/ledger-live-desktop/src/renderer/modals/Send/fields/RecipientFieldDomainService.tsx

@@ -142,7 +142,7 @@ const RecipientFieldDomainService = <T extends Transaction, TS extends Transacti
                 </Text>
               </Box>
               <Box>
-                <Text data-testId="ens-address-sendModal" ff="Inter|SemiBold" fontSize={3}>
+                <Text data-testid="ens-address-sendModal" ff="Inter|SemiBold" fontSize={3}>
                   {transaction.recipientDomain.address}
                 </Text>
               </Box>

apps/ledger-live-desktop/src/renderer/modals/Send/steps/StepSummary.tsx

@@ -162,7 +162,7 @@ const StepSummary = (props: StepProps) => {
               </Text>
               {transaction.recipientDomain && (
                 <Text
-                  data-testId="transaction-recipient-ens"
+                  data-testid="transaction-recipient-ens"
                   ff="Inter|Bold"
                   color="palette.text.shade100"
                   fontSize={4}

apps/ledger-live-desktop/src/renderer/screens/nft/Collections/Row.tsx

@@ -50,6 +50,7 @@ const Row = ({ nfts, contract, account, onClick }: Props) => {
       account={account}
     >
       <Container
+        data-testid={`nft-row-${tokenName}`}
         className={loading || process.env.ALWAYS_SHOW_SKELETONS ? "disabled" : ""}
         justifyContent="center"
         horizontal

apps/ledger-live-desktop/src/renderer/screens/nft/Gallery/TokensList/Item.tsx

@@ -94,6 +94,7 @@ const NftCard = ({ id, mode, account, withContextMenu = false, onHideCollection
         horizontal={!isGrid}
         alignItems={!isGrid ? "center" : undefined}
         onClick={onItemClick}
+        data-testid={`nft-row-gallery-${nft?.contract}`}
       >
         <Skeleton width={40} minHeight={40} full={isGrid} show={show}>
           <Media

apps/ledger-live-desktop/src/renderer/screens/nft/Send/Summary.tsx

@@ -55,7 +55,7 @@ const Summary = ({ transaction }: Props) => {
           <Box mr={3} alignItems="flex-end">
             <Skeleton width={42} minHeight={18} barHeight={6} show={show}>
               <Text
-                data-testId="transaction-nft-name"
+                data-testid="transaction-nft-name"
                 ff="Inter|Medium"
                 color="palette.text.shade100"
                 fontSize={4}

apps/ledger-live-desktop/tests/models/Transaction.ts

@@ -1,5 +1,6 @@
 import { Fee } from "@ledgerhq/live-common/e2e/enum/Fee";
 import { Account } from "@ledgerhq/live-common/e2e/enum/Account";
+import { Nft } from "@ledgerhq/live-common/e2e/enum/Nft";
 
 export class Transaction {
   constructor(
@@ -15,7 +16,7 @@ export class NFTTransaction extends Transaction {
   constructor(
     accountToDebit: Account,
     accountToCredit: Account,
-    public nftName: string,
+    public nft: Nft,
     speed?: Fee,
     memoTag?: string,
   ) {

apps/ledger-live-desktop/tests/page/account.page.ts

@@ -2,6 +2,7 @@ import { expect } from "@playwright/test";
 import { step } from "tests/misc/reporters/step";
 import { AppPage } from "tests/page/abstractClasses";
 import { Account } from "@ledgerhq/live-common/e2e/enum/Account";
+import invariant from "invariant";
 
 export class AccountPage extends AppPage {
   readonly settingsButton = this.page.getByTestId("account-settings-button");
@@ -31,9 +32,9 @@ export class AccountPage extends AppPage {
   private tokenRow = (tokenTicker: string) => this.page.getByTestId(`token-row-${tokenTicker}`);
   private addTokenButton = this.page.getByRole("button", { name: "Add token" });
   private viewDetailsButton = this.page.getByText("View details");
-  private seeGalleryButton = this.page.getByTestId("see-gallery-button");
-  private nft = (nftName: string) => this.page.locator(`text=${nftName}`);
+  private seeGalleryButton = this.page.getByRole("button", { name: "See Gallery" });
   private nftOperation = this.page.getByText("NFT Sent");
+  private nftList = (collectionName: string) => this.page.getByTestId(`nft-row-${collectionName}`);
 
   @step("Navigate to token")
   async navigateToToken(SubAccount: Account) {
@@ -168,13 +169,18 @@ export class AccountPage extends AppPage {
     await this.seeGalleryButton.click();
   }
 
-  @step("Select NFT $0")
-  async selectNFT(nftName: string) {
-    await this.nft(nftName).click();
-  }
-
   @step("Navigate to NFT operation")
   async navigateToNFTOperation() {
     await this.nftOperation.click();
   }
+
+  @step("Expect NFT list to be visible")
+  async checkNftListInAccount(account: Account) {
+    invariant(account.nft && account.nft.length > 0, "No NFT found in account");
+
+    for (const nft of account.nft) {
+      const nftLocator = this.nftList(nft.collectionName);
+      await expect(nftLocator).toBeVisible();
+    }
+  }
 }

apps/ledger-live-desktop/tests/page/drawer/nft.drawer.ts

@@ -1,10 +1,16 @@
 import { step } from "tests/misc/reporters/step";
 import { Drawer } from "tests/component/drawer.component";
 import { expect } from "@playwright/test";
+import { Account } from "@ledgerhq/live-common/e2e/enum/Account";
+import axios from "axios";
+import { getEnv } from "@ledgerhq/live-env";
+import invariant from "invariant";
 
 export class NFTDrawer extends Drawer {
   private nftName = this.page.getByTestId("nft-name-sendDrawer");
   private sendButton = this.page.getByTestId("nft-send-button-sendDrawer");
+  private nftFloorPrice = this.page.getByTestId("nft-floor-price");
+  private nftOptionsButton = this.page.locator("#accounts-options-button");
 
   @step("Verify nft name is visible")
   async expectNftNameIsVisible(nft: string) {
@@ -15,4 +21,39 @@ export class NFTDrawer extends Drawer {
   async clickSend() {
     await this.sendButton.click();
   }
+
+  @step("Verify nft floor price is visible")
+  async expectNftFloorPriceIsVisible() {
+    await expect(this.nftFloorPrice).toBeVisible();
+  }
+
+  @step("Retrieve NFT floor price value")
+  async getFloorPriceDisplayed() {
+    const floorPrice = await this.nftFloorPrice.textContent();
+    return floorPrice ? floorPrice?.split(" ")[0] : "";
+  }
+
+  @step("Expect nft floor price to be positive")
+  async expectNftFloorPricePositive() {
+    const floorPrice = await this.getFloorPriceDisplayed();
+    expect(parseFloat(floorPrice)).toBeGreaterThan(0);
+  }
+
+  @step("Click on nft options")
+  async clickNftOptions() {
+    await this.nftOptionsButton.click();
+  }
+
+  @step("Check Floor price value to be $1")
+  async verifyFloorPriceValue(account: Account, floorPrice: string) {
+    invariant(account.nft, "No valid NFTs found for this account");
+    const nft = account.nft[0].nftContract;
+
+    const { data } = await axios({
+      method: "GET",
+      url: `${getEnv("NFT_ETH_METADATA_SERVICE")}/v1/marketdata/${account.currency.currencyId}/1/contract/${nft}/floor-price`,
+    });
+
+    expect(data.value).toEqual(parseFloat(floorPrice));
+  }
 }

apps/ledger-live-desktop/tests/page/drawer/send.drawer.ts

@@ -26,7 +26,7 @@ export class SendDrawer extends Drawer {
     const transactionType = await this.transactionType.textContent();
     expect(transactionType).toMatch("Sending");
     const NFTName = await this.nftName.textContent();
-    expect(NFTName).toBe(tx.nftName);
+    expect(NFTName).toBe(tx.nft.nftName);
     const address = await this.addressValue(tx.accountToCredit.address).textContent();
     expect(address).toBe(tx.accountToCredit.address);
   }

apps/ledger-live-desktop/tests/page/index.ts

@@ -21,6 +21,7 @@ import { AssetDrawer } from "./drawer/asset.drawer";
 import { PasswordlockModal } from "./modal/passwordlock.modal";
 import { LockscreenPage } from "tests/page/lockscreen.page";
 import { NFTDrawer } from "./drawer/nft.drawer";
+import { NftGallery } from "./nftGallery.page";
 
 export class Application extends PageHolder {
   public account = new AccountPage(this.page);
@@ -45,4 +46,5 @@ export class Application extends PageHolder {
   public password = new PasswordlockModal(this.page);
   public LockscreenPage = new LockscreenPage(this.page);
   public nftDrawer = new NFTDrawer(this.page);
+  public nftGallery = new NftGallery(this.page);
 }

apps/ledger-live-desktop/tests/page/modal/receive.modal.ts

@@ -34,7 +34,7 @@ export class ReceiveModal extends Modal {
     await this.skipDeviceButton.click();
   }
 
-  @step("Retrieve fees amount value")
+  @step("Retrieve address displayed")
   async getAddressDisplayed() {
     const text = await this.addressDisplayedValue.textContent();
     return text ? text?.split(" ")[0] : "";

apps/ledger-live-desktop/tests/page/modal/send.modal.ts

@@ -92,7 +92,7 @@ export class SendModal extends Modal {
     expect(displayedReceiveAddress).toEqual(tx.accountToCredit.address);
 
     const displayedNftName = await this.nftNameDisplayed.innerText();
-    expect(displayedNftName).toEqual(expect.stringContaining(tx.nftName));
+    expect(displayedNftName).toEqual(expect.stringContaining(tx.nft.nftName));
     await this.continueButton.click();
   }
 

apps/ledger-live-desktop/tests/page/nftGallery.page.ts

@@ -0,0 +1,26 @@
+import { expect } from "@playwright/test";
+import { step } from "tests/misc/reporters/step";
+import { AppPage } from "tests/page/abstractClasses";
+import { Account } from "@ledgerhq/live-common/e2e/enum/Account";
+import invariant from "invariant";
+
+export class NftGallery extends AppPage {
+  private locateNftInGalleryByName = (nftName: string) => this.page.locator(`text=${nftName}`);
+  private nftListGallery = (nftContract: string) =>
+    this.page.getByTestId(`nft-row-gallery-${nftContract}`);
+
+  @step("Select NFT $0")
+  async selectNFT(nftName: string) {
+    await this.locateNftInGalleryByName(nftName).click();
+  }
+
+  @step("Expect NFT list to be visible in gallery")
+  async verifyNftPresenceInGallery(account: Account) {
+    invariant(account.nft && account.nft.length > 0, "No NFT found in account");
+
+    for (const nft of account.nft) {
+      const nftLocator = this.nftListGallery(nft.nftContract);
+      await expect(nftLocator).toBeVisible();
+    }
+  }
+}