From 66beba4235f88725a537ece546e8e25468bbcea2 Mon Sep 17 00:00:00 2001
From: "a.bouhuolia" <a.bouhuolia@live.com>
Date: Sun, 5 Jun 2022 16:41:49 +0200
Subject: [PATCH] chore(MarketTransactions): Add some assertions to the
 component.

---
 .../components/atoms/Currency/Currency.tsx    |  6 +-
 .../MarketTransactionsTable.test.tsx          | 16 +++-
 .../MarketTransactionsTableCell.tsx           |  2 +-
 ... => MarketTransactionsTable.test.tsx.snap} | 78 +++++++++++++------
 .../MarketTransactionsTable/_types.ts         |  1 +
 5 files changed, 73 insertions(+), 30 deletions(-)
 rename packages/renderer/src/components/molecules/MarketTransactionsTable/__snapshots__/{MarketTransactions.test.tsx.snap => MarketTransactionsTable.test.tsx.snap} (55%)

diff --git a/packages/renderer/src/components/atoms/Currency/Currency.tsx b/packages/renderer/src/components/atoms/Currency/Currency.tsx
index 6271d2d..1babd8c 100644
--- a/packages/renderer/src/components/atoms/Currency/Currency.tsx
+++ b/packages/renderer/src/components/atoms/Currency/Currency.tsx
@@ -15,18 +15,19 @@
 // =============================================================================
 
 import { useMemo } from "react";
+import type { FormatNumberOptions } from "react-intl";
 import { useIntl } from "react-intl";
 
 type CurrencyFormatType = "symbol" | "code" | "name" | "narrowSymbol";
 
-interface CurrencyProps {
+interface CurrencyProps extends FormatNumberOptions {
   currencyCode?: string;
   currentDisplay?: CurrencyFormatType;
   value: number;
 }
 
 export function Currency(props: CurrencyProps) {
-  const { currencyCode, currentDisplay, value } = props;
+  const { currencyCode, currentDisplay, value, ...formatNumberProps } = props;
   const intl = useIntl();
 
   const formattedNumber = useMemo(
@@ -43,6 +44,7 @@ export function Currency(props: CurrencyProps) {
               minimumFractionDigits: 2,
               maximumFractionDigits: 12,
             }),
+        ...formatNumberProps,
       }),
     [currencyCode, value]
   );
diff --git a/packages/renderer/src/components/molecules/MarketTransactionsTable/MarketTransactionsTable.test.tsx b/packages/renderer/src/components/molecules/MarketTransactionsTable/MarketTransactionsTable.test.tsx
index 6d5274a..f38870e 100644
--- a/packages/renderer/src/components/molecules/MarketTransactionsTable/MarketTransactionsTable.test.tsx
+++ b/packages/renderer/src/components/molecules/MarketTransactionsTable/MarketTransactionsTable.test.tsx
@@ -63,8 +63,8 @@ describe("molecules::MarketTransactionsTable", () => {
         <MarketTransactionsTable data={data} />
       </AppProviders>
     );
-    expect(screen.queryByText("7,564.94 XMR")).toBeInTheDocument();
-    expect(screen.queryByText("6,483.23 XMR")).toBeInTheDocument();
+    expect(screen.queryByText("XMR 7,564.94")).toBeInTheDocument();
+    expect(screen.queryByText("XMR 6,483.23")).toBeInTheDocument();
     unmount();
   });
 
@@ -89,6 +89,16 @@ describe("molecules::MarketTransactionsTable", () => {
     expect(screen.queryByText("1,212")).toBeInTheDocument();
     unmount();
   });
