From d6640b466f34edd5ac8c83b8e03d0cb25eb91c82 Mon Sep 17 00:00:00 2001
From: Matthew Russell <mattrussell36@gmail.com>
Date: Wed, 18 Oct 2023 13:13:18 -0700
Subject: [PATCH] test: add test for trading fees card

---
 .../components/fees-container/fees-card.tsx   | 36 +++++++++++
 .../fees-container/fees-container.spec.tsx    | 60 +++++++++++++++++++
 .../fees-container/fees-container.tsx         | 58 ++++--------------
 3 files changed, 106 insertions(+), 48 deletions(-)
 create mode 100644 apps/trading/components/fees-container/fees-card.tsx
 create mode 100644 apps/trading/components/fees-container/fees-container.spec.tsx

diff --git a/apps/trading/components/fees-container/fees-card.tsx b/apps/trading/components/fees-container/fees-card.tsx
new file mode 100644
index 000000000..48d773956
--- /dev/null
+++ b/apps/trading/components/fees-container/fees-card.tsx
@@ -0,0 +1,36 @@
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+
+export const FeeCard = ({
+  children,
+  title,
+  className,
+  loading = false,
+}: {
+  children: ReactNode;
+  title: string;
+  className?: string;
+  loading?: boolean;
+}) => {
+  return (
+    <div
+      className={classNames(
+        'p-4 bg-vega-clight-800 dark:bg-vega-cdark-800 col-span-full lg:col-auto',
+        'rounded-lg',
+        className
+      )}
+    >
+      <h2 className="mb-3">{title}</h2>
+      {loading ? <FeeCardLoader /> : children}
+    </div>
+  );
+};
+
+export const FeeCardLoader = () => {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="w-full h-5 bg-vega-clight-600 dark:bg-vega-cdark-600" />
+      <div className="w-3/4 h-6 bg-vega-clight-600 dark:bg-vega-cdark-600" />
+    </div>
+  );
+};
diff --git a/apps/trading/components/fees-container/fees-container.spec.tsx b/apps/trading/components/fees-container/fees-container.spec.tsx
new file mode 100644
index 000000000..efbb85d10
--- /dev/null
+++ b/apps/trading/components/fees-container/fees-container.spec.tsx
@@ -0,0 +1,60 @@
+import { render, screen } from '@testing-library/react';
+import { TradingFees } from './fees-container';
+import { formatPercentage, getAdjustedFee } from './utils';
+
+describe('TradingFees', () => {
+  it('renders correct fee data', () => {
+    const makerFee = 0.01;
+    const infraFee = 0.01;
+    const minLiqFee = 0.1;
+    const maxLiqFee = 0.3;
+
+    const referralDiscount = 0.01;
+    const volumeDiscount = 0.01;
+
+    const props = {
+      params: {
+        market_fee_factors_makerFee: makerFee.toString(),
+        market_fee_factors_infrastructureFee: infraFee.toString(),
+      },
+      markets: [
+        { fees: { factors: { liquidityFee: minLiqFee.toString() } } },
+        { fees: { factors: { liquidityFee: '0.2' } } },
+        { fees: { factors: { liquidityFee: maxLiqFee.toString() } } },
+      ],
+      referralDiscount,
+      volumeDiscount,
+    };
+    render(<TradingFees {...props} />);
+
+    const minFee = formatPercentage(makerFee + infraFee + minLiqFee);
+    const maxFee = formatPercentage(makerFee + infraFee + maxLiqFee);
+    expect(
+      screen.getByText('Total fee before discount').nextElementSibling
+    ).toHaveTextContent(`${minFee}%-${maxFee}%`);
+    expect(
+      screen.getByText('Infrastructure').nextElementSibling
+    ).toHaveTextContent(formatPercentage(infraFee) + '%');
+    expect(screen.getByText('Maker').nextElementSibling).toHaveTextContent(
+      formatPercentage(makerFee) + '%'
+    );
+
+    const minAdjustedFees = formatPercentage(
+      getAdjustedFee(
+        [makerFee, infraFee, minLiqFee],
+        [referralDiscount, volumeDiscount]
+      )
+    );
+
+    const maxAdjustedFees = formatPercentage(
+      getAdjustedFee(
+        [makerFee, infraFee, maxLiqFee],
+        [referralDiscount, volumeDiscount]
+      )
+    );
+
+    expect(screen.getByTestId('adjusted-fees')).toHaveTextContent(
+      `${minAdjustedFees}%-${maxAdjustedFees}%`
+    );
+  });
+});
diff --git a/apps/trading/components/fees-container/fees-container.tsx b/apps/trading/components/fees-container/fees-container.tsx
index d9805efa2..4f930f07a 100644
--- a/apps/trading/components/fees-container/fees-container.tsx
+++ b/apps/trading/components/fees-container/fees-container.tsx
@@ -1,24 +1,22 @@
-import type { ReactNode } from 'react';
 import maxBy from 'lodash/maxBy';
 import minBy from 'lodash/minBy';
