chore(trading): fix formatting for volume cells in book (#3006)

libs/market-depth/src/lib/orderbook-row.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import {
   PriceCell,
-  Vol,
+  VolCell,
   CumulativeVol,
   addDecimalsFormatNumber,
   VolumeType,
-  addDecimal,
 } from '@vegaprotocol/react-helpers';
 
 interface OrderbookRowProps {
@@ -42,17 +41,17 @@ export const OrderbookRow = React.memo(
   }: OrderbookRowProps) => {
     return (
       <>
-        <Vol
+        <VolCell
           testId={`bid-vol-${price}`}
           value={bid}
-          valueFormatted={addDecimal(bid, positionDecimalPlaces)}
+          valueFormatted={addDecimalsFormatNumber(bid, positionDecimalPlaces)}
           relativeValue={relativeBid}
           type={VolumeType.bid}
         />
-        <Vol
+        <VolCell
           testId={`ask-vol-${price}`}
           value={ask}
-          valueFormatted={addDecimal(ask, positionDecimalPlaces)}
+          valueFormatted={addDecimalsFormatNumber(ask, positionDecimalPlaces)}
           relativeValue={relativeAsk}
           type={VolumeType.ask}
         />

libs/react-helpers/src/lib/grid/numeric-cell.spec.tsx

@@ -1,6 +1,4 @@
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-
 import { NumericCell } from './numeric-cell';
 
 describe('NumericCell', () => {

libs/react-helpers/src/lib/grid/price-flash-cell.spec.tsx

@@ -1,6 +1,4 @@
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-
 import { PriceFlashCell } from './price-flash-cell';
 
 describe('<PriceFlashCell />', () => {

libs/react-helpers/src/lib/grid/vol-cell.spec.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+import { VolCell, VolumeType } from './vol-cell';
+import * as tailwind from '@vegaprotocol/tailwindcss-config';
+
+describe('VolCell', () => {
+  const significantPart = '12,345';
+  const decimalPart = '67';
+  const props = {
+    value: 1234567,
+    valueFormatted: `${significantPart}.${decimalPart}`,
+    type: VolumeType.ask,
+    testId: 'cell',
+  };
+
+  it('Displays formatted value', () => {
+    render(<VolCell {...props} />);
+    expect(screen.getByTestId(props.testId)).toHaveTextContent(
+      props.valueFormatted
+    );
+    expect(screen.getByText(decimalPart)).toBeInTheDocument();
+    expect(screen.getByText(decimalPart)).toHaveClass('opacity-60');
+  });
+
+  it('Displays 0', () => {
+    render(<VolCell {...props} value={0} valueFormatted="0.00" />);
+    expect(screen.getByTestId(props.testId)).toHaveTextContent('0.00');
+  });
+
+  it('Displays - if value is not a number', () => {
+    render(<VolCell {...props} value={null} valueFormatted="" />);
+    expect(screen.getByTestId(props.testId)).toHaveTextContent('-');
+  });
+
+  it('renders bid volume bar', () => {
+    render(<VolCell {...props} type={VolumeType.bid} />);
+    expect(screen.getByTestId('vol-bar')).toHaveClass('left-0'); // renders bid bars from the left
+    expect(screen.getByTestId('vol-bar')).toHaveStyle({
+      backgroundColor: tailwind.theme.colors.vega.green.DEFAULT,
+    });
+  });
+
+  it('renders ask volume bar', () => {
+    render(<VolCell {...props} type={VolumeType.ask} />);
+    expect(screen.getByTestId('vol-bar')).toHaveClass('right-0'); // renders ask bars from the right
+    expect(screen.getByTestId('vol-bar')).toHaveStyle({
+      backgroundColor: tailwind.theme.colors.vega.pink.DEFAULT,
+    });
+  });
+});

libs/react-helpers/src/lib/grid/vol-cell.tsx

@@ -8,7 +8,7 @@ export enum VolumeType {
   bid,
   ask,
 }
-export interface VolProps {
+export interface VolCellProps {
   value: number | bigint | null | undefined;
   valueFormatted: string;
   relativeValue?: number;
@@ -17,20 +17,21 @@ export interface VolProps {
 }
 export interface IVolCellProps extends ICellRendererParams {
   value: number | bigint | null | undefined;
-  valueFormatted: Omit<VolProps, 'value'>;
+  valueFormatted: Omit<VolCellProps, 'value'>;
 }
 
 export const BID_COLOR = tailwind.theme.colors.vega.green.DEFAULT;
 export const ASK_COLOR = tailwind.theme.colors.vega.pink.DEFAULT;
 
-export const Vol = React.memo(
-  ({ value, valueFormatted, relativeValue, type, testId }: VolProps) => {
+export const VolCell = React.memo(
+  ({ value, valueFormatted, relativeValue, type, testId }: VolCellProps) => {
     if ((!value && value !== 0) || isNaN(Number(value))) {
-      return <div data-testid="vol">-</div>;
+      return <div data-testid={testId || 'vol'}>-</div>;
     }
     return (
       <div className="relative" data-testid={testId || 'vol'}>
         <div
+          data-testid="vol-bar"
           className={classNames(
             'h-full absolute top-0 opacity-40 dark:opacity-100',
             {
@@ -50,4 +51,4 @@ export const Vol = React.memo(
   }
 );
 
-Vol.displayName = 'Vol';
+VolCell.displayName = 'VolCell';