+
+  it("renders offer formatted payment method.", () => {
+    const { unmount } = render(
+      <AppProviders>
+        <MarketTransactionsTable data={data} />
+      </AppProviders>
+    );
+    expect(screen.queryByText("Cash by mail")).toBeInTheDocument();
+    unmount();
+  });
 });
 
 const data = [
@@ -112,7 +122,7 @@ const data = [
     amountCurrency: "XMR",
     cost: 983.32,
     costCurrency: "USD",
-    paymentMethod: MarketTransactionPaymentMethod.CashByMail,
+    paymentMethod: MarketTransactionPaymentMethod.Other,
     accountAge: 12,
     accountTrades: 3412,
   },
diff --git a/packages/renderer/src/components/molecules/MarketTransactionsTable/MarketTransactionsTableCell.tsx b/packages/renderer/src/components/molecules/MarketTransactionsTable/MarketTransactionsTableCell.tsx
index 4c6adb9..8fa596b 100644
--- a/packages/renderer/src/components/molecules/MarketTransactionsTable/MarketTransactionsTableCell.tsx
+++ b/packages/renderer/src/components/molecules/MarketTransactionsTable/MarketTransactionsTableCell.tsx
@@ -90,7 +90,7 @@ export function MarketTransactionsAccountTradesCell({
 }) {
   return (
     <BodyText heavy>
-      <Currency value={row?.accountTrades || 0} />
+      <Currency value={row?.accountTrades || 0} minimumFractionDigits={0} />
     </BodyText>
   );
 }
diff --git a/packages/renderer/src/components/molecules/MarketTransactionsTable/__snapshots__/MarketTransactions.test.tsx.snap b/packages/renderer/src/components/molecules/MarketTransactionsTable/__snapshots__/MarketTransactionsTable.test.tsx.snap
similarity index 55%
rename from packages/renderer/src/components/molecules/MarketTransactionsTable/__snapshots__/MarketTransactions.test.tsx.snap
rename to packages/renderer/src/components/molecules/MarketTransactionsTable/__snapshots__/MarketTransactionsTable.test.tsx.snap
index e2dc4ce..2f8bc3d 100644
--- a/packages/renderer/src/components/molecules/MarketTransactionsTable/__snapshots__/MarketTransactions.test.tsx.snap
+++ b/packages/renderer/src/components/molecules/MarketTransactionsTable/__snapshots__/MarketTransactionsTable.test.tsx.snap
@@ -1,9 +1,9 @@
 // Vitest Snapshot v1
 
-exports[`organisms::MarketTransactions > renders without exploding. 1`] = `
+exports[`molecules::MarketTransactionsTable > renders without exploding. 1`] = `
 <DocumentFragment>
   <table
-    class="mantine-Table-root mantine-ydlwhr"
+    class="mantine-Table-root mantine-19hj5t7"
   >
     <thead>
       <tr>
@@ -51,7 +51,7 @@ exports[`organisms::MarketTransactions > renders without exploding. 1`] = `
           style="width: 400px;"
         >
           <div
-            class="mantine-Group-root mantine-6y1794"
+            class="mantine-Group-root mantine-1lumg83"
           >
             <div
               class="mantine-Text-root mantine-Group-child mantine-1h17kkk"
@@ -59,7 +59,7 @@ exports[`organisms::MarketTransactions > renders without exploding. 1`] = `
               €5,000.96
             </div>
             <div
-              class="mantine-Text-root mantine-Group-child mantine-zvhzrs"
+              class="mantine-Text-root mantine-Group-child mantine-1qscdi2"
             >
               -1%
             </div>
@@ -68,7 +68,11 @@ exports[`organisms::MarketTransactions > renders without exploding. 1`] = `
         <td
           style="width: 400px;"
         >
-          XMR 7,564.94
+          <div
+            class="mantine-Text-root mantine-ix3vgq"
+          >
+            XMR 7,564.94
+          </div>
         </td>
         <td
           style="width: 400px;"
@@ -82,21 +86,33 @@ exports[`organisms::MarketTransactions > renders without exploding. 1`] = `
         <td
           style="width: 400px;"
         >
-          ASD
+          <div
+            class="mantine-Text-root mantine-ix3vgq"
+          >
+            Cash by mail
+          </div>
         </td>
         <td
           style="width: 400px;"
         >
           <div
-            class="mantine-Group-root mantine-6y1794"
+            class="mantine-Group-root mantine-1lumg83"
           >
-            <div
-              class="mantine-ThemeIcon-root mantine-Group-child mantine-11491oq"
+            <svg
+              class="mantine-gnzaph mantine-Group-child"
+              fill="none"
+              height="15"
+              viewBox="0 0 15 15"
+              width="15"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              X
-            </div>
+              <path
+                d="M7.5 0C3.36316 0 0 3.36316 0 7.5C0 11.6368 3.36316 15 7.5 15C11.6368 15 15 11.6368 15 7.5C15 3.36316 11.6368 0 7.5 0ZM11.1316 5.81053L6.82105 10.5632C6.71053 10.6895 6.50526 10.6895 6.37895 10.5789L3.69474 7.87895C3.56842 7.75263 3.56842 7.56316 3.69474 7.45263L4.48421 6.66316C4.61053 6.53684 4.8 6.53684 4.91053 6.66316L6.55263 8.32105L9.86842 4.65789C9.97895 4.53158 10.1684 4.53158 10.2947 4.64211L11.1158 5.38421C11.2421 5.49474 11.2421 5.68421 11.1316 5.81053Z"
+                fill="#0B65DA"
+              />
+            </svg>
             <div
-              class="mantine-Text-root mantine-Group-child mantine-1xtm85p"
+              class="mantine-Text-root mantine-Group-child mantine-1h17kkk"
             >
               65 Days
             </div>
@@ -108,7 +124,7 @@ exports[`organisms::MarketTransactions > renders without exploding. 1`] = `
           <div
             class="mantine-Text-root mantine-ix3vgq"
           >
-            1,212.00
+            1,212
           </div>
         </td>
       </tr>
@@ -117,7 +133,7 @@ exports[`organisms::MarketTransactions > renders without exploding. 1`] = `
           style="width: 400px;"
         >
           <div
-            class="mantine-Group-root mantine-6y1794"
+            class="mantine-Group-root mantine-1lumg83"
           >
             <div
               class="mantine-Text-root mantine-Group-child mantine-1h17kkk"
@@ -125,7 +141,7 @@ exports[`organisms::MarketTransactions > renders without exploding. 1`] = `
               €9,637.41
             </div>
             <div
-              class="mantine-Text-root mantine-Group-child mantine-zvhzrs"
+              class="mantine-Text-root mantine-Group-child mantine-1qscdi2"
             >
               -1%
             </div>
@@ -134,7 +150,11 @@ exports[`organisms::MarketTransactions > renders without exploding. 1`] = `
         <td
           style="width: 400px;"
         >
-          XMR 6,483.23
+          <div
+            class="mantine-Text-root mantine-ix3vgq"
+          >
+            XMR 6,483.23
+          </div>
         </td>
         <td
           style="width: 400px;"
@@ -148,21 +168,31 @@ exports[`organisms::MarketTransactions > renders without exploding. 1`] = `
         <td
           style="width: 400px;"
         >
-          ASD
+          <div
+            class="mantine-Text-root mantine-ix3vgq"
+          />
         </td>
         <td
           style="width: 400px;"
         >
           <div
-            class="mantine-Group-root mantine-6y1794"
+            class="mantine-Group-root mantine-1lumg83"
           >
-            <div
-              class="mantine-ThemeIcon-root mantine-Group-child mantine-11491oq"
+            <svg
+              class="mantine-gnzaph mantine-Group-child"
+              fill="none"
+              height="15"
+              viewBox="0 0 15 15"
+              width="15"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              X
-            </div>
+              <path
+                d="M7.5 0C3.36316 0 0 3.36316 0 7.5C0 11.6368 3.36316 15 7.5 15C11.6368 15 15 11.6368 15 7.5C15 3.36316 11.6368 0 7.5 0ZM11.1316 5.81053L6.82105 10.5632C6.71053 10.6895 6.50526 10.6895 6.37895 10.5789L3.69474 7.87895C3.56842 7.75263 3.56842 7.56316 3.69474 7.45263L4.48421 6.66316C4.61053 6.53684 4.8 6.53684 4.91053 6.66316L6.55263 8.32105L9.86842 4.65789C9.97895 4.53158 10.1684 4.53158 10.2947 4.64211L11.1158 5.38421C11.2421 5.49474 11.2421 5.68421 11.1316 5.81053Z"
+                fill="#0B65DA"
+              />
+            </svg>
             <div
-              class="mantine-Text-root mantine-Group-child mantine-1xtm85p"
+              class="mantine-Text-root mantine-Group-child mantine-1h17kkk"
             >
               65 Days
             </div>
@@ -174,7 +204,7 @@ exports[`organisms::MarketTransactions > renders without exploding. 1`] = `
           <div
             class="mantine-Text-root mantine-ix3vgq"
           >
-            3,412.00
+            3,412
           </div>
         </td>
       </tr>
diff --git a/packages/renderer/src/components/molecules/MarketTransactionsTable/_types.ts b/packages/renderer/src/components/molecules/MarketTransactionsTable/_types.ts
index bd1b41f..eaabf89 100644
--- a/packages/renderer/src/components/molecules/MarketTransactionsTable/_types.ts
+++ b/packages/renderer/src/components/molecules/MarketTransactionsTable/_types.ts
@@ -29,4 +29,5 @@ export interface MarketTransaction {
 
 export enum MarketTransactionPaymentMethod {
   CashByMail = "CashByMail",
+  Other = "Other",
 }