feat(dapp): add test to buy a name with different expiration (#1034)

Author: VmMad

dapp/src/components/dialogs/PurchaseNameDialog.tsx

@@ -292,7 +292,7 @@ export function PurchaseNameDialog({ name, open, setOpen, onCompleted }: Purchas
                                 </div>
                             </Panel>
                             {isRegisterWithYearsSupported ? (
-                                <div className="relative">
+                                <div data-testid="purchase-years-select" className="relative">
                                     <Select
                                         options={purchaseOptions}
                                         value={purchaseYears?.toString()}
@@ -331,29 +331,49 @@ export function PurchaseNameDialog({ name, open, setOpen, onCompleted }: Purchas
                             <div className="flex flex-row gap-x-sm w-full">
                                 {finalPriceIota && fiatPriceResult ? (
                                     <>
-                                        <DisplayStats
-                                            label="Registration Expires"
-                                            value={
-                                                <LabelText text={expirationDate} label={`\u00A0`} /> // \u00A0 for alignment
-                                            }
-                                        />
-                                        <DisplayStats
-                                            label="Total Due"
-                                            value={
-                                                <LabelText
-                                                    text={finalPriceIota}
-                                                    label={`($${fiatPriceResult} USD)`}
-                                                />
-                                            }
-                                        />
+                                        <div
+                                            data-testid="registration-expiration"
+                                            className="w-full"
+                                        >
+                                            <DisplayStats
+                                                label="Registration Expires"
+                                                value={
+                                                    <LabelText
+                                                        text={expirationDate}
+                                                        label={`\u00A0`}
+                                                    /> // \u00A0 for alignment
+                                                }
+                                            />
+                                        </div>
+                                        <div data-testid="total-due" className="w-full">
+                                            <DisplayStats
+                                                label="Total Due"
+                                                value={
+                                                    <LabelText
+                                                        text={finalPriceIota}
+                                                        label={`($${fiatPriceResult} USD)`}
+                                                    />
+                                                }
+                                            />
+                                        </div>
                                     </>
                                 ) : finalPriceIota && !fiatPriceResult ? (
                                     <>
-                                        <DisplayStats
-                                            label="Registration Expires"
-                                            value={expirationDate}
-                                        />
-                                        <DisplayStats label="Total Due" value={finalPriceIota} />
+                                        <div
+                                            data-testid="registration-expiration"
+                                            className="w-full"
+                                        >
+                                            <DisplayStats
+                                                label="Registration Expires"
+                                                value={expirationDate}
+                                            />
+                                        </div>
+                                        <div data-testid="total-due" className="w-full">
+                                            <DisplayStats
+                                                label="Total Due"
+                                                value={finalPriceIota}
+                                            />
+                                        </div>
                                     </>
                                 ) : (
                                     <LoadingIndicator />

dapp/tests/purchase/purchase.spec.ts

@@ -8,7 +8,7 @@ import { expect } from '@playwright/test';
 import { denormalizeName } from '@/lib/utils';
 
 import { test } from '../helpers/fixtures';
-import { connectWallet, createWallet, requestFaucetTokens } from '../utils';
+import { connectWallet, createWallet, generateRandomName, requestFaucetTokens } from '../utils';
 
 test.describe.serial('Purchase Name Tests', () => {
     test.beforeAll(async ({ appPage, context, extensionPage, extensionName, sharedState }) => {
@@ -101,4 +101,51 @@ test.describe.serial('Purchase Name Tests', () => {
         const nameMessage = namePurchaseCard.getByTestId('name-purchase-card-status-message');
         await expect(nameMessage).toContainText('Name is already taken.');
     });
+
+    test('Buy with a different expiration time', async ({ appPage: page, context }) => {
+        const YEARS = 5;
+        // Name bought when initializing localnet with scripts/tests/register-name.ts
+        const name = generateRandomName('expi');
+        const denormalizedName = denormalizeName(name);
+
+        await page.getByPlaceholder('Search for your IOTA name').click();
+        await page.getByPlaceholder('Check name availability').fill(denormalizedName);
+
+        const namePurchaseCard = page.getByTestId('purchase-name-card');
+        await expect(namePurchaseCard).toContainText('@' + denormalizedName);
+
+        await namePurchaseCard.hover();
+        await namePurchaseCard.getByRole('button', { name: 'Buy' }).click();
+
+        const initialExpirationTime = (
+            await page.getByTestId('registration-expiration').innerText()
+        ).split('\n')[1];
+
+        const select = page.getByTestId('purchase-years-select');
+        await expect(select).toContainText('1 Year');
+        await select.click({ timeout: 5_000 });
+        await page.getByText(`${YEARS} Years`).click({ timeout: 5_000 });
+
+        const expirationTime = (
+            await page.getByTestId('registration-expiration').innerText()
+        ).split('\n')[1];
+
+        expect(expirationTime).not.toBe(initialExpirationTime);
+        const expirationYears = new Date(expirationTime).getFullYear() - new Date().getFullYear();
+        expect(expirationYears).toBe(YEARS);
+
+        await page.getByRole('button', { name: 'Buy' }).click();
+
+        const walletConfirmationPage = context.waitForEvent('page');
+        const walletPopup = await walletConfirmationPage;
+
+        await walletPopup.waitForLoadState('domcontentloaded');
+        const approveBtn = walletPopup.getByRole('button', { name: /^Approve$/i });
+        await approveBtn.click();
+
+        await walletPopup.waitForEvent('close', { timeout: 10_000 });
+        await expect(page.getByText(/Successfully registered name/i)).toBeVisible({
+            timeout: 5_000,
+        });
+    });
 });