chore: test code improvements

Author: ignaciosantise

apps/native/tests/shared/constants/index.ts

@@ -8,4 +8,20 @@ export const DEFAULT_SESSION_PARAMS: SessionParams = {
   optAccounts: ['1', '2'],
   accept: true
 };
-export const DEFAULT_CHAIN_NAME = process.env.DEFAULT_CHAIN_NAME || 'Ethereum';
+
+export const TEST_CHAINS = {
+  POLYGON: 'Polygon',
+  ETHEREUM: 'Ethereum',
+  GNOSIS: 'Gnosis'
+} as const;
+
+export type SupportedChain = (typeof TEST_CHAINS)[keyof typeof TEST_CHAINS];
+
+export const TIMEOUTS = {
+  ANIMATION: 300,
+  NETWORK_SWITCH: 500,
+  CONNECTION: 5000,
+  SESSION_PROPOSAL: 30000
+} as const;
+
+export const DEFAULT_CHAIN_NAME = process.env.DEFAULT_CHAIN_NAME || TEST_CHAINS.ETHEREUM;

apps/native/tests/shared/constants/timeouts.ts

@@ -1,9 +1,9 @@
 import type { Locator, Page } from '@playwright/test';
 import { expect } from '@playwright/test';
-import { BASE_URL, DEFAULT_SESSION_PARAMS } from '../constants';
+import { BASE_URL, DEFAULT_SESSION_PARAMS, TIMEOUTS } from '../constants';
 import { WalletValidator } from '../validators/WalletValidator';
 import { WalletPage } from './WalletPage';
