LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat: #876 add explicit time in force labels (#877)

Browse Source 
* feat: #876 add explicit time in force labels

* fix: update GTC and GTT

* fix: update GTC and GTT

* fix: deal ticket test update
This commit is contained in:
m.ray 2022-07-27 12:28:43 +02:00 committed by GitHub
parent e275460c76
commit b9db97c276
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 119 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
libs/deal-ticket/src/components/deal-ticket.spec.tsx
View File

@ -7,8 +7,8 @@ import { addDecimal } from '@vegaprotocol/react-helpers';
import { fireEvent, render, screen, act } from '@testing-library/react';
import { DealTicket } from './deal-ticket';
import type { DealTicketQuery_market } from './__generated__/DealTicketQuery';
import type { Order } from '../utils/get-default-order';
import { MarketState, MarketTradingMode } from '@vegaprotocol/types';
import type { Order } from '@vegaprotocol/orders';
const market: DealTicketQuery_market = {
__typename: 'Market',
@ -59,109 +59,111 @@ function generateJsx(order?: Order) {
);
}
it('Displays ticket defaults', () => {
render(generateJsx());
describe('DealTicket', () => {
it('Displays ticket defaults', () => {
render(generateJsx());
// Assert defaults are used
expect(
screen.getByTestId(`order-type-${VegaWalletOrderType.Market}-selected`)
).toBeInTheDocument();
expect(
screen.queryByTestId('order-side-SIDE_BUY-selected')
).toBeInTheDocument();
expect(
screen.queryByTestId('order-side-SIDE_SELL-selected')
).not.toBeInTheDocument();
expect(screen.getByTestId('order-size')).toHaveDisplayValue(
String(1 / Math.pow(10, market.positionDecimalPlaces))
);
expect(screen.getByTestId('order-tif')).toHaveValue(
VegaWalletOrderTimeInForce.IOC
);
// Assert defaults are used
expect(
screen.getByTestId(`order-type-${VegaWalletOrderType.Market}-selected`)
).toBeInTheDocument();
expect(
screen.queryByTestId('order-side-SIDE_BUY-selected')
).toBeInTheDocument();
expect(
screen.queryByTestId('order-side-SIDE_SELL-selected')
).not.toBeInTheDocument();
expect(screen.getByTestId('order-size')).toHaveDisplayValue(
String(1 / Math.pow(10, market.positionDecimalPlaces))
);
expect(screen.getByTestId('order-tif')).toHaveValue(
VegaWalletOrderTimeInForce.IOC
);
// Assert last price is shown
expect(screen.getByTestId('last-price')).toHaveTextContent(
// eslint-disable-next-line
`~${addDecimal(market.depth.lastTrade!.price, market.decimalPlaces)} ${
market.tradableInstrument.instrument.product.quoteName
}`
);
});
// Assert last price is shown
expect(screen.getByTestId('last-price')).toHaveTextContent(
// eslint-disable-next-line
`~${addDecimal(market.depth.lastTrade!.price, market.decimalPlaces)} ${
market.tradableInstrument.instrument.product.quoteName
}`
);
});
it('Can edit deal ticket', async () => {
render(generateJsx());
it('Can edit deal ticket', async () => {
render(generateJsx());
// BUY is selected by default
screen.getByTestId('order-side-SIDE_BUY-selected');
// BUY is selected by default
screen.getByTestId('order-side-SIDE_BUY-selected');
await act(async () => {
fireEvent.change(screen.getByTestId('order-size'), {
target: { value: '200' },
await act(async () => {
fireEvent.change(screen.getByTestId('order-size'), {
target: { value: '200' },
});
});
expect(screen.getByTestId('order-size')).toHaveDisplayValue('200');
fireEvent.change(screen.getByTestId('order-tif'), {
target: { value: VegaWalletOrderTimeInForce.IOC },
});
expect(screen.getByTestId('order-tif')).toHaveValue(
VegaWalletOrderTimeInForce.IOC
);
// Switch to limit order
fireEvent.click(screen.getByTestId('order-type-TYPE_LIMIT'));
// Assert price input shown with default value
expect(screen.getByTestId('order-price')).toHaveDisplayValue('0');
// Check all TIF options shown
expect(screen.getByTestId('order-tif').children).toHaveLength(
Object.keys(VegaWalletOrderTimeInForce).length
);
});
expect(screen.getByTestId('order-size')).toHaveDisplayValue('200');
it('Handles TIF select box dependent on order type', () => {
render(generateJsx());
fireEvent.change(screen.getByTestId('order-tif'), {
target: { value: VegaWalletOrderTimeInForce.IOC },
// Check only IOC and
expect(
Array.from(screen.getByTestId('order-tif').children).map(
(o) => o.textContent
)
).toEqual(['Immediate or Cancel (IOC)', 'Fill or Kill (FOK)']);
// Switch to limit order and check all TIF options shown
fireEvent.click(screen.getByTestId('order-type-TYPE_LIMIT'));
expect(screen.getByTestId('order-tif').children).toHaveLength(
Object.keys(VegaWalletOrderTimeInForce).length
);
// Change to GTC
fireEvent.change(screen.getByTestId('order-tif'), {
target: { value: VegaWalletOrderTimeInForce.GTC },
});
expect(screen.getByTestId('order-tif')).toHaveValue(
VegaWalletOrderTimeInForce.GTC
);
// Switch back to market order and TIF should now be IOC
fireEvent.click(screen.getByTestId('order-type-TYPE_MARKET'));
expect(screen.getByTestId('order-tif')).toHaveValue(
VegaWalletOrderTimeInForce.IOC
);
// Switch tif to FOK
fireEvent.change(screen.getByTestId('order-tif'), {
target: { value: VegaWalletOrderTimeInForce.FOK },
});
expect(screen.getByTestId('order-tif')).toHaveValue(
VegaWalletOrderTimeInForce.FOK
);
// Change back to limit and check we are still on FOK
fireEvent.click(screen.getByTestId('order-type-TYPE_LIMIT'));
expect(screen.getByTestId('order-tif')).toHaveValue(
VegaWalletOrderTimeInForce.FOK
);
});
expect(screen.getByTestId('order-tif')).toHaveValue(
VegaWalletOrderTimeInForce.IOC
);
// Switch to limit order
fireEvent.click(screen.getByTestId('order-type-TYPE_LIMIT'));
// Assert price input shown with default value
expect(screen.getByTestId('order-price')).toHaveDisplayValue('0');
// Check all TIF options shown
expect(screen.getByTestId('order-tif').children).toHaveLength(
Object.keys(VegaWalletOrderTimeInForce).length
);
});
it('Handles TIF select box dependent on order type', () => {
render(generateJsx());
// Check only IOC and
expect(
Array.from(screen.getByTestId('order-tif').children).map(
(o) => o.textContent
)
).toEqual(['IOC', 'FOK']);
// Switch to limit order and check all TIF options shown
fireEvent.click(screen.getByTestId('order-type-TYPE_LIMIT'));
expect(screen.getByTestId('order-tif').children).toHaveLength(
Object.keys(VegaWalletOrderTimeInForce).length
);
// Change to GTC
fireEvent.change(screen.getByTestId('order-tif'), {
target: { value: VegaWalletOrderTimeInForce.GTC },
});
expect(screen.getByTestId('order-tif')).toHaveValue(
VegaWalletOrderTimeInForce.GTC
);
// Switch back to market order and TIF should now be IOC
fireEvent.click(screen.getByTestId('order-type-TYPE_MARKET'));
expect(screen.getByTestId('order-tif')).toHaveValue(
VegaWalletOrderTimeInForce.IOC
);
// Switch tif to FOK
fireEvent.change(screen.getByTestId('order-tif'), {
target: { value: VegaWalletOrderTimeInForce.FOK },
});
expect(screen.getByTestId('order-tif')).toHaveValue(
VegaWalletOrderTimeInForce.FOK
);
// Change back to limit and check we are still on FOK
fireEvent.click(screen.getByTestId('order-type-TYPE_LIMIT'));
expect(screen.getByTestId('order-tif')).toHaveValue(
VegaWalletOrderTimeInForce.FOK
);
});

22
libs/deal-ticket/src/components/time-in-force-selector.tsx
View File

@ -11,6 +11,26 @@ interface TimeInForceSelectorProps {
onSelect: (tif: VegaWalletOrderTimeInForce) => void;
}
// More detail in https://docs.vega.xyz/docs/mainnet/graphql/enums/order-time-in-force
export const timeInForceLabel = (tif: string) => {
switch (tif) {
case VegaWalletOrderTimeInForce.GTC:
return t(`Good 'til Cancelled`);
case VegaWalletOrderTimeInForce.IOC:
return t('Immediate or Cancel');
case VegaWalletOrderTimeInForce.FOK:
return t('Fill or Kill');
case VegaWalletOrderTimeInForce.GTT:
return t(`Good 'til Time`);
case VegaWalletOrderTimeInForce.GFN:
return t('Good for Normal');
case VegaWalletOrderTimeInForce.GFA:
return t('Good for Auction');
default:
return t(tif);
}
};
export const TimeInForceSelector = ({
value,
orderType,
@ -37,7 +57,7 @@ export const TimeInForceSelector = ({
{options.map(([key, value]) => {
return (
<option key={key} value={value}>
{key}
{`${timeInForceLabel(value)} (${key})`}
</option>
);
})}