Merge pull request argentlabs#1927 from argentlabs/tests/addresses

tests: add address/contact tests

packages/extension/e2e/src/languages/ILanguage.ts

@@ -13,6 +13,8 @@ export interface ILanguage {
     lockWallet: string
     reset: string
     confirmReset: string
+    save: string
+    cancel: string
   }
   account: {
     noAccounts: string
@@ -26,6 +28,8 @@ export interface ILanguage {
     accountRecovery: string
     saveTheRecoveryPhrase: string
     pendingTransactions: string
+    recipientAddress: string
+    saveAddress: string
   }
   wallet: {
     //first screen
@@ -66,4 +70,10 @@ export interface ILanguage {
     delete: string
     copy: string
   }
+  address: {
+    nameRequired: string
+    addressRequired: string
+    removeAddress: string
+    delete: string
+  }
 }

packages/extension/e2e/src/languages/en/index.ts

@@ -13,6 +13,8 @@ const texts = {
     lockWallet: "Lock wallet",
     reset: "Reset",
     confirmReset: "RESET",
+    save: "Save",
+    cancel: "Cancel",
   },
   account: {
     noAccounts: "You have no accounts on ",
@@ -26,6 +28,8 @@ const texts = {
     accountRecovery: "Set up account recovery",
     saveTheRecoveryPhrase: "Save the recovery phrase",
     pendingTransactions: "Pending transactions",
+    recipientAddress: "Recipient's address",
+    saveAddress: "Save address",
   },
   wallet: {
     //first screen
@@ -69,6 +73,12 @@ const texts = {
     delete: "Delete",
     copy: "Copy",
   },
+  address: {
+    nameRequired: "Contact Name is required",
+    addressRequired: "Address is required",
+    removeAddress: "Remove from address book",
+    delete: "Delete",
+  },
 }
 
 export default texts

packages/extension/e2e/src/page-objects/Account.ts

@@ -215,4 +215,18 @@ export default class Account extends Navigation {
       `//a//*[text()="${lang.account.saveTheRecoveryPhrase}"]`,
     )
   }
+
+  get recipientAddress() {
+    return this.page.locator(
+      `//textarea[@placeholder="${lang.account.recipientAddress}"]/following::button[1]`,
+    )
+  }
+
+  get saveAddress() {
+    return this.page.locator(`button:text-is("${lang.account.saveAddress}")`)
+  }
+
+  get contact() {
+    return this.page.locator("div h5")
+  }
 }

packages/extension/e2e/src/page-objects/AddressBook.ts

@@ -0,0 +1,64 @@
+import type { Page } from "@playwright/test"
+
+import { lang } from "../languages"
+import Navigation from "./Navigation"
+
+export default class AddressBook extends Navigation {
+  constructor(page: Page) {
+    super(page)
+  }
+
+  get add() {
+    return this.page.locator('button[aria-label="add"]')
+  }
+
+  get name() {
+    return this.page.locator('input[name="name"]')
+  }
+
+  get address() {
+    return this.page.locator('textarea[name="address"]')
+  }
+
+  get network() {
+    return this.page.locator('[aria-label="network-selector"]')
+  }
+
+  get save() {
+    return this.page.locator(`button:text-is("${lang.common.save}")`)
+  }
+
+  get cancel() {
+    return this.page.locator(`button:text-is("${lang.common.cancel}")`)
+  }
+
+  networkOption(name: "Localhost 5050" | "Testnet" | "Testnet 2" | "Mainnet") {
+    return this.page.locator(`div[aria-disabled="false"]:text-is("${name}")`)
+  }
+
+  get nameRequired() {
+    return this.page.locator(
+      `//input[@name="name"]/following::p[contains(text(), '${lang.address.nameRequired}')]`,
+    )
+  }
+
+  get addressRequired() {
+    return this.page.locator(
+      `//textarea[@name="address"]/following::p[contains(text(), '${lang.address.addressRequired}')]`,
+    )
+  }
+
+  addressByname(name: string) {
+    return this.page.locator(
+      `//button/following::*[contains(text(),'${name}')]`,
+    )
+  }
+
+  get deleteAddress() {
+    return this.page.locator(`button:text-is("${lang.address.removeAddress}")`)
+  }
+
+  get delete() {
+    return this.page.locator(`button:text-is("${lang.address.delete}")`)
+  }
+}

packages/extension/e2e/src/page-objects/ExtensionPage.ts

@@ -3,6 +3,7 @@ import type { Page } from "@playwright/test"
 import Messages from "../utils/Messages"
 import Account from "./Account"
 import Activity from "./Activity"
+import AddressBook from "./AddressBook"
 import Navigation from "./Navigation"
 import Network from "./Network"
 import Settings from "./Settings"
