Add tests

apps/web/src/components/Onboarding/VerificationFlow/VerifyMessage.test.tsx

@@ -1,7 +1,22 @@
+import { mockMnemonicAccount } from "@umami/core";
+import { type UmamiStore, addTestAccount, makeStore } from "@umami/state";
+
+import { useHandleVerify } from "./useHandleVerify";
 import { VerificationInfoModal } from "./VerificationInfoModal";
 import { VerifyMessage } from "./VerifyMessage";
 import { dynamicModalContextMock, render, screen, userEvent } from "../../../testUtils";
 
+let store: UmamiStore;
+
+jest.mock("./useHandleVerify.tsx", () => ({
+  useHandleVerify: jest.fn(),
+}));
+
+beforeEach(() => {
+  store = makeStore();
+  addTestAccount(store, mockMnemonicAccount(0, { isVerified: false }));
+});
+
 describe("<VerifyMessage />", () => {
   it("renders correctly", () => {
     render(<VerifyMessage />);
@@ -24,4 +39,16 @@ describe("<VerifyMessage />", () => {
 
     expect(openWith).toHaveBeenCalledWith(<VerificationInfoModal />);
   });
+
+  it("calls handleVerify when Verify Now is clicked", async () => {
+    const mockHandleVerify = jest.fn();
+    jest.mocked(useHandleVerify).mockReturnValue(mockHandleVerify);
+
+    const user = userEvent.setup();
+    render(<VerifyMessage />);
+
+    await user.click(screen.getByText("Verify Now"));
+
+    expect(mockHandleVerify).toHaveBeenCalled();
+  });
 });

apps/web/src/components/Onboarding/VerificationFlow/VerifySeedphraseModal.test.tsx

@@ -1,8 +1,9 @@
-import { selectRandomElements } from "@umami/core";
+import { type MnemonicAccount, mockMnemonicAccount, selectRandomElements } from "@umami/core";
+import { type UmamiStore, addTestAccount, makeStore } from "@umami/state";
 import { mnemonic1 } from "@umami/test-utils";
 
 import { VerifySeedphraseModal } from "./VerifySeedphraseModal";
-import { act, fireEvent, render, screen, userEvent, waitFor } from "../../../testUtils";
+import { act, fireEvent, renderInModal, screen, userEvent, waitFor } from "../../../testUtils";
 
 jest.mock("@umami/core", () => ({
   ...jest.requireActual("@umami/core"),
@@ -11,41 +12,46 @@ jest.mock("@umami/core", () => ({
 
 const selectRandomElementsMock = jest.mocked(selectRandomElements);
 
+let store: UmamiStore;
+
 beforeEach(() => {
   const splitted = mnemonic1.split(" ").map((value, index) => ({
     index,
     value,
   }));
   selectRandomElementsMock.mockReturnValue(splitted.slice(0, 5));
-});
 
-const seedPhrase = mnemonic1;
+  store = makeStore();
+  addTestAccount(store, mockMnemonicAccount(0, { isVerified: false }));
+});
 
-const fixture = () => <VerifySeedphraseModal seedPhrase={seedPhrase} />;
+const fixture = () => <VerifySeedphraseModal seedPhrase={mnemonic1} />;
 
 describe("<VerifySeedphraseModal />", () => {
-  test("when no mnemonic has been entered the button is disabled", () => {
-    render(fixture());
+  test("when no mnemonic has been entered the button is disabled", async () => {
+    await renderInModal(fixture(), store);
 
-    expect(screen.getByRole("button", { name: "Continue" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Verify" })).toBeDisabled();
   });
 
   test("when an invalid mnemonic has been entered the button is disabled", async () => {
     const user = userEvent.setup();
 
-    render(fixture());
+    await renderInModal(fixture(), store);
 
     const inputFields = screen.getAllByRole("textbox");
+
     for (const input of inputFields) {
       await act(() => user.type(input, "test"));
     }
 
-    expect(screen.getByRole("button", { name: "Continue" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Verify" })).toBeDisabled();
   });
 
   test("validation is working with all invalid", async () => {
-    render(fixture());
+    await renderInModal(fixture(), store);
     const inputFields = screen.getAllByRole("textbox");
+
     inputFields.forEach(input => {
       fireEvent.change(input, { target: { value: "test" } });
       fireEvent.blur(input);
@@ -57,16 +63,14 @@ describe("<VerifySeedphraseModal />", () => {
   });
 
   test("validation is working with some invalid", async () => {
-    render(fixture());
+    await renderInModal(fixture(), store);
     const inputFields = screen.getAllByRole("textbox");
 
-    // Enter correct value
     fireEvent.change(inputFields[0], {
       target: { value: mnemonic1.split(" ")[0] },
     });
     fireEvent.blur(inputFields[0]);
 
-    // Enter incorrect values
     inputFields.forEach(input => {
       fireEvent.change(input, { target: { value: "test" } });
       fireEvent.blur(input);
@@ -77,30 +81,25 @@ describe("<VerifySeedphraseModal />", () => {
   });
 
   test("validation is working with all valid", async () => {
-    render(fixture());
+    await renderInModal(fixture(), store);
     const inputFields = screen.getAllByRole("textbox");
-
-    // Enter correct value
     const splitted = mnemonic1.split(" ");
 
-    // Enter incorrect values
     inputFields.forEach((input, index) => {
       fireEvent.change(input, { target: { value: splitted[index] } });
       fireEvent.blur(input);
     });
 
-    const confirmBtn = screen.getByRole("button", { name: "Continue" });
+    const confirmBtn = screen.getByRole("button", { name: "Verify" });
 
     await waitFor(() => {
       expect(confirmBtn).toBeEnabled();
     });
 
     fireEvent.click(confirmBtn);
+
     await waitFor(() => {
-      expect(goToStepMock).toHaveBeenCalledWith({
-        type: "nameAccount",
-        account: { type: "mnemonic", mnemonic: mnemonic1 },
-      });
+      expect((store.getState().accounts.items[0] as MnemonicAccount).isVerified).toBe(true);
     });
   });
 });

apps/web/src/components/Onboarding/VerificationFlow/VerifySeedphraseModal.tsx

@@ -115,7 +115,7 @@ export const VerifySeedphraseModal = ({ seedPhrase }: VerifySeedphraseModalProps
           </ModalBody>
           <ModalFooter flexDirection="column">
             <Button width="full" isDisabled={!isValid} type="submit" variant="primary">
-              Continue
+              Verify
             </Button>
 
             {IS_DEV && (