test(app): remove unneeded stamp providers from context for individua…

…l stamp tests

app/__test-fixtures__/verifiableCredentialResults.ts

@@ -36,3 +36,16 @@ export const SUCCESFUL_ENS_RESULT: VerifiableCredentialRecord = {
   challenge: credential,
   credential: credential,
 };
+
+export const SUCCESFUL_POH_RESULT: VerifiableCredentialRecord = {
+  record: {
+    type: "Poh",
+    address: "0xcF323CE817E25b4F784bC1e14c9A99A525fDC50f",
+    version: "0.0.0",
+    poh: "Is registered",
+  },
+  signature:
+    "0xbdbac10fdb0921e73df7575e47cbda484be550c36570bc146bed90c5dcb7435e64178cb263864f48af1ad6eeee1ee94c9a0794a3812ae861f8898a973233abea1c",
+  challenge: credential,
+  credential: credential,
+};

app/__tests__/components/ProviderCards/EnsCard.test.tsx

@@ -26,10 +26,6 @@ const mockUserContext: UserContextState = {
       providerSpec: STAMP_PROVIDERS.Ens,
       stamp: undefined,
     },
-    Poh: {
-      providerSpec: STAMP_PROVIDERS.Poh,
-      stamp: undefined,
-    },
   },
   handleAddStamp: handleAddStamp,
   handleCreatePassport: mockCreatePassport,
@@ -67,10 +63,6 @@ describe("when user has verified with EnsProvider", () => {
               providerSpec: STAMP_PROVIDERS.Ens,
               stamp: ensStampFixture,
             },
-            Poh: {
-              providerSpec: STAMP_PROVIDERS.Poh,
-              stamp: undefined,
-            },
           },
         }}
       >

app/__tests__/components/ProviderCards/PohCard.test.tsx

@@ -1,12 +1,17 @@
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent, waitFor, waitForElementToBeRemoved } from "@testing-library/react";
 import { PohCard } from "../../../components/ProviderCards";
 
 import { UserContext, UserContextState } from "../../../context/userContext";
 import { mockAddress, mockWallet } from "../../../__test-fixtures__/onboardHookValues";
 import { STAMP_PROVIDERS } from "../../../config/providers";
 import { pohStampFixture } from "../../../__test-fixtures__/databaseStorageFixtures";
+import { SUCCESFUL_POH_RESULT } from "../../../__test-fixtures__/verifiableCredentialResults";
+import { fetchVerifiableCredential } from "@dpopp/identity/dist/commonjs";
 
+jest.mock("@dpopp/identity/dist/commonjs", () => ({
+  fetchVerifiableCredential: jest.fn(),
+}));
 jest.mock("../../../utils/onboard.ts");
 
 const mockHandleConnection = jest.fn();
@@ -70,3 +75,125 @@ describe("when user has verified with PohProvider", () => {
     expect(verified).toBeInTheDocument();
   });
 });
