Saved Keypairs UI Tests

src/app/(sidebar)/account/saved/page.tsx

@@ -298,9 +298,14 @@ const SavedKeypairItem = ({
   };
 
   return (
-    <Box gap="sm" addlClassName="PageBody__content">
+    <Box
+      gap="sm"
+      addlClassName="PageBody__content"
+      data-testid="saved-keypair-item"
+    >
       <Input
         id={`saved-kp-${keypair.timestamp}-name`}
+        data-testid="saved-keypair-name"
         fieldSize="md"
         value={keypair.name}
         readOnly
@@ -319,6 +324,7 @@ const SavedKeypairItem = ({
 
       <Input
         id={`saved-kp-${keypair.timestamp}-pk`}
+        data-testid="saved-keypair-pk"
         fieldSize="md"
         value={keypair.publicKey}
         readOnly
@@ -328,6 +334,7 @@ const SavedKeypairItem = ({
 
       <Input
         id={`saved-kp-${keypair.timestamp}-sk`}
+        data-testid="saved-keypair-sk"
         fieldSize="md"
         value={keypair.secretKey}
         readOnly

tests/mock/localStorage.ts

@@ -0,0 +1,46 @@
+export const SAVED_ACCOUNT_1 =
+  "GA46LGGOLXJY5OSX6N4LHV4MWDFXNGLK76I4NDNKKYAXRRSKI5AJGMXG";
+export const SAVED_ACCOUNT_1_SECRET =
+  "SADVGAH3VA3NGZ5VLX2ZICV7JQAINB2ZJZYOPMBXUNI3YRLGWLOA2OFY";
+export const SAVED_ACCOUNT_2 =
+  "GD4F2N2OM2IM4MI6F6J5GVENQLNRVCYEE6XFN36MJOU5MOVFUYYSPBYG";
+export const SAVED_ACCOUNT_2_SECRET =
+  "SDVMTXXSUJG6GKFCETCKFV6FCGE7C5FYKBCV4AMD4N3SRYCDSA53KEG4";
+
+const SAVED_ACCOUNTS = [
+  {
+    timestamp: 1732287853955,
+    network: {
+      id: "testnet",
+      label: "Testnet",
+    },
+    name: "Account 1",
+    publicKey: SAVED_ACCOUNT_1,
+    secretKey: SAVED_ACCOUNT_1_SECRET,
+  },
+  {
+    timestamp: 1731083842367,
+    network: {
+      id: "testnet",
+      label: "Testnet",
+    },
+    name: "Account 2",
+    publicKey: SAVED_ACCOUNT_2,
+    secretKey: SAVED_ACCOUNT_2_SECRET,
+  },
+];
+
+export const MOCK_LOCAL_STORAGE = {
+  cookies: [],
+  origins: [
+    {
+      origin: "http://localhost:3000",
+      localStorage: [
+        {
+          name: "stellar_lab_saved_keypairs",
+          value: JSON.stringify(SAVED_ACCOUNTS),
+        },
+      ],
+    },
+  ],
+};

tests/savedKeypairs.test.ts

@@ -0,0 +1,241 @@
+import { test, expect, Page } from "@playwright/test";
+import {
+  MOCK_LOCAL_STORAGE,
+  SAVED_ACCOUNT_1,
+  SAVED_ACCOUNT_1_SECRET,
+  SAVED_ACCOUNT_2,
+} from "./mock/localStorage";
+
+test.describe("Saved Keypairs Page", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("http://localhost:3000/account/saved");
+  });
+
+  test("Loads", async ({ page }) => {
+    await expect(page.locator("h1")).toHaveText("Saved Keypairs");
+  });
+
+  test("Show no saved keypairs message", async ({ page }) => {
+    await expect(
+      page.getByText("There are no saved keypairs on Testnet network."),
+    ).toBeVisible();
+  });
+
+  test.describe("Saved accounts", () => {
+    // Setting page context to share among all the tests in this section to keep
+    // local storage data
+    let pageContext: Page;
+
+    test.beforeAll(async ({ browser }) => {
+      const browserContext = await browser.newContext({
+        storageState: MOCK_LOCAL_STORAGE,
+      });
+      pageContext = await browserContext.newPage();
+
+      await pageContext.goto("http://localhost:3000/account/saved");
+
+      // Account 1 response (funded)
+      await pageContext.route(
+        `*/**/accounts/${SAVED_ACCOUNT_1}`,
+        async (route) => {
+          await route.fulfill({
+            status: 200,
+            contentType: "application/hal+json; charset=utf-8",
+            body: JSON.stringify(MOCK_ACCOUNT_1_RESPONSE),
+          });
+        },
+      );
+
+      // Account 2 response (unfunded)
+      await pageContext.route(
+        `*/**/accounts/${SAVED_ACCOUNT_2}`,
+        async (route) => {
+          await route.fulfill({
+            status: 404,
+            contentType: "application/problem+json; charset=utf-8",
+            body: JSON.stringify(MOCK_ACCOUNT_2_RESPONSE_UNFUNDED),
+          });
+        },
+      );
+    });
+
+    test("Loads", async () => {
+      await expect(
+        pageContext.getByText(
+          "There are no saved keypairs on Testnet network.",
+        ),
+      ).toBeHidden();
+
+      const keypairItems = pageContext.getByTestId("saved-keypair-item");
+
+      await expect(keypairItems).toHaveCount(2);
+    });
+
+    test("Funded account", async () => {
+      const keypairItem = pageContext.getByTestId("saved-keypair-item").first();
+
+      await expect(keypairItem).toBeVisible();
+      await expect(keypairItem.getByTestId("saved-keypair-name")).toHaveValue(
+        "Account 1",
+      );
+      await expect(keypairItem.getByTestId("saved-keypair-pk")).toHaveValue(
+        SAVED_ACCOUNT_1,
+      );
+      await expect(keypairItem.getByTestId("saved-keypair-sk")).toHaveValue(
+        SAVED_ACCOUNT_1_SECRET,
+      );
+      await expect(
+        keypairItem.getByText("Balance: 10000.0000000 XLM", { exact: true }),
+      ).toBeVisible();
+      await expect(
+        keypairItem.getByText("Last saved Nov 22, 2024, 3:04 PM UTC", {
+          exact: true,
+        }),
+      ).toBeVisible();
+    });
+
+    test("Fund unfunded account", async () => {
+      const keypairItem = pageContext.getByTestId("saved-keypair-item").nth(1);
+
+      await expect(keypairItem).toBeVisible();
+      await expect(keypairItem.getByTestId("saved-keypair-name")).toHaveValue(
+        "Account 2",
+      );
+
+      const fundButton = pageContext.getByText("Fund with Friendbot");
+
+      await expect(fundButton).toBeVisible();
+
+      // Mock fund account
+      await pageContext.route(
+        `*/**/?addr=${SAVED_ACCOUNT_2}`,
+        async (route) => {
+          await route.fulfill({
+            status: 200,
+            contentType: "application/hal+json; charset=utf-8",
+          });
+        },
+      );
+
+      // Wait for the Friendbot response
+      const responsePromise = pageContext.waitForResponse(
+        (response) =>
+          response.url().includes("?addr=") && response.status() === 200,
+      );
+
+      await fundButton.click();
+
+      await responsePromise;
+
+      // Mock Account 2 response
+      await pageContext.route(
+        `*/**/accounts/${SAVED_ACCOUNT_2}`,
+        async (route) => {
+          await route.fulfill({
+            status: 200,
+            contentType: "application/hal+json; charset=utf-8",
+            body: JSON.stringify(MOCK_ACCOUNT_1_RESPONSE),
+          });
+        },
+      );
+
+      await expect(fundButton).toBeHidden();
+      await expect(
+        keypairItem.getByText("Balance: 10000.0000000 XLM", { exact: true }),
+      ).toBeVisible();
+    });
+
+    test("Delete keypair", async () => {
+      const keypairItem = pageContext.getByTestId("saved-keypair-item").first();
+      const deleteButton = keypairItem.locator(".Button--error");
+
+      await deleteButton.click();
+
+      const keypairItems = pageContext.getByTestId("saved-keypair-item");
+      await expect(keypairItems).toHaveCount(1);
+    });
+  });
+});
+
+// =============================================================================
+// Mock data
+// =============================================================================
+const MOCK_ACCOUNT_1_RESPONSE = {
+  _links: {
+    self: {
+      href: "https://horizon-testnet.stellar.org/accounts/GDREGRXN4NCEKRACVD4SPMQTF6IEMNVSYT6ELCECQNEOPAIFA7MYVY6K",
+    },
+    transactions: {
+      href: "https://horizon-testnet.stellar.org/accounts/GDREGRXN4NCEKRACVD4SPMQTF6IEMNVSYT6ELCECQNEOPAIFA7MYVY6K/transactions{?cursor,limit,order}",
+      templated: true,
+    },
+    operations: {
+      href: "https://horizon-testnet.stellar.org/accounts/GDREGRXN4NCEKRACVD4SPMQTF6IEMNVSYT6ELCECQNEOPAIFA7MYVY6K/operations{?cursor,limit,order}",
+      templated: true,
+    },
+    payments: {
+      href: "https://horizon-testnet.stellar.org/accounts/GDREGRXN4NCEKRACVD4SPMQTF6IEMNVSYT6ELCECQNEOPAIFA7MYVY6K/payments{?cursor,limit,order}",
+      templated: true,
+    },
+    effects: {
+      href: "https://horizon-testnet.stellar.org/accounts/GDREGRXN4NCEKRACVD4SPMQTF6IEMNVSYT6ELCECQNEOPAIFA7MYVY6K/effects{?cursor,limit,order}",
+      templated: true,
+    },
+    offers: {
+      href: "https://horizon-testnet.stellar.org/accounts/GDREGRXN4NCEKRACVD4SPMQTF6IEMNVSYT6ELCECQNEOPAIFA7MYVY6K/offers{?cursor,limit,order}",
+      templated: true,
+    },
+    trades: {
+      href: "https://horizon-testnet.stellar.org/accounts/GDREGRXN4NCEKRACVD4SPMQTF6IEMNVSYT6ELCECQNEOPAIFA7MYVY6K/trades{?cursor,limit,order}",
+      templated: true,
+    },
+    data: {
+      href: "https://horizon-testnet.stellar.org/accounts/GDREGRXN4NCEKRACVD4SPMQTF6IEMNVSYT6ELCECQNEOPAIFA7MYVY6K/data/{key}",
+      templated: true,
+    },
+  },
+  id: "GDREGRXN4NCEKRACVD4SPMQTF6IEMNVSYT6ELCECQNEOPAIFA7MYVY6K",
+  account_id: "GDREGRXN4NCEKRACVD4SPMQTF6IEMNVSYT6ELCECQNEOPAIFA7MYVY6K",
+  sequence: "4914705307009024",
+  subentry_count: 0,
+  last_modified_ledger: 1144294,
+  last_modified_time: "2024-11-25T15:57:29Z",
+  thresholds: {
+    low_threshold: 0,
+    med_threshold: 0,
+    high_threshold: 0,
+  },
+  flags: {
+    auth_required: false,
+    auth_revocable: false,
+    auth_immutable: false,
+    auth_clawback_enabled: false,
+  },
+  balances: [
+    {
+      balance: "10000.0000000",
+      buying_liabilities: "0.0000000",
+      selling_liabilities: "0.0000000",
+      asset_type: "native",
+    },
+  ],
+  signers: [
+    {
+      weight: 1,
+      key: "GDREGRXN4NCEKRACVD4SPMQTF6IEMNVSYT6ELCECQNEOPAIFA7MYVY6K",
+      type: "ed25519_public_key",
+    },
+  ],
+  data: {},
+  num_sponsoring: 0,
+  num_sponsored: 0,
+  paging_token: "GDREGRXN4NCEKRACVD4SPMQTF6IEMNVSYT6ELCECQNEOPAIFA7MYVY6K",
+};
+
+const MOCK_ACCOUNT_2_RESPONSE_UNFUNDED = {
+  type: "https://stellar.org/horizon-errors/not_found",
+  title: "Resource Missing",
+  status: 404,
+  detail:
+    "The resource at the url requested was not found.  This usually occurs for one of two reasons:  The url requested is not valid, or no data in our database could be found with the parameters provided.",
+};

yarn.lock

@@ -2356,9 +2356,9 @@ camelcase@^5.0.0:
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
 caniuse-lite@^1.0.30001579:
-  version "1.0.30001632"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001632.tgz#964207b7cba5851701afb4c8afaf1448db3884b6"
-  integrity sha512-udx3o7yHJfUxMLkGohMlVHCvFvWmirKh9JAH/d7WOLPetlH+LTL5cocMZ0t7oZx/mdlOWXti97xLZWc8uURRHg==
+  version "1.0.30001685"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001685.tgz"
+  integrity sha512-e/kJN1EMyHQzgcMEEgoo+YTCO1NGCmIYHk5Qk8jT6AazWemS5QFKJ5ShCJlH3GZrNIdZofcNCEwZqbMjjKzmnA==
 
 [email protected]:
   version "0.4.4"