fix: group-by menu test cases

packages/nc-gui/components/smartsheet/toolbar/GroupByMenu.vue

@@ -247,7 +247,7 @@ watch(meta, async () => {
       <div
         v-else
         :class="{ ' min-w-[400px]': _groupBy.length }"
-        class="flex flex-col bg-white overflow-auto menu-filter-dropdown max-h-[max(80vh,500px)] py-6 pl-6"
+        class="flex flex-col bg-white overflow-auto nc-group-by-list menu-filter-dropdown max-h-[max(80vh,500px)] py-6 pl-6"
         data-testid="nc-group-by-menu"
       >
         <div

tests/playwright/pages/Dashboard/common/Toolbar/Groupby.ts

@@ -12,7 +12,7 @@ export class ToolbarGroupByPage extends BasePage {
   }
 
   get() {
-    return this.rootPage.locator(`.nc-group-by-menu-btn`);
+    return this.rootPage.locator(`[data-testid="nc-group-by-menu"]`);
   }
 
   async verify({ index, column, direction }: { index: number; column: string; direction: string }) {
@@ -26,13 +26,22 @@ export class ToolbarGroupByPage extends BasePage {
   }
 
   async reset() {
+    // open group-by menu
+    await this.toolbar.clickGroupBy();
+
     const groupByCount = await this.rootPage.locator('.nc-group-by-item-remove-btn').count();
     for (let i = groupByCount - 1; i > -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`);
+    // open group-by menu
-    if (!(await addGroupBtn.isDisabled())) {
+    await this.toolbar.clickGroupBy();
-      await addGroupBtn.click();
+
+    // 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 (isGroupByListOpen) {
-    if (col !== title) {
+      await this.get().locator('button:has-text("Add subgroup")').click();
-      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();
     }
 
+    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();
   }
 }

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' });
     }
   }

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] });

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,

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();