-import { TimingRecords } from '../types';
+import { SupportedChain, TimingRecords } from '../types';
 import { ModalValidator } from '../validators/ModalValidator';
 
 export class ModalPage {
@@ -125,10 +125,10 @@ export class ModalPage {
   //   await this.page.getByTestId('w3m-connecting-siwe-cancel').click();
   // }
 
-  async switchNetwork(network: string) {
+  async switchNetwork(network: SupportedChain) {
     await this.page.getByTestId(`w3m-network-switch-${network}`).click();
-    // The state is chaing too fast and test runner doesn't wait the loading page. It's fastly checking the network selection button and detect that it's switched already.
-    await this.page.waitForTimeout(300);
+    // The state is changing too fast and test runner doesn't wait for the loading page
+    await this.page.waitForTimeout(TIMEOUTS.NETWORK_SWITCH);
   }
 
   async openAccountModal() {
@@ -146,7 +146,7 @@ export class ModalPage {
   async closeModal() {
     await this.page.getByTestId('header-close')?.click?.();
     // Wait for the modal fade out animation
-    await this.page.waitForTimeout(300);
+    await this.page.waitForTimeout(TIMEOUTS.ANIMATION);
   }
 
   async openAllWallets() {
@@ -209,10 +209,16 @@ export class ModalPage {
   }
 
   async expectLoaderVisible() {
-    await expect(this.page.getByTestId('loading-spinner')).toBeVisible();
+    await expect(
+      this.page.getByTestId('loading-spinner'),
+      'Loading spinner should be visible'
+    ).toBeVisible();
   }
 
   async expectLoaderHidden() {
-    await expect(this.page.getByTestId('loading-spinner')).toBeHidden();
+    await expect(
+      this.page.getByTestId('loading-spinner'),
+      'Loading spinner should be hidden'
+    ).toBeHidden();
   }
 }

apps/native/tests/shared/pages/ModalPage.ts

@@ -1,3 +1,5 @@
+import { TEST_CHAINS } from '../constants';
+
 export interface SessionParams {
   reqAccounts: string[];
   optAccounts: string[];
@@ -7,3 +9,5 @@ export interface SessionParams {
 export type TimingRecords = { item: string; timeMs: number }[];
 
 export type CaipNetworkId = `${string}:${string}`;
+
+export type SupportedChain = (typeof TEST_CHAINS)[keyof typeof TEST_CHAINS];

apps/native/tests/shared/types/index.ts

@@ -1,9 +1,9 @@
-import { MAXIMUM_WAIT_CONNECTIONS } from '../constants/timeouts';
+import { TIMEOUTS } from '../constants';
 
 export function getMaximumWaitConnections(): number {
   if (process.env.CI) {
-    return MAXIMUM_WAIT_CONNECTIONS;
+    return TIMEOUTS.SESSION_PROPOSAL;
   }
 
-  return MAXIMUM_WAIT_CONNECTIONS * 2;
+  return TIMEOUTS.SESSION_PROPOSAL * 2;
 }

apps/native/tests/shared/utils/timeouts.ts

@@ -3,7 +3,7 @@ import { WalletPage } from './shared/pages/WalletPage';
 import { WalletValidator } from './shared/validators/WalletValidator';
 import { ModalPage } from './shared/pages/ModalPage';
 import { ModalValidator } from './shared/validators/ModalValidator';
-import { DEFAULT_CHAIN_NAME } from './shared/constants';
+import { DEFAULT_CHAIN_NAME, TEST_CHAINS } from './shared/constants';
 
 let modalPage: ModalPage;
 let modalValidator: ModalValidator;
@@ -37,21 +37,36 @@ sampleWalletTest.afterAll(async () => {
 });
 
 // -- Tests --------------------------------------------------------------------
+/**
+ * Connection Tests
+ * Tests the basic connection functionality including:
+ * - Page refresh behavior
+ * - Network switching
+ * - Disconnection flows
+ */
+
 sampleWalletTest('it should be connected instantly after page refresh', async () => {
   await modalPage.page.reload();
   await modalValidator.expectToBeConnectedInstantly();
 });
 
+/**
+ * Network Tests
+ * Tests network-related functionality including:
+ * - Disabled networks visibility
+ * - Network switching
+ * - Network persistence after refresh
+ */
+
 sampleWalletTest('it should show disabled networks', async () => {
-  const disabledNetworks = 'Gnosis';
   await modalPage.openAccountModal();
   await modalPage.goToNetworks();
-  await modalValidator.expectNetworksDisabled(disabledNetworks);
+  await modalValidator.expectNetworksDisabled(TEST_CHAINS.GNOSIS);
   await modalPage.closeModal();
 });
 
 sampleWalletTest('it should switch networks and sign', async () => {
-  const chains = ['Polygon', 'Ethereum'];
+  const chains = [TEST_CHAINS.POLYGON, TEST_CHAINS.ETHEREUM];
 
   async function processChain(index: number) {
     if (index >= chains.length) {
@@ -77,34 +92,45 @@ sampleWalletTest('it should switch networks and sign', async () => {
     await processChain(index + 1);
   }
 
-  // Start processing from the first chain
   await processChain(0);
 });
 
 sampleWalletTest('it should show last connected network after refreshing', async () => {
-  const chainName = 'Polygon';
-
   await modalPage.openAccountModal();
   await modalPage.goToNetworks();
-  await modalPage.switchNetwork(chainName);
-  await modalValidator.expectSwitchedNetwork(chainName);
+  await modalPage.switchNetwork(TEST_CHAINS.POLYGON);
+  await modalValidator.expectSwitchedNetwork(TEST_CHAINS.POLYGON);
   await modalPage.closeModal();
 
   await modalPage.page.reload();
 
   await modalPage.openAccountModal();
-  await modalValidator.expectSwitchedNetwork(chainName);
+  await modalValidator.expectSwitchedNetwork(TEST_CHAINS.POLYGON);
   await modalPage.closeModal();
 });
 
+/**
+ * Signing Tests
+ * Tests message signing functionality including:
+ * - Successful signing flow
+ * - Rejection flow
+ */
+
 sampleWalletTest('it should reject sign', async () => {
-  const chainName = 'Polygon';
   await modalPage.sign();
-  await walletValidator.expectReceivedSign({ chainName });
+  await walletValidator.expectReceivedSign({ chainName: TEST_CHAINS.POLYGON });
   await walletPage.handleRequest({ accept: false });
   await modalValidator.expectRejectedSign();
 });
 
+/**
+ * Disconnection Tests
+ * Tests various disconnection scenarios including:
+ * - Hook-based disconnection
+ * - Wallet-initiated disconnection
+ * - Manual disconnection
+ */
+
 sampleWalletTest('it should disconnect using hook', async () => {
   await modalValidator.expectConnected();
   await modalPage.clickHookDisconnectButton();
@@ -129,6 +155,14 @@ sampleWalletTest('it should disconnect as expected', async () => {
   await modalValidator.expectDisconnected();
 });
 
+/**
+ * Activity Screen Tests
+ * Tests the Activity screen behavior including:
+ * - Loader visibility on first visit
+ * - Loader behavior on subsequent visits
+ * - Loader behavior after network changes
+ */
+
 sampleWalletTest('shows loader behavior on first visit to Activity screen', async () => {
   // Connect to wallet
   await modalPage.qrCodeFlow(modalPage, walletPage);
@@ -158,8 +192,8 @@ sampleWalletTest('shows loader behavior after network change in Activity screen'
 
   // Change network
   await modalPage.goToNetworks();
-  await modalPage.switchNetwork('Polygon');
-  await modalValidator.expectSwitchedNetwork('Polygon');
+  await modalPage.switchNetwork(TEST_CHAINS.POLYGON);
+  await modalValidator.expectSwitchedNetwork(TEST_CHAINS.POLYGON);
 
   // Visit Activity screen after network change
   await modalPage.goToActivity();