feat(dapp): Set display name test

dapp/src/components/buttons/MenuButton.tsx

@@ -24,7 +24,12 @@ type MenuButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'ref'
 export const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(
     ({ variant, ...props }, ref) => {
         return (
-            <button className={buttonVariants({ variant })} ref={ref} {...props}>
+            <button
+                className={buttonVariants({ variant })}
+                data-testid="menu-button"
+                ref={ref}
+                {...props}
+            >
                 <MoreHoriz className="w-5 h-5 " />
             </button>
         );

dapp/src/components/name-card/NameCard.tsx

@@ -39,6 +39,7 @@ export function NameCard({
                 className={cx(
                     'flex flex-col relative aspect-square rounded-xl group/display z-0 overflow-hidden w-full',
                 )}
+                data-testid="name-card-avatar"
             >
                 {displaySrc ? (
                     <AvatarDisplay src={displaySrc} blur={blurImage} />

dapp/tests/management/management.spec.ts

@@ -1,10 +1,11 @@
 // Copyright (c) 2025 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { Ed25519Keypair } from '@iota/iota-sdk/keypairs/ed25519';
 import { formatAddress } from '@iota/iota-sdk/utils';
 
 import { expect, test } from '../helpers/fixtures';
-import { connectWallet, createWallet, requestFaucetTokens } from '../utils';
+import { connectWallet, createWallet, purchaseName, requestFaucetTokens } from '../utils';
 
 test.describe.parallel('Name Management Tests', () => {
     test.beforeAll(async ({ appPage, context, extensionPage, extensionName, sharedState }) => {
@@ -23,4 +24,42 @@ test.describe.parallel('Name Management Tests', () => {
         sharedState.wallet.address = address;
         sharedState.wallet.mnemonic = mnemonic;
     });
+    test('Connect Address and Set Display', async ({ appPage: page, context, sharedState }) => {
+        const keypair = Ed25519Keypair.deriveKeypair(sharedState.wallet.mnemonic ?? '');
+        const name = `e2etest-${Math.floor(Math.random() * 100)}.iota`;
+
+        const { response } = await purchaseName(name, sharedState.wallet.address ?? '', keypair);
+        expect(response.effects?.status.status).toBe('success');
+
+        await page.goto('/my-names');
+        const nameCards = page.getByTestId('name-card');
+        await expect(nameCards.first()).toBeVisible({ timeout: 10_000 });
+
+        const nameCard = page.getByTestId('name-card').first();
+        await nameCard.getByTestId('name-card-avatar').hover();
+        const menuButtonLocator = nameCard.getByTestId('menu-button');
+        await expect(menuButtonLocator).toBeVisible();
+        await menuButtonLocator.click();
+
+        await page.getByText('Connect to Address', { exact: true }).click();
+        const dialog = page.getByRole('dialog');
+        await expect(dialog.getByText('Connect to Address')).toBeVisible();
+
+        await dialog.getByRole('button', { name: /use current address/i }).click();
+        await expect(dialog.getByText('Set as Display name')).toBeVisible();
+
+        // "Set as Display name" lives in a clickable panel (div), not a button
+        await dialog.getByText('Set as Display name').click();
+
+        await dialog.getByRole('button', { name: 'Apply' }).click();
+        (await context.waitForEvent('page')).getByRole('button', { name: 'Approve' }).click();
+        await page.bringToFront();
+
+        await expect(page.getByText('Address linked successfully', { exact: false })).toBeVisible({
+            timeout: 30_000,
+        });
+        await dialog.getByRole('button', { name: 'Finish' }).click();
+
+        await page.close();
+    });
 });