Merge pull request #2209 from trilitech/add-wc-test_singlesign

feat: WalletConnect integration, part 5 - tests for SingleSignPage

apps/desktop/src/components/SendFlow/Beacon/TezSignPage.tsx

@@ -19,7 +19,7 @@ export const TezSignPage = ({ operation, message }: BeaconSignPageProps) => {
 
   return (
     <FormProvider {...form}>
-      <ModalContent>
+      <ModalContent data-testId="TezSignPage">
         <form>
           <Header message={message} mode="single" operation={operation} />
           <ModalBody>

apps/web/src/components/SendFlow/common/ContractCallSignPage.tsx

@@ -43,7 +43,7 @@ export const ContractCallSignPage = ({
 
   return (
     <FormProvider {...form}>
-      <ModalContent>
+      <ModalContent data-testid="ContractCallSignPage">
         <form>
           <Header headerProps={headerProps} />
           <ModalBody>

apps/web/src/components/SendFlow/common/DelegationSignPage.tsx

@@ -23,7 +23,7 @@ export const DelegationSignPage = ({
 
   return (
     <FormProvider {...form}>
-      <ModalContent>
+      <ModalContent data-testid="DelegationSignPage">
         <form>
           <Header headerProps={headerProps} />
           <ModalBody>

apps/web/src/components/SendFlow/common/FinalizeUnstakeSignPage.tsx

@@ -23,7 +23,7 @@ export const FinalizeUnstakeSignPage = ({
   );
   return (
     <FormProvider {...form}>
-      <ModalContent>
+      <ModalContent data-testid="FinalizeUnstakeSignPage">
         <form>
           <Header headerProps={headerProps} />
           <ModalBody>

apps/web/src/components/SendFlow/common/OriginationOperationSignPage.tsx

@@ -42,7 +42,7 @@ export const OriginationOperationSignPage = ({
 
   return (
     <FormProvider {...form}>
-      <ModalContent>
+      <ModalContent data-testid="OriginationOperationSignPage">
         <form>
           <ModalHeader marginBottom="24px">
             <Flex alignItems="center" justifyContent="center">

apps/web/src/components/SendFlow/common/SingleSignPage.test.tsx

@@ -0,0 +1,135 @@
+import { BeaconMessageType, NetworkType, type OperationRequestOutput } from "@airgap/beacon-wallet";
+import type { BatchWalletOperation } from "@taquito/taquito/dist/types/wallet/batch-operation";
+import {
+  type EstimatedAccountOperations,
+  type Operation,
+  executeOperations,
+  mockContractCall,
+  mockContractOrigination,
+  mockDelegationOperation,
+  mockFinalizeUnstakeOperation,
+  mockImplicitAccount,
+  mockStakeOperation,
+  mockTezOperation,
+  mockUndelegationOperation,
+  mockUnstakeOperation,
+} from "@umami/core";
+import { WalletClient, makeStore, networksActions, useGetSecretKey } from "@umami/state";
+import { executeParams } from "@umami/test-utils";
+import { GHOSTNET, makeToolkit } from "@umami/tezos";
+
+import {
+  act,
+  dynamicModalContextMock,
+  renderInModal,
+  screen,
+  userEvent,
+  waitFor,
+} from "../../../testUtils";
+import { SuccessStep } from "../SuccessStep";
+import { type SdkSignPageProps, type SignHeaderProps } from "../utils";
+import { SingleSignPage } from "./SingleSignPage";
+
+jest.mock("@umami/core", () => ({
+  ...jest.requireActual("@umami/core"),
+  executeOperations: jest.fn(),
+  makeToolkit: jest.fn(),
+}));
+
+jest.mock("@umami/tezos", () => ({
+  ...jest.requireActual("@umami/tezos"),
+  makeToolkit: jest.fn(),
+}));
+
+jest.mock("@umami/state", () => ({
+  ...jest.requireActual("@umami/state"),
+  useGetSecretKey: jest.fn(),
+}));
+
+describe("<SingleSignPage />", () => {
+  it("calls the correct modal", async () => {
+    const store = makeStore();
+    const user = userEvent.setup();
+
+    const message = {
+      id: "messageid",
+      type: BeaconMessageType.OperationRequest,
+      network: { type: NetworkType.GHOSTNET },
+      appMetadata: {},
+    } as OperationRequestOutput;
+
+    // check all types of Modals called by SingleSignOperation
+    const mockedOperations: Record<string, Operation> = {
+      TezSignPage: mockTezOperation(0),
+      ContractCallSignPage: mockContractCall(0),
+      DelegationSignPage: mockDelegationOperation(0),
+      UndelegationSignPage: mockUndelegationOperation(0),
+      OriginationOperationSignPage: mockContractOrigination(0),
+      StakeSignPage: mockStakeOperation(0),
+      UnstakeSignPage: mockUnstakeOperation(0),
+      FinalizeUnstakeSignPage: mockFinalizeUnstakeOperation(0),
+    };
+
+    const operation: EstimatedAccountOperations = {
+      type: "implicit" as const,
+      sender: mockImplicitAccount(0),
+      signer: mockImplicitAccount(0),
+      operations: [],
+      estimates: [executeParams({ fee: 123 })],
+    };
+    const headerProps: SignHeaderProps = {
+      network: GHOSTNET,
+      appName: message.appMetadata.name,
+      appIcon: message.appMetadata.icon,
+    };
+    store.dispatch(networksActions.setCurrent(GHOSTNET));
+
+    for (const key in mockedOperations) {
+      operation.operations = [mockedOperations[key]];
+      const signProps: SdkSignPageProps = {
+        headerProps: headerProps,
+        operation: operation,
+        requestId: { sdkType: "beacon", id: message.id },
+      };
+
+      jest.mocked(useGetSecretKey).mockImplementation(() => () => Promise.resolve("secretKey"));
+
+      jest
+        .mocked(executeOperations)
+        .mockResolvedValue({ opHash: "ophash" } as BatchWalletOperation);
+      jest.spyOn(WalletClient, "respond").mockResolvedValue();
+
+      await renderInModal(<SingleSignPage {...signProps} />, store);
+
+      expect(screen.getByText("Ghostnet")).toBeInTheDocument();
+      expect(screen.queryByText("Mainnet")).not.toBeInTheDocument();
+      expect(screen.getByTestId(key)).toBeInTheDocument(); // e.g. TezSignPage
+
+      const signButton = screen.getByRole("button", {
+        name: "Confirm Transaction",
+      });
+      await waitFor(() => expect(signButton).toBeDisabled());
+
+      await act(() => user.type(screen.getByLabelText("Password"), "ThisIsAPassword"));
+
+      await waitFor(() => expect(signButton).toBeEnabled());
+      await act(() => user.click(signButton));
+
+      expect(makeToolkit).toHaveBeenCalledWith({
+        type: "mnemonic",
+        secretKey: "secretKey",
+        network: GHOSTNET,
+      });
+
+      await waitFor(() =>
+        expect(WalletClient.respond).toHaveBeenCalledWith({
+          type: BeaconMessageType.OperationResponse,
+          id: message.id,
+          transactionHash: "ophash",
+        })
+      );
+      expect(dynamicModalContextMock.openWith).toHaveBeenCalledWith(<SuccessStep hash="ophash" />);
+      dynamicModalContextMock.openWith.mockClear();
+    }
+  });
+});

apps/web/src/components/SendFlow/common/StakeSignPage.tsx

@@ -23,7 +23,7 @@ export const StakeSignPage = ({
 
   return (
     <FormProvider {...form}>
-      <ModalContent>
+      <ModalContent data-testid="StakeSignPage">
         <form>
           <Header headerProps={headerProps} />
           <ModalBody>

apps/web/src/components/SendFlow/common/UndelegationSignPage.tsx

@@ -20,7 +20,7 @@ export const UndelegationSignPage = ({
 
   return (
     <FormProvider {...form}>
-      <ModalContent>
+      <ModalContent data-testid="UndelegationSignPage">
         <form>
           <Header headerProps={headerProps} />
           <ModalBody>

apps/web/src/components/SendFlow/common/UnstakeSignPage.tsx

@@ -23,7 +23,7 @@ export const UnstakeSignPage = ({
 
   return (
     <FormProvider {...form}>
-      <ModalContent>
+      <ModalContent data-testid="UnstakeSignPage">
         <form>
           <Header headerProps={headerProps} />
           <ModalBody>

packages/core/src/Operation.ts

@@ -65,7 +65,7 @@ export type Unstake = {
   amount: string;
 };
 
-type FinalizeUnstake = {
+export type FinalizeUnstake = {
   type: "finalize_unstake";
   sender: Address;
 };

packages/core/src/testUtils.tsx

@@ -40,12 +40,16 @@ import {
 import { type StoredContactInfo } from "./Contact";
 import { type Delegate } from "./Delegate";
 import {
+  type ContractCall,
   type ContractOrigination,
   type Delegation,
   type FA12Transfer,
   type FA2Transfer,
+  type FinalizeUnstake,
+  type Stake,
   type TezTransfer,
   type Undelegation,
+  type Unstake,
 } from "./Operation";
 import {
   type FA12TokenBalance,
@@ -395,6 +399,34 @@ export const mockContractOrigination = (
   sender: mockImplicitAddress(index),
 });
 
+export const mockContractCall = (
+  index: number,
+  code: MichelsonV1Expression = []
+): ContractCall => ({
+  type: "contract_call",
+  entrypoint: "test-entrypoint",
+  amount: String(index),
+  contract: mockContractAddress(index),
+  args: code,
+});
+
+export const mockStakeOperation = (index: number): Stake => ({
+  type: "stake",
+  amount: String(index),
+  sender: mockImplicitAddress(index),
+});
+
+export const mockUnstakeOperation = (index: number): Unstake => ({
+  type: "unstake",
+  amount: String(index),
+  sender: mockImplicitAddress(index),
+});
+
+export const mockFinalizeUnstakeOperation = (index: number): FinalizeUnstake => ({
+  type: "finalize_unstake",
+  sender: mockImplicitAddress(index),
+});
+
 export const mockImplicitContact = (index: number, label?: string): StoredContactInfo => ({
   name: label || `Contact ${index}`,
   pkh: mockImplicitAddress(index).pkh,