test(explorer): add tests for games display

apps/explorer/src/app/components/txs/details/transfer/blocks/transfer-rewards.tsx

@@ -39,22 +39,17 @@ interface TransferRewardsProps {
 }
 
 /**
- * Renderer for a transfer. These can vary quite
- * widely, essentially every field can be null.
+ * Renders recurring transfers/game details in a way that is, perhaps, easy to understand
  *
  * @param transfer A recurring transfer object
  */
 export function TransferRewards({ recurring }: TransferRewardsProps) {
-  const metric =
-    recurring?.dispatchStrategy?.metric || 'DISPATCH_METRIC_UNSPECIFIED';
-
   if (!recurring || !recurring.dispatchStrategy) {
     return null;
   }
 
   // Destructure to make things a bit more readable
   const {
-    assetForMetric,
     entityScope,
     individualScope,
     teamScope,
@@ -81,20 +76,21 @@ export function TransferRewards({ recurring }: TransferRewardsProps) {
             {getScopeLabel(entityScope, teamScope)}
           </li>
         ) : null}
-        {metric && (
-          <li>
-            <strong>{t('Metric')}</strong>: {metricLabels[metric]}
-          </li>
-        )}
-
-        {assetForMetric ? (
-          <li>
-            <strong>{t('Asset')}</strong>:{' '}
-            <AssetLink assetId={assetForMetric} />
-          </li>
-        ) : null}
-
-        {lockPeriod ? (
+        {recurring.dispatchStrategy &&
+          recurring.dispatchStrategy.assetForMetric && (
+            <li>
+              <strong>{t('Asset for metric')}</strong>:{' '}
+              <AssetLink assetId={recurring.dispatchStrategy.assetForMetric} />
+            </li>
+          )}
+        {recurring.dispatchStrategy.metric &&
+          metricLabels[recurring.dispatchStrategy.metric] && (
+            <li>
+              <strong>{t('Metric')}</strong>:{' '}
+              {metricLabels[recurring.dispatchStrategy.metric]}
+            </li>
+          )}
+        {lockPeriod && (
           <li>
             <strong>{t('Reward lock')}</strong>:&nbsp;
             {recurring.dispatchStrategy.lockPeriod}{' '}
@@ -102,7 +98,7 @@ export function TransferRewards({ recurring }: TransferRewardsProps) {
               ? t('epoch')
               : t('epochs')}
           </li>
-        ) : null}
+        )}
 
         {markets && markets.length > 0 ? (
           <li>
@@ -172,7 +168,7 @@ export function TransferRewards({ recurring }: TransferRewardsProps) {
             <tbody>
               {rankTable.map((row, i) => {
                 return (
-                  <tr>
+                  <tr key={`rank-${i}`}>
                     <td className="border border-slate-300 text-center">
                       {row.startRank}
                     </td>
@@ -215,37 +211,6 @@ export function getRewardTitle(
   return t('Reward metrics');
 }
 
-interface TransferRecurringStrategyProps {
-  strategy: Strategy;
-}
-
-/**
- * Simple renderer for a dispatch strategy in a recurring transfer
- *
- * @param strategy Dispatch strategy object
- */
-export function TransferRecurringStrategy({
-  strategy,
-}: TransferRecurringStrategyProps) {
-  if (!strategy) {
-    return null;
-  }
-
-  return (
-    <>
-      {strategy.assetForMetric ? (
-        <li>
-          <strong>{t('Asset for metric')}</strong>:{' '}
-          <AssetLink assetId={strategy.assetForMetric} />
-        </li>
-      ) : null}
-      <li>
-        <strong>{t('Metric')}</strong>: {strategy.metric}
-      </li>
-    </>
-  );
-}
-
 const individualScopeLabels: Record<
   components['schemas']['vegaIndividualScope'],
   string

apps/explorer/src/app/components/txs/details/transfer/transfer-rewards.spec.tsx

@@ -0,0 +1,172 @@
+import {
+  getScopeLabel,
+  getRewardTitle,
+  TransferRewards,
+} from './blocks/transfer-rewards';
+import { render } from '@testing-library/react';
+import type { components } from '../../../../../types/explorer';
+import type { Recurring } from './transfer-details';
+import {
+  DispatchMetric,
+  DistributionStrategy,
+  EntityScope,
+  IndividualScope,
+} from '@vegaprotocol/types';
+import { MemoryRouter } from 'react-router-dom';
+import { MockedProvider } from '@apollo/client/testing';
+
+describe('getScopeLabel', () => {
+  it('should return the correct label for ENTITY_SCOPE_TEAMS with teamScope', () => {
+    const scope = 'ENTITY_SCOPE_TEAMS';
+    const teamScope = ['team1', 'team2', 'team3'];
+    const expectedLabel = ' 3 teams';
+
+    const result = getScopeLabel(scope, teamScope);
+
+    expect(result).toEqual(expectedLabel);
+  });
+
+  it('should return the correct label for ENTITY_SCOPE_TEAMS without teamScope', () => {
+    const scope = 'ENTITY_SCOPE_TEAMS';
+    const teamScope = undefined;
+    const expectedLabel = 'All teams';
+
+    const result = getScopeLabel(scope, teamScope);
+
+    expect(result).toEqual(expectedLabel);
+  });
+
+  it('should return the correct label for ENTITY_SCOPE_INDIVIDUALS', () => {
+    const scope = 'ENTITY_SCOPE_INDIVIDUALS';
+    const teamScope = undefined;
+    const expectedLabel = 'Individuals';
+
+    const result = getScopeLabel(scope, teamScope);
+
+    expect(result).toEqual(expectedLabel);
+  });
+
+  it('should return an empty string for unknown scope', () => {
+    const scope = 'UNKNOWN_SCOPE';
+    const teamScope = undefined;
+    const expectedLabel = '';
+
+    const result = getScopeLabel(
+      scope as unknown as components['schemas']['vegaEntityScope'],
+      teamScope
+    );
+
+    expect(result).toEqual(expectedLabel);
+  });
+});
+
+describe('getRewardTitle', () => {
+  it('should return the correct title for ENTITY_SCOPE_TEAMS', () => {
+    const scope = 'ENTITY_SCOPE_TEAMS';
+    const expectedTitle = 'Game';
+
+    const result = getRewardTitle(scope);
+
+    expect(result).toEqual(expectedTitle);
+  });
+
+  it('should return the correct title for other scopes', () => {
+    const scope = 'ENTITY_SCOPE_INDIVIDUALS';
+    const expectedTitle = 'Reward metrics';
+
+    const result = getRewardTitle(scope);
+
+    expect(result).toEqual(expectedTitle);
+  });
+});
+
+describe('TransferRewards', () => {
+  it('should render nothing if recurring dispatchStrategy is not provided', () => {
+    const { container } = render(
+      <TransferRewards recurring={null as unknown as Recurring} />
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should render nothing if recurring.dispatchStrategy is not provided', () => {
+    const { container } = render(
+      <TransferRewards recurring={{} as unknown as Recurring} />
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should render the reward details correctly', () => {
+    const recurring = {
+      dispatchStrategy: {
+        metric: DispatchMetric.DISPATCH_METRIC_AVERAGE_POSITION,
+        assetForMetric: '123',
+        entityScope: EntityScope.ENTITY_SCOPE_TEAMS,
+        individualScope: IndividualScope.INDIVIDUAL_SCOPE_IN_TEAM,
+        teamScope: [],
+        distributionStrategy:
+          DistributionStrategy.DISTRIBUTION_STRATEGY_PRO_RATA,
+        lockPeriod: 'lockPeriod',
+        markets: ['market1', 'market2'],
+        stakingRequirement: '1',
+        windowLength: 'windowLength',
+        notionalTimeWeightedAveragePositionRequirement:
+          'notionalTimeWeightedAveragePositionRequirement',
+        rankTable: [
+          { startRank: 1, shareRatio: 0.2 },
+          { startRank: 2, shareRatio: 0.3 },
+        ],
+        nTopPerformers: 'nTopPerformers',
+      },
+    };
+
+    const { getByText } = render(
+      <MemoryRouter>
+        <MockedProvider>
+          <TransferRewards recurring={recurring} />
+        </MockedProvider>
+      </MemoryRouter>
+    );
+
+    expect(getByText('Game')).toBeInTheDocument();
+    expect(getByText('Scope')).toBeInTheDocument();
+    expect(getByText('Asset for metric')).toBeInTheDocument();
+    expect(getByText('Metric')).toBeInTheDocument();
+    expect(getByText('Reward lock')).toBeInTheDocument();
+    expect(getByText('Markets in scope')).toBeInTheDocument();
+    expect(getByText('Staking requirement')).toBeInTheDocument();
+    expect(getByText('Window length')).toBeInTheDocument();
+    expect(getByText('Notional TWAP')).toBeInTheDocument();
+    expect(getByText('Elligible team members:')).toBeInTheDocument();
+    expect(getByText('Distribution strategy')).toBeInTheDocument();
+    expect(getByText('Start rank')).toBeInTheDocument();
+    expect(getByText('Share of reward pool')).toBeInTheDocument();
+  });
+
+  it('should not render a rank table if recurring.dispatchStrategy.rankTable is not provided', () => {
+    const recurring = {
+      dispatchStrategy: {
+        entityScope: EntityScope.ENTITY_SCOPE_INDIVIDUALS,
+        individualScope: IndividualScope.INDIVIDUAL_SCOPE_ALL,
+        teamScope: ['team1', 'team2', 'team3'],
+        distributionStrategy:
+          DistributionStrategy.DISTRIBUTION_STRATEGY_PRO_RATA,
+        lockPeriod: 'lockPeriod',
+        markets: ['market1', 'market2'],
+        stakingRequirement: 'stakingRequirement',
+        windowLength: 'windowLength',
+        notionalTimeWeightedAveragePositionRequirement:
+          'notionalTimeWeightedAveragePositionRequirement',
+        nTopPerformers: 'nTopPerformers',
+      },
+    };
+
+    const { container } = render(
+      <MemoryRouter>
+        <MockedProvider>
+          <TransferRewards recurring={recurring} />
+        </MockedProvider>
+      </MemoryRouter>
+    );
+    expect(container.querySelector('table')).toBeNull();
+  });
+});