Add Redeem view test class

Signed-off-by: Emre Bogazliyanlioglu <emre@wormholelabs.xyz>

Author: emreboga

wormhole-connect/src/views/v2/Redeem/index.tsx

@@ -392,7 +392,7 @@ const Redeem = () => {
   const statusHeader = useMemo(() => {
     let statusText = 'Transaction submitted';
     if (isTxCompleted) {
-      statusText = 'Transaction complete';
+      statusText = 'Transaction completed';
     } else if (isTxRefunded) {
       statusText = 'Transaction was refunded';
     } else if (isTxFailed) {

wormhole-connect/tests/e2e/specs/mayan-swift.spec.ts

@@ -2,6 +2,7 @@ import { test, expect, Page } from '@playwright/test';
 import dotenv from 'dotenv';
 import path from 'path';
 import { BridgeView } from '../views/bridge';
+import { RedeemView } from '../views/redeem';
 
 // Read from .env* files
 // This is only for local testing overrides
@@ -31,28 +32,27 @@ const ARB_USDC_CONTRACT = '0xaf88d065e77c8cC2239327C5EDb3A432268e5831';
 const BASE_USDC_CONTRACT = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913';
 
 let page: Page;
+let bridgeView: BridgeView;
+let redeemView: RedeemView;
 
 // Annotate entire file as serial.
 test.describe.configure({ mode: 'serial' });
 
 test.beforeAll(async ({ browser }) => {
   page = await browser.newPage();
+  bridgeView = new BridgeView(page);
+  redeemView = new RedeemView(page);
 });
 
 test.afterAll(async () => {
   await page.close();
 });
 
 test('should configure transaction', async () => {
-  // Navigate to the root page
+  // Navigate to brige view
   await page.goto(`http://localhost:5173/?config=${DEFAULT_CONFIG}`);
 
-  // Wait for the main container to be visible
-  await page.waitForSelector('#sample-app', {
-    state: 'visible',
-  });
-
-  const bridgeView = new BridgeView(page);
+  // Verify key elements are present in bridge view
   await bridgeView.verifyElements();
 
   // Set source wallet
@@ -78,28 +78,18 @@ test('should configure transaction', async () => {
 
   // Mayan Swift route should be visible and selected by default
   await expect(page.getByTestId('route-MayanSwapSWIFT-selected')).toBeVisible();
-
-  // Verify Confirm transaction button and start transaction
-  const confirmButton = page.getByTestId('confirm-transaction-button');
-  await expect(confirmButton).toHaveText('Confirm transaction');
-  await expect(confirmButton).toBeEnabled();
 });
 
 test('should initiate transaction', async () => {
   // Start transaction
-  const confirmButton = page.getByTestId('confirm-transaction-button');
-  await confirmButton.click();
-  // Wait for Confirm transaction button to be in Preparing state
-  await expect(confirmButton).toHaveText('Preparing transaction');
+  await bridgeView.startTransaction();
 
   // Wait for Redeem view
-  await expect(page.getByTestId('redeem-view')).toBeVisible({ timeout: 30000 });
+  await redeemView.verifyElements();
 
   // Verify transaction status as submitted
-  const statusHeader = page.getByTestId('redeem-view-status-header');
-  await expect(statusHeader).toHaveText('Transaction submitted');
+  await redeemView.confirmTransactionState('Transaction submitted');
+
   // Wait for transaction completion
-  await expect(statusHeader).toHaveText('Transaction complete', {
-    timeout: 30000,
-  });
+  await redeemView.confirmTransactionState('Transaction completed');
 });

wormhole-connect/tests/e2e/views/bridge.ts

@@ -4,18 +4,16 @@ export class BridgeView {
   private readonly srcAssetPicker: Locator;
   private readonly destAssetPicker: Locator;
   private readonly amountInput: Locator;
+  private readonly confirmButton: Locator;
 
   constructor(public readonly page: Page) {
-    this.srcAssetPicker = this.page.getByTestId('source-asset-picker');
-    this.destAssetPicker = this.page.getByTestId('dest-asset-picker');
-    this.amountInput = this.page.getByTestId('amount-input');
+    this.srcAssetPicker = page.getByTestId('source-asset-picker');
+    this.destAssetPicker = page.getByTestId('dest-asset-picker');
+    this.amountInput = page.getByTestId('amount-input');
+    this.confirmButton = page.getByTestId('confirm-transaction-button');
   }
 
-  async goto(config: string) {
-    await this.page.goto(`http://localhost:5173/?config=${config}`);
-  }
-
-  // Verify key elements are present in bridge view
+  // Verify key elements are present in Bridge view
   async verifyElements() {
     await expect(this.srcAssetPicker).toBeVisible();
     await expect(this.destAssetPicker).toBeVisible();
@@ -73,4 +71,11 @@ export class BridgeView {
   async enterAmount(amount: string) {
     await this.amountInput.getByPlaceholder('0').fill(amount);
   }
+
+  async startTransaction() {
+    await expect(this.confirmButton).toHaveText('Confirm transaction');
+    await expect(this.confirmButton).toBeEnabled();
+    await this.confirmButton.click();
+    await expect(this.confirmButton).toHaveText('Preparing transaction');
+  }
 }

wormhole-connect/tests/e2e/views/redeem.ts

@@ -0,0 +1,21 @@
+import { expect, Locator, Page } from '@playwright/test';
+
+export class RedeemView {
+  private readonly mainContainer: Locator;
+  private readonly statusHeader: Locator;
+
+  constructor(public readonly page: Page) {
+    this.mainContainer = page.getByTestId('redeem-view');
+    this.statusHeader = page.getByTestId('redeem-view-status-header');
+  }
+
+  // Verify key elements are present in Redeem view
+  async verifyElements(timeout = 30000) {
+    await expect(this.mainContainer).toBeVisible({ timeout });
+    await expect(this.statusHeader).toBeVisible({ timeout });
+  }
+
+  async confirmTransactionState(status: string, timeout = 30000) {
+    await expect(this.statusHeader).toHaveText(status, { timeout });
+  }
+}