tests: add tests for groups

Author: artemmufazalov

package.json

@@ -76,7 +76,8 @@
     "typecheck": "tsc --noEmit",
     "prepare": "husky",
     "test:e2e:install": "npx playwright install --with-deps",
-    "test:e2e": "npx playwright test --config=playwright.config.ts"
+    "test:e2e": "npx playwright test --config=playwright.config.ts",
+    "test:e2e:local": "PLAYWRIGHT_BASE_URL=http://localhost:3000/ npm run test:e2e"
   },
   "lint-staged": {
     "*.{scss, css}": [

src/containers/Nodes/NodesControls/NodesControls.tsx

@@ -11,6 +11,7 @@ import {useViewerNodesHandlerHasGroupingBySystemState} from '../../../store/redu
 import {useProblemFilter} from '../../../store/reducers/settings/hooks';
 import {getNodesGroupByOptions} from '../columns/constants';
 import i18n from '../i18n';
+import {b} from '../shared';
 import {useNodesPageQueryParams} from '../useNodesPageQueryParams';
 
 interface NodesControlsProps {
@@ -83,6 +84,8 @@ export function NodesControls({
                         defaultValue={groupByParam ? [groupByParam] : undefined}
                         onUpdate={handleGroupBySelectUpdate}
                         options={groupByoptions}
+                        className={b('group-by-select')}
+                        popupClassName={b('group-by-popup')}
                     />
                 </React.Fragment>
             ) : null}

tests/suites/nodes/NodesPage.ts

@@ -3,12 +3,53 @@ import type {Locator, Page} from '@playwright/test';
 import {PageModel} from '../../models/PageModel';
 import {nodesPage} from '../../utils/constants';
 
+type NodesGroupByOptions =
+    | 'Host'
+    | 'DC'
+    | 'Rack'
+    | 'Database'
+    | 'Version'
+    | 'Uptime'
+    | 'Missing'
+    | 'DiskSpaceUsage';
+
 export class NodesPage extends PageModel {
     readonly table: Locator;
 
+    private groupBySelect: Locator;
+    private groupByPopup: Locator;
+
+    private tableGroupsWrapper: Locator;
+
     constructor(page: Page) {
         super(page, nodesPage);
 
         this.table = this.selector.locator('.ydb-paginated-table__table');
+
+        this.groupBySelect = this.page.locator('.ydb-nodes__group-by-select');
+        this.groupByPopup = this.page.locator('.ydb-nodes__group-by-popup');
+
+        this.tableGroupsWrapper = this.page.locator('.ydb-nodes__groups-wrapper');
+    }
+
+    async selectGroupByOption(option: NodesGroupByOptions) {
+        await this.groupBySelect.click();
+        await this.groupByPopup.isVisible();
+        await this.groupByPopup.locator('.g-select-list__option').getByText(option).click();
+    }
+    async waitForTableGroupsLoaded() {
+        await this.page.locator('.table-skeleton').isHidden();
+        await this.tableGroupsWrapper.isVisible();
+    }
+    selectTableGroup(name: string) {
+        return this.tableGroupsWrapper.locator('.ydb-table-group').filter({hasText: name}).first();
+    }
+    async expandTableGroup(name: string) {
+        await this.selectTableGroup(name).getByRole('button').click();
+    }
+    selectTableGroupContent(name: string) {
+        return this.selectTableGroup(name)
+            .locator('.ydb-table-group__content')
+            .locator('.ydb-paginated-table');
     }
 }

tests/suites/nodes/nodes.test.ts

@@ -61,19 +61,23 @@ test.describe('Test Nodes Paginated Table', async () => {
         expect(filteredRowCount).toBeLessThanOrEqual(initialRowCount);
     });
 
-    test('Radio button selection changes displayed data', async ({page}) => {
-        const paginatedTable = new PaginatedTable(page);
+    test('Table groups displayed correctly if group by option is selected', async ({page}) => {
+        const nodesPage = new NodesPage(page);
+        const nodesTable = new PaginatedTable(page);
 
-        await paginatedTable.waitForTableToLoad();
-        await paginatedTable.waitForTableData();
+        await nodesTable.waitForTableToLoad();
+        await nodesTable.waitForTableData();
 
-        const initialRowCount = await paginatedTable.getRowCount();
-        await paginatedTable.selectRadioOption(0, 'With problems');
+        const rowData = await nodesTable.getRowData(0);
+        const host = rowData['Host'];
 
-        await page.waitForTimeout(1000); // Wait for the table to update
+        await nodesPage.selectGroupByOption('Host');
+        await nodesPage.waitForTableGroupsLoaded();
 
-        const filteredRowCount = await paginatedTable.getRowCount();
-        expect(filteredRowCount).toBeLessThanOrEqual(initialRowCount);
+        await nodesPage.selectTableGroup(host).isVisible();
+
+        await nodesPage.expandTableGroup(host);
+        await nodesPage.selectTableGroupContent(host).isVisible();
     });
 
     test('Node count is displayed correctly', async ({page}) => {