From d624957e6d2ea679132502029c9473dd11f28821 Mon Sep 17 00:00:00 2001 From: Maciek Date: Thu, 10 Aug 2023 15:25:13 +0200 Subject: [PATCH] chore(trading): 4384 all markets in switcher (#4516) --- .../market-selector/market-selector.spec.tsx | 20 +++++++++++++++++++ .../market-selector/market-selector.tsx | 2 +- .../market-selector/product-selector.tsx | 10 ++++++++-- .../use-market-selector-list.spec.tsx | 7 +++++++ .../use-market-selector-list.ts | 6 +++++- specs/6001-MARK-find_markets.md | 1 + 6 files changed, 42 insertions(+), 4 deletions(-) diff --git a/apps/trading/components/market-selector/market-selector.spec.tsx b/apps/trading/components/market-selector/market-selector.spec.tsx index 81951989c..a3fa3c5c8 100644 --- a/apps/trading/components/market-selector/market-selector.spec.tsx +++ b/apps/trading/components/market-selector/market-selector.spec.tsx @@ -134,6 +134,20 @@ describe('MarketSelector', () => { error: undefined, }); + it('Button "All" should be selected by default', () => { + const buttons = ['All', 'Futures', 'Spot', 'Perpetuals']; + render( + + + + ); + screen + .getAllByTestId(/^product-(All|Future|Spot|Perpetual)$/) + .forEach((elem, i) => { + expect(elem.textContent).toEqual(buttons[i]); + }); + }); + it('renders only active markets', () => { render( @@ -169,6 +183,12 @@ describe('MarketSelector', () => { activeMarkets.length ); expect(screen.queryByTestId('no-items')).not.toBeInTheDocument(); + + await userEvent.click(screen.getByTestId('product-All')); + expect(screen.queryAllByTestId(/market-\d/)).toHaveLength( + activeMarkets.length + ); + expect(screen.queryByTestId('no-items')).not.toBeInTheDocument(); }); it('filters by search term', async () => { diff --git a/apps/trading/components/market-selector/market-selector.tsx b/apps/trading/components/market-selector/market-selector.tsx index 18353a29d..dfcca13c9 100644 --- a/apps/trading/components/market-selector/market-selector.tsx +++ b/apps/trading/components/market-selector/market-selector.tsx @@ -39,7 +39,7 @@ export const MarketSelector = ({ }) => { const [filter, setFilter] = useState({ searchTerm: '', - product: Product.Future, + product: Product.All, sort: Sort.None, assets: [], }); diff --git a/apps/trading/components/market-selector/product-selector.tsx b/apps/trading/components/market-selector/product-selector.tsx index 54016405a..6669ae183 100644 --- a/apps/trading/components/market-selector/product-selector.tsx +++ b/apps/trading/components/market-selector/product-selector.tsx @@ -6,6 +6,7 @@ import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit'; // Make sure these match the available __typename properties on product export const Product = { + All: 'All', Future: 'Future', Spot: 'Spot', Perpetual: 'Perpetual', @@ -16,6 +17,7 @@ export type ProductType = keyof typeof Product; const ProductTypeMapping: { [key in ProductType]: string; } = { + [Product.All]: 'All', [Product.Future]: 'Futures', [Product.Spot]: 'Spot', [Product.Perpetual]: 'Perpetuals', @@ -49,8 +51,12 @@ export const ProductSelector = ({ ); })} - - {t('All markets')} + + {t('Browse')} diff --git a/apps/trading/components/market-selector/use-market-selector-list.spec.tsx b/apps/trading/components/market-selector/use-market-selector-list.spec.tsx index 761f6188d..0741aa889 100644 --- a/apps/trading/components/market-selector/use-market-selector-list.spec.tsx +++ b/apps/trading/components/market-selector/use-market-selector-list.spec.tsx @@ -120,6 +120,13 @@ describe('useMarketSelectorList', () => { assets: [], }); expect(result.current.markets).toEqual([markets[2]]); + rerender({ + searchTerm: '', + product: Product.All, + sort: Sort.None, + assets: [], + }); + expect(result.current.markets).toEqual(markets); }); it('filters by asset', () => { diff --git a/apps/trading/components/market-selector/use-market-selector-list.ts b/apps/trading/components/market-selector/use-market-selector-list.ts index 5e2ef3823..a9626fd66 100644 --- a/apps/trading/components/market-selector/use-market-selector-list.ts +++ b/apps/trading/components/market-selector/use-market-selector-list.ts @@ -5,6 +5,7 @@ import { calcCandleVolume, useMarketList } from '@vegaprotocol/markets'; import { priceChangePercentage } from '@vegaprotocol/utils'; import type { Filter } from '../../components/market-selector/market-selector'; import { Sort } from './sort-dropdown'; +import { Product } from './product-selector'; // Used for sort order and filter const MARKET_TEMPLATE = [ @@ -28,7 +29,10 @@ export const useMarketSelectorList = ({ .filter((m) => isMarketActive(m.state)) // only selected product type .filter((m) => { - if (m.tradableInstrument.instrument.product.__typename === product) { + if ( + product === Product.All || + m.tradableInstrument.instrument.product.__typename === product + ) { return true; } return false; diff --git a/specs/6001-MARK-find_markets.md b/specs/6001-MARK-find_markets.md index c5bc565ad..439154ac1 100644 --- a/specs/6001-MARK-find_markets.md +++ b/specs/6001-MARK-find_markets.md @@ -44,6 +44,7 @@ - by newest markets (opening timestamp) (6001-MARK-032) - **Must** be able to close and open the market selector (6001-MARK-066) - **Must** must change color and have + or negative suffix of the price change and change color for the sparkline (6001-MARK-067) +- **Must** be default tab "All" where there's no filtering by product. (6001-MARK-070) ## All Markets