test(suite-native): send custom fee e2e

suite-native/app/e2e/pageObjects/send/sendFeesActions.ts

@@ -1,16 +1,28 @@
-import { expect as detoxExpect } from 'detox';
-
 import { FeeLevelLabel } from '@suite-common/wallet-types';
 
+export type FeeValues =
+    | { feeType: Exclude<FeeLevelLabel, 'custom'>; customFeePerUnit?: never }
+    | { feeType: 'custom'; customFeePerUnit: string };
 class SendFeesActions {
     async waitForScreen() {
         await waitFor(element(by.id('@screen/SendFees')))
             .toBeVisible()
             .withTimeout(5000);
     }
 
-    async selectFee(feeType: FeeLevelLabel) {
-        await detoxExpect(element(by.id('@screen/SendFees'))).toBeVisible();
+    async setCustomFee(customFeePerUnit: string) {
+        await element(by.id('@send/fees-level-custom')).tap();
+        await waitFor(element(by.id('@send/custom-fee-bottom-sheet')))
+            .toBeVisible()
+            .withTimeout(5000);
+        await element(by.id(`@send/customFeePerUnit-input`)).replaceText(customFeePerUnit);
+
+        const submitButton = element(by.id('@send/custom-fee-submit-button'));
+        await waitFor(submitButton).toBeVisible().withTimeout(5000);
+        await submitButton.tap();
+    }
+    async selectFee({ feeType, customFeePerUnit }: FeeValues) {
+        await this.waitForScreen();
 
         switch (feeType) {
             case 'low':
@@ -22,6 +34,9 @@ class SendFeesActions {
             case 'high':
                 await element(by.id('@send/fees-level-high')).tap();
                 break;
+            case 'custom':
+                await this.setCustomFee(customFeePerUnit);
+                break;
             default:
                 throw new Error(`SendFeesActions.selectFee(): Unsupported fee type: ${feeType}`);
         }

suite-native/app/e2e/tests/send.test.ts

@@ -10,7 +10,7 @@ import { onHome } from '../pageObjects/homeActions';
 import { onMyAssets } from '../pageObjects/myAssetsActions';
 import { onOnboarding } from '../pageObjects/onboardingActions';
 import { onSendAddressReview } from '../pageObjects/send/sendAddressReviewActions';
-import { onSendFees } from '../pageObjects/send/sendFeesActions';
+import { FeeValues, onSendFees } from '../pageObjects/send/sendFeesActions';
 import { onSendOutputsForm } from '../pageObjects/send/sendOutputsFormActions';
 import { onSendOutputsReview } from '../pageObjects/send/sendOutputsReviewActions';
 import { onTabBar } from '../pageObjects/tabBarActions';
@@ -35,18 +35,38 @@ const SEND_FORM_ERROR_MESSAGES = {
 
 const INITIAL_ACCOUNT_BALANCE = 3.14;
 
-const prepareTransactionForOnDeviceReview = async (isFormEmpty: boolean = true) => {
+const prepareTransactionForOnDeviceReview = async ({
+    feeValues,
+    isFormEmpty = true,
+    recipientValues = [{ address: 'bcrt1q34up3cga3fkmph47t22mpk5d0xxj3ppghph9da', amount: '0.5' }],
+}: {
+    recipientValues?: { address: string; amount: string }[];
+    feeValues?: FeeValues;
+    isFormEmpty?: boolean;
+}) => {
     if (isFormEmpty) {
-        await onSendOutputsForm.fillForm([
-            { address: 'bcrt1q34up3cga3fkmph47t22mpk5d0xxj3ppghph9da', amount: '0.5' },
-        ]);
+        await onSendOutputsForm.fillForm(recipientValues);
     }
 
     await onSendOutputsForm.submitForm();
 
+    if (feeValues) {
+        await onSendFees.selectFee(feeValues);
+    }
+
     await onSendFees.submitFee();
 };
 
+const signTransactionAndSendIt = async () => {
+    await onSendAddressReview.nextStep();
+    await onSendAddressReview.nextStep();
+    await TrezorUserEnvLink.pressYes();
+
+    await onSendOutputsReview.waitForScreen();
+    await onSendOutputsReview.confirmTransactionOutputs();
+    await onSendOutputsReview.clickSendTransaction();
+};
+
 conditionalDescribe(device.getPlatform() !== 'android', 'Send transaction flow.', () => {
     beforeAll(async () => {
         await prepareTrezorEmulator();
@@ -86,15 +106,17 @@ conditionalDescribe(device.getPlatform() !== 'android', 'Send transaction flow.'
     });
 
     it('Compose and dispatch a regtest transaction.', async () => {
-        await prepareTransactionForOnDeviceReview();
+        await prepareTransactionForOnDeviceReview({ isFormEmpty: true });
 
-        await onSendAddressReview.nextStep();
-        await onSendAddressReview.nextStep();
-        await TrezorUserEnvLink.pressYes();
+        await signTransactionAndSendIt();
+    });
+
+    it('Compose and dispatch a regtest transaction with a custom fee.', async () => {
+        await prepareTransactionForOnDeviceReview({
+            feeValues: { feeType: 'custom', customFeePerUnit: '100' },
+        });
 
-        await onSendOutputsReview.waitForScreen();
-        await onSendOutputsReview.confirmTransactionOutputs();
-        await onSendOutputsReview.clickSendTransaction();
+        await signTransactionAndSendIt();
     });
 
     it('Validate send form input errors.', async () => {
@@ -118,7 +140,7 @@ conditionalDescribe(device.getPlatform() !== 'android', 'Send transaction flow.'
     });
 
     it('Review cancellation and error handling.', async () => {
-        await prepareTransactionForOnDeviceReview();
+        await prepareTransactionForOnDeviceReview({ isFormEmpty: true });
 
         // Cancel button should go back if the on device review was not started yet.
         await element(by.id('@screen/sub-header/icon-left')).tap();
@@ -134,8 +156,7 @@ conditionalDescribe(device.getPlatform() !== 'android', 'Send transaction flow.'
 
         // Disconnecting not remembered device should exit the send flow and display alert.
         await onAccountDetail.openSend();
-        const isFormEmpty = false;
-        await prepareTransactionForOnDeviceReview(isFormEmpty);
+        await prepareTransactionForOnDeviceReview({ isFormEmpty: false });
         await onSendAddressReview.nextStep();
         await onSendAddressReview.nextStep();
 

suite-native/module-send/src/components/CustomFee.tsx

@@ -47,6 +47,7 @@ export const CustomFee = () => {
                             colorScheme="tertiaryElevation0"
                             size="small"
                             viewLeft={<Icon name="plus" size="mediumLarge" />}
+                            testID="@send/fees-level-custom"
                             onPress={openCustomFeeBottomSheet}
                         >
                             <Translation id="moduleSend.fees.custom.addButton" />

suite-native/module-send/src/components/CustomFeeBottomSheet.tsx

@@ -62,6 +62,7 @@ export const CustomFeeBottomSheet = ({ isVisible, onClose }: CustomFeeBottomShee
             isVisible={isVisible}
             onClose={onClose}
             title={<Translation id="moduleSend.fees.custom.bottomSheet.title" />}
+            testID="@send/custom-fee-bottom-sheet"
         >
             <VStack spacing="sp24" justifyContent="space-between" flex={1}>
                 <CustomFeeInputs networkSymbol={networkSymbol} />
@@ -102,7 +103,10 @@ export const CustomFeeBottomSheet = ({ isVisible, onClose }: CustomFeeBottomShee
                 <Animated.View style={animatedButtonContainerStyle}>
                     {isSubmittable && (
                         <Animated.View entering={SlideInDown} exiting={SlideOutDown}>
-                            <Button onPress={handleSetCustomFee}>
+                            <Button
+                                onPress={handleSetCustomFee}
+                                testID="@send/custom-fee-submit-button"
+                            >
                                 <Translation id="moduleSend.fees.custom.bottomSheet.confirmButton" />
                             </Button>
                         </Animated.View>

suite-native/module-send/src/components/CustomFeeInputs.tsx

@@ -50,7 +50,7 @@ export const CustomFeeInputs = ({ networkSymbol }: CustomFeeInputsProps) => {
                         : translate('moduleSend.fees.custom.bottomSheet.label.feeRate')
                 }
                 name={feePerUnitFieldName}
-                testID={feePerUnitFieldName}
+                testID={`@send/${feePerUnitFieldName}-input`}
                 accessibilityLabel="address input"
                 keyboardType="number-pad"
                 rightIcon={<Text color="textSubdued">{feeUnits}</Text>}