diff --git a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue index 8ae2f4d7e0..426240d0ce 100644 --- a/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue +++ b/packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue @@ -247,7 +247,7 @@ watch(meta, async () => {
-1; i--) { await this.rootPage.locator('.nc-group-by-item-remove-btn').nth(i).click(); } + + // close group-by menu + await this.toolbar.clickGroupBy(); + await this.toolbar.parent.waitLoading(); } async update({ index, title, ascending }: { index: number; title: string; ascending: boolean }) { + await this.toolbar.clickGroupBy(); + // Update the Column and Direction of the Group By at the given index await this.rootPage.locator('.nc-sort-field-select').nth(index).click(); await this.rootPage @@ -47,24 +56,59 @@ export class ToolbarGroupByPage extends BasePage { .locator('.ant-select-item') .nth(ascending ? 0 : 1) .click(); + + await this.toolbar.parent.dashboard.waitForLoaderToDisappear(); + // close group-by menu + await this.toolbar.clickGroupBy(); + await this.toolbar.parent.waitLoading(); } async add({ title, ascending, locallySaved }: { title: string; ascending: boolean; locallySaved: boolean }) { - const addGroupBtn = this.toolbar.rootPage.locator(`.nc-add-group-btn`); - if (!(await addGroupBtn.isDisabled())) { - await addGroupBtn.click(); + // open group-by menu + await this.toolbar.clickGroupBy(); + + // Check if create group-by modal is open or group-by list is open + let isGroupByListOpen = false; + for (let i = 0; i < 3; i++) { + const groupByList = this.rootPage.locator('.nc-group-by-list'); + if (await groupByList.isVisible()) { + isGroupByListOpen = true; + break; + } + + const searchInput = this.rootPage.locator('.nc-group-by-create-modal'); + if (await searchInput.isVisible()) { + isGroupByListOpen = false; + break; + } + + await this.rootPage.waitForTimeout(150); } - // read content of the dropdown - const col = await this.rootPage.locator('.nc-sort-field-select').last().textContent(); - if (col !== title) { - await this.rootPage.locator('.nc-sort-field-select').last().click(); - await this.rootPage - .locator('div.ant-select-dropdown.nc-dropdown-toolbar-field-list') - .locator(`div[label="${title}"]`) - .last() - .click(); + + if (isGroupByListOpen) { + await this.get().locator('button:has-text("Add subgroup")').click(); } + const regexTitle = new RegExp(`^${title}`); + + await this.rootPage + .locator('.nc-group-by-create-modal') + .locator('.nc-group-by-column-search-item >> div', { hasText: regexTitle }) + .scrollIntoViewIfNeeded(); + + // select column + const selectColumn = async () => + await this.rootPage + .locator('.nc-group-by-create-modal') + .locator('.nc-group-by-column-search-item >> div', { hasText: regexTitle }) + .click({ force: true }); + + await this.waitForResponse({ + uiAction: selectColumn, + httpMethodsToMatch: ['GET'], + requestUrlPathToMatch: locallySaved ? `/api/v1/db/public/` : `/api/v1/db/data/noco/`, + }); + await this.rootPage.locator('.nc-sort-dir-select').last().click(); const selectSortDirection = () => this.rootPage @@ -79,9 +123,21 @@ export class ToolbarGroupByPage extends BasePage { httpMethodsToMatch: ['GET'], requestUrlPathToMatch: locallySaved ? `/api/v1/db/public/` : `/api/v1/db/data/noco/`, }); + + await this.toolbar.parent.dashboard.waitForLoaderToDisappear(); + + // close group-by menu + await this.toolbar.clickGroupBy(); + await this.toolbar.parent.waitLoading(); } async remove({ index }: { index: number }) { + // open group-by menu + await this.toolbar.clickGroupBy(); await this.rootPage.locator('.nc-group-by-item-remove-btn').nth(index).click(); + + // close group-by menu + await this.toolbar.clickGroupBy(); + await this.toolbar.parent.waitLoading(); } } diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/index.ts b/tests/playwright/pages/Dashboard/common/Toolbar/index.ts index ca4376fdb9..0ff7331235 100644 --- a/tests/playwright/pages/Dashboard/common/Toolbar/index.ts +++ b/tests/playwright/pages/Dashboard/common/Toolbar/index.ts @@ -119,9 +119,11 @@ export class ToolbarPage extends BasePage { } async clickGroupBy() { - const menuOpen = this.groupBy.get().isVisible(); + const menuOpen = await this.groupBy.get().isVisible(); await this.get().locator(`button.nc-group-by-menu-btn`).click(); - if (!menuOpen) { + + // Wait for the menu to close + if (menuOpen) { await this.groupBy.get().waitFor({ state: 'hidden' }); } } diff --git a/tests/playwright/tests/db/general/groupCRUD.spec.ts b/tests/playwright/tests/db/general/groupCRUD.spec.ts index 0e7a3ad308..1e6335340a 100644 --- a/tests/playwright/tests/db/general/groupCRUD.spec.ts +++ b/tests/playwright/tests/db/general/groupCRUD.spec.ts @@ -47,8 +47,6 @@ test.describe('GroupBy CRUD Operations', () => { await toolbar.sort.add({ title: 'Sub_Group', ascending: true, locallySaved: false }); - await toolbar.clickGroupBy(); - await toolbar.groupBy.add({ title: 'Category', ascending: false, locallySaved: false }); await dashboard.grid.groupPage.openGroup({ indexMap: [2] }); @@ -116,8 +114,6 @@ test.describe('GroupBy CRUD Operations', () => { await toolbar.sort.add({ title: 'Sub_Category', ascending: true, locallySaved: false }); - await toolbar.clickGroupBy(); - await toolbar.groupBy.add({ title: 'Category', ascending: false, locallySaved: false }); await toolbar.groupBy.add({ title: 'Sub_Group', ascending: false, locallySaved: false }); @@ -186,8 +182,6 @@ test.describe('GroupBy CRUD Operations', () => { await toolbar.sort.add({ title: 'Item', ascending: true, locallySaved: false }); - await toolbar.clickGroupBy(); - await toolbar.groupBy.add({ title: 'Category', ascending: false, locallySaved: false }); await toolbar.groupBy.add({ title: 'Sub_Group', ascending: false, locallySaved: false }); await toolbar.groupBy.add({ title: 'Sub_Category', ascending: false, locallySaved: false }); @@ -255,8 +249,6 @@ test.describe('GroupBy CRUD Operations', () => { test('Single GroupBy CRUD Operations - Links', async ({ page }) => { await dashboard.treeView.openTable({ title: 'Film' }); - await toolbar.clickGroupBy(); - await toolbar.groupBy.add({ title: 'Actors', ascending: false, locallySaved: false }); await dashboard.grid.groupPage.openGroup({ indexMap: [2] }); diff --git a/tests/playwright/tests/db/general/toolbarOperations.spec.ts b/tests/playwright/tests/db/general/toolbarOperations.spec.ts index 9e609c4be7..545054c3a0 100644 --- a/tests/playwright/tests/db/general/toolbarOperations.spec.ts +++ b/tests/playwright/tests/db/general/toolbarOperations.spec.ts @@ -32,14 +32,9 @@ test.describe('Toolbar operations (GRID)', () => { // Open Table await dashboard.treeView.openTable({ title: 'Film' }); - // Open GroupBy Menu - await toolbar.clickGroupBy(); - // GroupBy Category Descending Order await toolbar.groupBy.add({ title: 'Length', ascending: false, locallySaved: false }); - await toolbar.clickGroupBy(); - // Hide Field and Verify await toolbar.fields.toggle({ title: 'Description' }); await dashboard.grid.column.verify({ @@ -165,16 +160,10 @@ test.describe('Toolbar operations (GRID)', () => { // Open Table await dashboard.treeView.openTable({ title: 'Film' }); - // Open GroupBy Menu - await toolbar.clickGroupBy(); - // GroupBy Category Descending Order await toolbar.groupBy.add({ title: 'Length', ascending: false, locallySaved: false }); await toolbar.groupBy.add({ title: 'RentalDuration', ascending: false, locallySaved: false }); - // Close GroupBy Menu - await toolbar.clickGroupBy(); - // Hide Field and Verify await toolbar.fields.toggle({ title: 'Description' }); await dashboard.grid.column.verify({ @@ -315,9 +304,6 @@ test.describe('Toolbar operations (GRID)', () => { await dashboard.grid.column.save({ isUpdated: true }); } - // Open GroupBy Menu - await toolbar.clickGroupBy(); - // GroupBy Category Descending Order await toolbar.groupBy.add({ title: 'Length', ascending: false, locallySaved: false }); await toolbar.groupBy.add({ title: 'RentalDuration', ascending: false, locallySaved: false }); @@ -464,11 +450,8 @@ test.describe('Toolbar operations (GRID)', () => { await dashboard.grid.column.save({ isUpdated: true }); } - // Open GroupBy Menu - await toolbar.clickGroupBy(); await toolbar.groupBy.add({ title: 'Length', ascending: false, locallySaved: false }); await toolbar.groupBy.add({ title: 'RentalDuration', ascending: false, locallySaved: false }); - await toolbar.clickGroupBy(); await dashboard.grid.groupPage.openGroup({ indexMap: [5, 0] }); @@ -479,12 +462,8 @@ test.describe('Toolbar operations (GRID)', () => { value: 'ALLEY EVOLUTION', }); - await toolbar.clickGroupBy(); - await toolbar.groupBy.update({ index: 0, title: 'ReleaseYear', ascending: false }); - await toolbar.clickGroupBy(); - await dashboard.grid.groupPage.openGroup({ indexMap: [0, 1] }); await dashboard.grid.groupPage.validateFirstRow({ @@ -494,8 +473,6 @@ test.describe('Toolbar operations (GRID)', () => { value: 'ACADEMY DINOSAUR', }); - await toolbar.clickGroupBy(); - await toolbar.groupBy.update({ index: 1, title: 'Length', ascending: false }); await dashboard.grid.groupPage.openGroup({ indexMap: [0, 5] }); @@ -511,10 +488,7 @@ test.describe('Toolbar operations (GRID)', () => { if (enableQuickRun()) test.skip(); await dashboard.treeView.openTable({ title: 'Film' }); - // Open GroupBy Menu - await toolbar.clickGroupBy(); await toolbar.groupBy.add({ title: 'Length', ascending: false, locallySaved: false }); - await toolbar.clickGroupBy(); await dashboard.viewSidebar.createGridView({ title: 'Test' }); await dashboard.rootPage.waitForTimeout(500); @@ -538,10 +512,7 @@ test.describe('Toolbar operations (GRID)', () => { await dashboard.treeView.openTable({ title: 'Film' }); await dashboard.viewSidebar.createGridView({ title: 'Film Grid' }); - // Open GroupBy Menu - await toolbar.clickGroupBy(); await toolbar.groupBy.add({ title: 'Length', ascending: false, locallySaved: false }); - await toolbar.clickGroupBy(); await dashboard.viewSidebar.copyView({ title: 'Film Grid' }); @@ -561,11 +532,8 @@ test.describe('Toolbar operations (GRID)', () => { if (enableQuickRun()) test.skip(); await dashboard.treeView.openTable({ title: 'Film' }); - // Open GroupBy Menu - await toolbar.clickGroupBy(); await toolbar.groupBy.add({ title: 'Length', ascending: false, locallySaved: false }); await toolbar.groupBy.add({ title: 'RentalDuration', ascending: false, locallySaved: false }); - await toolbar.clickGroupBy(); await dashboard.grid.groupPage.openGroup({ indexMap: [0, 0] }); @@ -576,9 +544,7 @@ test.describe('Toolbar operations (GRID)', () => { value: 'CONTROL ANTHEM', }); - await toolbar.clickGroupBy(); await toolbar.groupBy.remove({ index: 1 }); - await toolbar.clickGroupBy(); await dashboard.grid.groupPage.validateFirstRow({ indexMap: [0], @@ -587,9 +553,7 @@ test.describe('Toolbar operations (GRID)', () => { value: 'CHICAGO NORTH', }); - await toolbar.clickGroupBy(); await toolbar.groupBy.remove({ index: 0 }); - await toolbar.clickGroupBy(); await dashboard.grid.cell.verify({ index: 0, diff --git a/tests/playwright/tests/db/views/viewGridShare.spec.ts b/tests/playwright/tests/db/views/viewGridShare.spec.ts index 0b0f588837..a6e39bfe35 100644 --- a/tests/playwright/tests/db/views/viewGridShare.spec.ts +++ b/tests/playwright/tests/db/views/viewGridShare.spec.ts @@ -16,14 +16,13 @@ test.describe('Shared view', () => { test('Grid Share with GroupBy', async ({ page }) => { await dashboard.treeView.openTable({ title: 'Film' }); - await dashboard.grid.toolbar.clickGroupBy(); await dashboard.grid.toolbar.groupBy.add({ title: 'Title', ascending: false, locallySaved: false, }); - await dashboard.grid.toolbar.clickGroupBy(); + await dashboard.grid.toolbar.sort.add({ title: 'Title', ascending: false, @@ -76,7 +75,7 @@ test.describe('Shared view', () => { await page.reload(); await dashboard.treeView.openTable({ title: 'Film' }); - await dashboard.grid.toolbar.clickGroupBy(); + await dashboard.grid.toolbar.groupBy.update({ index: 0, title: 'Length', @@ -102,9 +101,8 @@ test.describe('Shared view', () => { await page.waitForTimeout(5000); await dashboard.treeView.openTable({ title: 'Film' }); - await dashboard.grid.toolbar.clickGroupBy(); + await dashboard.grid.toolbar.groupBy.remove({ index: 0 }); - await dashboard.grid.toolbar.clickGroupBy(); await page.goto(sharedLink); await page.reload();