test(extension): lw-10411 test for nft as avatar

packages/core/src/ui/components/Nft/NftDetail.tsx

@@ -58,6 +58,7 @@ export const NftDetail = ({
       label={translations.setAsAvatar}
       icon={<ProfileIcon />}
       onClick={() => onSetAsAvatar(image)}
+      data-testid="nft-set-as-avatar-button"
     />
     <div className={styles.info}>
       <div data-testid="nft-info" className={styles.section}>

packages/e2e-tests/src/assert/topNavigationAssert.ts

@@ -178,6 +178,11 @@ class TopNavigationAssert {
     expect(await MenuHeader.menuWalletName.getText()).to.equal(expectedWalletName);
   }
 
+  async assertSeeCustomAvatar(expectedImageSrc: string) {
+    await MenuHeader.avatarOnButton.waitForDisplayed();
+    expect(await MenuHeader.avatarOnButton.getAttribute('src')).to.equal(expectedImageSrc);
+  }
+
   async assertSeeRightSidePanelButton(shouldBeVisible: boolean) {
     await MenuHeader.rightSidePanelButton.waitForDisplayed({ reverse: !shouldBeVisible });
   }

packages/e2e-tests/src/elements/NFTs/nftDetails.ts

@@ -1,17 +1,19 @@
 /* eslint-disable no-undef */
 import { ChainablePromiseElement } from 'webdriverio';
 import CommonDrawerElements from '../CommonDrawerElements';
+import testContext from '../../utils/testContext';
 
 class NftDetails {
   private NFT_DETAILS_DRAWER = '[data-testid="nft-details-drawer"]';
   private IMAGE = '[data-testid="nft-image"]';
+  private SET_AS_AVATAR_BUTTON = '[data-testid="nft-set-as-avatar-button"]';
   private TOKEN_INFO_SECTION = '[data-testid="nft-info"]';
   private TOKEN_INFORMATION_LABEL = '[data-testid="nft-info-label"]';
   private ATTRIBUTES_SECTION = '[data-testid="nft-attributes"]';
   private ATTRIBUTES_LABEL = '[data-testid="nft-attributes-label"]';
   private INFO_LIST_ITEM = '[data-testid="info-list-item"]';
   private INFO_LIST_ITEM_KEY = '[data-testid="info-list-item-key"]';
-  private INFO_LIST_ITEM_VALUE = '[data-testid="info-list-item-key"]';
+  private INFO_LIST_ITEM_VALUE = '[data-testid="info-list-item-value"]';
   private SEND_NFT_BUTTON = '#send-nft-btn';
   private NFT_TITLE_ON_POPUP = '[data-testid="drawer-content"] h2';
 
@@ -43,6 +45,10 @@ class NftDetails {
     return this.drawerBody.$(this.IMAGE);
   }
 
+  get setAsAvatarButton() {
+    return this.drawerBody.$(this.SET_AS_AVATAR_BUTTON);
+  }
+
   get tokenInfoSection() {
     return $(this.TOKEN_INFO_SECTION);
   }
@@ -86,6 +92,17 @@ class NftDetails {
   get sendNFTButton() {
     return $(this.SEND_NFT_BUTTON);
   }
+
+  async saveNFTDetails(): Promise<any> {
+    const policyId = await this.policyIdValue.getText();
+    const assetId = await this.assetIdValue.getText();
+    const mediaUrl = await this.mediaUrlValue.getText();
+    testContext.save('nftDetails', { policyId, assetId, mediaUrl });
+  }
+
+  async loadNFTDetails(): Promise<any> {
+    return testContext.load('nftDetails');
+  }
 }
 
 export default new NftDetails();

packages/e2e-tests/src/features/NFTsExtended.feature

@@ -1,7 +1,7 @@
 @NFTs-Extended @Testnet
 Feature: LW-423: NFTs - Extended view
 
-  Background:
+  Background: 
     Given Wallet is synced
 
   @LW-2495 @Smoke @Mainnet
@@ -57,7 +57,8 @@ Feature: LW-423: NFTs - Extended view
     Given I am on NFTs extended page
     When I click on a widget item with subtitle: "<subtitle>"
     Then I see a "<type>" article with title "<subtitle>"
-    Examples:
+
+    Examples: 
       | type     | subtitle                        |
       | Glossary | What are collections?           |
       | FAQ      | How to buy an NFT?              |
@@ -89,3 +90,13 @@ Feature: LW-423: NFTs - Extended view
     And I enter a valid "shelley" address in the bundle 1 recipient's address
     When I press keyboard Escape button
     Then a popup asking if you're sure you'd like to close it is displayed
+
+  @LW-10321
+  Scenario: Extended-view - Setting up NFT as a wallet profile avatar
+    Given I am on NFTs extended page
+    And I left click on the NFT with name "LaceNFT" on NFTs page
+    And I am on a NFT details on the extended view for NFT with name: "LaceNFT"
+    And I save NFT details
+    And I click "Set as your wallet avatar" button on NFT details drawer
+    When I close the drawer by clicking close button
+    Then the NFT is set as a wallet profile avatar

packages/e2e-tests/src/features/NFTsPopup.feature

@@ -60,3 +60,14 @@ Feature: LW-411 Ext.PopUp - Collectibles/NFTs
   Scenario: Popup-view - NFT with image does not display fallback picture
     Given I am on NFTs popup page
     Then Verify that "Bison Coin" doesn't contain fallback image
+
+
+  @LW-10322
+  Scenario: Popup-view - Setting up NFT as a wallet profile avatar
+    Given I am on NFTs popup page
+    And I left click on the NFT with name "LaceNFT" on NFTs page
+    And I am on a NFT details on the popup view for NFT with name: "LaceNFT"
+    And I save NFT details
+    And I click "Set as your wallet avatar" button on NFT details drawer
+    When I close the drawer by clicking back button
+    Then the NFT is set as a wallet profile avatar

packages/e2e-tests/src/steps/navigationTopSteps.ts

@@ -4,6 +4,7 @@ import menuHeaderPageObject from '../pageobject/menuHeaderPageObject';
 import menuHeaderNetwork from '../elements/menuHeaderNetwork';
 import MenuHeader from '../elements/menuHeader';
 import { browser } from '@wdio/globals';
+import nftDetails from '../elements/NFTs/nftDetails';
 
 When(/I click the menu button/, async () => {
   await menuHeaderPageObject.clickMenuButton();
@@ -107,6 +108,11 @@ Then(/^header menu displays "([^"]*)" as a wallet name$/, async (walletName) =>
   await topNavigationAssert.assertSeeWalletName(walletName);
 });
 
+Then(/^the NFT is set as a wallet profile avatar$/, async () => {
+  const savedNftDetails = await nftDetails.loadNFTDetails();
+  await topNavigationAssert.assertSeeCustomAvatar(savedNftDetails.mediaUrl);
+});
+
 When(/^I close header menu$/, async () => {
   await menuHeaderPageObject.closeMenu();
 });

packages/e2e-tests/src/steps/nftsCommonSteps.ts

@@ -15,6 +15,7 @@ import NftsPage from '../elements/NFTs/nftsPage';
 import { browser } from '@wdio/globals';
 import { expect } from 'chai';
 import TokenSelectionPage from '../elements/newTransaction/tokenSelectionPage';
+import nftDetails from '../elements/NFTs/nftDetails';
 
 When(
   /^I (left|right) click on the NFT with name "([^"]*)" on NFTs page$/,
@@ -149,3 +150,7 @@ When(/^I open NFT receiving HD wallet$/, async () => {
 When(/^I save all NFTs that I have$/, async () => {
   await nftsPageObject.saveNfts();
 });
+
+When(/^I save NFT details$/, async () => {
+  await nftDetails.saveNFTDetails();
+});

packages/e2e-tests/src/steps/nftsExtendedSteps.ts

@@ -20,10 +20,18 @@ Given(
   }
 );
 
-When(/^I click "Send NFT" button on NFT details drawer$/, async () => {
-  await NftDetails.sendNFTButton.waitForStable();
-  await NftDetails.sendNFTButton.click();
-});
+When(
+  /^I click "(Send NFT|Set as your wallet avatar)" button on NFT details drawer$/,
+  async (button: 'Send NFT' | 'Set as your wallet avatar') => {
+    if (button === 'Send NFT') {
+      await NftDetails.sendNFTButton.waitForStable();
+      await NftDetails.sendNFTButton.click();
+    } else if (button === 'Set as your wallet avatar') {
+      await NftDetails.setAsAvatarButton.waitForStable();
+      await NftDetails.setAsAvatarButton.click();
+    }
+  }
+);
 
 Then(/^"Send NFT" button (is|is not) displayed on NFT details drawer$/, async (shouldBeDisplayed: 'is' | 'is not') => {
   await nftAssert.assertSeeSendNFTButton(shouldBeDisplayed === 'is');

packages/ui/src/design-system/profile-dropdown/profile-dropdown-wallet-card.component.tsx

@@ -46,7 +46,11 @@ export const WalletCard = ({
       {profile === undefined ? (
         <WalletIcon type={type} testId={makeTestId(testId, '-icon')} />
       ) : (
-        <UserProfile {...profile} radius="rounded" />
+        <UserProfile
+          {...profile}
+          radius="rounded"
+          testId={makeTestId(testId, '-icon')}
+        />
       )}
       <Flex flexDirection="column" ml="$10" h="$32" alignItems="flex-start">
         <Title color="secondary" data-testid={makeTestId(testId, '-title')}>

packages/ui/src/design-system/profile-picture/user-profile.component.tsx

@@ -13,6 +13,7 @@ interface Props {
   delayMs?: number;
   radius?: 'circle' | 'rounded';
   background?: 'none';
+  testId?: string;
 }
 
 interface FallbackText {
@@ -29,6 +30,7 @@ export const UserProfile = ({
   delayMs = 600,
   radius = 'circle',
   background,
+  testId,
   ...rest
 }: Readonly<Props & (FallbackImage | FallbackText)>): JSX.Element => (
   <RadixUIAvatar.Root
@@ -38,7 +40,12 @@ export const UserProfile = ({
       [cx.noBackground]: background === 'none',
     })}
   >
-    <RadixUIAvatar.Image className={cx.image} src={imageSrc} alt={alt} />
+    <RadixUIAvatar.Image
+      className={cx.image}
+      src={imageSrc}
+      alt={alt}
+      data-testid={testId}
+    />
     <RadixUIAvatar.Fallback asChild delayMs={delayMs}>
       {'fallbackImage' in rest ? (
         <img className={cx.image} src={rest.fallbackImage} alt={alt} />