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,14 +38,15 @@ function MinimalErrorMessageSuspense(props: StackProps) {
       bg="#FCEEED"
       borderRadius="12px"
       color={color('feedback-error')}
-      data-testid={TransactionSigningSelectors.TransactionErrorMessage}
       isInline
       p="base"
       width="100%"
       {...props}
     >
       <ErrorIcon />
-      <styled.span textStyle="caption.01">{getTitle()}</styled.span>
+      <styled.span data-testid={TransactionRequestSelectors.ErrorMessage} textStyle="caption.01">
+        {getTitle()}
+      </styled.span>
     </Stack>
   );
 }

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';
@@ -373,35 +373,27 @@ export const Debugger = () => {
 
       <Box>
         <ButtonGroup spacing={4} my="base">
-          <Button
-            data-testid={TransactionSigningSelectors.BtnContractCall}
-            mt={3}
-            onClick={() => callFaker(stacksTestnetNetwork, PostConditionMode.Allow)}
-          >
+          <Button mt={3} onClick={() => callFaker(stacksTestnetNetwork, PostConditionMode.Allow)}>
             Contract call (ALLOW mode)
           </Button>
-          <Button
-            data-testid={TransactionSigningSelectors.BtnContractCall}
-            mt={3}
-            onClick={() => callFaker(stacksTestnetNetwork)}
-          >
+          <Button 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 mt={3} onClick={() => callFaker(stacksLocalhostNetwork)}>
+            Contract call (Localhost)
+          </Button>
           <Button
-            data-testid={TransactionSigningSelectors.BtnContractCall}
+            data-testid={TestAppSelectors.BtnStxTransfer}
             mt={3}
-            onClick={() => callFaker(stacksLocalhostNetwork)}
+            onClick={() => stxTransfer('102')}
           >
-            Contract call (Localhost)
-          </Button>
-          <Button mt={3} onClick={() => stxTransfer('102')}>
             STX transfer
           </Button>
           <Button mt={3} onClick={callBnsTransfer}>

tests-legacy/integration/utils.ts

@@ -13,10 +13,6 @@ export function createTestSelector<T extends string>(name: T): `[data-testid="${
   return `[data-testid="${name}"]`;
 }
 
-export function getCurrentTestName() {
-  return expect.getState().currentTestName?.replaceAll(' ', '-');
-}
-
 export function randomString(len: number) {
   const charSet = 'abcdefghijklmnopqrstuvwxyz0123456789';
   let randomString = '';

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

@@ -7,6 +7,8 @@ export class TestAppPage {
   static readonly url = 'http://localhost:3000';
   page: Page;
   readonly signInBtnSelector = createTestSelector(OnboardingSelectors.SignUpBtn);
+  readonly contractCallBtnSelector = createTestSelector(TestAppSelectors.BtnContractCall);
+  readonly stxTransferBtnSelector = createTestSelector(TestAppSelectors.BtnStxTransfer);
   readonly updateProfileBtnSelector = createTestSelector(TestAppSelectors.BtnUpdateValidProfile);
   readonly updateInvalidProfileBtnSelector = createTestSelector(
     TestAppSelectors.BtnUpdateInvalidProfile
@@ -26,6 +28,14 @@ export class TestAppPage {
     return this.page.click(this.signInBtnSelector, { timeout: 10000 });
   }
 
+  async clickContractCallButton() {
+    return this.page.click(this.contractCallBtnSelector);
+  }
+
+  async clickStxTransferButton() {
+    return this.page.click(this.stxTransferBtnSelector);
+  }
+
   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 waitForTransactionRequestError(msg: string) {
+    return this.page.waitForSelector(`text=${msg}`);
+  }
+
+  async waitForFee() {
+    await this.page.locator(this.feeToBePaidLabel).waitFor();
+  }
+
+  async waitForTransactionRequestPage() {
+    await this.page.locator(this.transactionRequestPage).waitFor();
+  }
+}