From 35363889e9d7d1e1eb080b092140eebca936976a Mon Sep 17 00:00:00 2001
From: abhishandy <abhishek.sandy@gmail.com>
Date: Thu, 26 Oct 2023 09:12:28 -0400
Subject: [PATCH] test: send form component

---
 .../Forms/__snapshots__/send.test.js.snap     | 255 ++++++++++++++++--
 components/atoms/Stepper/Forms/send.test.js   |  29 ++
 2 files changed, 265 insertions(+), 19 deletions(-)

diff --git a/components/atoms/Stepper/Forms/__snapshots__/send.test.js.snap b/components/atoms/Stepper/Forms/__snapshots__/send.test.js.snap
index 4aa42d86..7456fdb0 100644
--- a/components/atoms/Stepper/Forms/__snapshots__/send.test.js.snap
+++ b/components/atoms/Stepper/Forms/__snapshots__/send.test.js.snap
@@ -3,28 +3,245 @@
 exports[`Send should render the component 1`] = `
 <div>
   <div
-    class="flex flex-col gap-6 items-center h-screen w-full overflow-hidden"
+    class="flex flex-col gap-6 justify-center items-center"
   >
-    <svg
-      aria-hidden="true"
-      class="text-red-600"
-      fill="currentColor"
-      height="100"
-      stroke="currentColor"
-      stroke-width="0"
-      viewBox="0 0 20 20"
-      width="100"
-      xmlns="http://www.w3.org/2000/svg"
+    <div
+      class="relative"
     >
-      <path
-        clip-rule="evenodd"
-        d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
-        fill-rule="evenodd"
+      <div
+        class="flex flex-col items-center text-center space-y-2"
+      >
+        <div
+          class="flex flex-col items-center select-none"
+        >
+          <img
+            alt="logo"
+            class="h-6 md:h-9 object-left object-contain w-min"
+            data-nimg="1"
+            decoding="async"
+            height="24"
+            loading="lazy"
+            src="/_next/image?url=%2Fimg.jpg&w=48&q=75"
+            srcset="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=48&q=75 2x"
+            style="color: transparent;"
+            width="24"
+          />
+          <h1
+            class="font-extrabold text-gray-700 text-lg hidden md:flex"
+          >
+            Pass Sante
+          </h1>
+        </div>
+        <span
+          class="text-xs flex items-center gap-1"
+        >
+          Pass Sante ID:
+          <div
+            class="flex items-center gap-1"
+          >
+            [
+            <div
+              class="tooltip"
+              data-tip="Copy to clipboard"
+            >
+              <span
+                class="text-orange cursor-pointer"
+              >
+                0xcda147
+                ...
+                f368eb4
+              </span>
+            </div>
+            ]
+          </div>
+        </span>
+      </div>
+      <div
+        class="flex flex-col items-center gap-4"
+      >
+        <div
+          class="border relative border-gray-300 rounded-lg overflow-hidden"
+        >
+          <div>
+            QRCode
+          </div>
+        </div>
+        <div
+          class="flex flex-col items-center gap-1"
+        >
+          <div
+            class="flex -space-x-2"
+          >
+            <img
+              alt="Image Description"
+              class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800"
+              src="/images/homme.png"
+            />
+            <img
+              alt="Image Description"
+              class="inline-block h-[2.875rem] w-[2.875rem] rounded-full ring-2 ring-white dark:ring-gray-800"
+              src="/images/femme.png"
+            />
+          </div>
+          <h4
+            class="text-sm text-center"
+          >
+            <span
+              class="font-semibold"
+            >
+              $ 0.00
+            </span>
+             Health Pass WiiQare 
+            <br />
+             From
+             
+            <span
+              class="text-orange font-semibold"
+            >
+              0xcda147
+              ...
+              f368eb4
+            </span>
+             
+            To
+             
+            <span
+              class="text-orange font-semibold"
+            >
+              0xcda147
+              ...
+              f368eb4
+            </span>
+          </h4>
+        </div>
+      </div>
+      <div
+        class="text-center mt-6 flex flex-col gap-2 space-y-3"
+      >
+        <h4
+          class="font-semibold text-gray-700 text-sm"
+        >
+          Envoyer le pass santé au bénéficiaire:
+        </h4>
+        <div
+          class="flex justify-between"
+        >
+          <a
+            class="text-gray-900 bg-white hover:bg-gray-100 border border-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center gap-2 mr-2 mb-2"
+            href="whatsapp://send?text=undefined/voucher/pass/0xcda1470a8117daaccf368eb4"
+          >
+            <img
+              alt=""
+              class="w-6"
+              src="/images/whatsapp.png"
+            />
+            <span
+              class="hidden md:flex"
+            >
+              WhatsApp
+            </span>
+          </a>
+          <a
+            class="text-gray-900 bg-white hover:bg-gray-100 border border-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center gap-2 mr-2 mb-2"
+            href="https://www.facebook.com/share.php?u=undefined/voucher/pass/0xcda1470a8117daaccf368eb4"
+          >
+            <img
+              alt=""
+              class="w-6"
+              src="/images/facebook-share.png"
+            />
+            <span
+              class="hidden md:flex"
+            >
+              Facebook
+            </span>
+          </a>
+          <a
+            class="text-gray-900 bg-white hover:bg-gray-100 border border-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center gap-2 mr-2 mb-2"
+            href="sms://+243814978651&?body=undefined/voucher/pass/0xcda1470a8117daaccf368eb4"
+          >
+            <img
+              alt=""
+              class="w-6"
+              src="/images/sms.png"
+            />
+            <span
+              class="hidden md:flex"
+            >
+              Message
+            </span>
+          </a>
+          <button
+            class="text-gray-900 bg-white hover:bg-gray-100 border border-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center gap-2 mr-2 mb-2"
+            type="button"
+          >
+            <img
+              alt=""
+              class="w-6"
+              src="/images/text.png"
+            />
+            <span
+              class="hidden md:flex"
+            >
+              Copy Link
+            </span>
+          </button>
+        </div>
+      </div>
+      <div
+        class="flex-shrink-0 border-none backdrop-filter backdrop-blur-[6px] w-full h-full bg-white/30 absolute top-0 p-6"
       />
-    </svg>
-    <span>
-      Error Voucher !
-    </span>
+      <div
+        class="flex flex-shrink-0 absolute top-0 justify-center items-center w-full h-full"
+      >
+        <div
+          class="flex flex-col gap-8 justify-center items-center"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="150"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 20 20"
+            width="150"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
+              fill-rule="evenodd"
+            />
+          </svg>
+          <button
+            class="bg-orange flex gap-2 effect-up justify-center items-center text-gray-100 font-normal h-fit  py-2 px-3 rounded-lg text-sm transition duration-300"
+          >
+            <svg
+              aria-hidden="true"
+              fill="none"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+              <path
+                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+             Voir Pass Santé
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;
diff --git a/components/atoms/Stepper/Forms/send.test.js b/components/atoms/Stepper/Forms/send.test.js
index e23b7068..e2d7f0f1 100644
--- a/components/atoms/Stepper/Forms/send.test.js
+++ b/components/atoms/Stepper/Forms/send.test.js
@@ -16,6 +16,26 @@ jest.mock('next/router', () => ({
   }),
 }));
 
+jest.mock('../../../../lib/Fetcher', () => {
+  return {
+    __esModule: true,
+    default: jest.fn().mockReturnValue({
+      data: [],
+      isLoading: false,
+      isError: false,
+    }),
+  };
+});
+
+jest.mock('next-qrcode', () => {
+  return {
+    __esModule: true,
+    useQRCode: jest.fn().mockReturnValue({
+      Canvas: () => <div>QRCode</div>,
+    }),
+  };
+});
+
 describe('Send', () => {
   let component;
   beforeEach(() => {
@@ -38,4 +58,13 @@ describe('Send', () => {
   it('should render the component', () => {
     expect(component).toMatchSnapshot();
   });
+
+  it('should handle button click', () => {
+
+    fetch.mockResponse("{}");
+
+    const button = screen.getByText('Voir Pass Santé');
+    button.click();
+
+  });
 });