refactor: migrate tx requests tests to playwright, closes #4151

src/app/pages/transaction-request/components/minimal-error-message.tsx

@@ -1,7 +1,7 @@
 import { Suspense, memo } from 'react';
 
 import { Stack, StackProps, color } from '@stacks/ui';
-import { TransactionSigningSelectors } from '@tests-legacy/page-objects/transaction-signing.selectors';
+import { TransactionRequestSelectors } from '@tests/selectors/requests.selectors';
 import { styled } from 'leather-styles/jsx';
 
 import { ErrorIcon } from '@app/components/icons/error-icon';
@@ -38,7 +38,7 @@ function MinimalErrorMessageSuspense(props: StackProps) {
       bg="#FCEEED"
       borderRadius="12px"
       color={color('feedback-error')}
-      data-testid={TransactionSigningSelectors.TransactionErrorMessage}
+      data-testid={TransactionRequestSelectors.ErrorMessage}
       isInline
       p="base"
       width="100%"

src/app/pages/transaction-request/components/page-top.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react';
 
 import { Stack } from '@stacks/ui';
-import { TransactionSigningSelectors } from '@tests-legacy/page-objects/transaction-signing.selectors';
+import { TransactionRequestSelectors } from '@tests/selectors/requests.selectors';
 import { styled } from 'leather-styles/jsx';
 
 import { useDefaultRequestParams } from '@app/common/hooks/use-default-request-search-params';
@@ -29,7 +29,7 @@ function PageTopBase() {
 
   return (
     <Stack
-      data-testid={TransactionSigningSelectors.TxSigningPageContainer}
+      data-testid={TransactionRequestSelectors.TransactionRequestPage}
       mb="loose"
       spacing="base"
       width="100%"

src/app/pages/transaction-request/components/submit-action.tsx

@@ -1,6 +1,6 @@
 import { Suspense } from 'react';
 
-import { TransactionSigningSelectors } from '@tests-legacy/page-objects/transaction-signing.selectors';
+import { TransactionRequestSelectors } from '@tests/selectors/requests.selectors';
 import { useFormikContext } from 'formik';
 
 import { HIGH_FEE_AMOUNT_STX } from '@shared/constants';
@@ -41,7 +41,7 @@ export function SubmitAction() {
     <Suspense fallback={<BaseConfirmButton aria-busy={isLoading} disabled={isDisabled} />}>
       <BaseConfirmButton
         aria-busy={isLoading}
-        data-testid={TransactionSigningSelectors.BtnConfirmTransaction}
+        data-testid={TransactionRequestSelectors.BtnConfirmTransaction}
         disabled={isDisabled}
         onClick={onConfirmTransaction}
       >

src/app/pages/update-profile-request/components/update-action.layout.tsx

@@ -1,5 +1,5 @@
 import { Button, Stack } from '@stacks/ui';
-import { TestAppSelectors } from '@tests/selectors/test-app.selectors';
+import { UpdateProfileRequestSelectors } from '@tests/selectors/requests.selectors';
 
 interface UpdateActionProfileProps {
   onUpdateProfile: () => Promise<void>;
@@ -18,7 +18,7 @@ export function UpdateActionLayout({
         Cancel
       </Button>
       <Button
-        data-testid={TestAppSelectors.BtnUpdateProfile}
+        data-testid={UpdateProfileRequestSelectors.BtnUpdateProfile}
         type="submit"
         flexGrow={1}
         borderRadius="10px"

test-app/src/components/debugger.tsx

@@ -35,8 +35,8 @@ import {
   uintCV,
 } from '@stacks/transactions';
 import { Box, Button, ButtonGroup, Text } from '@stacks/ui';
-import { TransactionSigningSelectors } from '@tests-legacy/page-objects/transaction-signing.selectors';
 import { WalletPageSelectors } from '@tests-legacy/page-objects/wallet.selectors';
+import { TestAppSelectors } from '@tests/selectors/test-app.selectors';
 import BN from 'bn.js';
 
 import { ExplorerLink } from './explorer-link';
@@ -374,28 +374,28 @@ export const Debugger = () => {
       <Box>
         <ButtonGroup spacing={4} my="base">
           <Button
-            data-testid={TransactionSigningSelectors.BtnContractCall}
+            data-testid={TestAppSelectors.BtnContractCall}
             mt={3}
             onClick={() => callFaker(stacksTestnetNetwork, PostConditionMode.Allow)}
           >
             Contract call (ALLOW mode)
           </Button>
           <Button
-            data-testid={TransactionSigningSelectors.BtnContractCall}
+            data-testid={TestAppSelectors.BtnContractCall}
             mt={3}
             onClick={() => callFaker(stacksTestnetNetwork)}
           >
             Contract call (Testnet)
           </Button>
           <Button
-            data-testid={TransactionSigningSelectors.BtnContractCall}
+            data-testid={TestAppSelectors.BtnContractCall}
             mt={3}
             onClick={() => callFaker(stacksMainnetNetwork)}
           >
             Contract call (StacksMainnet)
           </Button>
           <Button
-            data-testid={TransactionSigningSelectors.BtnContractCall}
+            data-testid={TestAppSelectors.BtnContractCall}
             mt={3}
             onClick={() => callFaker(stacksLocalhostNetwork)}
           >

tests/page-object-models/test-app.page.ts

@@ -7,6 +7,7 @@ export class TestAppPage {
   static readonly url = 'http://localhost:3000';
   page: Page;
   readonly signInBtnSelector = createTestSelector(OnboardingSelectors.SignUpBtn);
+  readonly contractCallBtnSelector = createTestSelector(TestAppSelectors.BtnContractCall);
   readonly updateProfileBtnSelector = createTestSelector(TestAppSelectors.BtnUpdateValidProfile);
   readonly updateInvalidProfileBtnSelector = createTestSelector(
     TestAppSelectors.BtnUpdateInvalidProfile
@@ -26,6 +27,10 @@ export class TestAppPage {
     return this.page.click(this.signInBtnSelector, { timeout: 10000 });
   }
 
+  async clickContractCallButton() {
+    return this.page.click(this.contractCallBtnSelector);
+  }
+
   async clickUpdateProfileButton() {
     return this.page.click(this.updateProfileBtnSelector);
   }

tests/page-object-models/transaction-request.page.ts

@@ -0,0 +1,36 @@
+import { Page } from '@playwright/test';
+import { TransactionRequestSelectors } from '@tests/selectors/requests.selectors';
+import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
+import { createTestSelector } from '@tests/utils';
+
+export class TransactionRequestPage {
+  readonly confirmTransactionBtnSelector = createTestSelector(
+    TransactionRequestSelectors.BtnConfirmTransaction
+  );
+  readonly feeToBePaidLabel = createTestSelector(SharedComponentsSelectors.FeeToBePaidLabel);
+  readonly transactionRequestPage = createTestSelector(
+    TransactionRequestSelectors.TransactionRequestPage
+  );
+
+  constructor(readonly page: Page) {}
+
+  async clickConfirmTransactionButton() {
+    return this.page.click(this.confirmTransactionBtnSelector);
+  }
+
+  async getDisplayedFeeValue() {
+    return this.page.locator(this.feeToBePaidLabel).innerText();
+  }
+
+  async getTransactionRequestError() {
+    return this.page.locator(TransactionRequestSelectors.ErrorMessage).innerText();
+  }
+
+  async waitForFee() {
+    await this.page.locator(this.feeToBePaidLabel).waitFor();
+  }
+
+  async waitForTransactionRequestPage() {
+    await this.page.locator(this.transactionRequestPage).waitFor();
+  }
+}

tests/page-object-models/update-profile-request.page.ts

@@ -0,0 +1,19 @@
+import { Page } from '@playwright/test';
+import { UpdateProfileRequestSelectors } from '@tests/selectors/requests.selectors';
+import { createTestSelector } from '@tests/utils';
+
+export class UpdateProfileRequestPage {
+  readonly updateProfileBtnSelector = createTestSelector(
+    UpdateProfileRequestSelectors.BtnUpdateProfile
+  );
+
+  constructor(readonly page: Page) {}
+
+  async clickUpdateProfileButton() {
+    return this.page.click(this.updateProfileBtnSelector);
+  }
+
+  async waitForUpdateProfileRequestError(msg: string) {
+    return this.page.waitForSelector(`text=${msg}`);
+  }
+}

tests/selectors/requests.selectors.ts

@@ -0,0 +1,10 @@
+export enum TransactionRequestSelectors {
+  BtnConfirmTransaction = 'btn-confirm-transaction',
+  ErrorMessage = 'transaction-request-error-message',
+  TransactionRequestPage = 'transaction-signing-page',
+}
+
+export enum UpdateProfileRequestSelectors {
+  BtnUpdateProfile = 'btn-update-profile',
+  ErrorMessage = 'update-profile-request-error-message',
+}

tests/selectors/test-app.selectors.ts

@@ -1,6 +1,5 @@
 export enum TestAppSelectors {
+  BtnContractCall = 'btn-contract-call',
   BtnUpdateValidProfile = 'btn-update-valid-profile',
   BtnUpdateInvalidProfile = 'btn-update-invalid-profile',
-  BtnUpdateProfile = 'btn-update-profile',
-  ErrorMessage = 'error-message',
 }