chore(Accounts): e2e test [YTFRONT-3772]

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

@@ -1,6 +1,11 @@
 import {Page, expect, test} from '@playwright/test';
 import {makeClusterUrl} from '../../../utils';
 import {BasePage} from '../../../utils/BasePage';
+import {replaceInnerHtml} from '../../../utils/dom';
+
+const PROGRESS_TEXT_WITH_SIZE = '0 B + 0 B / 00.00 TiB';
+const PROGRESS_TEXT = '0 B + 0 B / 00.00 TiB';
+const HARDWARE_LIMIT = '000.00 GiB';
 
 class AccountsPage extends BasePage {
     async waitAccountRow() {
@@ -30,6 +35,86 @@ class AccountsPage extends BasePage {
         await this.page.click(`.accounts-editor__edit-tabs :text("${name}")`, {force: true});
         await this.page.mouse.move(0, 0);
     }
+
+    async changeListMode(itemId: string) {
+        await this.page.click('.accounts__content-mode');
+        await this.page.waitForSelector('.g-popup_open');
+        await this.page.click(`div[id="${itemId}"]`);
+        await this.page.waitForSelector('.g-popup', {state: 'hidden'});
+    }
+
+    async fixProgress() {
+        await this.page.evaluate(() => {
+            const progress = document.querySelectorAll<HTMLDivElement>(
+                '.g-progress__item_theme_success',
+            );
+            progress.forEach((item) => {
+                item.style.width = '60%';
+            });
+        });
+    }
+
+    async prepareListPage() {
+        await replaceInnerHtml(this.page, {
+            '.g-progress .g-progress__text': PROGRESS_TEXT_WITH_SIZE,
+            'td.accounts__table-item_type_disk-space-default': '-',
+            'td.accounts__disk-space-read-throughput': '-',
+            'td.accounts__disk-space-write-throughput': '-',
+            'td.accounts__disk-space-hardware-limit': HARDWARE_LIMIT,
+        });
+
+        await this.fixProgress();
+    }
+
+    async prepareDiskSpaceList() {
+        await replaceInnerHtml(this.page, {
+            '.g-progress .g-progress__text': PROGRESS_TEXT_WITH_SIZE,
+            '.accounts__bytes .accounts__item': '0 B',
+            '.accounts__bytes small': '00 000',
+            'td.accounts__disk-space-read-throughput': '-',
+            'td.accounts__disk-space-write-throughput': '-',
+            'td.accounts__disk-space-hardware-limit': HARDWARE_LIMIT,
+        });
+    }
+
+    async prepareNodeList() {
+        await replaceInnerHtml(this.page, {
+            '.accounts__table-item_type_node-count-usage .accounts__item': '000',
+            '.accounts__table-item_type_node-count-limit .accounts__item': '000 000',
+            '.accounts__table-item_type_node-count-free .accounts__item': '000 000',
+            '.g-progress .g-progress__text': PROGRESS_TEXT_WITH_SIZE,
+            '.g-progress__text-inner': PROGRESS_TEXT,
+        });
+
+        await this.fixProgress();
+    }
+
+    async prepareChunksList() {
+        await replaceInnerHtml(this.page, {
+            '.accounts__table-item_type_chunk-count-usage .accounts__item': '0',
+            '.accounts__table-item_type_chunk-count-limit .accounts__item': '0',
+            '.accounts__table-item_type_chunk-count-free .accounts__item': '0',
+            '.g-progress .g-progress__text': PROGRESS_TEXT_WITH_SIZE,
+        });
+    }
+
+    async prepareMasterMemoryList() {
+        await replaceInnerHtml(this.page, {
+            '.g-progress .g-progress__text': PROGRESS_TEXT_WITH_SIZE,
+            '.g-progress__text-inner': PROGRESS_TEXT,
+            '.accounts__bytes .accounts__item': '0 B',
+            '.accounts__bytes small': '00 000',
+        });
+
+        await this.fixProgress();
+    }
+
+    async prepareMasterMemoryDetailedList() {
+        await replaceInnerHtml(this.page, {
+            '.accounts__bytes .accounts__item': '0 B',
+            '.accounts__bytes small': '00 000',
+        });
+    }
 }
 
 const accounts = (page: Page) => new AccountsPage({page});
@@ -113,3 +198,32 @@ test('Accounts - ACL', async ({page}) => {
     await page.waitForSelector('.g-dialog');
     await expect(page).toHaveScreenshot();
 });
+
+test('Accounts - List', async ({page}) => {
+    await page.goto(makeClusterUrl(`accounts/general?sortState=asc-false,field-name`));
+    await page.waitForSelector('.elements-table');
+    await page.fill('span[data-qa="accounts-name-filter"] input', 'e2e');
+
+    await accounts(page).prepareListPage();
+    await expect(page).toHaveScreenshot();
+
+    await accounts(page).changeListMode('select-popup-g-:rl:-item-1');
+    await accounts(page).prepareDiskSpaceList();
+    await expect(page).toHaveScreenshot();
+
+    await accounts(page).changeListMode('select-popup-g-:rl:-item-2');
+    await accounts(page).prepareNodeList();
+    await expect(page).toHaveScreenshot();
+
+    await accounts(page).changeListMode('select-popup-g-:rl:-item-3');
+    await accounts(page).prepareChunksList();
+    await expect(page).toHaveScreenshot();
+
+    await accounts(page).changeListMode('select-popup-g-:rl:-item-6');
+    await accounts(page).prepareMasterMemoryList();
+    await expect(page).toHaveScreenshot();
+
+    await accounts(page).changeListMode('select-popup-g-:rl:-item-7');
+    await accounts(page).prepareMasterMemoryDetailedList();
+    await expect(page).toHaveScreenshot();
+});