+
+describe("when the verify button is clicked", () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("and when a successful POH result is returned", () => {
+    beforeEach(() => {
+      (fetchVerifiableCredential as jest.Mock).mockResolvedValue(SUCCESFUL_POH_RESULT);
+    });
+
+    it("the modal displays the verify button", async () => {
+      render(
+        <UserContext.Provider value={mockUserContext}>
+          <PohCard />
+        </UserContext.Provider>
+      );
+
+      const initialVerifyButton = screen.queryByRole("button", {
+        name: /Verify/,
+      });
+
+      fireEvent.click(initialVerifyButton!);
+
+      const verifyModal = await screen.findByRole("dialog");
+      const verifyModalButton = screen.getByTestId("modal-verify");
+
+      expect(verifyModal).toBeInTheDocument();
+
+      await waitFor(() => {
+        expect(verifyModalButton).toBeInTheDocument();
+      });
+    });
+
+    it("clicking verify adds the stamp", async () => {
+      render(
+        <UserContext.Provider value={mockUserContext}>
+          <PohCard />
+        </UserContext.Provider>
+      );
+
+      const initialVerifyButton = screen.queryByRole("button", {
+        name: /Verify/,
+      });
+
+      // Click verify button on ens card
+      fireEvent.click(initialVerifyButton!);
+
+      // Wait to see the verify button on the modal
+      await waitFor(() => {
+        const verifyModalButton = screen.getByTestId("modal-verify");
+        expect(verifyModalButton).toBeInTheDocument();
+      });
+
+      const finalVerifyButton = screen.queryByRole("button", {
+        name: /Verify/,
+      });
+
+      // Click the verify button on modal
+      fireEvent.click(finalVerifyButton!);
+
+      expect(handleAddStamp).toBeCalled();
+    });
+
+    it("clicking cancel closes the modal and a stamp should not be added", async () => {
+      (fetchVerifiableCredential as jest.Mock).mockResolvedValue(SUCCESFUL_POH_RESULT);
+      render(
+        <UserContext.Provider value={mockUserContext}>
+          <PohCard />
+        </UserContext.Provider>
+      );
+
+      const initialVerifyButton = screen.queryByRole("button", {
+        name: /Verify/,
+      });
+
+      fireEvent.click(initialVerifyButton!);
+
+      // Wait to see the cancel button on the modal
+      let modalCancelButton: HTMLElement | null = null;
+      await waitFor(() => {
+        modalCancelButton = screen.queryByRole("button", {
+          name: /Cancel/,
+        });
+        expect(modalCancelButton).toBeInTheDocument();
+      });
+
+      fireEvent.click(modalCancelButton!);
+
+      expect(handleAddStamp).not.toBeCalled();
+
+      await waitForElementToBeRemoved(modalCancelButton);
+      expect(modalCancelButton).not.toBeInTheDocument();
+    });
+  });
+
+  describe("and when a failed POH result is returned", () => {
+    it("modal displays a failed message", async () => {
+      (fetchVerifiableCredential as jest.Mock).mockRejectedValue("ERROR");
+      render(
+        <UserContext.Provider value={mockUserContext}>
+          <PohCard />
+        </UserContext.Provider>
+      );
+
+      const initialVerifyButton = screen.queryByRole("button", {
+        name: /Verify/,
+      });
+
+      fireEvent.click(initialVerifyButton!);
+
+      const verifyModal = await screen.findByRole("dialog");
+      const verifyModalText = screen.getByText("The Proof of Humanity Status for this address Is not Registered");
+
+      expect(verifyModal).toBeInTheDocument();
+
+      await waitFor(() => {
+        expect(verifyModalText).toBeInTheDocument();
+      });
+    });
+  });
+});

app/components/ProviderCards/PohCard.tsx

@@ -1,24 +1,32 @@
 // --- React Methods
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 
 // --- Identity tools
 import { fetchVerifiableCredential } from "@dpopp/identity/dist/commonjs";
 
 // pull context
 import { UserContext } from "../../context/userContext";
 
-import { Card } from "../Card";
-
-import { PROVIDER_ID } from "@dpopp/types";
+import { PROVIDER_ID, Stamp } from "@dpopp/types";
 
 const iamUrl = process.env.NEXT_PUBLIC_DPOPP_IAM_URL || "";
 
