Tests/send payment (#1206)

* first pass at sendpayment

* add login helper

* revert unnecessary changes

* rm comments

* adding force:true

* all clicks are force true

* provide enough time to switch to testnet

* test the network switch

* surface more info

* explicitly wait for not funded msg

* try a conditional check?

* print some consoles

* another error console

* more console logging

* add indexer_url to test pipeline

* rm force

* more consoles

* more logs

* do we just need to wait longer?

* rollback console.logs and info

* rollback more logging stuff

* rm consoles and rename the login helper

.github/workflows/runTests.yml

@@ -1,4 +1,6 @@
 name: Run Tests
+env:
+  INDEXER_URL: ${{ secrets.INDEXER_URL }}
 on: [pull_request]
 jobs:
   test-ci:

extension/e2e-tests/helpers/login.ts

@@ -0,0 +1,42 @@
+import { generateMnemonic } from "stellar-hd-wallet";
+import { expect } from "../test-fixtures";
+
+export const PASSWORD = "My-password123";
+
+export const loginAndFund = async ({ page, extensionId }) => {
+  await page.goto(`chrome-extension://${extensionId}/index.html`);
+  await page.getByText("Import Wallet").click();
+
+  const TEST_WORDS = generateMnemonic({ entropyBits: 128 }).split(" ");
+
+  for (let i = 1; i <= TEST_WORDS.length; i++) {
+    await page.locator(`#MnemonicPhrase-${i}`).fill(TEST_WORDS[i - 1]);
+  }
+
+  await page.locator("#password-input").fill(PASSWORD);
+  await page.locator("#confirm-password-input").fill(PASSWORD);
+  await page.locator("#termsOfUse-input").check({ force: true });
+  await page.getByRole("button", { name: "Import" }).click();
+  await expect(page.getByText("Wallet created successfully!")).toBeVisible({
+    timeout: 20000,
+  });
+
+  await page.goto(`chrome-extension://${extensionId}/index.html#/account`);
+  await expect(page.getByTestId("network-selector-open")).toBeVisible({
+    timeout: 10000,
+  });
+  await page.getByTestId("network-selector-open").click();
+  await page.getByText("Test Net").click();
+  await expect(page.getByTestId("account-view")).toBeVisible({
+    timeout: 10000,
+  });
+
+  await expect(page.getByTestId("not-funded")).toBeVisible({
+    timeout: 10000,
+  });
+  await page.getByRole("button", { name: "Fund with Friendbot" }).click();
+
+  await expect(page.getByTestId("account-assets")).toBeVisible({
+    timeout: 30000,
+  });
+};

extension/e2e-tests/sendPayment.test.ts

@@ -0,0 +1,39 @@
+import { test, expect } from "./test-fixtures";
+import { loginAndFund, PASSWORD } from "./helpers/login";
+
+test("Send XLM payment", async ({ page, extensionId }) => {
+  test.slow();
+  await loginAndFund({ page, extensionId });
+  await page.getByTitle("Send Payment").click({ force: true });
+
+  await expect(page.getByText("Send To")).toBeVisible();
+  await page
+    .getByTestId("send-to-input")
+    .fill("GBTYAFHGNZSTE4VBWZYAGB3SRGJEPTI5I4Y22KZ4JTVAN56LESB6JZOF");
+  await page.getByText("Continue").click({ force: true });
+
+  await expect(page.getByText("Send XLM")).toBeVisible();
+  await page.getByTestId("send-amount-amount-input").fill("1");
+  await page.getByText("Continue").click({ force: true });
+
+  await expect(page.getByText("Send Settings")).toBeVisible();
+  await expect(page.getByTestId("SendSettingsTransactionFee")).toHaveText(
+    /[0-9]/,
+  );
+  await page.getByText("Review Send").click({ force: true });
+
+  await expect(page.getByText("Verification")).toBeVisible();
+  await page.getByPlaceholder("Enter password").fill(PASSWORD);
+  await page.getByText("Submit").click({ force: true });
+
+  await expect(page.getByText("Confirm Send")).toBeVisible();
+  await page.getByTestId("transaction-details-btn-send").click({ force: true });
+
+  await expect(page.getByText("Successfully sent")).toBeVisible({
+    timeout: 20000,
+  });
+
+  await page.getByText("Details").click({ force: true });
+  await expect(page.getByText("Sent XLM")).toBeVisible();
+  await expect(page.getByTestId("asset-amount")).toContainText("1 XLM");
+});

extension/src/popup/components/account/AccountHeader/index.tsx

@@ -80,6 +80,7 @@ export const AccountHeader = ({
       rightContent={
         <div
           className="AccountHeader__network-wrapper"
+          data-testid="network-selector-open"
           onClick={() => setIsNetworkSelectorOpen(!isNetworkSelectorOpen)}
         >
           <NetworkIcon index={activeNetworkIndex.current} />

extension/src/popup/components/account/NotFundedMessage/index.tsx

@@ -28,7 +28,7 @@ export const NotFundedMessage = ({
 
   return (
     <>
-      <div className="NotFunded">
+      <div className="NotFunded" data-testid="not-funded">
         <div className="NotFunded__header">
           <Icon.Info />
           {t("Stellar address is not funded")}