feat(dapp): add tests for status pills in auctions

VmMad · VmMad · commit cdb9ae714606 · 2025-11-14T14:11:57.000+01:00
diff --git a/dapp/src/app/(protected)/my-names/page.tsx b/dapp/src/app/(protected)/my-names/page.tsx
@@ -160,6 +160,7 @@ export default function MyNamesPage(): JSX.Element {
                             }
                             onClick={handleRefresh}
                             disabled={isRefreshing}
+                            testId="refresh-button"
                         />
                     ) : null}
                 </div>
diff --git a/dapp/src/auctions/components/AuctionItem.tsx b/dapp/src/auctions/components/AuctionItem.tsx
@@ -49,11 +49,13 @@ export function AuctionItem({ auction, auctionStatus, onBidClick }: AuctionItemP
     }
 
     return (
-        <NameCard name={auction.name} displaySrc={auctionDisplayImage}>
+        <NameCard name={auction.name} displaySrc={auctionDisplayImage} testId="auction-name-card">
             <NameCardBody name={normalizeIotaName(auction.name)}>
                 <div className="flex flex-row items-center justify-between gap-x-xs">
                     <ExpiryDateIndicator auction={auction} />
-                    <AuctionStatusBadge status={auctionStatus} />
+                    <div data-testid="auction-status-badge">
+                        <AuctionStatusBadge status={auctionStatus} />
+                    </div>
                 </div>
 
                 <div className="min-h-[44px] flex w-full">
diff --git a/dapp/src/auctions/components/AuctionPublicItem.tsx b/dapp/src/auctions/components/AuctionPublicItem.tsx
@@ -89,10 +89,11 @@ export function AuctionPublicItem({ auction, onBidClick }: AuctionPublicItemProp
             size="full"
             displaySrc={auctionDisplayImage}
             blurImage={shouldCensor}
+            testId="auction-name-card"
         >
             <NameCardBody name={censoredName}>
                 {auctionStatus === 'top_bidder' ? (
-                    <div className="absolute top-2 left-2">
+                    <div className="absolute top-2 left-2" data-testid="auction-status-badge">
                         <AuctionStatusBadge status={auctionStatus} />
                     </div>
                 ) : null}
diff --git a/dapp/src/components/name-card/ExtendedNameCard.tsx b/dapp/src/components/name-card/ExtendedNameCard.tsx
@@ -83,7 +83,13 @@ export function ExtendedNameCard({
 
     return (
         <>
-            <NameCard name={nft.name} badge={badge} menuOptions={menuOptions} isSelected={isActive}>
+            <NameCard
+                name={nft.name}
+                badge={badge}
+                menuOptions={menuOptions}
+                isSelected={isActive}
+                testId="name-card"
+            >
                 <NameCardBody name={label}>
                     <SubnameCountIndicator
                         onSubnameListClick={onSubnameListClick}
diff --git a/dapp/src/components/name-card/NameCard.tsx b/dapp/src/components/name-card/NameCard.tsx
@@ -14,6 +14,7 @@ interface NameCardProps extends NftDisplayProps {
     isSelected?: boolean;
     displaySrc?: string | null;
     blurImage?: boolean;
+    testId?: string;
 }
 
 export function NameCard({
@@ -25,6 +26,7 @@ export function NameCard({
     children,
     displaySrc,
     blurImage,
+    testId,
 }: React.PropsWithChildren<NameCardProps>) {
     return (
         <div
@@ -33,6 +35,7 @@ export function NameCard({
                 isSelected && 'name-card-selected',
                 nftDisplayVariants({ size }),
             )}
+            data-testid={testId}
         >
             <div
                 className={cx(
diff --git a/dapp/src/sections/AuctionCarousel.tsx b/dapp/src/sections/AuctionCarousel.tsx
@@ -116,6 +116,7 @@ export function AuctionCarousel() {
                             loop
                             className="mySwiper"
                             modules={[Autoplay]}
+                            data-testid="auction-carousel"
                         >
                             {auctionsToRender.map((auction) => (
                                 <SwiperSlide key={auction.key} className="pb-xs">
diff --git a/dapp/tests/auctions/auctions.spec.ts b/dapp/tests/auctions/auctions.spec.ts
@@ -1,11 +1,130 @@
 // Copyright (c) 2025 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import 'dotenv/config';
+
+import { normalizeIotaName } from '@iota/iota-names-sdk';
+import { Ed25519Keypair } from '@iota/iota-sdk/keypairs/ed25519';
+import { formatAddress } from '@iota/iota-sdk/utils';
 import { expect } from '@playwright/test';
 
 import { test } from '../helpers/fixtures';
+import {
+    bidOnExistingAuction,
+    connectWallet,
+    createAndSendAuctionTransaction,
+    createWallet,
+    requestFaucetTokens,
+} from '../utils';
+
+test.beforeAll(async ({ appPage, context, extensionPage, extensionName, sharedState }) => {
+    const { address, mnemonic } = await createWallet(extensionPage);
+
+    await appPage.bringToFront();
+
+    await connectWallet(appPage, context, extensionName);
+
+    await expect(appPage.getByRole('button', { name: formatAddress(address) })).toBeVisible({
+        timeout: 10_000,
+    });
+
+    sharedState.wallet.address = address;
+    sharedState.wallet.mnemonic = mnemonic;
+});
+
+test('Check "Outbid" pills', async ({ sharedState, appPage: page }) => {
+    const name = `outbid${Date.now().toString().slice(-6)}`;
+    const nameToAuction = `${name}.iota`;
+    await page.bringToFront();
+    const navPromise = page.goto(`/my-names`);
+
+    const walletSigner = Ed25519Keypair.deriveKeypair(sharedState.wallet.mnemonic!);
+    const newSigner = Ed25519Keypair.deriveKeypair(
+        sharedState.wallet.mnemonic!,
+        `m/44'/4218'/0'/0'/1'`,
+    );
+
+    await Promise.all([
+        requestFaucetTokens(walletSigner.toIotaAddress()),
+        requestFaucetTokens(newSigner.toIotaAddress()),
+    ]);
+
+    const startAuctionResult = await createAndSendAuctionTransaction({
+        name: nameToAuction,
+        signer: walletSigner,
+    });
+    expect(startAuctionResult.effects?.status.status).toBe('success');
+
+    const bidResult = await bidOnExistingAuction({
+        name: nameToAuction,
+        signer: newSigner,
+    });
+    expect(bidResult.effects?.status.status).toBe('success');
+
+    await navPromise;
+    await page.locator("h2:has-text('My Names')").waitFor({ state: 'visible', timeout: 10_000 });
+
+    await page.getByTestId('refresh-button').click();
+    await page.getByText('Refreshed successfully!').waitFor({ state: 'visible', timeout: 10_000 });
+
+    const auctionNameCard = page
+        .getByTestId('auction-name-card')
+        .filter({ hasText: normalizeIotaName(nameToAuction, 'at') });
+
+    await expect(auctionNameCard.getByTestId('auction-status-badge')).toHaveText('Outbid', {
+        timeout: 10_000,
+    });
+});
+
+test('Check "Top Bidder" pills', async ({ sharedState, appPage: page, context }) => {
+    const name = `topbid${Date.now().toString().slice(-6)}`;
+    const nameToAuction = `${name}.iota`;
+    await page.bringToFront();
+    const navPromise = page.goto(`/my-names`);
+
+    const walletSigner = Ed25519Keypair.deriveKeypair(sharedState.wallet.mnemonic!);
+
+    await requestFaucetTokens(walletSigner.toIotaAddress());
+
+    const startAuctionResult = await createAndSendAuctionTransaction({
+        name: nameToAuction,
+        signer: walletSigner,
+    });
+    expect(startAuctionResult.effects?.status.status).toBe('success');
+
+    await navPromise;
+    await page.locator("h2:has-text('My Names')").waitFor({ state: 'visible', timeout: 10_000 });
+
+    await page.getByTestId('refresh-button').click();
+    await page.getByText('Refreshed successfully!').waitFor({ state: 'visible', timeout: 10_000 });
+
+    const auctionNameCard = page
+        .getByTestId('auction-name-card')
+        .filter({ hasText: normalizeIotaName(nameToAuction, 'at') });
+
+    await expect(auctionNameCard.getByTestId('auction-status-badge')).toHaveText('Top Bidder', {
+        timeout: 10_000,
+    });
+
+    await page.getByRole('link', { name: 'Auctions' }).click();
+    await page.getByPlaceholder('Search auction').fill(nameToAuction);
+    const auctionCard = page.getByTestId('auction-name-card').filter({
+        hasText: normalizeIotaName(nameToAuction, 'at'),
+    });
+
+    await expect(auctionCard).toBeVisible({ timeout: 10_000 });
+    await expect(auctionCard.getByTestId('auction-status-badge')).toHaveText('Top Bidder', {
+        timeout: 10_000,
+    });
+
+    await page.getByLabel('Go to homepage').filter({ visible: true }).first().click();
+    await page.getByText('Live Auctions').scrollIntoViewIfNeeded();
 
-test('Auction flow works', async ({ appPage }) => {
-    await expect(appPage).toHaveTitle(/IOTA Names/);
-    await expect(appPage.getByText('Your On-Chain Name')).toBeVisible();
+    const carousel = page.getByTestId('auction-carousel');
+    const auctionInCarousel = carousel.getByTestId('auction-name-card').filter({
+        hasText: normalizeIotaName(nameToAuction, 'at'),
+    });
+    await expect(auctionInCarousel.getByTestId('auction-status-badge')).toHaveText('Top Bidder', {
+        timeout: 10_000,
+    });
 });
diff --git a/dapp/tests/utils.ts b/dapp/tests/utils.ts
@@ -7,9 +7,14 @@ import type { BrowserContext, Page } from '@playwright/test';
 
 import 'dotenv/config';
 
+import { Signer } from '@iota/iota-sdk/cryptography';
+import { NANOS_PER_IOTA } from '@iota/iota-sdk/utils';
+
+import { buildCreateAuctionTransaction, buildPlaceBidTransaction } from '@/auctions';
 import { CONFIG } from '@/config';
 
 import { expect } from './helpers/fixtures';
+import { iotaClient, iotaNamesClient } from './setup/utils';
 
 export async function connectWallet(page: Page, context: BrowserContext, extensionName: string) {
     await page.getByRole('button', { name: /Connect/i }).click();
@@ -108,3 +113,89 @@ export function deriveAddressFromMnemonic(mnemonic: string, path?: string) {
 export function getAddressByIndexPath(mnemonic: string, index: number) {
     return deriveAddressFromMnemonic(mnemonic, `m/44'/4218'/0'/0'/${index}'`);
 }
+
+interface CreateAndSendAuctionTransaction {
+    name: string;
+    signer: Signer;
+}
+export async function createAndSendAuctionTransaction({
+    name,
+    signer,
+}: CreateAndSendAuctionTransaction) {
+    try {
+        const tx = buildCreateAuctionTransaction(
+            iotaNamesClient.config.auctionPackageId,
+            iotaNamesClient.config.iotaNamesObjectId,
+            iotaNamesClient.config.auctionHouseObjectId,
+            signer.toIotaAddress(),
+            BigInt(80) * NANOS_PER_IOTA,
+            name,
+        );
+
+        const txBytes = await tx.build({ client: iotaClient });
+        const txDryRun = await iotaClient.dryRunTransactionBlock({
+            transactionBlock: txBytes,
+        });
+
+        if (txDryRun.effects.status.status !== 'success') {
+            throw new Error(txDryRun.effects.status.error || 'Transaction dry run failed');
+        }
+
+        const response = await iotaClient.signAndExecuteTransaction({
+            transaction: txBytes,
+            signer,
+            options: {
+                showEffects: true,
+            },
+        });
+
+        console.log('Transaction sent. Digest:', response.digest);
+        console.log(`Successfully created auction for name: ${name}`);
+
+        return response;
+    } catch (error) {
+        console.error('Error creating initial auction:', error);
+        throw error;
+    }
+}
+
+interface BidOnExistingAuction {
+    name: string;
+    signer: Signer;
+}
+export async function bidOnExistingAuction({ name, signer }: BidOnExistingAuction) {
+    try {
+        const tx = buildPlaceBidTransaction(
+            iotaNamesClient.config.auctionPackageId,
+            iotaNamesClient.config.auctionHouseObjectId,
+            signer.toIotaAddress(),
+            BigInt(81) * NANOS_PER_IOTA,
+            name,
+        );
+
+        const txBytes = await tx.build({ client: iotaClient });
+        const txDryRun = await iotaClient.dryRunTransactionBlock({
+            transactionBlock: txBytes,
+        });
+
+        if (txDryRun.effects.status.status !== 'success') {
+            throw new Error(txDryRun.effects.status.error || 'Transaction dry run failed');
+        }
+
+        const response = await iotaClient.signAndExecuteTransaction({
+            transaction: txBytes,
+            signer,
+            options: {
+                showEffects: true,
+            },
+        });
+
+        console.log('Transaction sent. Digest:', response.digest);
+        console.log(`Successfully bid on existing auction for name: ${name}`);
+
+        return response;
+    } catch (error) {
+        console.error('Error bidding on auction:', error);
+        throw error;
+    }
+}

Original file line number	Diff line number	Diff line change
`@@ -160,6 +160,7 @@ export default function MyNamesPage(): JSX.Element {`
`160`	`160`	`}`
`161`	`161`	`onClick={handleRefresh}`
`162`	`162`	`disabled={isRefreshing}`
	`163`	`+ testId="refresh-button"`
`163`	`164`	`/>`
`164`	`165`	`) : null}`
`165`	`166`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -116,6 +116,7 @@ export function AuctionCarousel() {`
`116`	`116`	`loop`
`117`	`117`	`className="mySwiper"`
`118`	`118`	`modules={[Autoplay]}`
	`119`	`+ data-testid="auction-carousel"`
`119`	`120`	`>`
`120`	`121`	`{auctionsToRender.map((auction) => (`
`121`	`122`	`<SwiperSlide key={auction.key} className="pb-xs">`