Create E2E tests for verified/unverified tokens (#3472)

This commit introduces E2E test that checks the functiolality of
verified/unverified tokens. Following general steps are executed:
1. Import account
2. Enable `Show unverified assets`
3. Hide asset
4. Trust asset
5. Hide trusted asset
A number of checks is performed during each step.

The commit also introduces helper functions and adds `data-testid`
attribute to a couple of DOM elements.

TODO:

- [x] As some of the code is similar or identical as in the
#3418 PR which is yet not
merged to `main`, some conflicts may arise and will need to be resolved
before this change lands on `main`.
- [x] Also some changes will need to be made once
#3195 gets merged to `main`,
as this PR solves a bug causing failures in the tests (the failing part
of the test was temporarily commented out).
- [x] Add `E2E_TEST_ONLY_WALLET_JSON_BODY` and
`E2E_TEST_ONLY_WALLET_JSON_PASSWORD` secrets in GitHub's settings.
- [x] Wait for #3559 to be
merged and merge main to feature branch (should fix the failing
`e2e-tests` job)
- [x] Handle TODOs in the code

Latest build:
[extension-builds-3472](https://github.com/tahowallet/extension/suites/15116290312/artifacts/863816729)
(as of Tue, 15 Aug 2023 18:12:30 GMT).

.github/workflows/build.yml

@@ -184,6 +184,9 @@ jobs:
       # tests on every PR update. We'll tag those tests with the `@expensive`
       # tag.
       - name: Run free Playwright tests
+        env:
+          E2E_TEST_ONLY_WALLET_JSON_BODY: ${{ secrets.E2E_TEST_ONLY_WALLET_JSON_BODY }}
+          E2E_TEST_ONLY_WALLET_JSON_PASSWORD: ${{ secrets.E2E_TEST_ONLY_WALLET_JSON_PASSWORD }}
         run: xvfb-run npx playwright test --grep-invert @expensive
         #env:
         # DEBUG: pw:api*

e2e-tests/fork-based/transactions.spec.ts

@@ -1,56 +1,32 @@
-import fs from "fs"
 import { test, expect } from "../utils"
+import { account2 } from "../utils/onboarding"
 
 test.describe("Transactions", () => {
-  test.beforeAll(async () => {
-    /**
-     * Create a JSON file with an encoded private key based on the file
-     * content passed from an environment variable. The further steps of
-     * the tests assume that the file encodes the pk of the `testertesting.eth`
-     * account. The JSON file can be generated using a script
-     * `scripts/key-generation/export-key-as-json.js`.
-     */
-    const jsonBody = process.env.TEST_WALLET_JSON_BODY
-    if (jsonBody) {
-      fs.writeFileSync("./e2e-tests/utils/JSON.json", jsonBody)
-    } else {
-      throw new Error(
-        "TEST_WALLET_JSON_BODY environment variable is not defined."
-      )
-    }
-  })
-
   test("User can send base asset", async ({
     page: popup,
     walletPageHelper,
     transactionsHelper,
+    assetsHelper,
   }) => {
     await test.step("Import account", async () => {
       /**
-       * Onboard using JSON file.
+       * Import the `testertesting.eth` account using onboarding with a JSON
+       * file.
        */
-      const jsonPassword = process.env.TEST_WALLET_JSON_PASSWORD
-      if (jsonPassword) {
-        await walletPageHelper.onboardWithJSON(
-          "./e2e-tests/utils/JSON.json",
-          jsonPassword
-        )
-      } else {
-        throw new Error(
-          "TEST_WALLET_JSON_PASSWORD environment variable is not defined."
-        )
-      }
+      await walletPageHelper.onboardWithJSON(account2)
+      await walletPageHelper.goToStartPage()
+      await walletPageHelper.setViewportSize()
 
       /**
        * Verify we're on Ethereum network. Verify common elements on the main
        * page.
        */
-      await walletPageHelper.verifyCommonElements(
+      await walletPageHelper.assertCommonElements(
         /^Ethereum$/,
         false,
-        /^testertesting\.eth$/
+        account2.name
       )
-      await walletPageHelper.verifyAnalyticsBanner()
+      await walletPageHelper.assertAnalyticsBanner()
 
       /**
        * Verify ETH is visible on the asset list and has the correct balance
@@ -74,9 +50,9 @@ test.describe("Transactions", () => {
        * already selected. Verify elements on the page. Make sure `Continue`
        * isn't active.
        */
-      await transactionsHelper.verifyUnfilledSendAssetScreen(
+      await transactionsHelper.assertUnfilledSendAssetScreen(
         /^Ethereum$/,
-        /^testertesting\.eth$/,
+        account2.name,
         "ETH",
         "0\\.1021",
         true
@@ -110,7 +86,7 @@ test.describe("Transactions", () => {
       /**
        * Check if "Transfer" has opened and verify elements on the page.
        */
-      await transactionsHelper.verifyTransferScreen(
+      await transactionsHelper.assertTransferScreen(
         "Ethereum",
         "testertesting\\.eth",
         "0x47745a7252e119431ccf973c0ebd4279638875a6",
@@ -143,12 +119,12 @@ test.describe("Transactions", () => {
         /**
          * Verify elements on the asset activity screen
          */
-        await transactionsHelper.verifyAssetActivityScreen(
+        await assetsHelper.assertAssetDetailsPage(
           /^Ethereum$/,
-          /^testertesting\.eth$/,
+          account2.name,
           /^ETH$/,
           /^0\.0914$/,
-          true
+          "base"
         )
         // This is what we expect currently on forked network. If ve ever fix
         // displaying activity on fork, we should perform following checks
@@ -192,12 +168,12 @@ test.describe("Transactions", () => {
             .first()
         ).toBeVisible()
 
-        await walletPageHelper.verifyCommonElements(
+        await walletPageHelper.assertCommonElements(
           /^Ethereum$/,
           false,
-          /^testertesting\.eth$/
+          account2.name
         )
-        await walletPageHelper.verifyAnalyticsBanner()
+        await walletPageHelper.assertAnalyticsBanner()
       }
     )
   })
@@ -206,33 +182,27 @@ test.describe("Transactions", () => {
     page: popup,
     walletPageHelper,
     transactionsHelper,
+    assetsHelper,
   }) => {
     await test.step("Import account", async () => {
       /**
-       * Onboard using JSON file.
+       * Import the `testertesting.eth` account using onboarding with a JSON
+       * file.
        */
-      const jsonPassword = process.env.TEST_WALLET_JSON_PASSWORD
-      if (jsonPassword) {
-        await walletPageHelper.onboardWithJSON(
-          "./e2e-tests/utils/JSON.json",
-          jsonPassword
-        )
-      } else {
-        throw new Error(
-          "TEST_WALLET_JSON_PASSWORD environment variable is not defined."
-        )
-      }
+      await walletPageHelper.onboardWithJSON(account2)
+      await walletPageHelper.goToStartPage()
+      await walletPageHelper.setViewportSize()
 
       /**
        * Verify we're on Ethereum network. Verify common elements on the main
        * page.
        */
-      await walletPageHelper.verifyCommonElements(
+      await walletPageHelper.assertCommonElements(
         /^Ethereum$/,
         false,
-        /^testertesting\.eth$/
+        account2.name
       )
-      await walletPageHelper.verifyAnalyticsBanner()
+      await walletPageHelper.assertAnalyticsBanner()
 
       /**
        * Verify KEEP is visible on the asset list and has the correct balance
@@ -261,9 +231,9 @@ test.describe("Transactions", () => {
        * already selected. Verify elements on the page. Make sure `Continue`
        * isn't active.
        */
-      await transactionsHelper.verifyUnfilledSendAssetScreen(
+      await transactionsHelper.assertUnfilledSendAssetScreen(
         /^Ethereum$/,
-        /^testertesting\.eth$/,
+        account2.name,
         "KEEP",
         "65\\.88",
         false
@@ -297,7 +267,7 @@ test.describe("Transactions", () => {
       /**
        * Check if "Transfer" has opened and verify elements on the page.
        */
-      await transactionsHelper.verifyTransferScreen(
+      await transactionsHelper.assertTransferScreen(
         "Ethereum",
         "testertesting\\.eth",
         "0x47745a7252e119431ccf973c0ebd4279638875a6",
@@ -328,12 +298,12 @@ test.describe("Transactions", () => {
       /**
        * Verify elements on the asset activity screen
        */
-      await transactionsHelper.verifyAssetActivityScreen(
+      await assetsHelper.assertAssetDetailsPage(
         /^Ethereum$/,
-        /^testertesting\.eth$/,
+        account2.name,
         /^KEEP$/,
         /^65\.88$/,
-        false,
+        "knownERC20",
         "https://etherscan.io/token/0x85eee30c52b0b379b046fb0f85f4f3dc3009afec"
       )
       // This is what we expect currently on a forked network.
@@ -353,33 +323,27 @@ test.describe("Transactions", () => {
     page: popup,
     walletPageHelper,
     transactionsHelper,
+    assetsHelper,
   }) => {
     await test.step("Import account", async () => {
       /**
-       * Onboard using JSON file.
+       * Import the `testertesting.eth` account using onboarding with a JSON
+       * file.
        */
-      const jsonPassword = process.env.TEST_WALLET_JSON_PASSWORD
-      if (jsonPassword) {
-        await walletPageHelper.onboardWithJSON(
-          "./e2e-tests/utils/JSON.json",
-          jsonPassword
-        )
-      } else {
-        throw new Error(
-          "TEST_WALLET_JSON_PASSWORD environment variable is not defined."
-        )
-      }
+      await walletPageHelper.onboardWithJSON(account2)
+      await walletPageHelper.goToStartPage()
+      await walletPageHelper.setViewportSize()
 
       /**
        * Verify we're on Ethereum network. Verify common elements on the main
        * page.
        */
-      await walletPageHelper.verifyCommonElements(
+      await walletPageHelper.assertCommonElements(
         /^Ethereum$/,
         false,
-        /^testertesting\.eth$/
+        account2.name
       )
-      await walletPageHelper.verifyAnalyticsBanner()
+      await walletPageHelper.assertAnalyticsBanner()
 
       /**
        * Verify KEEP is visible on the asset list and has the correct balance
@@ -408,9 +372,9 @@ test.describe("Transactions", () => {
        * already selected. Verify elements on the page. Make sure `Continue`
        * isn't active.
        */
-      await transactionsHelper.verifyUnfilledSendAssetScreen(
+      await transactionsHelper.assertUnfilledSendAssetScreen(
         /^Ethereum$/,
-        /^testertesting\.eth$/,
+        account2.name,
         "ETH",
         "\\d+\\.\\d{4}",
         true
@@ -466,9 +430,9 @@ test.describe("Transactions", () => {
        *  Verify elements on the page after selecting token. Make sure
        * `Continue` isn't active.
        */
-      await transactionsHelper.verifyUnfilledSendAssetScreen(
+      await transactionsHelper.assertUnfilledSendAssetScreen(
         /^Ethereum$/,
-        /^testertesting\.eth$/,
+        account2.name,
         "KEEP",
         "65\\.88",
         false
@@ -502,7 +466,7 @@ test.describe("Transactions", () => {
       /**
        * Check if "Transfer" has opened and verify elements on the page.
        */
-      await transactionsHelper.verifyTransferScreen(
+      await transactionsHelper.assertTransferScreen(
         "Ethereum",
         "testertesting\\.eth",
         "0x47745a7252e119431ccf973c0ebd4279638875a6",
@@ -535,12 +499,12 @@ test.describe("Transactions", () => {
         /**
          * Verify elements on the asset activity screen
          */
-        await transactionsHelper.verifyAssetActivityScreen(
+        await assetsHelper.assertAssetDetailsPage(
           /^Ethereum$/,
-          /^testertesting\.eth$/,
+          account2.name,
           /^KEEP$/,
           /^53\.54$/,
-          false,
+          "knownERC20",
           "https://etherscan.io/token/0x85eee30c52b0b379b046fb0f85f4f3dc3009afec"
         )
         // This is what we expect currently on forked network. If ve ever fix
@@ -585,12 +549,12 @@ test.describe("Transactions", () => {
             .first()
         ).toBeVisible()
 
-        await walletPageHelper.verifyCommonElements(
+        await walletPageHelper.assertCommonElements(
           /^Ethereum$/,
           false,
-          /^testertesting\.eth$/
+          account2.name
         )
-        await walletPageHelper.verifyAnalyticsBanner()
+        await walletPageHelper.assertAnalyticsBanner()
       }
     )
   })

e2e-tests/regular/nfts.spec.ts

@@ -1,6 +1,6 @@
 import { wait } from "@tallyho/tally-background/lib/utils"
 import { test, expect } from "../utils"
-import { account1Address, account1Name } from "../utils/onboarding"
+import { account1 } from "../utils/onboarding"
 
 test.describe("NFTs", () => {
   test("User can view nft collections, poaps and badges", async ({
@@ -37,7 +37,7 @@ test.describe("NFTs", () => {
         }
       })
 
-      await walletPageHelper.onboarding.addReadOnlyAccount(account1Address)
+      await walletPageHelper.onboarding.addReadOnlyAccount(account1.address)
 
       await walletPageHelper.goToStartPage()
       await walletPageHelper.setViewportSize()
@@ -78,7 +78,7 @@ test.describe("NFTs", () => {
       await page
         .getByTestId("nft_account_filters")
         .filter({
-          hasText: account1Name,
+          hasText: account1.name,
         })
         .getByRole("checkbox")
         .click()
@@ -105,7 +105,7 @@ test.describe("NFTs", () => {
         .getByTestId("nft_account_filters")
         .getByTestId("toggle_item")
         .filter({
-          hasText: account1Name,
+          hasText: account1.name,
         })
         .getByRole("checkbox")
         .click()