chore(Bundles): tablet cells e2e test [YTFRONT-3772]

packages/ui/tests/screenshots/pages/bundles/bundles.base.screen.ts

@@ -3,6 +3,8 @@
 import {BasePage} from '../../../utils/BasePage';
 import {replaceInnerHtml} from '../../../utils/dom';
 
+const ID_PLACEHOLDER = 'X-XXX-XXXXX-XXXXXXXX';
+
 class Bundles extends BasePage {
     async replaceDefaultColumns() {
         await replaceInnerHtml(this.page, {
@@ -37,6 +39,48 @@
 
         await this.waitForTableSyncedWidth('.cells-table', {useResizeEvent: true});
     }
+
+    async replaceTabletCells() {
+        await replaceInnerHtml(this.page, {
+            '.cells-table__id-id': '1-XXXX-XXXXX-XXXXXXXXX',
+            '.cells-table__td_col_tablets .cells-table__wrapped': '7',
+            '.cells-table__td_col_memory .cells-table__wrapped': '0 B',
+            '.cells-table__td_col_uncompressed .cells-table__wrapped': '000 KiB',
+            '.cells-table__td_col_compressed .cells-table__wrapped': '000 KiB',
+            '.cells-table__td_col_peeraddress .g-link': 'local:00',
+        });
+        await this.waitForTableSyncedWidth('.data-table', {useResizeEvent: true});
+    }
+
+    async replaceAttributesTime() {
+        await this.page.waitForSelector('pre.unipika span.string');
+        await this.page.evaluate((placeholder) => {
+            const title = document.querySelector<HTMLDivElement>('.elements-modal__header span');
+            if (!title) return;
+
+            const id = title.textContent?.trim();
+            if (!id) return;
+
+            title.innerHTML = placeholder;
+
+            const spans = document.querySelectorAll<HTMLSpanElement>('pre.unipika span.string');
+            const isoTimeRegex = new RegExp(/^"\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{6}Z"$/);
+            const hostRegex = new RegExp(/^"localhost:\d+"$/);
+            spans.forEach((span) => {
+                const text = span.textContent?.trim();
+                if (!text) return;
+                if (text.match(isoTimeRegex)) {
+                    span.innerHTML = '"1970-01-01T00:00:00.000Z"';
+                }
+                if (text.match(hostRegex)) {
+                    span.innerHTML = '"localhost:00"';
+                }
+                if (text === `"${id}"`) {
+                    span.innerHTML = placeholder;
+                }
+            });
+        }, ID_PLACEHOLDER);
+    }
 }
 
 const bundles = (page: Page) => new Bundles({page});
@@ -65,6 +109,29 @@
     await expect(page).toHaveScreenshot();
 });
 
+test('Bundles - List - Tablet cells', async ({page}) => {
+    await page.goto(
+        makeClusterUrl(`tablet_cell_bundles/tablet_cells?sortBy=column-bundle,order-undefined-asc`),
+    );
+    await page.waitForSelector('.cells-table');
+    await bundles(page).replaceTabletCells();
+
+    await expect(page).toHaveScreenshot();
+
+    await page.click('input[placeholder="Enter bundle name..."]');
+    await page.waitForSelector('.g-popup_open');
+    await page.click('.suggest__item[title="default"]');
+    await page.mouse.move(0, 0);
+
+    await expect(page).toHaveScreenshot();
+
+    await page.click('.cells-table__actions button');
+    await page.waitForSelector('pre.unipika');
+    await bundles(page).replaceAttributesTime();
+
+    await expect(page).toHaveScreenshot();
+});
+
 test('Bundles - Active bundle', async ({page}) => {
     await page.goto(makeClusterUrl(`tablet_cell_bundles/tablet_cells?activeBundle=e2e-bundle`));