Add tests

trilitech · Sep 11, 2024 · c1eafda · c1eafda
1 parent fd93536
commit c1eafda
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 9 deletions.
diff --git a/apps/web/src/components/AccountSelectorModal/AccountSelectorModal.test.tsx b/apps/web/src/components/AccountSelectorModal/AccountSelectorModal.test.tsx
@@ -4,7 +4,13 @@ import {
   mockMnemonicAccount,
   mockSocialAccount,
 } from "@umami/core";
-import { type UmamiStore, accountsActions, addTestAccounts, makeStore } from "@umami/state";
+import {
+  type UmamiStore,
+  accountsActions,
+  addTestAccount,
+  addTestAccounts,
+  makeStore,
+} from "@umami/state";
 
 import { AccountSelectorModal } from "./AccountSelectorModal";
 import { DeriveMnemonicAccountModal } from "./DeriveMnemonicAccountModal";
@@ -58,6 +64,84 @@ describe("<AccountSelectorModal />", () => {
     }
   );
 
+  describe("when clicking 'Remove account group' button", () => {
+    it.each([
+      ["mnemonic", mockMnemonicAccount(0)],
+      ["ledger", mockLedgerAccount(1)],
+      ["social", mockSocialAccount(2)],
+    ])(
+      "opens confirmation modal when clicking remove button for %s accounts",
+      async (_, account) => {
+        const user = userEvent.setup();
+        await renderInModal(<AccountSelectorModal />, store);
+        const accountLabel = getAccountGroupLabel(account);
+
+        const removeButton = screen.getByLabelText(`Remove ${accountLabel} accounts`);
+        await act(() => user.click(removeButton));
+
+        expect(screen.getByText("Remove All Accounts")).toBeInTheDocument();
+
+        await waitFor(() =>
+          expect(
+            screen.getByText(`Are you sure you want to remove all of your ${accountLabel}?`)
+          ).toBeVisible()
+        );
+      }
+    );
+
+    it("removes mnemonic accounts when confirmed", async () => {
+      const user = userEvent.setup();
+      await renderInModal(<AccountSelectorModal />, store);
+      const account = mockMnemonicAccount(0);
+      const accountLabel = getAccountGroupLabel(account);
+      const removeButton = screen.getByLabelText(`Remove ${accountLabel} accounts`);
+      await act(() => user.click(removeButton));
+
+      const confirmButton = screen.getByText("Remove");
+      await act(() => user.click(confirmButton));
+
+      expect(store.getState().accounts.seedPhrases[account.seedFingerPrint]).toBe(undefined);
+      expect(store.getState().accounts.items.length).toBe(2);
+    });
+
+    it.each([
+      ["ledger", mockLedgerAccount(1)],
+      ["social", mockSocialAccount(2)],
+    ])("removes %s accounts when confirmed", async (_, account) => {
+      const user = userEvent.setup();
+      await renderInModal(<AccountSelectorModal />, store);
+      const accountLabel = getAccountGroupLabel(account);
+      const accounts = store.getState().accounts.items;
+
+      const removeButton = screen.getByLabelText(`Remove ${accountLabel} accounts`);
+      await act(() => user.click(removeButton));
+
+      const confirmButton = screen.getByText("Remove");
+      await act(() => user.click(confirmButton));
+
+      expect(store.getState().accounts.items.length).toBe(accounts.length - 1);
+    });
+
+    it('shows "Remove & Off-board" message when removing last group of accounts', async () => {
+      store.dispatch(accountsActions.reset());
+      addTestAccount(store, mockSocialAccount(0));
+
+      const user = userEvent.setup();
+      const accountLabel = getAccountGroupLabel(mockSocialAccount(0));
+      await renderInModal(<AccountSelectorModal />, store);
+
+      const removeButton = screen.getByLabelText(`Remove ${accountLabel} accounts`);
+      await act(() => user.click(removeButton));
+
+      expect(screen.getByText("Remove & Off-board")).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          "Removing all your accounts will off-board you from Umami. This will remove or reset all customized settings to their defaults. Personal data (including saved contacts, password and accounts) won't be affected."
+        )
+      ).toBeVisible();
+    });
+  });
+
   it("opens appropriate modal when clicking 'Add Account' button", async () => {
     const user = userEvent.setup();
     const { openWith } = dynamicModalContextMock;

diff --git a/apps/web/src/components/AccountSelectorModal/AccountSelectorModal.tsx b/apps/web/src/components/AccountSelectorModal/AccountSelectorModal.tsx
@@ -41,17 +41,17 @@ import { OnboardOptionsModal } from "../Onboarding/OnboardOptions";
 import { useIsAccountVerified } from "../Onboarding/VerificationFlow";
 
 export const AccountSelectorModal = () => {
-  const accounts = useImplicitAccounts();
+  const implicitAccounts = useImplicitAccounts();
   const color = useColor();
   const getBalance = useGetAccountBalance();
   const isVerified = useIsAccountVerified();
   const removeMnemonic = useRemoveMnemonic();
   const removeNonMnemonic = useRemoveNonMnemonic();
-  const { openWith, onClose } = useDynamicModalContext();
+  const { openWith, goBack, onClose } = useDynamicModalContext();
 
   const dispatch = useDispatch();
 
-  const groupedAccounts = groupBy(accounts, getAccountGroupLabel);
+  const groupedAccounts = groupBy(implicitAccounts, getAccountGroupLabel);
 
   const handleDeriveAccount = (account?: ImplicitAccount) => {
     if (!account) {
@@ -72,21 +72,21 @@ export const AccountSelectorModal = () => {
       ? "Removing all your accounts will off-board you from Umami. This will remove or reset all customized settings to their defaults. Personal data (including saved contacts, password and accounts) won't be affected."
       : `Are you sure you want to remove all of your ${type}?`;
 
-  const onRemove = (accounts: Account[]) => {
+  const onRemove = (type: string, accounts: Account[]) => {
     const account = accounts[0];
-    const isLast = accounts.length === accounts.length;
+    const isLast = accounts.length === implicitAccounts.length;
 
     return openWith(
       <ConfirmationModal
         buttonLabel={buttonLabel(isLast)}
-        description={description(isLast, account.type)}
+        description={description(isLast, type)}
         onSubmit={() => {
           if (account.type === "mnemonic") {
             removeMnemonic(account.seedFingerPrint);
           } else if (account.type !== "multisig") {
             removeNonMnemonic(account.type);
           }
-          onClose();
+          goBack();
         }}
         title="Remove All Accounts"
       />
@@ -122,7 +122,7 @@ export const AccountSelectorModal = () => {
                     color={color("500")}
                     aria-label={`Remove ${type} accounts`}
                     icon={<TrashIcon />}
-                    onClick={() => onRemove(accounts)}
+                    onClick={() => onRemove(type, accounts)}
                     size="sm"
                     variant="ghost"
                   />