[#108] Add more positions-table unit tests

libs/positions/jest.config.js

@@ -11,4 +11,5 @@ module.exports = {
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/libs/positions',
+  setupFilesAfterEnv: ['./src/setup-tests.ts'],
 };

libs/positions/src/lib/positions-table.spec.tsx

@@ -1,22 +1,95 @@
-import { render } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
-import { MockedProvider } from '@apollo/react-testing';
+import { act, render, screen } from '@testing-library/react';
 import PositionsTable from './positions-table';
+import { positions_party_positions } from '@vegaprotocol/graphql';
 
-describe('PositionsTable', () => {
-  it('should render successfully', async () => {
-    await act(async () => {
-      const { baseElement } = render(
-        <MockedProvider>
-          <PositionsTable
-            data={[]}
-            onRowClicked={(marketId) => {
-              console.log(marketId);
-            }}
-          />
-        </MockedProvider>
-      );
-      expect(baseElement).toBeTruthy();
-    });
+const singleRow: positions_party_positions = {
+  realisedPNL: '5',
+  openVolume: '100',
+  unrealisedPNL: '895000',
+  averageEntryPrice: '1129935',
+  market: {
+    id: 'b7010da9dbe7fbab2b74d9d5642fc4a8a0ca93ef803d21fa60c2cacd0416bba0',
+    name: 'UNIDAI Monthly (30 Jun 2022)',
+    data: { markPrice: '1138885', __typename: 'MarketData' },
+    decimalPlaces: 5,
+    tradableInstrument: {
+      instrument: {
+        id: '',
+        name: 'UNIDAI Monthly (30 Jun 2022)',
+        metadata: {
+          tags: [
+            'formerly:3C58ED2A4A6C5D7E',
+            'base:UNI',
+            'quote:DAI',
+            'class:fx/crypto',
+            'monthly',
+            'sector:defi',
+          ],
+          __typename: 'InstrumentMetadata',
+        },
+        code: 'UNIDAI.MF21',
+        product: {
+          settlementAsset: {
+            id: '6d9d35f657589e40ddfb448b7ad4a7463b66efb307527fedd2aa7df1bbd5ea61',
+            symbol: 'tDAI',
+            name: 'tDAI TEST',
+            decimals: 5,
+            __typename: 'Asset',
+          },
+          quoteName: 'DAI',
+          __typename: 'Future',
+        },
+        __typename: 'Instrument',
+      },
+      __typename: 'TradableInstrument',
+    },
+    __typename: 'Market',
+  },
+  __typename: 'Position',
+};
+const singleRowData = [singleRow];
+const onRowClicked = (marketId: string) => {
+  console.log(marketId);
+};
+
+test('should render successfully', async () => {
+  await act(async () => {
+    const { baseElement } = render(
+      <PositionsTable data={[]} onRowClicked={onRowClicked} />
+    );
+    expect(baseElement).toBeTruthy();
   });
 });
+test('Render correct columns', async () => {
+  await act(async () => {
+    render(<PositionsTable data={singleRowData} onRowClicked={onRowClicked} />);
+  });
+
+  const headers = screen.getAllByRole('columnheader');
+  expect(headers).toHaveLength(5);
+  expect(headers.map((h) => h.textContent?.trim())).toEqual([
+    'Market',
+    'Amount',
+    'Average Entry Price',
+    'Mark Price',
+    'Realised PNL',
+  ]);
+});
+
+test('Correct formatting applied', async () => {
+  await act(async () => {
+    render(<PositionsTable data={singleRowData} onRowClicked={onRowClicked} />);
+  });
+  const cells = screen.getAllByRole('gridcell');
+  const expectedValues = [
+    singleRow.market.tradableInstrument.instrument.code,
+    '+100',
+    '11.29935',
+    '11.38885',
+    '+5',
+  ];
+  cells.forEach((cell, i) => {
+    expect(cell).toHaveTextContent(expectedValues[i]);
+  });
+  expect(cells[cells.length - 1]).toHaveClass('color-vega-green');
+});

libs/positions/src/lib/positions-table.tsx

@@ -10,10 +10,7 @@ import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
 import { AgGridColumn } from 'ag-grid-react';
 import type { AgGridReact } from 'ag-grid-react';
 import compact from 'lodash/compact';
-import {
-  positions_party_positions,
-  MarketTradingMode,
-} from '@vegaprotocol/graphql';
+import { positions_party_positions } from '@vegaprotocol/graphql';
 
 interface PositionsTableProps {
   data: positions_party_positions[];
@@ -44,6 +41,10 @@ const sortByName = (
   return 0;
 };
 
+interface PositionsTableValueFormatterParams extends ValueFormatterParams {
+  data: positions_party_positions;
+}
+
 export const PositionsTable = forwardRef<AgGridReact, PositionsTableProps>(
   ({ data, onRowClicked }, ref) => {
     const sortedData = useMemo(() => {
@@ -67,12 +68,12 @@ export const PositionsTable = forwardRef<AgGridReact, PositionsTableProps>(
       >
         <AgGridColumn
           headerName="Market"
-          field="tradableInstrument.instrument.code"
+          field="market.tradableInstrument.instrument.code"
         />
         <AgGridColumn
           headerName="Amount"
           field="openVolume"
-          valueFormatter={({ value, data }: ValueFormatterParams) =>
+          valueFormatter={({ value }: PositionsTableValueFormatterParams) =>
             volumePrefix(value)
           }
         />
@@ -80,7 +81,10 @@ export const PositionsTable = forwardRef<AgGridReact, PositionsTableProps>(
           headerName="Average Entry Price"
           field="averageEntryPrice"
           cellRenderer="PriceCell"
-          valueFormatter={({ value, data }: ValueFormatterParams) =>
+          valueFormatter={({
+            value,
+            data,
+          }: PositionsTableValueFormatterParams) =>
             formatNumber(value, data.market.decimalPlaces)
           }
         />
@@ -89,15 +93,9 @@ export const PositionsTable = forwardRef<AgGridReact, PositionsTableProps>(
           field="market.data.markPrice"
           type="rightAligned"
           cellRenderer="PriceCell"
-          valueFormatter={({ value, data }: ValueFormatterParams) => {
-            if (
-              data.market.data.marketTradingMode ===
-              MarketTradingMode.OpeningAuction
-            ) {
-              return '-';
-            }
-            return addDecimal(value, data.market.decimalPlaces);
-          }}
+          valueFormatter={({ value, data }: ValueFormatterParams) =>
+            addDecimal(value, data.market.decimalPlaces)
+          }
         />
         <AgGridColumn
           headerName="Realised PNL"
@@ -109,12 +107,9 @@ export const PositionsTable = forwardRef<AgGridReact, PositionsTableProps>(
             'color-vega-red': ({ value }: { value: string }) =>
               Number(value) < 0,
           }}
-          valueFormatter={({ value }: ValueFormatterParams) => {
-            if (Number(value) > 0) {
-              return '+' + value;
-            }
-            return value;
-          }}
+          valueFormatter={({ value }: ValueFormatterParams) =>
+            volumePrefix(value)
+          }
           cellRenderer="PriceCell"
         />
       </AgGrid>

libs/positions/src/setup-tests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

libs/positions/tsconfig.spec.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
-    "types": ["jest", "node"]
+    "types": ["jest", "node", "@testing-library/jest-dom"]
   },
   "include": [
     "**/*.test.ts",