feat(dapp): add purchase name test (#899)

* feat(dapp): add purchase name test

* feat: remove random number

* debug: try removing function

---------

Co-authored-by: msarcev <mario.sarcevic@iota.org>
Co-authored-by: Keito <64607484+KeitoTadashi@users.noreply.github.com>

Author: 3 people

dapp/src/components/layout/Navbar/Navbar.tsx

@@ -32,7 +32,11 @@ export function Navbar() {
     const ROUTES = isConnected ? [...PROTECTED_ROUTES, ...PUBLIC_ROUTES] : PUBLIC_ROUTES;
 
     return (
-        <nav id="top-navbar" className="fixed top-0 left-0 w-full z-50 backdrop-blur-lg">
+        <nav
+            id="top-navbar"
+            data-testid="top-navbar"
+            className="fixed top-0 left-0 w-full z-50 backdrop-blur-lg"
+        >
             <div className="px-lg py-md flex flex-col gap-y-sm">
                 <div className="flex flex-row justify-between items-center gap-x-md">
                     <div className="flex flex-row gap-x-lg items-center">

dapp/tests/purchase/purchase.spec.ts

@@ -1,6 +1,7 @@
 // Copyright (c) 2025 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { normalizeIotaName } from '@iota/iota-names-sdk';
 import { formatAddress } from '@iota/iota-sdk/utils';
 import { expect } from '@playwright/test';
 
@@ -27,8 +28,66 @@ test.describe.serial('Purchase Name Tests', () => {
         sharedState.wallet.mnemonic = mnemonic;
     });
 
+    test('Can purchase a name', async ({ appPage: page, context }) => {
+        const nameToPurchase = `e2e-test-name`;
+
+        await page.getByPlaceholder('Search for your IOTA name').filter({ visible: true }).click();
+
+        await page.getByPlaceholder('Check name availability').fill(nameToPurchase);
+        const purchaseCardLocator = page.getByTestId('purchase-name-card');
+
+        await purchaseCardLocator.waitFor();
+        await expect(purchaseCardLocator).toBeVisible();
+
+        await purchaseCardLocator.hover();
+        await purchaseCardLocator.getByRole('button', { name: 'Buy' }).click({ timeout: 10_000 });
+        await expect(page.getByTestId('name-purchase-title')).toContainText('@' + nameToPurchase);
+
+        await page.getByRole('button', { name: 'Buy' }).click({ timeout: 10_000 });
+        (await context.waitForEvent('page')).getByRole('button', { name: 'Approve' }).click();
+
+        const normalizedName = normalizeIotaName(nameToPurchase + '.iota', 'at', {
+            truncateLongParts: true,
+        });
+        await expect(page.getByText(`Successfully registered name ${normalizedName}`)).toBeVisible({
+            timeout: 30_000,
+        });
+
+        await page.bringToFront();
+    });
+
+    test('Availability Dialog opens from all UI elements', async ({ appPage: page }) => {
+        await page.goto('/', { waitUntil: 'domcontentloaded' });
+
+        await page.getByPlaceholder('Search for your IOTA name').filter({ visible: true }).click();
+
+        expect(page.getByRole('dialog').getByPlaceholder('Check name availability')).toBeVisible({
+            timeout: 5_000,
+        });
+
+        await page.goto('/auctions', { waitUntil: 'domcontentloaded' });
+
+        await page
+            .getByTestId('top-navbar')
+            .getByPlaceholder('Search for your IOTA name')
+            .filter({ visible: true })
+            .click();
+
+        expect(page.getByRole('dialog').getByPlaceholder('Check name availability')).toBeVisible({
+            timeout: 5_000,
+        });
+
+        await page.goto('/my-names', { waitUntil: 'domcontentloaded' });
+
+        await page.getByRole('button', { name: 'Name', exact: true }).click();
+
+        expect(page.getByRole('dialog').getByPlaceholder('Check name availability')).toBeVisible({
+            timeout: 5_000,
+        });
+    });
+
     test('Unavailable shows up for already purchased name', async ({ appPage: page }) => {
-        // Name bought when initializing localnet with scripts/tests/register-name.ts
+        // Name registered when initializing localnet with scripts/tests/register-name.ts
         const targetName = 'test.iota';
         const denormalizedName = denormalizeName(targetName);