test: fix market selector tests

apps/trading/client-pages/market/market-selector-item.spec.tsx

@@ -173,7 +173,7 @@ describe('MarketSelectorItem', () => {
     // link renders and is styled
     expect(link).toHaveAttribute('href', '/markets/' + market.id);
 
-    expect(link).toHaveClass('ring-1');
+    expect(link.parentNode).toHaveClass('bg-vega-light-100');
 
     expect(screen.getByTitle('24h vol')).toHaveTextContent('0.00');
     expect(screen.getByTitle(symbol)).toHaveTextContent('-');
@@ -183,13 +183,11 @@ describe('MarketSelectorItem', () => {
       expect(screen.getByTitle(symbol)).toHaveTextContent(
         addDecimalsFormatNumber(marketData.markPrice, market.decimalPlaces)
       );
-      expect(screen.getByTestId('market-item-change')).toHaveTextContent(
-        '+100.00%'
-      );
+      // TODO: re add if we use price change value
+
+      // expect(screen.getByTestId('market-item-change')).toHaveTextContent(
+      //   '+100.00%'
+      // );
     });
-
-    await userEvent.click(link);
-
-    expect(mockOnSelect).toHaveBeenCalledWith(market.id);
   });
 });

apps/trading/client-pages/market/market-selector-item.tsx

@@ -26,8 +26,11 @@ export const MarketSelectorItem = ({
   style: CSSProperties;
   currentMarketId?: string;
 }) => {
+  const wrapperClasses = classNames('py-1 px-4', {
+    'bg-vega-light-100 dark:bg-vega-dark-100': market.id === currentMarketId,
+  });
   return (
-    <div style={style} className="my-0.5 px-4">
+    <div style={style} className={wrapperClasses}>
       <Link to={`/markets/${market.id}`} className="block">
         <MarketData market={market} />
       </Link>

apps/trading/client-pages/market/market-selector.spec.tsx

@@ -143,7 +143,6 @@ describe('MarketSelector', () => {
     expect(screen.getAllByTestId(/market-\d/)).toHaveLength(
       activeMarkets.length
     );
-    expect(screen.getByRole('link')).toHaveTextContent('All markets');
   });
 
   it('filters by product type', async () => {

apps/trading/client-pages/market/market-selector.tsx

@@ -9,7 +9,6 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import type { CSSProperties } from 'react';
 import { useCallback, useState, useMemo } from 'react';
-import { Link } from 'react-router-dom';
 import { FixedSizeList } from 'react-window';
 import { useMarketSelectorList } from './use-market-selector-list';
 import type { ProductType } from './product-selector';
@@ -202,7 +201,6 @@ const ListItem = ({
     market={data.data[index]}
     currentMarketId={data.currentMarketId}
     style={style}
-    onSelect={data.onSelect}
   />
 );