fix flaky tests (#1279)

* try to fix flaky tests

* wait until first part of the hash is visible

mocks/txs/internalTxs.ts

@@ -41,6 +41,7 @@ export const typeStaticCall: InternalTransaction = {
     name: null,
   },
   gas_limit: '63424243',
+  transaction_hash: '0xe9e27dfeb183066e26cfe556f74b7219b08df6951e25d14003d4fc7af8bbff62',
 };
 
 export const withContractCreated: InternalTransaction = {
@@ -63,6 +64,7 @@ export const withContractCreated: InternalTransaction = {
   },
   value: '1420000000000000000',
   gas_limit: '5433',
+  transaction_hash: '0xe9e27dfeb183066e26cfe556f74b7219b08df6951e25d14003d4fc7af8bbff63',
 };
 
 export const baseResponse: InternalTransactionsResponse = {

ui/pages/L2Deposits.pw.tsx

@@ -18,6 +18,11 @@ const test = base.extend({
 });
 
 test('base view +@mobile', async({ mount, page }) => {
+  // test on mobile is flaky
+  // my assumption is there is not enough time to calculate hashes truncation so component is unstable
+  // so I raised the test timeout to check if it helps
+  test.slow();
+
   await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
     status: 200,
     body: '',
@@ -39,5 +44,5 @@ test('base view +@mobile', async({ mount, page }) => {
     </TestApp>,
   );
 
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({ timeout: 10_000 });
 });

ui/pages/L2OutputRoots.pw.tsx

@@ -18,6 +18,11 @@ const OUTPUT_ROOTS_API_URL = buildApiUrl('l2_output_roots');
 const OUTPUT_ROOTS_COUNT_API_URL = buildApiUrl('l2_output_roots_count');
 
 test('base view +@mobile', async({ mount, page }) => {
+  // test on mobile is flaky
+  // my assumption is there is not enough time to calculate hashes truncation so component is unstable
+  // so I raised the test timeout to check if it helps
+  test.slow();
+
   await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
     status: 200,
     body: '',
@@ -39,5 +44,5 @@ test('base view +@mobile', async({ mount, page }) => {
     </TestApp>,
   );
 
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({ timeout: 10_000 });
 });

ui/pages/L2TxnBatches.pw.tsx

@@ -18,6 +18,11 @@ const TXN_BATCHES_API_URL = buildApiUrl('l2_txn_batches');
 const TXN_BATCHES_COUNT_API_URL = buildApiUrl('l2_txn_batches_count');
 
 test('base view +@mobile', async({ mount, page }) => {
+  // test on mobile is flaky
+  // my assumption is there is not enough time to calculate hashes truncation so component is unstable
+  // so I raised the test timeout to check if it helps
+  test.slow();
+
   await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
     status: 200,
     body: '',
@@ -39,5 +44,5 @@ test('base view +@mobile', async({ mount, page }) => {
     </TestApp>,
   );
 
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({ timeout: 10_000 });
 });

ui/pages/L2Withdrawals.pw.tsx

@@ -18,6 +18,11 @@ const WITHDRAWALS_API_URL = buildApiUrl('l2_withdrawals');
 const WITHDRAWALS_COUNT_API_URL = buildApiUrl('l2_withdrawals_count');
 
 test('base view +@mobile', async({ mount, page }) => {
+  // test on mobile is flaky
+  // my assumption is there is not enough time to calculate hashes truncation so component is unstable
+  // so I raised the test timeout to check if it helps
+  test.slow();
+
   await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
     status: 200,
     body: '',
@@ -39,5 +44,5 @@ test('base view +@mobile', async({ mount, page }) => {
     </TestApp>,
   );
 
-  await expect(component).toHaveScreenshot();
+  await expect(component).toHaveScreenshot({ timeout: 10_000 });
 });

ui/snippets/searchBar/SearchBar.pw.tsx

@@ -268,8 +268,9 @@ test('recent keywords suggest +@mobile', async({ mount, page }) => {
     </TestApp>,
   );
   // eslint-disable-next-line max-len
-  await page.evaluate(() => window.localStorage.setItem('recent_search_keywords', '["10x1d311959270e0bbdc1fc7bc6dbd8ad645c4dd8d6aa32f5f89d54629a924f112b","0x1d311959270e0bbdc1fc7bc6dbd8ad645c4dd8d6aa32f5f89d54629a924f112b","usd","bob"]'));
+  await page.evaluate(() => window.localStorage.setItem('recent_search_keywords', '["10x2d311959270e0bbdc1fc7bc6dbd8ad645c4dd8d6aa32f5f89d54629a924f112b","0x1d311959270e0bbdc1fc7bc6dbd8ad645c4dd8d6aa32f5f89d54629a924f112b","usd","bob"]'));
   await page.getByPlaceholder(/search/i).click();
+  await page.getByText('0x1d311959270e0bbdc1fc7bc6db').isVisible();
   await expect(page).toHaveScreenshot({ clip: { x: 0, y: 0, width: 1200, height: 500 } });
 });
 

ui/snippets/searchBar/SearchBarRecentKeywords.tsx

@@ -53,13 +53,10 @@ const SearchBarSuggest = ({ onClick, onClear }: Props) => {
         <Link onClick={ clearKeywords }>Clear all</Link>
       </Flex>
       { keywords.map(kw => (
-        <Box
+        <Flex
           key={ kw }
           py={ 3 }
           px={ 1 }
-          display="flex"
-          flexDir="column"
-          rowGap={ 2 }
           borderColor="divider"
           borderBottomWidth="1px"
           _last={{
@@ -73,14 +70,23 @@ const SearchBarSuggest = ({ onClick, onClear }: Props) => {
             mt: 2,
           }}
           onClick={ handleClick(kw) }
+          alignItems="center"
+          justifyContent="space-between"
+          cursor="pointer"
+          columnGap={ 2 }
+          fontWeight={ 700 }
+          minW={ 0 }
+          flexGrow={ 1 }
         >
-          <Flex display="flex" alignItems="center" justifyContent="space-between" cursor="pointer">
-            <Text fontWeight={ 700 } mr={ 2 } w="calc(100% - 36px)" overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis">
-              { kw.startsWith('0x') ? <HashStringShortenDynamic hash={ kw } isTooltipDisabled/> : kw }
-            </Text>
-            <ClearButton onClick={ removeKeyword(kw) }/>
-          </Flex>
-        </Box>
+          { kw.startsWith('0x') ? (
+            <Box overflow="hidden" whiteSpace="nowrap">
+              <HashStringShortenDynamic hash={ kw } isTooltipDisabled/>
+            </Box>
+          ) :
+            <Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis">{ kw }</Text>
+          }
+          <ClearButton onClick={ removeKeyword(kw) } flexShrink={ 0 }/>
+        </Flex>
       )) }
     </Box>
   );