Fix tests

apps/web/src/components/AccountSelectorModal/AccountSelectorModal.tsx

@@ -16,15 +16,15 @@ import { useDynamicModalContext } from "@umami/components";
 import { type ImplicitAccount, type MnemonicAccount, getAccountGroupLabel } from "@umami/core";
 import { accountsActions, useGetAccountBalance, useImplicitAccounts } from "@umami/state";
 import { prettyTezAmount } from "@umami/tezos";
-import { capitalize } from "lodash";
+import { capitalize, groupBy } from "lodash";
 import { useDispatch } from "react-redux";
 
 import { AccountSelectorPopover } from "./AccountSelectorPopover";
 import { PlusIcon, TrashIcon } from "../../assets/icons";
 import { useColor } from "../../styles/useColor";
 import { AccountTile } from "../AccountTile";
 import { ModalCloseButton } from "../CloseButton";
-import { DeriveMnemonicAccountModal } from "../DeriveMnemonicAccountModal";
+import { DeriveMnemonicAccountModal } from "./DeriveMnemonicAccountModal";
 import { OnboardOptionsModal } from "../Onboarding/OnboardOptions";
 import { useIsAccountVerified } from "../Onboarding/VerificationFlow";
 
@@ -37,7 +37,7 @@ export const AccountSelectorModal = () => {
 
   const dispatch = useDispatch();
 
-  const groupedAccounts = Object.groupBy(accounts, getAccountGroupLabel);
+  const groupedAccounts = groupBy(accounts, getAccountGroupLabel);
 
   const handleDeriveAccount = (account?: ImplicitAccount) => {
     if (!account) {
@@ -48,7 +48,7 @@ export const AccountSelectorModal = () => {
       case "mnemonic":
         return openWith(<DeriveMnemonicAccountModal account={account as MnemonicAccount} />);
       default:
-        break;
+        return openWith(<OnboardOptionsModal />);
     }
   };
 
@@ -86,15 +86,15 @@ export const AccountSelectorModal = () => {
                   />
                   <IconButton
                     color={color("500")}
-                    aria-label={`Remove ${type} accounts`}
+                    aria-label={`Add ${type} account`}
                     icon={<PlusIcon />}
-                    onClick={() => handleDeriveAccount(accounts?.[0])}
+                    onClick={() => handleDeriveAccount(accounts[0])}
                     size="sm"
                     variant="ghost"
                   />
                 </Flex>
               </Center>
-              {accounts?.map(account => {
+              {accounts.map(account => {
                 const address = account.address.pkh;
                 const balance = getBalance(address);
                 const onClick = () => {

apps/web/src/components/AccountSelectorModal/DeriveMnemonicAccountModal/DeriveMnemonicAccountModal.test.tsx

@@ -0,0 +1,67 @@
+import { mockMnemonicAccount } from "@umami/core";
+import { type UmamiStore, addTestAccount, makeStore, useDeriveMnemonicAccount } from "@umami/state";
+
+import { DeriveMnemonicAccountModal } from "./DeriveMnemonicAccountModal";
+import { act, renderInModal, screen, userEvent, waitFor } from "../../../testUtils";
+
+let store: UmamiStore;
+
+jest.mock("@umami/state", () => ({
+  ...jest.requireActual("@umami/state"),
+  useDeriveMnemonicAccount: jest.fn(),
+}));
+
+const mockDeriveMnemonicAccount = jest.fn();
+
+beforeEach(() => {
+  store = makeStore();
+  addTestAccount(store, mockMnemonicAccount(0));
+
+  jest.mocked(useDeriveMnemonicAccount).mockImplementation(() => mockDeriveMnemonicAccount);
+});
+
+describe("<DeriveMnemonicAccountModal />", () => {
+  it("renders the NameAccountModal with correct subtitle", async () => {
+    const account = mockMnemonicAccount(0);
+    await renderInModal(<DeriveMnemonicAccountModal account={account} />, store);
+
+    await waitFor(() => {
+      expect(screen.getByText("Name Your Account")).toBeVisible();
+    });
+
+    expect(
+      screen.getByText(`Name the new account derived from seedphrase ${account.seedFingerPrint}`)
+    ).toBeVisible();
+  });
+
+  it("handles name submission and opens confirm password modal", async () => {
+    const user = userEvent.setup();
+
+    const account = mockMnemonicAccount(0);
+    await renderInModal(<DeriveMnemonicAccountModal account={account} />, store);
+    await act(() => user.type(screen.getByLabelText("Account name"), "Test Account"));
+    await act(() => user.click(screen.getByRole("button", { name: "Continue" })));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("master-password-modal")).toBeVisible();
+    });
+  });
+
+  it("derives mnemonic account on password submission", async () => {
+    const user = userEvent.setup();
+
+    const account = mockMnemonicAccount(0);
+    await renderInModal(<DeriveMnemonicAccountModal account={account} />, store);
+
+    await act(() => user.type(screen.getByLabelText("Account name"), "Test Account"));
+    await act(() => user.click(screen.getByRole("button", { name: "Continue" })));
+    await act(() => user.type(screen.getByLabelText("Password"), "test-password"));
+    await act(() => user.click(screen.getByRole("button", { name: "Submit" })));
+
+    expect(mockDeriveMnemonicAccount).toHaveBeenCalledWith({
+      fingerPrint: account.seedFingerPrint,
+      password: "test-password",
+      label: "Test Account",
+    });
+  });
+});

apps/web/src/components/DeriveMnemonicAccountModal/DeriveMnemonicAccountModal.tsx → apps/web/src/components/AccountSelectorModal/DeriveMnemonicAccountModal/DeriveMnemonicAccountModal.tsx

@@ -3,8 +3,8 @@ import { useDynamicModalContext } from "@umami/components";
 import { DEFAULT_ACCOUNT_LABEL, type MnemonicAccount } from "@umami/core";
 import { useAsyncActionHandler, useDeriveMnemonicAccount } from "@umami/state";
 
-import { MasterPasswordModal } from "../MasterPasswordModal";
-import { NameAccountModal } from "../NameAccountModal";
+import { MasterPasswordModal } from "../../MasterPasswordModal";
+import { NameAccountModal } from "../../NameAccountModal";
 
 type DeriveMnemonicAccountModalProps = {
   account: MnemonicAccount;
@@ -14,8 +14,8 @@ export const DeriveMnemonicAccountModal = ({ account }: DeriveMnemonicAccountMod
   const { goToIndex, openWith } = useDynamicModalContext();
 
   const { handleAsyncAction } = useAsyncActionHandler();
-  const toast = useToast();
   const deriveMnemonicAccount = useDeriveMnemonicAccount();
+  const toast = useToast();
 
   const handleNameSubmit = ({ accountName }: { accountName: string }) => {
     const handlePasswordSubmit = ({ password }: { password: string }) =>

apps/web/src/components/MasterPasswordModal/MasterPasswordModal.tsx

@@ -32,7 +32,7 @@ export const MasterPasswordModal = ({ onSubmit }: MasterPasswordModalProps) => {
   });
 
   return (
-    <ModalContent>
+    <ModalContent data-testid="master-password-modal">
       <ModalHeader>
         <ModalBackButton />
         <ModalCloseButton />

apps/web/src/components/NameAccountModal/NameAccountModal.tsx

@@ -42,7 +42,7 @@ export const NameAccountModal = ({
   const { register, handleSubmit } = form;
 
   return (
-    <ModalContent>
+    <ModalContent data-testid="name-account-modal">
       <ModalHeader>
         <ModalBackButton />
         <ModalCloseButton />

apps/web/src/components/Onboarding/SetupPassword/SetupPassword.test.tsx

@@ -130,7 +130,9 @@ describe("<SetupPassword />", () => {
 
   describe("mnemonic mode", () => {
     let store: UmamiStore;
-    const allFormValues = { mnemonic: mnemonic1.split(" ").map(word => ({ val: word })) };
+    const allFormValues = {
+      current: { mnemonic: mnemonic1.split(" ").map(word => ({ val: word })) },
+    };
     const mockRestoreFromMnemonic = jest.fn();
 
     beforeEach(() => {

apps/web/src/testUtils.tsx

@@ -158,7 +158,9 @@ export const renderInModal = async (
 
   if (allFormValues) {
     await act(() =>
-      result.current.openWith(<DummyForm defaultValues={allFormValues} nextPage={component} />)
+      result.current.openWith(
+        <DummyForm defaultValues={allFormValues.current ?? allFormValues} nextPage={component} />
+      )
     );
     fireEvent.click(screen.getByRole("button"));
   }