feat: 1651 market select snags (#1874)

* feat: #1651 market select snags

* fix: #1651 fix markets.cy.ts cypress test

* fix: #1651 prevent default and stop propagation on select markets asset click
This commit is contained in:
m.ray 2022-10-28 13:41:33 +01:00 committed by GitHub
parent b86c3386c6
commit a90970399c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 109 additions and 69 deletions

View File

@ -37,15 +37,15 @@ describe('markets table', { tags: '@smoke' }, () => {
cy.getByTestId('market-name').should('not.be.empty');
});
it('Able to select market from dropdown', () => {
it('able to select market from dropdown', () => {
openMarketDropDown();
cy.getByTestId('market-link-market-0').should('be.visible').click();
cy.getByTestId('market-link-market-0').first().should('be.visible').click();
cy.contains('ACTIVE MARKET').should('be.visible');
cy.url().should('include', '/markets/market-0');
cy.getByTestId('popover-trigger').should('not.be.empty');
});
it('Able to open and sort full market list - market page', () => {
it('able to open and sort full market list - market page', () => {
const ExpectedSortedMarkets = [
'AAPL.MF21',
'BTCUSD.MF21',

View File

@ -1,4 +1,5 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { TradingModeTooltip } from '@vegaprotocol/deal-ticket';
import { FeesCell } from '@vegaprotocol/market-info';
import {
calcCandleHigh,
@ -17,9 +18,13 @@ import {
MarketTradingMode,
MarketTradingModeMapping,
} from '@vegaprotocol/types';
import { PriceCellChange, Sparkline, Tooltip } from '@vegaprotocol/ui-toolkit';
import {
Link,
PriceCellChange,
Sparkline,
Tooltip,
} from '@vegaprotocol/ui-toolkit';
import isNil from 'lodash/isNil';
import Link from 'next/link';
import type { CandleClose } from '@vegaprotocol/types';
import type {
@ -30,6 +35,31 @@ type Market = MarketWithData & MarketWithCandles;
export const cellClassNames = 'py-1 first:text-left text-right';
const TradingMode = ({ market }: { market: Market }) => {
return (
<Tooltip
description={
market && (
<TradingModeTooltip
tradingMode={market.tradingMode}
trigger={market.data?.trigger || null}
/>
)
}
>
<span>
{market.tradingMode ===
MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
market.data?.trigger &&
market.data.trigger !== AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
? `${MarketTradingModeMapping[market.tradingMode]}
- ${AuctionTriggerMapping[market.data.trigger]}`
: MarketTradingModeMapping[market.tradingMode]}
</span>
</Tooltip>
);
};
const FeesInfo = () => {
return (
<Tooltip
@ -174,10 +204,30 @@ export const columns = (
const candleLow = market.candles && calcCandleLow(market.candles);
const candleHigh = market.candles && calcCandleHigh(market.candles);
const candleVolume = market.candles && calcCandleVolume(market.candles);
const handleKeyPress = (
event: React.KeyboardEvent<HTMLAnchorElement>,
id: string
) => {
if (event.key === 'Enter' && onSelect) {
return onSelect(id);
}
};
const selectMarketColumns: Column[] = [
{
kind: ColumnKind.Market,
value: market.tradableInstrument.instrument.code,
value: (
<Link
href={`/markets/${market.id}`}
data-testid={`market-link-${market.id}`}
onKeyPress={(event) => handleKeyPress(event, market.id)}
onClick={(e) => {
e.preventDefault();
onSelect(market.id);
}}
>
{market.tradableInstrument.instrument.code}
</Link>
),
className: cellClassNames,
onlyOnDetailed: false,
},
@ -227,15 +277,16 @@ export const columns = (
value: (
<button
data-dialog-trigger
className="inline hover:underline"
onClick={(e) =>
className="inline underline"
onClick={(e) => {
e.stopPropagation();
onCellClick(
e,
ColumnKind.Asset,
market.tradableInstrument.instrument.product.settlementAsset
.symbol
)
}
);
}}
>
{market.tradableInstrument.instrument.product.settlementAsset.symbol}
</button>
@ -293,14 +344,7 @@ export const columns = (
},
{
kind: ColumnKind.TradingMode,
value:
market.tradingMode ===
MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
market.data?.trigger &&
market.data.trigger !== AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
? `${MarketTradingModeMapping[market.tradingMode]}
- ${AuctionTriggerMapping[market.data.trigger]}`
: MarketTradingModeMapping[market.tradingMode],
value: <TradingMode market={market} />,
className: `${cellClassNames} hidden lg:table-cell`,
onlyOnDetailed: true,
dataTestId: 'trading-mode-col',
@ -347,17 +391,16 @@ export const columnsPositionMarkets = (
{
kind: ColumnKind.Market,
value: (
<Link href={`/markets/${market.id}`} passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid,jsx-a11y/no-static-element-interactions */}
<a
onKeyPress={(event) => handleKeyPress(event, market.id)}
onClick={() => {
onSelect(market.id);
}}
data-testid={`market-link-${market.id}`}
>
{market.tradableInstrument.instrument.code}
</a>
<Link
href={`/markets/${market.id}`}
data-testid={`market-link-${market.id}`}
onKeyPress={(event) => handleKeyPress(event, market.id)}
onClick={(e) => {
e.preventDefault();
onSelect(market.id);
}}
>
{market.tradableInstrument.instrument.code}
</Link>
),
className: cellClassNames,
@ -409,8 +452,9 @@ export const columnsPositionMarkets = (
value: (
<button
data-dialog-trigger
className="inline hover:underline"
className="inline underline"
onClick={(e) => {
e.stopPropagation();
if (!onCellClick) return;
onCellClick(
e,
@ -475,14 +519,7 @@ export const columnsPositionMarkets = (
},
{
kind: ColumnKind.TradingMode,
value:
market.tradingMode ===
MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
market.data?.trigger &&
market.data.trigger !== AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
? `${MarketTradingModeMapping[market.tradingMode]}
- ${AuctionTriggerMapping[market.data.trigger]}`
: MarketTradingModeMapping[market.tradingMode],
value: <TradingMode market={market} />,
className: `${cellClassNames} hidden lg:table-cell`,
onlyOnDetailed: true,
dataTestId: 'trading-mode-col',

View File

@ -1,16 +1,17 @@
import { fireEvent, render, screen } from '@testing-library/react';
import { AuctionTrigger, MarketTradingMode } from '@vegaprotocol/types';
import {
SelectAllMarketsTableBody,
SelectMarketLandingTable,
} from './select-market';
import type { ReactNode } from 'react';
import type {
MarketWithCandles,
MarketWithData,
MarketData,
} from '@vegaprotocol/market-list';
import {
SelectAllMarketsTableBody,
SelectMarketLandingTable,
} from './select-market';
type Market = MarketWithCandles & MarketWithData;
jest.mock(
@ -162,7 +163,7 @@ describe('SelectMarket', () => {
expect(screen.getByText('ABCDEF')).toBeTruthy(); // name
expect(screen.getByText('25.00%')).toBeTruthy(); // price change
expect(container).toHaveTextContent(/1,000/); // volume
fireEvent.click(screen.getByTestId(`market-link-1`));
fireEvent.click(screen.getAllByTestId(`market-link-1`)[0]);
expect(onSelect).toHaveBeenCalledWith('1');
});
@ -177,9 +178,9 @@ describe('SelectMarket', () => {
onSelect={onSelect}
/>
);
fireEvent.click(screen.getByTestId(`market-link-1`));
fireEvent.click(screen.getAllByTestId(`market-link-1`)[0]);
expect(onSelect).toHaveBeenCalledWith('1');
fireEvent.click(screen.getByTestId(`market-link-2`));
fireEvent.click(screen.getAllByTestId(`market-link-2`)[0]);
expect(onSelect).toHaveBeenCalledWith('2');
});
});

View File

@ -1,34 +1,35 @@
import type { ReactNode } from 'react';
import { useMemo, useState } from 'react';
import { useMarketList } from '@vegaprotocol/market-list';
import { positionsDataProvider } from '@vegaprotocol/positions';
import { t, useDataProvider } from '@vegaprotocol/react-helpers';
import {
Dialog,
Icon,
Intent,
Loader,
Link,
Loader,
Popover,
} from '@vegaprotocol/ui-toolkit';
import { useMarketList } from '@vegaprotocol/market-list';
import type {
MarketWithCandles,
MarketWithData,
} from '@vegaprotocol/market-list';
import { useVegaWallet } from '@vegaprotocol/wallet';
import type { PositionFieldsFragment } from '@vegaprotocol/positions';
import { positionsDataProvider } from '@vegaprotocol/positions';
import { useMemo, useState } from 'react';
import {
columnHeaders,
columnHeadersPositionMarkets,
columns,
columnsPositionMarkets,
} from './select-market-columns';
import {
SelectMarketTableHeader,
SelectMarketTableRow,
} from './select-market-table';
import type { Column, OnCellClickHandler } from './select-market-columns';
import {
columnHeadersPositionMarkets,
columnsPositionMarkets,
columnHeaders,
columns,
} from './select-market-columns';
import type { ReactNode } from 'react';
import type {
MarketWithCandles,
MarketWithData,
} from '@vegaprotocol/market-list';
import type { PositionFieldsFragment } from '@vegaprotocol/positions';
import type { Column, OnCellClickHandler } from './select-market-columns';
type Market = MarketWithCandles & MarketWithData;
export const SelectMarketLandingTable = ({

View File

@ -1,13 +1,14 @@
import { t } from '@vegaprotocol/react-helpers';
import { MarketTradingMode, AuctionTrigger } from '@vegaprotocol/types';
import { AuctionTrigger, MarketTradingMode } from '@vegaprotocol/types';
import { ExternalLink } from '@vegaprotocol/ui-toolkit';
import type { ReactNode } from 'react';
import { MarketDataGrid } from './market-data-grid';
import type { ReactNode } from 'react';
type TradingModeTooltipProps = {
tradingMode: MarketTradingMode | null;
trigger: AuctionTrigger | null;
compiledGrid: { label: ReactNode; value?: ReactNode }[];
compiledGrid?: { label: ReactNode; value?: ReactNode }[];
};
export const TradingModeTooltip = ({
@ -38,7 +39,7 @@ export const TradingModeTooltip = ({
{t('Find out more')}
</ExternalLink>
</p>
<MarketDataGrid grid={compiledGrid} />
{compiledGrid && <MarketDataGrid grid={compiledGrid} />}
</section>
);
}
@ -57,7 +58,7 @@ export const TradingModeTooltip = ({
{t('Find out more')}
</ExternalLink>
</p>
<MarketDataGrid grid={compiledGrid} />
{compiledGrid && <MarketDataGrid grid={compiledGrid} />}
</section>
);
}
@ -72,7 +73,7 @@ export const TradingModeTooltip = ({
{t('Find out more')}
</ExternalLink>
</p>
<MarketDataGrid grid={compiledGrid} />
{compiledGrid && <MarketDataGrid grid={compiledGrid} />}
</section>
);
}