Merge pull request #545 from fengyunfengyun1/cypress-test-to-cover-wallet-creation

feature/cypress-test-to-cover-wallet-creation

Author: dadiorchen

apps/web/cypress/e2e/create-wallet.cy.ts

@@ -0,0 +1,62 @@
+// apps/web/cypress/e2e/create-wallet.cy.ts
+import { SELECTORS } from "../support/wallet-constants";
+
+let walletData: {
+  routes: { wallets: string };
+  mocks: { initialList: any[]; createdWallet: { id: string; name: string } };
+};
+
+describe("Wallet - Create flow (integration, all requests mocked)", () => {
+  before(() => {
+    cy.fixture("wallet.json").then(data => {
+      walletData = data;
+    });
+  });
+
+  beforeEach(() => {
+    cy.intercept("GET", "/api/wallets*", {
+      statusCode: 200,
+      body: walletData?.mocks?.initialList ?? [],
+    }).as("getWallets");
+
+    cy.visit(walletData.routes.wallets, {
+      onBeforeLoad(win) {
+        win.sessionStorage.setItem(
+          "token",
+          JSON.stringify("fake-token-for-tests"),
+        );
+      },
+    });
+  });
+
+  it("happy path: jump -> input wallet name -> create", () => {
+    const name = walletData.mocks.createdWallet.name;
+
+    cy.getByData(SELECTORS.walletCreateOpen).click();
+
+    cy.getByData(SELECTORS.walletNameInput).clear().type(name);
+
+    cy.intercept("POST", "/api/wallets", req => {
+      expect(req.body).to.have.property("name", name);
+      req.reply({ statusCode: 201, body: walletData.mocks.createdWallet });
+    }).as("createWallet");
+
+    cy.getByData(SELECTORS.walletCreateSubmitButton).click();
+
+    cy.contains(name).should("exist");
+  });
+
+  it("client-side duplicate check: shows helper text and disables submit", () => {
+    const dupName = walletData.mocks.createdWallet.name;
+
+    cy.getByData(SELECTORS.walletCreateOpen).click();
+    cy.getByData(SELECTORS.walletNameInput).type(dupName);
+    cy.getByData(SELECTORS.walletCreateSubmitButton).click();
+    cy.contains(dupName).should("exist");
+
+    cy.getByData(SELECTORS.walletCreateOpen).click();
+    cy.getByData(SELECTORS.walletNameInput).type(dupName);
+    cy.getByData(SELECTORS.errorHelperText).should("contain.text", "unique");
+    cy.getByData(SELECTORS.walletCreateSubmitButton).should("be.disabled");
+  });
+});

apps/web/cypress/fixtures/wallet.json

@@ -0,0 +1,8 @@
+{
+  "routes": { "wallets": "/wallet" },
+  "mocks": {
+    "initialList": [],
+    "createdWallet": { "id": "wallet_123", "name": "My Test Wallet" }
+  },
+  "messages": { "duplicate": "Wallet name should be unique." }
+}

apps/web/cypress/support/wallet-constants.ts

@@ -0,0 +1,11 @@
+export const SELECTORS = {
+  walletCreateOpen: "wallet-create-open",
+  walletNameInput: "wallet-name-input",
+  walletCreateSubmitButton: "wallet-create-submit",
+  walletList: "wallet-list",
+  errorHelperText: "error-helper-text",
+} as const;
+
+export function loadWalletFixture() {
+  return cy.fixture("wallet.json").as("walletData");
+}

apps/web/src/app/(protected)/wallet/page.tsx

@@ -42,6 +42,7 @@ export default function WalletPage() {
     <Box sx={{ p: 2 }}>
       <Box display="flex" justifyContent="space-between" alignItems="center">
         <Button
+          data-test="wallet-create-open"
           variant="text"
           startIcon={<AddIcon />}
           onClick={() => setIsCreateOpen(true)}
@@ -62,9 +63,11 @@ export default function WalletPage() {
         Your Wallets
       </Typography>
 
-      <Stack spacing={0.5}>
+      <Stack spacing={0.5} data-test="wallet-list">
         {wallets.map((wallet, idx) => (
-          <WalletItem key={idx} {...wallet} />
+          <div key={idx} data-test={`wallet-list-item-${idx}`}>
+            <WalletItem {...wallet} />
+          </div>
         ))}
       </Stack>
 

apps/web/src/components/WalletCreateDrawer.tsx

@@ -107,6 +107,7 @@ const WalletCreateDrawer: React.FC<WalletCreateDrawerProps> = ({
           variant="contained"
           disabled={!name.trim() || isDuplicate}
           onClick={handleCreate}
+          data-test="wallet-create-submit"
           sx={{
             mt: 1.5,
             ":disabled": { backgroundColor: "#E0E0E0", color: "#9E9E9E" },