-import classNames from 'classnames';
 import { t } from '@vegaprotocol/i18n';
-import { useDiscountProgramsQuery, useFeesQuery } from './__generated__/Fees';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import {
   useNetworkParams,
   NetworkParams,
 } from '@vegaprotocol/network-parameters';
-import type { MarketMaybeWithDataAndCandles } from '@vegaprotocol/markets';
 import { useMarketList } from '@vegaprotocol/markets';
+import { formatNumber } from '@vegaprotocol/utils';
+import { Splash } from '@vegaprotocol/ui-toolkit';
+import { useDiscountProgramsQuery, useFeesQuery } from './__generated__/Fees';
+import { FeeCard } from './fees-card';
 import { MarketFees } from './market-fees';
-import { formatPercentage, getAdjustedFee } from './utils';
-import { Table, Td, Th, THead, Tr } from './table';
+import { Stat } from './stat';
 import { useVolumeStats } from './use-volume-stats';
 import { useReferralStats } from './use-referral-stats';
-import { formatNumber } from '@vegaprotocol/utils';
-import { Stat } from './stat';
-import { Splash } from '@vegaprotocol/ui-toolkit';
+import { formatPercentage, getAdjustedFee } from './utils';
+import { Table, Td, Th, THead, Tr } from './table';
 
 export const FeesContainer = () => {
   const { pubKey } = useVegaWallet();
@@ -158,41 +156,7 @@ export const FeesContainer = () => {
   );
 };
 
-const FeeCard = ({
-  children,
-  title,
-  className,
-  loading = false,
-}: {
-  children: ReactNode;
-  title: string;
-  className?: string;
-  loading?: boolean;
-}) => {
-  return (
-    <div
-      className={classNames(
-        'p-4 bg-vega-clight-800 dark:bg-vega-cdark-800 col-span-full lg:col-auto',
-        'rounded-lg',
-        className
-      )}
-    >
-      <h2 className="mb-3">{title}</h2>
-      {loading ? <FeeCardLoader /> : children}
-    </div>
-  );
-};
-
-const FeeCardLoader = () => {
-  return (
-    <div className="flex flex-col gap-2">
-      <div className="w-full h-5 bg-vega-clight-600 dark:bg-vega-cdark-600" />
-      <div className="w-3/4 h-6 bg-vega-clight-600 dark:bg-vega-cdark-600" />
-    </div>
-  );
-};
-
-const TradingFees = ({
+export const TradingFees = ({
   params,
   markets,
   referralDiscount,
@@ -202,7 +166,7 @@ const TradingFees = ({
     market_fee_factors_infrastructureFee: string;
     market_fee_factors_makerFee: string;
   };
-  markets: MarketMaybeWithDataAndCandles[] | null;
+  markets: Array<{ fees: { factors: { liquidityFee: string } } }> | null;
   referralDiscount: number;
   volumeDiscount: number;
 }) => {
@@ -246,7 +210,7 @@ const TradingFees = ({
   return (
     <div>
       <div className="pt-6 leading-none">
-        <p className="block text-3xl leading-none">
+        <p className="block text-3xl leading-none" data-testid="adjusted-fees">
           {minAdjustedTotal !== undefined && maxAdjustedTotal !== undefined
             ? `${formatPercentage(minAdjustedTotal)}%-${formatPercentage(
                 maxAdjustedTotal
@@ -310,8 +274,6 @@ const CurrentVolume = ({
   windowLengthVolume: number;
   epochs: number;
 }) => {
-  // TODO sum windowLength volume
-
   let requiredForNextTier = 0;
 
   if (tiers && tierIndex) {