more test fixes

toolkit/components/AdaptiveTabs/AdaptiveTabsList.tsx

@@ -15,7 +15,7 @@ import useAdaptiveTabs from './useAdaptiveTabs';
 import useScrollToActiveTab from './useScrollToActiveTab';
 import { menuButton, getTabValue } from './utils';
 
-interface SlotProps extends HTMLChakraProps<'div'> {
+export interface SlotProps extends HTMLChakraProps<'div'> {
   widthAllocation?: 'available' | 'fixed';
 }
 
@@ -99,6 +99,7 @@ const AdaptiveTabsList = (props: Props) => {
       marginBottom={ 6 }
       mx={{ base: '-12px', lg: 'unset' }}
       px={{ base: '12px', lg: 'unset' }}
+      w={{ base: 'calc(100% + 24px)', lg: '100%' }}
       overflowX={{ base: 'auto', lg: 'initial' }}
       overscrollBehaviorX="contain"
       css={{
@@ -155,18 +156,26 @@ const AdaptiveTabsList = (props: Props) => {
         }
 
         return (
-          <Skeleton loading={ isLoading } key={ value } asChild>
           <TabsTrigger
+            key={ value }
             value={ value }
             ref={ ref }
             scrollSnapAlign="start"
             flexShrink={ 0 }
             { ...getItemStyles(index, tabsCut) }
           >
+            { isLoading ? (
+              <Skeleton loading>
                 { typeof tab.title === 'function' ? tab.title() : tab.title }
                 <TabsCounter count={ tab.count }/>
-            </TabsTrigger>
               </Skeleton>
+            ) : (
+              <>
+                { typeof tab.title === 'function' ? tab.title() : tab.title }
+                <TabsCounter count={ tab.count }/>
+              </>
+            ) }
+          </TabsTrigger>
         );
       }) }
       {

ui/pages/Marketplace.tsx

@@ -105,7 +105,7 @@ const Marketplace = () => {
 
     tabs.unshift({
       id: MarketplaceCategory.FAVORITES,
-      title: () => <IconSvg name="heart_filled" boxSize={ 5 } verticalAlign="middle" mt={ -1 }/>,
+      title: () => <IconSvg name="heart_filled" boxSize={ 5 }/>,
       count: favoriteApps.length,
       component: null,
     });

ui/pages/Pool.pw.tsx

@@ -4,6 +4,7 @@ import config from 'configs/app';
 import * as addressMock from 'mocks/address/address';
 import * as poolMock from 'mocks/pools/pool';
 import { test, expect } from 'playwright/lib';
+import * as pwConfig from 'playwright/utils/config';
 
 import Pool from './Pool';
 
@@ -14,12 +15,15 @@ const hooksConfig = {
   },
 };
 
-test('base view +@mobile +@dark-mode', async({ render, mockApiResponse, mockTextAd, mockAssetResponse }) => {
+test('base view +@mobile +@dark-mode', async({ render, mockApiResponse, mockTextAd, mockAssetResponse, page }) => {
   await mockTextAd();
   await mockApiResponse('pool', poolMock.base, { pathParams: { chainId: config.chain.id, hash: addressHash } });
   await mockApiResponse('address', addressMock.contract, { pathParams: { hash: poolMock.base.contract_address } });
   await mockAssetResponse(poolMock.base.quote_token_icon_url as string, './playwright/mocks/image_s.jpg');
   await mockAssetResponse(poolMock.base.base_token_icon_url as string, './playwright/mocks/image_md.jpg');
   const component = await render(<Pool/>, { hooksConfig });
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
 });

ui/pages/Token.tsx

@@ -184,7 +184,7 @@ const TokenPageContent = () => {
           return (
             <>
               <span>Contract</span>
-              <IconSvg name="status/success" boxSize="14px" color="green.500" ml={ 1 }/>
+              <IconSvg name="status/success" boxSize="14px" color="green.500"/>
             </>
           );
         }

ui/pages/Tokens.pw.tsx

@@ -107,7 +107,7 @@ test.describe('bridged tokens', () => {
     await expect(component).toHaveScreenshot();
 
     await component.getByRole('button', { name: /filter/i }).click();
-    await component.locator('label').filter({ hasText: /poa/i }).click();
+    await page.locator('label').filter({ hasText: /poa/i }).click();
     await page.click('body');
 
     await expect(component).toHaveScreenshot();

ui/pages/Tokens.tsx

@@ -12,6 +12,7 @@ import useIsMobile from 'lib/hooks/useIsMobile';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { TOKEN_INFO_ERC_20 } from 'stubs/token';
 import { generateListStub } from 'stubs/utils';
+import type { SlotProps } from 'toolkit/components/AdaptiveTabs/AdaptiveTabsList';
 import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
 import PopoverFilter from 'ui/shared/filters/PopoverFilter';
 import TokenTypeFilter from 'ui/shared/filters/TokenTypeFilter';
@@ -33,9 +34,9 @@ const TAB_LIST_PROPS = {
 };
 const TABS_HEIGHT = 88;
 
-const TABS_RIGHT_SLOT_PROPS = {
+const TABS_RIGHT_SLOT_PROPS: SlotProps = {
   ml: 8,
-  flexGrow: 1,
+  widthAllocation: 'available',
 };
 
 const bridgedTokensFeature = config.features.bridgedTokens;

ui/shared/gas/GasInfoTooltip.pw.tsx

@@ -9,7 +9,7 @@ import { test, expect } from 'playwright/lib';
 import GasInfoTooltip from './GasInfoTooltip';
 import GasPrice from './GasPrice';
 
-const dataUpdatedAt = Date.now() - 30 * SECOND;
+const dataUpdatedAt = Date.now() - 3_000 * SECOND;
 
 test.use({ viewport: { width: 300, height: 300 } });
 

ui/snippets/searchBar/SearchBarInput.pw.tsx

@@ -18,11 +18,7 @@ test('input on regular page +@mobile +@dark-mode', async({ render, page }) => {
 });
 
 test('input on home page +@mobile +@dark-mode', async({ render, page }) => {
-  await render(
-    <div className="light">
-      <SearchBarInput { ...props } isHomepage/>
-    </div>,
-  );
+  await render(<SearchBarInput { ...props } isHomepage/>);
   const input = page.getByPlaceholder(/search by/i);
   await expect(input).toHaveScreenshot();
 });

ui/tx/details/TxInfo.pw.tsx

@@ -110,8 +110,9 @@ test('without testnet warning', async({ render, page, mockEnvs }) => {
   });
 });
 
-test('stability customization', async({ render, page, mockEnvs }) => {
+test('stability customization', async({ render, page, mockEnvs, mockAssetResponse }) => {
   await mockEnvs(ENVS_MAP.stabilityEnvs);
+  await mockAssetResponse(txMock.stabilityTx.stability_fee?.token.icon_url as string, './playwright/mocks/image_s.jpg');
   const component = await render(<TxInfo data={ txMock.stabilityTx } isLoading={ false }/>);
 
   await expect(component).toHaveScreenshot({