Merge pull request #8378 from LedgerHQ/support/QAA-326

[QAA] Adding e2e test - User can send NFT to an ENS address

.changeset/beige-baboons-share.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+tests: adding new e2e test

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

@@ -239,6 +239,7 @@ const NFTViewerDrawer = ({ account, nftId, height }: NFTViewerDrawerProps) => {
               </Skeleton>
             </Text>
             <Text
+              data-testId="nft-name-sendDrawer"
               ff="Inter|SemiBold"
               fontSize={7}
               lineHeight="29px"
@@ -278,6 +279,7 @@ const NFTViewerDrawer = ({ account, nftId, height }: NFTViewerDrawerProps) => {
           </Skeleton>
           <NFTActions>
             <Button
+              data-testId="nft-send-button-sendDrawer"
               style={{
                 flex: 1,
                 justifyContent: "center",

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

@@ -370,7 +370,13 @@ const OperationD = (props: Props) => {
       ) : (
         <Box flex={1} mb={2} alignItems="center">
           <Skeleton show={show} width={160} barHeight={16} minHeight={32}>
-            <Text ff="Inter|SemiBold" textAlign="center" fontSize={7} color="palette.text.shade80">
+            <Text
+              data-testId="nft-name-operationDrawer"
+              ff="Inter|SemiBold"
+              textAlign="center"
+              fontSize={7}
+              color="palette.text.shade80"
+            >
               {(metadata as NFTMetadata)?.nftName || "-"}
             </Text>
           </Skeleton>

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 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

@@ -155,7 +155,12 @@ const StepSummary = (props: StepProps) => {
                 <Trans i18nKey="send.steps.details.to" />
               </Text>
               {transaction.recipientDomain && (
-                <Text ff="Inter|Bold" color="palette.text.shade100" fontSize={4}>
+                <Text
+                  data-testId="transaction-recipient-ens"
+                  ff="Inter|Bold"
+                  color="palette.text.shade100"
+                  fontSize={4}
+                >
                   {transaction.recipientDomain.domain}
                 </Text>
               )}

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

@@ -110,7 +110,7 @@ const Collections = ({ account }: Props) => {
                   <Box>{t("NFT.collections.receiveCTA")}</Box>
                 </Box>
               </Button>
-              <Button primary onClick={onOpenGallery}>
+              <Button primary onClick={onOpenGallery} data-testId="see-gallery-button">
                 {t("NFT.collections.galleryCTA")}
               </Button>
             </>

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

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

apps/ledger-live-desktop/tests/enum/Account.ts

@@ -8,6 +8,7 @@ export class Account {
     public readonly address: string,
     public readonly accountType?: AccountType,
     public readonly index?: number,
+    public readonly ensName?: string,
   ) {}
 
   static readonly BTC_NATIVE_SEGWIT_1 = new Account(
@@ -122,6 +123,15 @@ export class Account {
     1,
   );
 
+  static readonly ETH_MC = new Account(
+    Currency.ETH,
+    "Ethereum MC",
+    "0x4258A05DBA420A398bcdFB389E4250759b4223ea",
+    undefined,
+    undefined,
+    "ldgrqamco.eth",
+  );
+
   static readonly ETH_3 = new Account(
     Currency.ETH,
     "Ethereum 3",

apps/ledger-live-desktop/tests/enum/DeviceLabels.ts

@@ -41,4 +41,5 @@ export enum DeviceLabels {
   NEW_ORDINARY_TRANSACTION = "New ordinary transaction",
   SEND_TO_ADDRESS_2 = "Send to address (2/2)",
   CONFIRM_TRANSACTION = "Confirm transaction",
+  REVIEW_TRANSACTION = "Review transaction",
 }

apps/ledger-live-desktop/tests/families/evm.ts

@@ -1,9 +1,10 @@
 import { expect } from "@playwright/test";
-import { Transaction } from "tests/models/Transaction";
+import { NFTTransaction, Transaction } from "tests/models/Transaction";
 import {
   pressBoth,
   pressUntilTextFound,
   containsSubstringInEvent,
+  waitFor,
 } from "@ledgerhq/live-common/e2e/speculos";
 import { DeviceLabels } from "tests/enum/DeviceLabels";
 
@@ -16,3 +17,11 @@ export async function sendEVM(tx: Transaction) {
 
   await pressBoth();
 }
+
+export async function sendEvmNFT(tx: NFTTransaction) {
+  await waitFor(DeviceLabels.REVIEW_TRANSACTION);
+  const events = await pressUntilTextFound(DeviceLabels.ACCEPT);
+  const isAddressCorrect = containsSubstringInEvent(tx.accountToCredit.address, events);
+  expect(isAddressCorrect).toBeTruthy();
+  await pressBoth();
+}

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

@@ -10,3 +10,15 @@ export class Transaction {
     public memoTag?: string,
   ) {}
 }
+
+export class NFTTransaction extends Transaction {
+  constructor(
+    accountToDebit: Account,
+    accountToCredit: Account,
+    public nftName: string,
+    speed?: Fee,
+    memoTag?: string,
+  ) {
+    super(accountToDebit, accountToCredit, "0", speed, memoTag);
+  }
+}

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

@@ -31,6 +31,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 nftOperation = this.page.getByText("NFT Sent");
 
   @step("Navigate to token")
   async navigateToToken(SubAccount: Account) {
@@ -159,4 +162,19 @@ export class AccountPage extends AppPage {
   async navigateToTokenInAccount(SubAccount: Account) {
     await this.tokenRow(SubAccount.currency.ticker).click();
   }
+
+  @step("Navigate to NFT gallery")
+  async navigateToNFTGallery() {
+    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();
+  }
 }

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

@@ -0,0 +1,18 @@
+import { step } from "tests/misc/reporters/step";
+import { Drawer } from "tests/component/drawer.component";
+import { expect } from "@playwright/test";
+
+export class NFTDrawer extends Drawer {
+  private nftName = this.page.getByTestId("nft-name-sendDrawer");
+  private sendButton = this.page.getByTestId("nft-send-button-sendDrawer");
+
+  @step("Verify nft name is visible")
+  async expectNftNameIsVisible(nft: string) {
+    await expect(this.nftName).toHaveText(nft);
+  }
+
+  @step("click on send button")
+  async clickSend() {
+    await this.sendButton.click();
+  }
+}

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

@@ -1,12 +1,14 @@
 import { step } from "tests/misc/reporters/step";
 import { Drawer } from "tests/component/drawer.component";
 import { expect } from "@playwright/test";
-import { Transaction } from "tests/models/Transaction";
+import { NFTTransaction, Transaction } from "tests/models/Transaction";
 
 export class SendDrawer extends Drawer {
   private addressValue = (address: string) =>
     this.page.locator('[data-testid="drawer-content"]').locator(`text=${address}`);
   private amountValue = this.page.getByTestId("amountReceived-drawer");
+  private transactionType = this.page.getByTestId("transaction-type");
+  private nftName = this.page.getByTestId("nft-name-operationDrawer");
 
   @step("Verify address is visible")
   async addressValueIsVisible(address: string) {
@@ -18,4 +20,14 @@ export class SendDrawer extends Drawer {
     await expect(this.addressValue(tx.accountToCredit.address)).toBeVisible();
     await expect(this.amountValue).toBeVisible();
   }
+
+  @step("Verify Send NFT information")
+  async expectNftInfos(tx: NFTTransaction) {
+    const transactionType = await this.transactionType.textContent();
+    expect(transactionType).toMatch("Sending");
+    const NFTName = await this.nftName.textContent();
+    expect(NFTName).toBe(tx.nftName);
+    const address = await this.addressValue(tx.accountToCredit.address).textContent();
+    expect(address).toBe(tx.accountToCredit.address);
+  }
 }

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

@@ -20,6 +20,7 @@ import { SendDrawer } from "./drawer/send.drawer";
 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";
 
 export class Application extends PageHolder {
   public account = new AccountPage(this.page);
@@ -43,4 +44,5 @@ export class Application extends PageHolder {
   public assetDrawer = new AssetDrawer(this.page);
   public password = new PasswordlockModal(this.page);
   public LockscreenPage = new LockscreenPage(this.page);
+  public nftDrawer = new NFTDrawer(this.page);
 }

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

@@ -1,7 +1,7 @@
 import { expect } from "@playwright/test";
 import { Modal } from "../../component/modal.component";
 import { step } from "tests/misc/reporters/step";
-import { Transaction } from "../../models/Transaction";
+import { NFTTransaction, Transaction } from "../../models/Transaction";
 
 export class SendModal extends Modal {
   private drowdownAccount = this.page.locator('[data-testid="modal-content"] svg').nth(1);
@@ -13,9 +13,12 @@ export class SendModal extends Modal {
   );
   private checkTransactionbroadcastLabel = this.page.locator("text=Transaction sent");
   private recipientAddressDisplayedValue = this.page.getByTestId("recipient-address");
+  private recipientEnsDisplayed = this.page.getByTestId("transaction-recipient-ens");
   private amountDisplayedValue = this.page.getByTestId("transaction-amount");
+  private nftNameDisplayed = this.page.getByTestId("transaction-nft-name");
   private feeStrategy = (fee: string) => this.page.getByText(fee);
   private noTagButton = this.page.getByRole("button", { name: "Don’t add Tag" });
+  private ENSAddressLabel = this.page.getByTestId("ens-address-sendModal");
 
   async selectAccount(name: string) {
     await this.drowdownAccount.click();
@@ -38,6 +41,13 @@ export class SendModal extends Modal {
     await this.recipientInput.fill(recipient);
   }
 
+  @step("choose fee startegy")
+  async chooseFeeStrategy(fee: string | undefined) {
+    if (fee) {
+      await this.feeStrategy(fee).click();
+    }
+  }
+
   @step("Enter recipient and tag")
   async fillRecipientInfo(transaction: Transaction) {
     await this.fillRecipient(transaction.accountToCredit.address);
@@ -47,6 +57,16 @@ export class SendModal extends Modal {
     }
   }
 
+  @step("Craft NFT tx")
+  async craftNFTTx(tx: NFTTransaction) {
+    await this.fillRecipient(tx.accountToCredit.ensName || tx.accountToCredit.address);
+    const displayedAddress = await this.ENSAddressLabel.innerText();
+    expect(displayedAddress).toEqual(tx.accountToCredit.address);
+    await this.continueButton.click();
+    await this.chooseFeeStrategy(tx.speed);
+    await this.continueButton.click();
+  }
+
   @step("Fill tx information")
   async craftTx(tx: Transaction) {
     await this.fillRecipientInfo(tx);
@@ -59,12 +79,25 @@ export class SendModal extends Modal {
     await this.cryptoAmountField.fill(tx.amount);
 
     if (tx.speed !== undefined) {
-      await this.feeStrategy(tx.speed).click();
+      await this.chooseFeeStrategy(tx.speed);
     }
 
     await this.countinueSendAmount();
   }
 
+  @step("Verify tx information before confirming")
+  async expectNFTTxInfoValidity(tx: NFTTransaction) {
+    const displayedEns = await this.recipientEnsDisplayed.innerText();
+    expect(displayedEns).toEqual(tx.accountToCredit.ensName);
+
+    const displayedReceiveAddress = await this.recipientAddressDisplayedValue.innerText();
+    expect(displayedReceiveAddress).toEqual(tx.accountToCredit.address);
+
+    const displayedNftName = await this.nftNameDisplayed.innerText();
+    expect(displayedNftName).toEqual(expect.stringContaining(tx.nftName));
+    await this.continueButton.click();
+  }
+
   @step("Verify tx information before confirming")
   async expectTxInfoValidity(tx: Transaction) {
     const displayedReceiveAddress = await this.recipientAddressDisplayedValue.innerText();

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

@@ -8,14 +8,14 @@ import {
 } from "@ledgerhq/live-common/e2e/speculos";
 import { Account } from "../enum/Account";
 import { expect } from "@playwright/test";
-import { Transaction } from "tests/models/Transaction";
+import { NFTTransaction, Transaction } from "tests/models/Transaction";
 import { Delegate } from "tests/models/Delegate";
 import { DeviceLabels } from "tests/enum/DeviceLabels";
 import { Currency } from "tests/enum/Currency";
 import { Swap } from "tests/models/Swap";
 import { extractNumberFromString } from "tests/utils/textParserUtils";
 import { sendBTCBasedCoin } from "tests/families/bitcoin";
-import { sendEVM } from "tests/families/evm";
+import { sendEVM, sendEvmNFT } from "tests/families/evm";
 import { sendPolkadot } from "tests/families/polkadot";
 import { sendAlgorand } from "tests/families/algorand";
 import { sendTron } from "tests/families/tron";
@@ -60,6 +60,18 @@ export class SpeculosPage extends AppPage {
     await pressBoth();
   }
 
+  @step("Sign Send NFT Transaction")
+  async signSendNFTTransaction(tx: NFTTransaction) {
+    const currencyName = tx.accountToDebit.currency;
+    switch (currencyName) {
+      case Currency.ETH:
+        await sendEvmNFT(tx);
+        break;
+      default:
+        throw new Error(`Unsupported currency: ${currencyName}`);
+    }
+  }
+
   @step("Sign Send Transaction")
   async signSendTransaction(tx: Transaction) {
     const currencyName = tx.accountToDebit.currency;