QA - manage custom networks (#3354)

Author: eunjisong

packages/core-mobile/app/new/features/accountSettings/screens/manageNetworks/AddEditNetworkScreen.tsx

@@ -330,6 +330,8 @@ export const AddEditNetworkScreen = (): JSX.Element => {
             gap: 16
           }}>
           <Button
+            accessible={true}
+            testID="save_network_btn"
             type="primary"
             size="large"
             onPress={handleSubmit}
@@ -405,6 +407,8 @@ export const AddEditNetworkScreen = (): JSX.Element => {
               alignItems: 'center'
             }}>
             <Icons.Custom.Category
+              testID="custom_avatar"
+              accessible={true}
               width={40}
               height={40}
               color={theme.colors.$textSecondary}

packages/core-mobile/e2e-appium/helpers/networks.ts

@@ -5,12 +5,23 @@ export type Network = {
   haveToggle: boolean
   data?: {
     rpcUrl?: string
-    explorerUrl: string
+    explorerUrl?: string
     tokenSymbol: string
     tokenName: string
     chainId: string
   }
 }
+
+export const customNetwork: Network = {
+  name: 'POLYGON',
+  haveToggle: true,
+  data: {
+    rpcUrl: 'https://polygon-rpc.com',
+    chainId: '137',
+    tokenSymbol: 'POLY',
+    tokenName: 'Polygon Ecosystem Token'
+  }
+}
 export const networks: Network[] = [
   {
     name: common.cChain,

packages/core-mobile/e2e-appium/locators/settings.loc.ts

@@ -82,5 +82,8 @@ export default {
   typeInOrPasteAddress: 'Type in or paste address',
   contactPreviewAddress: 'contact_preview_address',
   hkd: 'HKD',
-  beamL1: 'Beam L1'
+  beamL1: 'Beam L1',
+  customAvatar: 'custom_avatar',
+  nameThisNetworkBtn: 'Name this network',
+  saveNetworkBtn: 'save_network_btn'
 }

packages/core-mobile/e2e-appium/pages/settings.page.ts

@@ -1,4 +1,3 @@
-/* eslint-disable max-params */
 import { actions } from '../helpers/actions'
 import settings from '../locators/settings.loc'
 import { selectors } from '../helpers/selectors'
@@ -54,10 +53,18 @@ class Settings {
     return selectors.getById(settings.nameContactBtn)
   }
 
+  get nameThisNetworkBtn() {
+    return selectors.getByText(settings.nameThisNetworkBtn)
+  }
+
   get networkRpcUrl() {
     return selectors.getById(settings.networkRpcUrl)
   }
 
+  get saveNetworkBtn() {
+    return selectors.getById(settings.saveNetworkBtn)
+  }
+
   get chainId() {
     return selectors.getById(settings.chainId)
   }
@@ -174,6 +181,10 @@ class Settings {
     return selectors.getByText(settings.emptyContacts)
   }
 
+  get customAvatar() {
+    return selectors.getById(settings.customAvatar)
+  }
+
   networkList(name: string) {
     return selectors.getById(`network_list__${name}`)
   }
@@ -207,7 +218,7 @@ class Settings {
     contactName: string
   ) {
     // add contact name
-    await this.addContactOrNetworkName(contactName)
+    await this.addContactName(contactName)
     // add contact addresses
     for (const [network, address] of Object.entries(networkAndAddress)) {
       await actions.click(selectors.getById(`contact_delete_btn__${network}`))
@@ -244,7 +255,7 @@ class Settings {
     contactName: string
   ) {
     // add contact name
-    await this.addContactOrNetworkName(contactName)
+    await this.addContactName(contactName)
     // add contact addresses
     for (const [network, address] of Object.entries(networkAndAddress)) {
       await this.setAddress(network, address, contactName)
@@ -370,36 +381,58 @@ class Settings {
     }
   }
 
-  async addContactOrNetworkName(name: string) {
+  async addContactName(name: string) {
     await actions.tap(this.nameContactBtn)
     await actions.type(common.dialogInput, name)
     await actions.tapEnterOnKeyboard()
     await common.tapSaveAlert()
   }
 
+  async addNetworkName(name: string) {
+    await actions.tap(this.nameThisNetworkBtn)
+    await actions.type(common.dialogInput, name)
+    await actions.tapEnterOnKeyboard()
+    await common.tapSaveAlert()
+  }
+
   async setNetworkData(type: string, value: string) {
     await actions.tap(selectors.getByText(`Add ${type}`))
+    await actions.dragAndDrop(this.nameThisNetworkBtn, [0, -500])
     await actions.type(
       selectors.getById(`advanced_input__${type.toLowerCase()}`),
       value
     )
-    await actions.dismissKeyboard()
+    try {
+      await actions.tapEnterOnKeyboard()
+    } catch (e) {
+      await actions.dismissKeyboard(`advanced_input__${type.toLowerCase()}`)
+    }
   }
 
-  async addNetwork(
-    networkName: string,
-    rpcUrl: string,
-    chainId: string,
-    nativeTokenSymbol: string,
-    nativeTokenName: string
-  ) {
+  async addNetwork(network: Network) {
+    const { name, data } = network
     await this.tapAddNetworkBtn()
-    await this.addContactOrNetworkName(networkName)
-    await this.setNetworkData('Network RPC URL', rpcUrl)
-    await this.setNetworkData('Chain ID', chainId)
-    await this.setNetworkData('token symbol', nativeTokenSymbol)
-    await this.setNetworkData('token name', nativeTokenName)
-    await common.tapSave()
+    await this.setNetworkData('Network RPC URL', data?.rpcUrl ?? '')
+    await this.setNetworkData('Chain ID', data?.chainId ?? '')
+    await this.setNetworkData('token symbol', data?.tokenSymbol ?? '')
+    await this.setNetworkData('token name', data?.tokenName ?? '')
+    await this.addNetworkName(name)
+    await this.tapSaveNetworkBtn()
+  }
+
+  async tapSaveNetworkBtn() {
+    await actions.tap(this.saveNetworkBtn)
+  }
+
+  async editNetwork(networkName: string) {
+    await this.addNetworkName(networkName)
+    await this.tapSaveNetworkBtn()
+  }
+
+  async removeNetwork(networkName: string) {
+    await this.tapNetworkByName(networkName)
+    await common.tapDelete()
+    await common.tapDeleteAlert()
   }
 
   async verifySettingsRow(row: string, rightVal: string | undefined) {
@@ -454,9 +487,11 @@ class Settings {
       await actions.isVisible(this.networkRpcUrl)
       await actions.isVisible(this.networkDetails(network.data?.rpcUrl ?? ''))
     }
-    await actions.isVisible(
-      this.networkDetails(network.data?.explorerUrl ?? '')
-    )
+
+    if (network.data?.explorerUrl) {
+      await actions.isVisible(this.networkDetails(network.data?.explorerUrl))
+    }
+
     await actions.isVisible(this.networkDetails(network.data?.chainId ?? ''))
     await actions.isVisible(
       this.networkDetails(network.data?.tokenSymbol ?? '')

packages/core-mobile/e2e-appium/specs/settings/customNetwork.spec.ts

@@ -0,0 +1,53 @@
+import settings from '../../pages/settings.page'
+import common from '../../pages/commonEls.page'
+import warmup from '../../helpers/warmup'
+import { customNetwork } from '../../helpers/networks'
+import portfolioPage from '../../pages/portfolio.page'
+import { actions } from '../../helpers/actions'
+import { selectors } from '../../helpers/selectors'
+
+describe('Settings', () => {
+  it('Custom Networks - should add a custom network', async () => {
+    await warmup()
+    await settings.goNetworks()
+    await settings.addNetwork(customNetwork)
+    await settings.verifyNetworkDetails(customNetwork)
+  })
+
+  it('Custom Networks - should toggle a custom network', async () => {
+    // Enable a custom network
+    await common.typeSearchBar(customNetwork.name)
+    await settings.tapNetworkSwitch(customNetwork.name)
+    await common.dismissBottomSheet()
+    await portfolioPage.verifyNetworksRemoved([customNetwork])
+    await settings.goNetworks()
+    // Disable a custom network
+    await common.typeSearchBar(customNetwork.name)
+    await settings.tapNetworkSwitch(customNetwork.name, false)
+    await common.dismissBottomSheet()
+    await portfolioPage.verifyNetworksAdded([customNetwork])
+  })
+
+  it('Custom Networks - should edit a custom network', async () => {
+    const networkWrongName = 'POLYGON (WRONG)'
+    await settings.goNetworks()
+    await settings.tapNetworkByName(customNetwork.name)
+    await settings.editNetwork(networkWrongName)
+    await settings.verifyNetworkDetails({
+      ...customNetwork,
+      name: 'POLYGON (WRONG)'
+    })
+  })
+
+  it('Custom Networks - should remove a custom network', async () => {
+    const networkName = 'POLYGON (WRONG)'
+    await settings.removeNetwork(networkName)
+    await common.typeSearchBar(networkName)
+    await actions.isNotVisible(
+      selectors.getByText(`network_toggle_enabled__${networkName}`)
+    )
+    await actions.isNotVisible(
+      selectors.getByText(`network_toggle_disabled__${networkName}`)
+    )
+  })
+})

packages/k2-alpine/src/components/Button/Button.tsx

@@ -34,6 +34,7 @@ interface ButtonProps {
   style?: StyleProp<ViewStyle>
   textStyle?: StyleProp<TextStyle>
   testID?: string
+  accessible?: boolean
   type: ButtonType
   size: ButtonSize
   leftIcon?: ButtonIconType | JSX.Element
@@ -54,6 +55,7 @@ export const Button = forwardRef<RNView, ButtonProps & PropsWithChildren>(
       textStyle,
       children,
       testID,
+      accessible = false,
       shouldInverseTheme = false,
       ...rest
     },
@@ -86,7 +88,7 @@ export const Button = forwardRef<RNView, ButtonProps & PropsWithChildren>(
     return (
       <TouchableOpacity
         ref={ref}
-        accessible={false}
+        accessible={accessible}
         testID={testID}
         disabled={disabled}
         style={[