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

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

@@ -1,6 +1,12 @@
 import {Page, expect, test} from '@playwright/test';
 import {makeClusterUrl} from '../../../utils';
 import {BasePage} from '../../../utils/BasePage';
+import {replaceInnerHtml} from '../../../utils/dom';
+
+const HARDWARE_LIMIT = '000.00 GiB';
+const ACCOUNT_NAME_RULE = {'.accounts__item-name .g-link': 'e2e_XXXXXX_XXXXX'};
+const PROGRESS_TEXT_WITH_SIZE_RULE = {'.g-progress .g-progress__text': '0 B + 0 B / 00.00 TiB'};
+const PROGRESS_SIZE_RULE = {'.g-progress__text-inner': '0 B + 0 B / 00.00 TiB'};
 
 class AccountsPage extends BasePage {
     async waitAccountRow() {
@@ -30,6 +36,89 @@ 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(text: string) {
+        await this.page.click('.accounts__content-mode');
+        await this.page.waitForSelector('.g-popup_open');
+        await this.page.click(`.g-popup_open :text("${text}")`);
+        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 this.fixProgress();
+        await replaceInnerHtml(this.page, {
+            ...ACCOUNT_NAME_RULE,
+            ...PROGRESS_TEXT_WITH_SIZE_RULE,
+            'td.accounts__disk-space-hardware-limit': HARDWARE_LIMIT,
+            'td.accounts__table-item_type_disk-space-default': '-',
+            'td.accounts__disk-space-read-throughput': '-',
+            'td.accounts__disk-space-write-throughput': '-',
+        });
+    }
+
+    async prepareDiskSpaceList() {
+        await replaceInnerHtml(this.page, {
+            ...ACCOUNT_NAME_RULE,
+            ...PROGRESS_TEXT_WITH_SIZE_RULE,
+            'td.accounts__disk-space-hardware-limit': HARDWARE_LIMIT,
+            '.accounts__bytes .accounts__item': '0 B',
+            '.accounts__bytes small': '00 000',
+            'td.accounts__disk-space-read-throughput': '-',
+            'td.accounts__disk-space-write-throughput': '-',
+        });
+    }
+
+    async prepareNodeList() {
+        await this.fixProgress();
+        await replaceInnerHtml(this.page, {
+            ...ACCOUNT_NAME_RULE,
+            ...PROGRESS_TEXT_WITH_SIZE_RULE,
+            ...PROGRESS_SIZE_RULE,
+            '.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',
+        });
+    }
+
+    async prepareChunksList() {
+        await replaceInnerHtml(this.page, {
+            ...ACCOUNT_NAME_RULE,
+            ...PROGRESS_TEXT_WITH_SIZE_RULE,
+            '.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',
+        });
+    }
+
+    async prepareMasterMemoryList() {
+        await this.fixProgress();
+        await replaceInnerHtml(this.page, {
+            ...ACCOUNT_NAME_RULE,
+            ...PROGRESS_TEXT_WITH_SIZE_RULE,
+            ...PROGRESS_SIZE_RULE,
+            '.accounts__bytes .accounts__item': '0 B',
+            '.accounts__bytes small': '00 000',
+        });
+    }
+
+    async prepareMasterMemoryDetailedList() {
+        await replaceInnerHtml(this.page, {
+            ...ACCOUNT_NAME_RULE,
+            '.accounts__bytes .accounts__item': '0 B',
+            '.accounts__bytes small': '00 000',
+        });
+    }
 }
 
 const accounts = (page: Page) => new AccountsPage({page});
@@ -113,3 +202,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('Disk space');
+    await accounts(page).prepareDiskSpaceList();
+    await expect(page).toHaveScreenshot();
+
+    await accounts(page).changeListMode('Nodes');
+    await accounts(page).prepareNodeList();
+    await expect(page).toHaveScreenshot();
+
+    await accounts(page).changeListMode('Chunks');
+    await accounts(page).prepareChunksList();
+    await expect(page).toHaveScreenshot();
+
+    await accounts(page).changeListMode('Master memory');
+    await accounts(page).prepareMasterMemoryList();
+    await expect(page).toHaveScreenshot();
+
+    await accounts(page).changeListMode('Master memory detailed');
+    await accounts(page).prepareMasterMemoryDetailedList();
+    await expect(page).toHaveScreenshot();
+});