@@ -17,6 +18,7 @@ export default class ExtensionPage {
   activity: Activity
   settings: Settings
   navigation: Navigation
+  addressBook: AddressBook
   constructor(page: Page, private extensionUrl: string) {
     this.page = page
     this.wallet = new Wallet(page)
@@ -27,6 +29,7 @@ export default class ExtensionPage {
     this.activity = new Activity(page)
     this.settings = new Settings(page)
     this.navigation = new Navigation(page)
+    this.addressBook = new AddressBook(page)
   }
 
   async open() {

packages/extension/e2e/src/specs/addressBook.spec.ts

@@ -0,0 +1,86 @@
+import { expect } from "@playwright/test"
+
+import config from "../config"
+import test from "../test"
+
+test.describe("Address Book", () => {
+  test("Add, update, use and delete address", async ({ extension }) => {
+    await extension.wallet.newWalletOnboarding()
+    await extension.open()
+    await expect(extension.network.networkSelector).toBeVisible()
+    await extension.network.selectNetwork("Localhost 5050")
+    await extension.account.addAccount({})
+    await extension.navigation.showSettings.click()
+    await extension.settings.addressBook.click()
+    //create
+    await extension.addressBook.add.click()
+    await extension.addressBook.save.click()
+    await expect(extension.addressBook.nameRequired).toBeVisible()
+    await expect(extension.addressBook.addressRequired).toBeVisible()
+    await extension.addressBook.name.fill("My first address")
+    await extension.addressBook.save.click()
+    await expect(extension.addressBook.nameRequired).not.toBeVisible()
+    await expect(extension.addressBook.addressRequired).toBeVisible()
+    await extension.addressBook.address.fill(config.wallets[0].accounts![0])
+    await expect(extension.addressBook.nameRequired).not.toBeVisible()
+    await expect(extension.addressBook.addressRequired).not.toBeVisible()
+    await extension.addressBook.network.click()
+    await extension.addressBook.networkOption("Localhost 5050").click()
+    await extension.addressBook.save.click()
+
+    // update
+    await extension.addressBook.addressByname("My first address").click()
+    await extension.addressBook.name.fill("New name")
+    await extension.addressBook.save.click()
+    await expect(extension.addressBook.addressByname("New name")).toBeVisible()
+    await extension.navigation.back.click()
+    await extension.navigation.close.click()
+
+    //transfer to address
+    await extension.account.token("Ethereum").click()
+    await extension.account.send.click()
+    await extension.account.recipientAddress.click()
+    await extension.addressBook.addressByname("New name").click()
+    await extension.account.sendMax.click()
+    await extension.navigation.next.click()
+    await extension.navigation.approve.click()
+    await extension.activity.checkActivity(1)
+
+    //delete address
+    await extension.navigation.menuTokens.click()
+    await extension.navigation.showSettings.click()
+    await extension.settings.addressBook.click()
+    await extension.addressBook.addressByname("New name").click()
+    await extension.addressBook.deleteAddress.click()
+    await extension.addressBook.delete.click()
+    await expect(
+      extension.addressBook.addressByname("New name"),
+    ).not.toBeVisible()
+  })
+
+  test("Add address from send window", async ({ extension }) => {
+    await extension.wallet.newWalletOnboarding()
+    await extension.open()
+    await expect(extension.network.networkSelector).toBeVisible()
+    await extension.network.selectNetwork("Localhost 5050")
+    await extension.account.addAccount({})
+
+    await extension.account.token("Ethereum").click()
+    await extension.account.send.click()
+    await extension.account.recepientAddress.fill(
+      config.wallets[0].accounts![0],
+    )
+    await extension.account.saveAddress.click()
+    await expect(extension.addressBook.address).toHaveText(
+      config.wallets[0].accounts![0],
+    )
+    await extension.addressBook.name.fill("My address")
+    await extension.addressBook.save.click()
+    await expect(extension.account.contact).toHaveText("My address")
+
+    await extension.account.sendMax.click()
+    await extension.navigation.next.click()
+    await extension.navigation.approve.click()
+    await extension.activity.checkActivity(1)
+  })
+})

packages/extension/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {
-    "@playwright/test": "^1.29.0",
+    "@playwright/test": "^1.31.2",
     "@sentry/webpack-plugin": "^1.18.9",
     "@svgr/webpack": "^6.0.0",
     "@testing-library/jest-dom": "^5.16.5",

packages/extension/src/ui/features/settings/AddressbookAddOrEditScreen.tsx

@@ -244,7 +244,7 @@ export const AddressbookAddOrEditScreen: FC<AddressbookAddOrEditProps> = ({
               )}
             </div>
 
-            <div>
+            <div aria-label="network-selector">
               <StyledControlledSelect
                 name="networkId"
                 options={networksToOptions}

packages/ui/src/components/NavigationBar.tsx

@@ -92,7 +92,7 @@ export const BarAddButton: FC<ComponentProps<typeof BarIconButton>> = (
   props,
 ) => {
   return (
-    <BarIconButton {...props}>
+    <BarIconButton aria-label="add" {...props}>
       <AddIcon />
     </BarIconButton>
   )

yarn.lock

@@ -4146,7 +4146,7 @@
     tiny-glob "^0.2.9"
     tslib "^2.4.0"
 
-"@playwright/test@^1.29.0":
+"@playwright/test@^1.31.2":
   version "1.31.2"
   resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.31.2.tgz#426d8545143a97a6fed250a2a27aa1c8e5e2548e"
   integrity sha512-BYVutxDI4JeZKV1+ups6dt5WiqKhjBtIYowyZIJ3kBDmJgsuPKsqqKNIMFbUePLSCmp2cZu+BDL427RcNKTRYw==