chore: tests

libs/markets/src/lib/components/market-info/market-info-panels.spec.tsx

@@ -1,9 +1,11 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import {
   ConditionOperator,
   ConditionOperatorMapping,
 } from '@vegaprotocol/types';
-import { DataSourceProof } from './market-info-panels';
+import { DataSourceProof, SuccessionLineInfoPanel } from './market-info-panels';
+import { MockedProvider } from '@apollo/react-testing';
+import { SuccessorMarketIdsDocument } from '../../__generated__';
 
 jest.mock('../../hooks/use-oracle-markets', () => ({
   useOracleMarkets: () => [],
@@ -137,3 +139,93 @@ describe('DataSourceProof', () => {
     ).toBeInTheDocument();
   });
 });
+
+describe('SuccessionLineInfoPanel', () => {
+  const mocks = [
+    {
+      request: {
+        query: SuccessorMarketIdsDocument,
+      },
+      result: {
+        data: {
+          __typename: 'Query',
+          marketsConnection: {
+            __typename: 'MarketConnection',
+            edges: [
+              {
+                __typename: 'MarketEdge',
+                node: {
+                  __typename: 'Market',
+                  id: 'abc',
+                  successorMarketID: 'def',
+                  parentMarketID: null,
+                },
+              },
+              {
+                __typename: 'MarketEdge',
+                node: {
+                  __typename: 'Market',
+                  id: 'def',
+                  successorMarketID: 'ghi',
+                  parentMarketID: 'abc',
+                },
+              },
+              {
+                __typename: 'MarketEdge',
+                node: {
+                  __typename: 'Market',
+                  id: 'ghi',
+                  successorMarketID: null,
+                  parentMarketID: 'def',
+                },
+              },
+            ],
+          },
+        },
+      },
+    },
+  ];
+
+  it.each([
+    ['abc', 1],
+    ['def', 2],
+    ['ghi', 3],
+  ])(
+    'renders succession line for %s (current position %d)',
+    async (id, number) => {
+      render(
+        <MockedProvider mocks={mocks}>
+          <SuccessionLineInfoPanel
+            market={{
+              id,
+            }}
+          />
+        </MockedProvider>
+      );
+
+      await waitFor(() => {
+        const items = screen.getAllByTestId('succession-line-item');
+        expect(items.length).toBe(3);
+        expect(
+          items[0].querySelector(
+            '[data-testid="succession-line-item-market-id"]'
+          )?.textContent
+        ).toBe('abc');
+        expect(
+          items[1].querySelector(
+            '[data-testid="succession-line-item-market-id"]'
+          )?.textContent
+        ).toBe('def');
+        expect(
+          items[2].querySelector(
+            '[data-testid="succession-line-item-market-id"]'
+          )?.textContent
+        ).toBe('ghi');
+
+        expect(
+          items[number - 1].querySelector('[data-testid="icon-bullet"]')
+        ).toBeInTheDocument();
+      });
+    }
+  );
+});

libs/markets/src/lib/components/market-info/market-info-panels.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 import { useMemo } from 'react';
 import { AssetDetailsTable, useAssetDataProvider } from '@vegaprotocol/assets';
 import { t } from '@vegaprotocol/i18n';
@@ -230,6 +230,7 @@ const SuccessionLineItem = ({
 
   return (
     <div
+      data-testid="succession-line-item"
       className={classNames(
         'rounded p-2 bg-vega-clight-700 dark:bg-vega-cdark-700',
         'font-alpha',
@@ -265,7 +266,12 @@ const SuccessionLineItem = ({
           <span className="block w-28 h-4 bg-vega-clight-500 dark:bg-vega-cdark-500 animate-pulse"></span>
         )}
       </div>
-      <div className="text-xs truncate mt-1">{marketId}</div>
+      <div
+        data-testid="succession-line-item-market-id"
+        className="text-xs truncate mt-1"
+      >
+        {marketId}
+      </div>
     </div>
   );
 };
@@ -302,7 +308,11 @@ const buildSuccessionLine = (
   find(id, 'down');
   return line;
 };
-export const SuccessionLineInfoPanel = ({ market }: MarketInfoProps) => {
+export const SuccessionLineInfoPanel = ({
+  market,
+}: {
+  market: Pick<MarketInfo, 'id'>;
+}) => {
   const { data } = useSuccessorMarketIdsQuery();
   const ids = compact(data?.marketsConnection?.edges.map((e) => e.node));
   const line = buildSuccessionLine(ids, market.id);
@@ -310,10 +320,10 @@ export const SuccessionLineInfoPanel = ({ market }: MarketInfoProps) => {
   return (
     <div className="flex flex-col gap-2">
       {line.map((id, i) => (
-        <>
+        <Fragment key={i}>
           {i > 0 && <SuccessionLink />}
           <SuccessionLineItem marketId={id} isCurrent={id === market.id} />
-        </>
+        </Fragment>
       ))}
     </div>
   );