From 03f5ca3096bbe0c30e588f2ffdfb8ab8bb749a9b Mon Sep 17 00:00:00 2001 From: "m.ray" <16125548+MadalinaRaicu@users.noreply.github.com> Date: Tue, 11 Apr 2023 08:23:43 -0400 Subject: [PATCH] fix(trading): fix formatting on clicking on orderbook cell after decimal resolution update (#3409) --- .../src/lib/orderbook-manager.tsx | 7 +-- libs/market-depth/src/lib/orderbook-row.tsx | 6 +- libs/market-depth/src/lib/orderbook.spec.tsx | 59 ++++++++++++++++--- libs/market-depth/src/lib/orderbook.tsx | 2 +- 4 files changed, 56 insertions(+), 18 deletions(-) diff --git a/libs/market-depth/src/lib/orderbook-manager.tsx b/libs/market-depth/src/lib/orderbook-manager.tsx index 44987ea60..8201936f4 100644 --- a/libs/market-depth/src/lib/orderbook-manager.tsx +++ b/libs/market-depth/src/lib/orderbook-manager.tsx @@ -1,8 +1,6 @@ -import React from 'react'; import throttle from 'lodash/throttle'; import { AsyncRenderer } from '@vegaprotocol/ui-toolkit'; import { Orderbook } from './orderbook'; -import { addDecimal } from '@vegaprotocol/utils'; import { useDataProvider } from '@vegaprotocol/react-helpers'; import { marketDepthProvider } from './market-depth-provider'; import { marketDataProvider, marketProvider } from '@vegaprotocol/market-list'; @@ -195,10 +193,9 @@ export const OrderbookManager = ({ marketId }: OrderbookManagerProps) => { positionDecimalPlaces={market?.positionDecimalPlaces ?? 0} resolution={resolution} onResolutionChange={(resolution: number) => setResolution(resolution)} - onClick={(price?: string | number) => { + onClick={(price: string) => { if (price) { - const priceValue = addDecimal(price, market?.decimalPlaces ?? 0); - updateOrder(marketId, { price: priceValue }); + updateOrder(marketId, { price }); } }} /> diff --git a/libs/market-depth/src/lib/orderbook-row.tsx b/libs/market-depth/src/lib/orderbook-row.tsx index b4439bece..5f88239f5 100644 --- a/libs/market-depth/src/lib/orderbook-row.tsx +++ b/libs/market-depth/src/lib/orderbook-row.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { addDecimalsFixedFormatNumber } from '@vegaprotocol/utils'; +import { addDecimal, addDecimalsFixedFormatNumber } from '@vegaprotocol/utils'; import { PriceCell, VolCell, CumulativeVol } from '@vegaprotocol/datagrid'; interface OrderbookRowProps { @@ -15,7 +15,7 @@ interface OrderbookRowProps { price: string; relativeAsk?: number; relativeBid?: number; - onClick?: (price?: string | number) => void; + onClick?: (price: string) => void; } export const OrderbookRow = React.memo( @@ -59,7 +59,7 @@ export const OrderbookRow = React.memo( onClick && onClick(price)} + onClick={() => onClick && onClick(addDecimal(price, decimalPlaces))} valueFormatted={addDecimalsFixedFormatNumber(price, decimalPlaces)} /> { const decimalPlaces = 3; it('should scroll to mid price on init', async () => { window.innerHeight = 11 * rowHeight; - const result = render( + render( { /> ); await waitFor(() => screen.getByTestId(`bid-vol-${params.midPrice}`)); - expect(result.getByTestId('scroll').scrollTop).toBe(91 * rowHeight); + expect(screen.getByTestId('scroll').scrollTop).toBe(91 * rowHeight); }); it('should keep mid price row in the middle', async () => { @@ -45,7 +45,7 @@ describe('Orderbook', () => { /> ); await waitFor(() => screen.getByTestId(`bid-vol-${params.midPrice}`)); - expect(result.getByTestId('scroll').scrollTop).toBe(91 * rowHeight); + expect(screen.getByTestId('scroll').scrollTop).toBe(91 * rowHeight); result.rerender( { /> ); await waitFor(() => screen.getByTestId(`bid-vol-${params.midPrice}`)); - expect(result.getByTestId('scroll').scrollTop).toBe(91 * rowHeight + 0.01); + expect(screen.getByTestId('scroll').scrollTop).toBe(91 * rowHeight + 0.01); }); it('should get back to mid price on click', async () => { @@ -143,7 +143,7 @@ describe('Orderbook', () => { expect(result.getByTestId('scroll').scrollTop).toBe(1); const scrollToMidPriceButton = result.getByTestId('scroll-to-midprice'); fireEvent.click(scrollToMidPriceButton); - expect(result.getByTestId('scroll').scrollTop).toBe(91 * rowHeight + 1); + expect(screen.getByTestId('scroll').scrollTop).toBe(91 * rowHeight + 1); }); it('should get back to mid price on resolution change', async () => { @@ -158,12 +158,12 @@ describe('Orderbook', () => { /> ); await waitFor(() => screen.getByTestId(`bid-vol-${params.midPrice}`)); - const scrollElement = result.getByTestId('scroll'); + const scrollElement = screen.getByTestId('scroll'); expect(scrollElement.scrollTop).toBe(91 * rowHeight); scrollElement.scrollTop = 1; fireEvent.scroll(scrollElement); - expect(result.getByTestId('scroll').scrollTop).toBe(1); - const resolutionSelect = result.getByTestId( + expect(screen.getByTestId('scroll').scrollTop).toBe(1); + const resolutionSelect = screen.getByTestId( 'resolution' ) as HTMLSelectElement; fireEvent.change(resolutionSelect, { target: { value: '10' } }); @@ -181,6 +181,47 @@ describe('Orderbook', () => { onResolutionChange={onResolutionChange} /> ); - expect(result.getByTestId('scroll').scrollTop).toBe(6 * rowHeight); + expect(screen.getByTestId('scroll').scrollTop).toBe(6 * rowHeight); + }); + + it('should format correctly the numbers on resolution change', async () => { + const onClickSpy = jest.fn(); + const result = render( + + ); + expect( + await screen.findByTestId(`bid-vol-${params.midPrice}`) + ).toBeInTheDocument(); + // Before resolution change the price is 122.934 + await fireEvent.click(await screen.getByTestId('price-122934')); + expect(onClickSpy).toBeCalledWith('122.934'); + const resolutionSelect = screen.getByTestId( + 'resolution' + ) as HTMLSelectElement; + await fireEvent.change(resolutionSelect, { target: { value: '10' } }); + await result.rerender( + + ); + await fireEvent.click(await screen.getByTestId('price-12299')); + // After resolution change the price is 122.99 + expect(onResolutionChange.mock.calls[0][0]).toBe(10); + expect(onClickSpy).toBeCalledWith('122.99'); }); }); diff --git a/libs/market-depth/src/lib/orderbook.tsx b/libs/market-depth/src/lib/orderbook.tsx index 2f677a234..eb8dda3a4 100644 --- a/libs/market-depth/src/lib/orderbook.tsx +++ b/libs/market-depth/src/lib/orderbook.tsx @@ -21,7 +21,7 @@ interface OrderbookProps extends OrderbookData { positionDecimalPlaces: number; resolution: number; onResolutionChange: (resolution: number) => void; - onClick?: (price?: string | number) => void; + onClick?: (price: string) => void; fillGaps?: boolean; }