test: field, filter, sort

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>

scripts/playwright/pages/Dashboard/Grid/Column/index.ts

@@ -1,7 +1,7 @@
 import { Page, expect } from "@playwright/test";
 import { GridPage } from "..";
 import BasePage from "../../../Base";
-import {SelectOptionColumnPageObject} from "./SelectOptionColumn";
+import { SelectOptionColumnPageObject } from "./SelectOptionColumn";
 
 export class ColumnPageObject extends BasePage {
   readonly grid: GridPage;
@@ -17,21 +17,35 @@ export class ColumnPageObject extends BasePage {
     return this.rootPage.locator('form[data-pw="add-or-edit-column"]');
   }
 
-  async create({title, type = "SingleLineText"}: {title: string, type?: string}) {
-    await this.grid.get().locator('.nc-column-add').click();
+  async create({
+    title,
+    type = "SingleLineText",
+  }: {
+    title: string;
+    type?: string;
+  }) {
+    await this.grid.get().locator(".nc-column-add").click();
     // await this.get().waitFor();
 
-    await this.fillTitle({title});
-    
-    await this.selectType({type});
+    await this.fillTitle({ title });
+
+    await this.selectType({ type });
 
     switch (type) {
       case "SingleTextLine":
         break;
-      case 'SingleSelect':
-      case 'MultiSelect':
-        await this.selectOption.addOption({index: 0, option: 'Option 1', skipColumnModal: true});
-        await this.selectOption.addOption({index: 1, option: 'Option 2', skipColumnModal: true});
+      case "SingleSelect":
+      case "MultiSelect":
+        await this.selectOption.addOption({
+          index: 0,
+          option: "Option 1",
+          skipColumnModal: true,
+        });
+        await this.selectOption.addOption({
+          index: 1,
+          option: "Option 2",
+          skipColumnModal: true,
+        });
         break;
       default:
         break;
@@ -40,51 +54,73 @@ export class ColumnPageObject extends BasePage {
     await this.save();
   }
 
-  async fillTitle({title}: {title: string}) {
-    await this.get().locator('.nc-column-name-input').fill(title);
+  async fillTitle({ title }: { title: string }) {
+    await this.get().locator(".nc-column-name-input").fill(title);
   }
 
-  async selectType({type}: {type: string}) {
-    await this.get().locator('.ant-select-selector > .ant-select-selection-item').click();
+  async selectType({ type }: { type: string }) {
+    await this.get()
+      .locator(".ant-select-selector > .ant-select-selection-item")
+      .click();
 
-    await this.get().locator('.ant-select-selection-search-input[aria-expanded="true"]').waitFor();
-    await this.get().locator('.ant-select-selection-search-input[aria-expanded="true"]').fill(type);
+    await this.get()
+      .locator('.ant-select-selection-search-input[aria-expanded="true"]')
+      .waitFor();
+    await this.get()
+      .locator('.ant-select-selection-search-input[aria-expanded="true"]')
+      .fill(type);
 
     // Select column type
     await this.rootPage.locator(`text=${type}`).nth(1).click();
   }
 
-  async delete({title}: {title: string}) {
-    await this.grid.get().locator(`th[data-title="${title}"] >> svg.ant-dropdown-trigger`).click();
+  async delete({ title }: { title: string }) {
+    await this.grid
+      .get()
+      .locator(`th[data-title="${title}"] >> svg.ant-dropdown-trigger`)
+      .click();
     // await this.rootPage.locator('li[role="menuitem"]:has-text("Delete")').waitFor();
-    await this.rootPage.locator('li[role="menuitem"]:has-text("Delete")').click();
+    await this.rootPage
+      .locator('li[role="menuitem"]:has-text("Delete")')
+      .click();
 
     await this.rootPage.locator('button:has-text("Delete")').click();
 
     // wait till modal is closed
-    await this.rootPage.locator('.nc-modal-column-delete').waitFor({state: 'hidden'});
+    await this.rootPage
+      .locator(".nc-modal-column-delete")
+      .waitFor({ state: "hidden" });
   }
-  
-  async openEdit({title}: {title: string}) {
+
+  async openEdit({ title }: { title: string }) {
     // todo: Improve this selector
-    await this.grid.get().locator(`text=#Title${title} >> svg >> nth=3`).click();
+    await this.grid
+      .get()
+      .locator(`text=#Title${title} >> svg >> nth=3`)
+      .click();
     await this.rootPage.locator('li[role="menuitem"]:has-text("Edit")').click();
 
-    await this.get().waitFor({state: 'visible'});
+    await this.get().waitFor({ state: "visible" });
   }
 
-  async save({isUpdated}: {isUpdated?: boolean} = {}) {
+  async save({ isUpdated }: { isUpdated?: boolean } = {}) {
     await this.get().locator('button:has-text("Save")').click();
 
-    await this.toastWait({message: isUpdated ? 'Column updated' : 'Column created'});
-    await this.get().waitFor({state: 'hidden'});
+    await this.toastWait({
+      message: isUpdated ? "Column updated" : "Column created",
+    });
+    await this.get().waitFor({ state: "hidden" });
     await this.rootPage.waitForTimeout(200);
   }
 
-  async verify({title, isDeleted}: {title: string, isDeleted?: boolean}) {
-    if(isDeleted) {
-      return expect(await this.rootPage.locator(`th[data-title="${title}"]`).count()).toBe(0);
+  async verify({ title, isVisible }: { title: string; isVisible?: boolean }) {
+    if (isVisible) {
+      return expect(
+        await this.rootPage.locator(`th[data-title="${title}"]`).count()
+      ).toBe(0);
     }
-    await expect(this.rootPage.locator(`th[data-title="${title}"]`)).toHaveText(title);
+    await expect(this.rootPage.locator(`th[data-title="${title}"]`)).toHaveText(
+      title
+    );
   }
-}
+}

scripts/playwright/pages/Dashboard/Grid/Toolbar/Fields.ts

@@ -13,7 +13,12 @@ export class ToolbarFieldsPage extends BasePage {
     return this.rootPage.locator(`[pw-data="grid-fields-menu"]`);
   }
 
-  click({ title}: { title: string }) {
-    return this.get().locator(`[pw-data="grid-fields-menu-${title}"]`).locator('input[type="checkbox"]').click();
+  async toggle({ title }: { title: string }) {
+    await this.toolbar.clickFields();
+    await this.get()
+      .locator(`[pw-data="grid-fields-menu-${title}"]`)
+      .locator('input[type="checkbox"]')
+      .click();
+    await this.toolbar.clickFields();
   }
-}
+}

scripts/playwright/pages/Dashboard/Grid/Toolbar/Filter.ts

@@ -16,26 +16,44 @@ export class ToolbarFilterPage extends BasePage {
   async addNew({
     columnTitle,
     opType,
-    value
+    value,
   }: {
     columnTitle: string;
     opType: string;
     value: string;
   }) {
+    await this.toolbar.clickFilter();
 
     await this.get().locator(`button:has-text("Add Filter")`).first().click();
 
-    await this.rootPage.locator('.nc-filter-field-select').last().click();
-    await this.rootPage.locator('div.ant-select-dropdown.nc-dropdown-toolbar-field-list').locator(`div[label="${columnTitle}"][aria-selected="false"]`).click();
+    await this.rootPage.locator(".nc-filter-field-select").last().click();
+    await this.rootPage
+      .locator("div.ant-select-dropdown.nc-dropdown-toolbar-field-list")
+      .locator(`div[label="${columnTitle}"][aria-selected="false"]`)
+      .click();
 
-    await this.rootPage.locator('.nc-filter-operation-select').last().click();
+    await this.rootPage.locator(".nc-filter-operation-select").last().click();
     // await this.rootPage.locator('.nc-dropdown-filter-comp-op').locator(`.ant-select-item:has-text("${opType}")`).scrollIntoViewIfNeeded();
-    await this.rootPage.locator('.nc-dropdown-filter-comp-op').locator(`.ant-select-item:has-text("${opType}")`).click();
+    await this.rootPage
+      .locator(".nc-dropdown-filter-comp-op")
+      .locator(`.ant-select-item:has-text("${opType}")`)
+      .click();
 
-    await this.rootPage.locator('.nc-filter-value-select').last().fill(value);
+    await this.rootPage.locator(".nc-filter-value-select").last().fill(value);
+
+    await this.toolbar.clickFilter();
+  }
+
+  click({ title }: { title: string }) {
+    return this.get()
+      .locator(`[pw-data="grid-fields-menu-${title}"]`)
+      .locator('input[type="checkbox"]')
+      .click();
   }
 
-  click({ title}: { title: string }) {
-    return this.get().locator(`[pw-data="grid-fields-menu-${title}"]`).locator('input[type="checkbox"]').click();
+  async resetFilter() {
+    await this.toolbar.clickFilter();
+    await this.get().locator(".nc-filter-item-remove-btn").click();
+    await this.toolbar.clickFilter();
   }
-}
+}

scripts/playwright/pages/Dashboard/Grid/Toolbar/Sort.ts

@@ -13,24 +13,49 @@ export class ToolbarSortPage extends BasePage {
     return this.rootPage.locator(`[pw-data="grid-sorts-menu"]`);
   }
 
-  async addNew({
+  async addSort({
     columnTitle,
     isAscending,
   }: {
     columnTitle: string;
     isAscending: boolean;
   }) {
+    // open sort menu
+    await this.toolbar.clickSort();
 
     await this.get().locator(`button:has-text("Add Sort Option")`).click();
 
-    await this.rootPage.locator('.nc-sort-field-select').click();
-    await this.rootPage.locator('div.ant-select-dropdown.nc-dropdown-toolbar-field-list').locator(`div[label="${columnTitle}"]`).click();
+    await this.rootPage.locator(".nc-sort-field-select").click();
+    await this.rootPage
+      .locator("div.ant-select-dropdown.nc-dropdown-toolbar-field-list")
+      .locator(`div[label="${columnTitle}"]`)
+      .click();
+
+    await this.rootPage.locator(".nc-sort-dir-select").click();
+    await this.rootPage
+      .locator(".nc-dropdown-sort-dir")
+      .locator(".ant-select-item")
+      .nth(isAscending ? 0 : 1)
+      .click();
+
+    // close sort menu
+    await this.toolbar.clickSort();
+  }
+
+  async resetSort() {
+    // open sort menu
+    await this.toolbar.clickSort();
+
+    await this.get().locator(".nc-sort-item-remove-btn").click();
 
-    await this.rootPage.locator('.nc-sort-dir-select').click();
-    await this.rootPage.locator('.nc-dropdown-sort-dir').locator('.ant-select-item').nth(isAscending ? 0 : 1).click();
+    // close sort menu
+    await this.toolbar.clickSort();
   }
 
-  click({ title}: { title: string }) {
-    return this.get().locator(`[pw-data="grid-fields-menu-${title}"]`).locator('input[type="checkbox"]').click();
+  click({ title }: { title: string }) {
+    return this.get()
+      .locator(`[pw-data="grid-fields-menu-${title}"]`)
+      .locator('input[type="checkbox"]')
+      .click();
   }
-}
+}

scripts/playwright/tests/tableColumnOperation.spec.ts

@@ -26,7 +26,7 @@ test.describe("Table Column Operations", () => {
     await grid.column.verify({ title: "column_name_b" });
 
     await grid.column.delete({ title: "column_name_b" });
-    await grid.column.verify({ title: "column_name_b", isDeleted: true });
+    await grid.column.verify({ title: "column_name_b", isVisible: true });
 
     await grid.addNewRow({ index: 0 });
     await grid.verifyRow({ index: 0 });

scripts/playwright/tests/toolbarOperations.spec.ts

@@ -0,0 +1,71 @@
+import { test } from "@playwright/test";
+import { DashboardPage } from "../pages/Dashboard";
+import setup from "../setup";
+
+test.describe("Toolbar operations (GRID)", () => {
+  let dashboard: DashboardPage;
+  let context: any;
+
+  async function validateFirstRow(value: string) {
+    await dashboard.grid.cell.verify({
+      index: 0,
+      columnHeader: "Country",
+      value: value,
+    });
+  }
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page });
+    dashboard = new DashboardPage(page, context.project);
+  });
+
+  test("Hide, Sort, Filter", async () => {
+    // close 'Team & Auth' tab
+    await dashboard.closeTab({ title: "Team & Auth" });
+
+    await dashboard.treeView.openTable({ title: "Country" });
+    const toolbar = dashboard.grid.toolbar;
+
+    await dashboard.grid.column.verify({
+      title: "LastUpdate",
+      isVisible: false,
+    });
+
+    // hide column
+    await toolbar.fields.toggle({ title: "LastUpdate" });
+    await dashboard.grid.column.verify({
+      title: "LastUpdate",
+      isVisible: true,
+    });
+
+    // un-hide column
+    await toolbar.fields.toggle({ title: "LastUpdate" });
+    await dashboard.grid.column.verify({
+      title: "LastUpdate",
+      isVisible: false,
+    });
+
+    await validateFirstRow("Afghanistan");
+    // Sort column
+    await toolbar.sort.addSort({ columnTitle: "Country", isAscending: false });
+    await validateFirstRow("Zambia");
+
+    // reset sort
+    await toolbar.sort.resetSort();
+    await validateFirstRow("Afghanistan");
+
+    // Filter column
+    await toolbar.filter.addNew({
+      columnTitle: "Country",
+      value: "India",
+      opType: "is equal",
+    });
+    await validateFirstRow("India");
+
+    // Reset filter
+    await toolbar.filter.resetFilter();
+    await validateFirstRow("Afghanistan");
+
+    await dashboard.closeTab({ title: "Country" });
+  });
+});