+// --- import components
+import { Card } from "../Card";
+import { VerifyModal } from "../VerifyModal";
+import { useDisclosure } from "@chakra-ui/react";
+
 const providerId: PROVIDER_ID = "Poh";
 
 export default function PohCard(): JSX.Element {
   const { address, signer, handleAddStamp, allProvidersState } = useContext(UserContext);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [credentialResponse, SetCredentialResponse] = useState<Stamp | undefined>(undefined);
+  const [credentialResponseIsLoading, setCredentialResponseIsLoading] = useState(false);
+  const [pohVerified, SetPohVerified] = useState<Stamp | undefined>(undefined);
 
   const handleFetchCredential = (): void => {
+    setCredentialResponseIsLoading(true);
     fetchVerifiableCredential(
       iamUrl,
       {
@@ -31,26 +39,48 @@ export default function PohCard(): JSX.Element {
       },
       signer as { signMessage: (message: string) => Promise<string> }
     )
-      .then((verified: { credential: any }): void => {
-        handleAddStamp({
+      .then((verified: { record: any; credential: any }): void => {
+        SetPohVerified(verified.record?.poh);
+        SetCredentialResponse({
           provider: "Poh",
           credential: verified.credential,
         });
       })
-      .catch((e: any): void => {
-        throw e;
+      .catch((e: any): void => {})
+      .finally((): void => {
+        setCredentialResponseIsLoading(false);
       });
   };
 
+  const handleUserVerify = (): void => {
+    if (credentialResponse) {
+      handleAddStamp(credentialResponse);
+    }
+    onClose();
+  };
+
   const issueCredentialWidget = (
-    <button
-      className="verify-btn"
-      onClick={() => {
-        handleFetchCredential();
-      }}
-    >
-      Verify
-    </button>
+    <>
+      <button
+        className="verify-btn"
+        data-testid="button-verify"
+        onClick={() => {
+          SetCredentialResponse(undefined);
+          handleFetchCredential();
+          onOpen();
+        }}
+      >
+        Verify
+      </button>
+      <VerifyModal
+        isOpen={isOpen}
+        onClose={onClose}
+        stamp={credentialResponse}
+        handleUserVerify={handleUserVerify}
+        verifyData={<>{`The Proof of Humanity Status for this address ${pohVerified || "Is not Registered"}`}</>}
+        isLoading={credentialResponseIsLoading}
+      />
+    </>
   );
 
   return (

iam/__tests__/poh.test.ts

@@ -5,24 +5,34 @@ import { PohProvider } from "../src/providers/poh";
 // ----- Ethers library
 import { Contract } from "ethers";
 
+const mockIsRegistered = jest.fn();
+
 jest.mock("ethers", () => {
-  // Require the original module to not be mocked...
-  return jest.requireActual("ethers");
+  return {
+    Contract: jest.fn().mockImplementation(() => {
+      return {
+        isRegistered: mockIsRegistered,
+      };
+    }),
+  };
 });
 
 const MOCK_ADDRESS = "0x738488886dd94725864ae38252a90be1ab7609c7";
 
+// const IsRegisteredMock = jest.spyOn(Contract.prototype, "isRegistered");
+var IsRegisteredMock = jest.fn();
+
 describe("Attempt verification", function () {
-  afterEach(() => {
+  beforeEach(() => {
     jest.clearAllMocks();
+    // mockIsRegistered.mockImplementation(async (address) => {
+    //   if (address === MOCK_ADDRESS) return true;
+    // });
   });
 
   it("should return true for an address registered with proof of humanity", async () => {
-    const mockIsRegistered = jest.fn(() => new Promise((resolve) => resolve(true)));
-    (Contract.prototype as any).isRegistered = mockIsRegistered;
-
+    mockIsRegistered.mockResolvedValueOnce(true);
     const poh = new PohProvider();
-
     const verifiedPayload = await poh.verify({
       address: MOCK_ADDRESS,
     } as RequestPayload);
@@ -31,48 +41,39 @@ describe("Attempt verification", function () {
     expect(verifiedPayload).toEqual({
       valid: true,
       record: {
-        poh: "Verified",
+        poh: "Is registered",
       },
     });
   });
 
   it("should return false for an address not registered with proof of humanity", async () => {
-    const mockIsRegistered = jest.fn(() => new Promise((resolve) => resolve(false)));
-    (Contract.prototype as any).isRegistered = mockIsRegistered;
+    mockIsRegistered.mockResolvedValueOnce(false);
+    const UNREGISTERED_ADDRESS = "0xUNREGISTERED";
 
     const poh = new PohProvider();
-
     const verifiedPayload = await poh.verify({
-      address: MOCK_ADDRESS,
+      address: UNREGISTERED_ADDRESS,
     } as RequestPayload);
 
-    expect(mockIsRegistered).toBeCalledWith(MOCK_ADDRESS);
+    expect(mockIsRegistered).toBeCalledWith(UNREGISTERED_ADDRESS);
     expect(verifiedPayload).toEqual({
       valid: false,
-      record: {
-        poh: "NotVerified",
-      },
     });
   });
 
-  it("should return false for an incorrect address", async () => {
-    const mockIsRegistered = jest.fn(
-      () =>
-        new Promise((_) => {
-          throw "error";
-        })
-    );
-    (Contract.prototype as any).isRegistered = mockIsRegistered;
+  it("should return error response when isRegistered call errors", async () => {
+    mockIsRegistered.mockRejectedValueOnce("some error");
+    const UNREGISTERED_ADDRESS = "0xUNREGISTERED";
 
     const poh = new PohProvider();
-
     const verifiedPayload = await poh.verify({
-      address: MOCK_ADDRESS,
+      address: UNREGISTERED_ADDRESS,
     } as RequestPayload);
 
-    expect(mockIsRegistered).toBeCalledWith(MOCK_ADDRESS);
+    expect(mockIsRegistered).toBeCalledWith(UNREGISTERED_ADDRESS);
     expect(verifiedPayload).toEqual({
       valid: false,
+      error: [JSON.stringify("some error")],
     });
   });
 });