vega-frontend-monorepo/apps/trading/components/select-market/select-market.spec.tsx

189 lines
4.4 KiB
TypeScript
Raw Normal View History

import { fireEvent, render, screen } from '@testing-library/react';
import { Schema } from '@vegaprotocol/types';
import {
SelectAllMarketsTableBody,
SelectMarketLandingTable,
} from './select-market';
import type {
MarketWithCandles,
MarketWithData,
MarketData,
} from '@vegaprotocol/market-list';
import { MemoryRouter } from 'react-router-dom';
type Market = MarketWithCandles & MarketWithData;
type PartialMarket = Partial<
Omit<Market, 'data'> & { data: Partial<MarketData> }
>;
const MARKET_A: PartialMarket = {
__typename: 'Market',
id: '1',
decimalPlaces: 2,
tradingMode: Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS,
tradableInstrument: {
__typename: 'TradableInstrument',
instrument: {
__typename: 'Instrument',
id: '1',
code: 'ABCDEF',
name: 'ABCDEF 1-Day',
product: {
__typename: 'Future',
quoteName: 'ABCDEF',
settlementAsset: {
__typename: 'Asset',
id: 'asset-ABC',
decimals: 2,
symbol: 'ABC',
},
},
metadata: {
__typename: 'InstrumentMetadata',
tags: ['ABC', 'DEF'],
},
},
},
fees: {
__typename: 'Fees',
factors: {
__typename: 'FeeFactors',
infrastructureFee: '0.01',
liquidityFee: '0.01',
makerFee: '0.01',
},
},
data: {
__typename: 'MarketData',
market: {
__typename: 'Market',
id: '1',
},
markPrice: '90',
trigger: Schema.AuctionTrigger.AUCTION_TRIGGER_OPENING,
indicativeVolume: '1000',
},
candles: [
{
__typename: 'Candle',
high: '100',
low: '10',
open: '10',
close: '80',
volume: '1000',
periodStart: '2022-11-01T15:49:00Z',
},
{
__typename: 'Candle',
high: '10',
low: '1',
open: '1',
close: '100',
volume: '1000',
periodStart: '2022-11-01T15:50:00Z',
},
],
};
const MARKET_B: PartialMarket = {
__typename: 'Market',
id: '2',
decimalPlaces: 2,
tradingMode: Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS,
tradableInstrument: {
__typename: 'TradableInstrument',
instrument: {
__typename: 'Instrument',
id: '2',
code: 'XYZ',
name: 'XYZ 1-Day',
product: {
__typename: 'Future',
quoteName: 'XYZ',
settlementAsset: {
__typename: 'Asset',
id: 'asset-XYZ',
decimals: 2,
symbol: 'XYZ',
},
},
metadata: {
__typename: 'InstrumentMetadata',
tags: ['XYZ'],
},
},
},
fees: {
__typename: 'Fees',
factors: {
__typename: 'FeeFactors',
infrastructureFee: '0.01',
liquidityFee: '0.01',
makerFee: '0.01',
},
},
data: {
__typename: 'MarketData',
market: {
__typename: 'Market',
id: '2',
},
markPrice: '123.123',
trigger: Schema.AuctionTrigger.AUCTION_TRIGGER_OPENING,
indicativeVolume: '2000',
},
candles: [
{
__typename: 'Candle',
high: '100',
low: '10',
open: '10',
close: '80',
volume: '1000',
periodStart: '2022-11-01T15:49:00Z',
},
],
};
feat: market list mega dropdown (rich popover) (#889) * feat: use MarketList query only * fix: remove Market.ts from index * feat: 30 refactor dialog, market list, change query * feat: #30 add indicativeVolume, total fees, tooltip, large dialog, tooltip accepts html description * fix: #30 total fees display in tooltip * fix: #30 toggle title on dialog open * fix: #30 fix order, price, high, low utils * fix: #30 fix test for market utils * feat: #30 add popover with markets to select * feat: #30 storybook popover * feat: #30 remove border on trigger and add some other classes * fix: #30 fix format check with format:write * feat: #30 add tooltip on taker fee * feat: #30 add tooltip on taker fee * fix: #30 format on select market list * fix: #30 remove unknown cast in test mock data * fix: #30 show markets where you have open positions * fix: #30 double check if open positions * fix: #30 dialog has only small/large sizes * feat: #30 add border on trigger and change padding and no wrap * fix: #30 if fees or factors are not found * fix: #30 remove markets.cy tests as markets page is now gone * fix #30 remove view full market list test * fix: #30 add rotating arrow on market title * fix: #30 add ease-in-out on popover * fix: #30 add ease-in-out on popover * fix: #30 align select a market table * fix: #30 select a market title * fix: #30 select a market title * fix: #30 fix any validateDOMnesting issues * fix: #30 show loading market data * fix: #30 add list of header columns * fix: #30 add list of header columns * fix: #30 small refactoring after review * fix: #30 update bold undreline class names * fix: #30 add large-mobile size * feat: #30 refactor select markets tables to render array of columns * fix: #30 remove size from select market dialog * fix: #30 add extra file for columns * fix: #30 update formtting * fix: #30 make sure popup closes on same market navigation * fix: rename market-utils, add calcCandle methods, store market id on select * fix: useMemo ondata and marketPositionData + orderbook stories fix * feat: #30 add open volume positions * fix: add market summary back * fix: update formatting * fix: use currentcolor on arrow * fix: create all markets page * fix: add overflow-y auto * fix: enlarge select market to get started dialog * fix: revert markets container * fix: use query to fix flickering on position markets * fix: edit unordered list in tooltips * fix: fix tooltip table * fix: fix home.cy.ts * chore: skip /markets tests
2022-08-11 11:56:35 +00:00
describe('SelectMarket', () => {
it('should render the SelectAllMarketsTableBody', () => {
const onSelect = jest.fn();
const onCellClick = jest.fn();
const { container } = render(
<MemoryRouter>
<SelectAllMarketsTableBody
markets={[MARKET_A as Market, MARKET_B as Market]}
onCellClick={onCellClick}
onSelect={onSelect}
/>
</MemoryRouter>
);
expect(screen.getByText('ABCDEF')).toBeTruthy(); // name
expect(screen.getByText('25.00%')).toBeTruthy(); // price change
expect(container).toHaveTextContent(/1,000/); // volume
fireEvent.click(screen.getAllByTestId(`market-link-1`)[0]);
expect(onSelect).toHaveBeenCalledWith('1');
Feat/305 add console v2 first view screen (#424) * [#305] add initial landing dialog on markets page and fix some typos * [#305] market-list utils and generate schema * [#305] initial styling of the landing dialog and add arrows * [#305] routing to markets and add hover and market list tests * [#305] fix z-index on dialog overlay * [#305] default market shoulde be oldest market that is currently trading in continuous mode * [#305] refactor market-list library * [#305] add arrow unit tests * Update libs/market-list/src/lib/components/landing/landing-dialog.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * Update libs/market-list/src/lib/components/landing/select-market-list.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * Update libs/market-list/src/lib/components/landing/select-market-list.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * test: fix failing tests from homepage change * [#305] sort by id after sorting by date * test: increase timeout for failing tests in CI * [#305] destructuring all over the place and some code tweaks, arrows and percentage changes * [#305] update sparkline to show colour * [#305] fix order of market list * [#305] stretchedLink class plus a-tag href for navigation - accessibility updates * [#305] use href only and remove log * [#305] use bignumber.js for price calculations * [#305] change to bg-white/50 on dark mode overlay as asked from UX * [#305] change to bg-white/50 on dark mode overlay as asked from UX * [#305] toLocaleString fix * [#305] toLocaleString fix * [#305] add price-change-cell and use formatNumber * [#305] add extra test for select market list * Update apps/trading/specs/index.spec.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * [#305] use memo, sort by date and id lodash Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> Co-authored-by: Joe <joe@vega.xyz>
2022-05-23 12:21:54 +00:00
});
feat: market list mega dropdown (rich popover) (#889) * feat: use MarketList query only * fix: remove Market.ts from index * feat: 30 refactor dialog, market list, change query * feat: #30 add indicativeVolume, total fees, tooltip, large dialog, tooltip accepts html description * fix: #30 total fees display in tooltip * fix: #30 toggle title on dialog open * fix: #30 fix order, price, high, low utils * fix: #30 fix test for market utils * feat: #30 add popover with markets to select * feat: #30 storybook popover * feat: #30 remove border on trigger and add some other classes * fix: #30 fix format check with format:write * feat: #30 add tooltip on taker fee * feat: #30 add tooltip on taker fee * fix: #30 format on select market list * fix: #30 remove unknown cast in test mock data * fix: #30 show markets where you have open positions * fix: #30 double check if open positions * fix: #30 dialog has only small/large sizes * feat: #30 add border on trigger and change padding and no wrap * fix: #30 if fees or factors are not found * fix: #30 remove markets.cy tests as markets page is now gone * fix #30 remove view full market list test * fix: #30 add rotating arrow on market title * fix: #30 add ease-in-out on popover * fix: #30 add ease-in-out on popover * fix: #30 align select a market table * fix: #30 select a market title * fix: #30 select a market title * fix: #30 fix any validateDOMnesting issues * fix: #30 show loading market data * fix: #30 add list of header columns * fix: #30 add list of header columns * fix: #30 small refactoring after review * fix: #30 update bold undreline class names * fix: #30 add large-mobile size * feat: #30 refactor select markets tables to render array of columns * fix: #30 remove size from select market dialog * fix: #30 add extra file for columns * fix: #30 update formtting * fix: #30 make sure popup closes on same market navigation * fix: rename market-utils, add calcCandle methods, store market id on select * fix: useMemo ondata and marketPositionData + orderbook stories fix * feat: #30 add open volume positions * fix: add market summary back * fix: update formatting * fix: use currentcolor on arrow * fix: create all markets page * fix: add overflow-y auto * fix: enlarge select market to get started dialog * fix: revert markets container * fix: use query to fix flickering on position markets * fix: edit unordered list in tooltips * fix: fix tooltip table * fix: fix home.cy.ts * chore: skip /markets tests
2022-08-11 11:56:35 +00:00
it('should call onSelect callback on SelectMarketLandingTable', () => {
const onSelect = jest.fn();
const onCellClick = jest.fn();
render(
<MemoryRouter>
<SelectMarketLandingTable
markets={[MARKET_A as Market, MARKET_B as Market]}
onCellClick={onCellClick}
onSelect={onSelect}
/>
</MemoryRouter>
);
fireEvent.click(screen.getAllByTestId(`market-link-1`)[0]);
expect(onSelect).toHaveBeenCalledWith('1');
fireEvent.click(screen.getAllByTestId(`market-link-2`)[0]);
expect(onSelect).toHaveBeenCalledWith('2');
});
Feat/305 add console v2 first view screen (#424) * [#305] add initial landing dialog on markets page and fix some typos * [#305] market-list utils and generate schema * [#305] initial styling of the landing dialog and add arrows * [#305] routing to markets and add hover and market list tests * [#305] fix z-index on dialog overlay * [#305] default market shoulde be oldest market that is currently trading in continuous mode * [#305] refactor market-list library * [#305] add arrow unit tests * Update libs/market-list/src/lib/components/landing/landing-dialog.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * Update libs/market-list/src/lib/components/landing/select-market-list.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * Update libs/market-list/src/lib/components/landing/select-market-list.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * test: fix failing tests from homepage change * [#305] sort by id after sorting by date * test: increase timeout for failing tests in CI * [#305] destructuring all over the place and some code tweaks, arrows and percentage changes * [#305] update sparkline to show colour * [#305] fix order of market list * [#305] stretchedLink class plus a-tag href for navigation - accessibility updates * [#305] use href only and remove log * [#305] use bignumber.js for price calculations * [#305] change to bg-white/50 on dark mode overlay as asked from UX * [#305] change to bg-white/50 on dark mode overlay as asked from UX * [#305] toLocaleString fix * [#305] toLocaleString fix * [#305] add price-change-cell and use formatNumber * [#305] add extra test for select market list * Update apps/trading/specs/index.spec.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * [#305] use memo, sort by date and id lodash Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> Co-authored-by: Joe <joe@vega.xyz>
2022-05-23 12:21:54 +00:00
});