From 08b03bdb0991727a6938ed3c4d3c52b83cde7023 Mon Sep 17 00:00:00 2001 From: Muhammed Mustafa Date: Wed, 19 Oct 2022 11:37:38 +0530 Subject: [PATCH] feat(testing): Moved toolbar to commons folder --- .../playwright/pages/Dashboard/Form/index.ts | 33 +++++++++++-------- .../pages/Dashboard/Gallery/index.ts | 14 +++++--- .../pages/Dashboard/Grid/Column/index.ts | 8 ++--- .../playwright/pages/Dashboard/Grid/index.ts | 4 +-- .../playwright/pages/Dashboard/TreeView.ts | 4 +++ .../{ => common}/Toolbar/Actions/Erd.ts | 2 +- .../{ => common}/Toolbar/Actions/index.ts | 2 +- .../Dashboard/{ => common}/Toolbar/Fields.ts | 4 +-- .../Dashboard/{ => common}/Toolbar/Filter.ts | 13 ++++++-- .../{ => common}/Toolbar/ShareView.ts | 2 +- .../Dashboard/{ => common}/Toolbar/Sort.ts | 4 +-- .../{ => common}/Toolbar/ViewMenu.ts | 9 ++--- .../Dashboard/{ => common}/Toolbar/index.ts | 22 +++++-------- scripts/playwright/pages/Dashboard/index.ts | 4 +-- scripts/playwright/tests/metaSync.spec.ts | 12 +++---- .../tests/tableColumnOperation.spec.ts | 2 +- .../tests/toolbarOperations.spec.ts | 5 +-- 17 files changed, 82 insertions(+), 62 deletions(-) rename scripts/playwright/pages/Dashboard/{ => common}/Toolbar/Actions/Erd.ts (88%) rename scripts/playwright/pages/Dashboard/{ => common}/Toolbar/Actions/index.ts (92%) rename scripts/playwright/pages/Dashboard/{ => common}/Toolbar/Fields.ts (90%) rename scripts/playwright/pages/Dashboard/{ => common}/Toolbar/Filter.ts (84%) rename scripts/playwright/pages/Dashboard/{ => common}/Toolbar/ShareView.ts (97%) rename scripts/playwright/pages/Dashboard/{ => common}/Toolbar/Sort.ts (94%) rename scripts/playwright/pages/Dashboard/{ => common}/Toolbar/ViewMenu.ts (89%) rename scripts/playwright/pages/Dashboard/{ => common}/Toolbar/index.ts (89%) diff --git a/scripts/playwright/pages/Dashboard/Form/index.ts b/scripts/playwright/pages/Dashboard/Form/index.ts index 4c22c6d320..a72c76c78c 100644 --- a/scripts/playwright/pages/Dashboard/Form/index.ts +++ b/scripts/playwright/pages/Dashboard/Form/index.ts @@ -2,10 +2,11 @@ import { Locator, expect } from "@playwright/test"; import { DashboardPage } from ".."; import BasePage from "../../Base"; +import { ToolbarPage } from "../common/Toolbar"; export class FormPage extends BasePage { readonly dashboard: DashboardPage; - readonly dashboardPage: DashboardPage; + readonly toolbar: ToolbarPage; readonly addAllButton: Locator; readonly removeAllButton: Locator; @@ -19,35 +20,37 @@ export class FormPage extends BasePage { readonly formSubHeading: Locator; readonly afterSubmitMsg: Locator; - constructor(dashboardPage: DashboardPage) { - super(dashboardPage.rootPage); - this.dashboard = dashboardPage; - this.addAllButton = dashboardPage + constructor(dashboard: DashboardPage) { + super(dashboard.rootPage); + this.dashboard = dashboard; + this.toolbar = new ToolbarPage(this); + + this.addAllButton = dashboard .get() .locator('[data-pw="nc-form-add-all"]'); - this.removeAllButton = dashboardPage + this.removeAllButton = dashboard .get() .locator('[data-pw="nc-form-remove-all"]'); - this.submitButton = dashboardPage + this.submitButton = dashboard .get() .locator('[data-pw="nc-form-submit"]'); - this.showAnotherFormRadioButton = dashboardPage + this.showAnotherFormRadioButton = dashboard .get() .locator('[data-pw="nc-form-checkbox-submit-another-form"]'); - this.showAnotherFormAfter5SecRadioButton = dashboardPage + this.showAnotherFormAfter5SecRadioButton = dashboard .get() .locator('[data-pw="nc-form-checkbox-show-blank-form"]'); - this.emailMeRadioButton = dashboardPage + this.emailMeRadioButton = dashboard .get() .locator('[data-pw="nc-form-checkbox-send-email"]'); - this.formHeading = dashboardPage + this.formHeading = dashboard .get() .locator('[data-pw="nc-form-heading"]'); - this.formSubHeading = dashboardPage + this.formSubHeading = dashboard .get() .locator('[data-pw="nc-form-sub-heading"]'); - this.afterSubmitMsg = dashboardPage + this.afterSubmitMsg = dashboard .get() .locator('[data-pw="nc-form-after-submit-msg"]'); } @@ -246,6 +249,10 @@ export class FormPage extends BasePage { ); } + async waitLoading() { + await this.rootPage.waitForTimeout(1000); + } + verifyAfterSubmitMenuState(param: { showBlankForm?: boolean; submitAnotherForm?: boolean; diff --git a/scripts/playwright/pages/Dashboard/Gallery/index.ts b/scripts/playwright/pages/Dashboard/Gallery/index.ts index 824813eb88..a0bc99bb41 100644 --- a/scripts/playwright/pages/Dashboard/Gallery/index.ts +++ b/scripts/playwright/pages/Dashboard/Gallery/index.ts @@ -2,14 +2,16 @@ import { Locator, expect } from "@playwright/test"; import { DashboardPage } from ".."; import BasePage from "../../Base"; +import { ToolbarPage } from "../common/Toolbar"; export class GalleryPage extends BasePage { readonly dashboard: DashboardPage; - readonly dashboardPage: DashboardPage; + readonly toolbar: ToolbarPage; - constructor(dashboardPage: DashboardPage) { - super(dashboardPage.rootPage); - this.dashboard = dashboardPage; + constructor(dashboard: DashboardPage) { + super(dashboard.rootPage); + this.dashboard = dashboard; + this.toolbar = new ToolbarPage(this); } get() { @@ -42,4 +44,8 @@ export class GalleryPage extends BasePage { await this.rootPage.waitForTimeout(1000); await this.rootPage.locator(`.nc-fields-menu-btn`).click(); } + + async waitLoading() { + await this.rootPage.waitForTimeout(1000); + } } diff --git a/scripts/playwright/pages/Dashboard/Grid/Column/index.ts b/scripts/playwright/pages/Dashboard/Grid/Column/index.ts index e14db0a809..4f5aa235f9 100644 --- a/scripts/playwright/pages/Dashboard/Grid/Column/index.ts +++ b/scripts/playwright/pages/Dashboard/Grid/Column/index.ts @@ -212,11 +212,11 @@ export class ColumnPageObject extends BasePage { await this.rootPage.waitForTimeout(200); } - async verify({ title, isVisible }: { title: string; isVisible?: boolean }) { - if (false === isVisible) { + async verify({ title, isVisible = true }: { title: string; isVisible?: boolean }) { + if (!isVisible) { return expect( - await this.rootPage.locator(`th[data-title="${title}"]`).count() - ).toBe(0); + await this.rootPage.locator(`th[data-title="${title}"]`) + ).not.toBeVisible(); } await expect( this.rootPage.locator(`th[data-title="${title}"]`) diff --git a/scripts/playwright/pages/Dashboard/Grid/index.ts b/scripts/playwright/pages/Dashboard/Grid/index.ts index 7723270575..3021745804 100644 --- a/scripts/playwright/pages/Dashboard/Grid/index.ts +++ b/scripts/playwright/pages/Dashboard/Grid/index.ts @@ -4,7 +4,7 @@ import { DashboardPage } from ".."; import BasePage from "../../Base"; import { CellPageObject } from "./Cell"; import { ColumnPageObject } from "./Column"; -import { ToolbarPage } from "../Toolbar"; +import { ToolbarPage } from "../common/Toolbar"; export class GridPage extends BasePage { readonly dashboard: DashboardPage; @@ -20,7 +20,7 @@ export class GridPage extends BasePage { this.addNewTableButton = dashboardPage.get().locator(".nc-add-new-table"); this.column = new ColumnPageObject(this); this.cell = new CellPageObject(this); - this.toolbar = new ToolbarPage(this.dashboard); + this.toolbar = new ToolbarPage(this); } get() { diff --git a/scripts/playwright/pages/Dashboard/TreeView.ts b/scripts/playwright/pages/Dashboard/TreeView.ts index 8d8ee53b5c..ea76679754 100644 --- a/scripts/playwright/pages/Dashboard/TreeView.ts +++ b/scripts/playwright/pages/Dashboard/TreeView.ts @@ -77,6 +77,7 @@ export class TreeViewPage extends BasePage { } async deleteTable({ title }: { title: string }) { + const tabCount = await this.rootPage.locator('.nc-container').count() await this.get() .locator(`.nc-project-tree-tbl-${title}`) .click({ button: "right" }); @@ -90,6 +91,9 @@ export class TreeViewPage extends BasePage { requestHttpMethod: "DELETE", requestUrlPathToMatch: `/api/v1/db/meta/tables/`, }); + await expect.poll(async () => await this.rootPage.locator('.nc-container').count() === tabCount - 1).toBe(true); + + (await this.rootPage.locator('.nc-container').last().elementHandle())?.waitForElementState('stable'); } async renameTable({ title, newTitle }: { title: string; newTitle: string }) { diff --git a/scripts/playwright/pages/Dashboard/Toolbar/Actions/Erd.ts b/scripts/playwright/pages/Dashboard/common/Toolbar/Actions/Erd.ts similarity index 88% rename from scripts/playwright/pages/Dashboard/Toolbar/Actions/Erd.ts rename to scripts/playwright/pages/Dashboard/common/Toolbar/Actions/Erd.ts index 0400b8fe61..04e729132e 100644 --- a/scripts/playwright/pages/Dashboard/Toolbar/Actions/Erd.ts +++ b/scripts/playwright/pages/Dashboard/common/Toolbar/Actions/Erd.ts @@ -1,5 +1,5 @@ import { ToolbarActionsPage } from "."; -import { ErdBasePage } from "../../commonBase/Erd"; +import { ErdBasePage } from "../../../commonBase/Erd"; export class ToolbarActionsErdPage extends ErdBasePage { readonly toolbarActions: ToolbarActionsPage; diff --git a/scripts/playwright/pages/Dashboard/Toolbar/Actions/index.ts b/scripts/playwright/pages/Dashboard/common/Toolbar/Actions/index.ts similarity index 92% rename from scripts/playwright/pages/Dashboard/Toolbar/Actions/index.ts rename to scripts/playwright/pages/Dashboard/common/Toolbar/Actions/index.ts index 2eb8fd3dac..5008cc24cd 100644 --- a/scripts/playwright/pages/Dashboard/Toolbar/Actions/index.ts +++ b/scripts/playwright/pages/Dashboard/common/Toolbar/Actions/index.ts @@ -1,4 +1,4 @@ -import BasePage from "../../../Base"; +import BasePage from "../../../../Base"; import { ToolbarPage } from ".."; import { ToolbarActionsErdPage } from "./Erd"; diff --git a/scripts/playwright/pages/Dashboard/Toolbar/Fields.ts b/scripts/playwright/pages/Dashboard/common/Toolbar/Fields.ts similarity index 90% rename from scripts/playwright/pages/Dashboard/Toolbar/Fields.ts rename to scripts/playwright/pages/Dashboard/common/Toolbar/Fields.ts index 1a60477eb3..ea82b524b6 100644 --- a/scripts/playwright/pages/Dashboard/Toolbar/Fields.ts +++ b/scripts/playwright/pages/Dashboard/common/Toolbar/Fields.ts @@ -1,4 +1,4 @@ -import BasePage from "../../Base"; +import BasePage from "../../../Base"; import { ToolbarPage } from "./index"; export class ToolbarFieldsPage extends BasePage { @@ -27,6 +27,6 @@ export class ToolbarFieldsPage extends BasePage { .locator(`[pw-data="nc-fields-menu-${title}"]`) .locator('input[type="checkbox"]') .click(); - await this.toolbar.waitLoading(); + await this.toolbar.parent.waitLoading(); } } diff --git a/scripts/playwright/pages/Dashboard/Toolbar/Filter.ts b/scripts/playwright/pages/Dashboard/common/Toolbar/Filter.ts similarity index 84% rename from scripts/playwright/pages/Dashboard/Toolbar/Filter.ts rename to scripts/playwright/pages/Dashboard/common/Toolbar/Filter.ts index c27d0bf7c3..5fb2ea6fa9 100644 --- a/scripts/playwright/pages/Dashboard/Toolbar/Filter.ts +++ b/scripts/playwright/pages/Dashboard/common/Toolbar/Filter.ts @@ -1,4 +1,4 @@ -import BasePage from "../../Base"; +import BasePage from "../../../Base"; import { ToolbarPage } from "./index"; export class ToolbarFilterPage extends BasePage { @@ -40,8 +40,12 @@ export class ToolbarFilterPage extends BasePage { await this.rootPage.locator(".nc-filter-value-select").last().fill(value); + await this.waitForResponse({ + requestHttpMethod: "POST", + requestUrlPathToMatch: "/filters", + }) + await this.toolbar.clickFilter(); - await this.toolbar.waitLoading(); } click({ title }: { title: string }) { @@ -54,6 +58,11 @@ export class ToolbarFilterPage extends BasePage { async resetFilter() { await this.toolbar.clickFilter(); await this.get().locator(".nc-filter-item-remove-btn").click(); + await this.waitForResponse({ + requestHttpMethod: "DELETE", + requestUrlPathToMatch: "/api/v1/db/meta/filters/", + }) + await this.toolbar.clickFilter(); } } diff --git a/scripts/playwright/pages/Dashboard/Toolbar/ShareView.ts b/scripts/playwright/pages/Dashboard/common/Toolbar/ShareView.ts similarity index 97% rename from scripts/playwright/pages/Dashboard/Toolbar/ShareView.ts rename to scripts/playwright/pages/Dashboard/common/Toolbar/ShareView.ts index 6830df9e65..910589036e 100644 --- a/scripts/playwright/pages/Dashboard/Toolbar/ShareView.ts +++ b/scripts/playwright/pages/Dashboard/common/Toolbar/ShareView.ts @@ -1,4 +1,4 @@ -import BasePage from "../../Base"; +import BasePage from "../../../Base"; import { ToolbarPage } from "./index"; export class ToolbarShareViewPage extends BasePage { diff --git a/scripts/playwright/pages/Dashboard/Toolbar/Sort.ts b/scripts/playwright/pages/Dashboard/common/Toolbar/Sort.ts similarity index 94% rename from scripts/playwright/pages/Dashboard/Toolbar/Sort.ts rename to scripts/playwright/pages/Dashboard/common/Toolbar/Sort.ts index bb2e48884b..059e5701ff 100644 --- a/scripts/playwright/pages/Dashboard/Toolbar/Sort.ts +++ b/scripts/playwright/pages/Dashboard/common/Toolbar/Sort.ts @@ -1,4 +1,4 @@ -import BasePage from "../../Base"; +import BasePage from "../../../Base"; import { ToolbarPage } from "./index"; export class ToolbarSortPage extends BasePage { @@ -41,7 +41,7 @@ export class ToolbarSortPage extends BasePage { // close sort menu await this.toolbar.clickSort(); - await this.toolbar.waitLoading(); + await this.toolbar.parent.waitLoading(); } async resetSort() { diff --git a/scripts/playwright/pages/Dashboard/Toolbar/ViewMenu.ts b/scripts/playwright/pages/Dashboard/common/Toolbar/ViewMenu.ts similarity index 89% rename from scripts/playwright/pages/Dashboard/Toolbar/ViewMenu.ts rename to scripts/playwright/pages/Dashboard/common/Toolbar/ViewMenu.ts index 18186e4ef1..01000c2134 100644 --- a/scripts/playwright/pages/Dashboard/Toolbar/ViewMenu.ts +++ b/scripts/playwright/pages/Dashboard/common/Toolbar/ViewMenu.ts @@ -1,5 +1,6 @@ import { Locator, expect } from "@playwright/test"; -import BasePage from "../../Base"; +import BasePage from "../../../Base"; +import { GridPage } from "../../Grid"; import { ToolbarPage } from "./index"; export class ToolbarViewMenuPage extends BasePage { @@ -55,7 +56,7 @@ export class ToolbarViewMenuPage extends BasePage { break; } } - await this.toolbar.waitLoading(); + await this.toolbar.parent.waitLoading(); } async verifyLockMode() { @@ -74,7 +75,7 @@ export class ToolbarViewMenuPage extends BasePage { .locator(`.nc-add-new-row-btn.nc-toolbar-btn > .nc-icon.disabled`) ).toBeVisible(); - await this.toolbar.grid.verifyEditDisabled({ columnHeader: "Country" }); + await (this.toolbar.parent as GridPage).verifyEditDisabled({ columnHeader: "Country" }); } async verifyCollaborativeMode() { @@ -93,6 +94,6 @@ export class ToolbarViewMenuPage extends BasePage { .locator(`.nc-add-new-row-btn.nc-toolbar-btn > .nc-icon`) ).toBeVisible(); - await this.toolbar.grid.verifyEditEnabled({ columnHeader: "Country" }); + await (this.toolbar.parent as GridPage).verifyEditEnabled({ columnHeader: "Country" }); } } diff --git a/scripts/playwright/pages/Dashboard/Toolbar/index.ts b/scripts/playwright/pages/Dashboard/common/Toolbar/index.ts similarity index 89% rename from scripts/playwright/pages/Dashboard/Toolbar/index.ts rename to scripts/playwright/pages/Dashboard/common/Toolbar/index.ts index a567accc86..00fc5b3824 100644 --- a/scripts/playwright/pages/Dashboard/Toolbar/index.ts +++ b/scripts/playwright/pages/Dashboard/common/Toolbar/index.ts @@ -1,17 +1,18 @@ import { expect } from "@playwright/test"; -import BasePage from "../../Base"; +import BasePage from "../../../Base"; import { ToolbarFieldsPage } from "./Fields"; import { ToolbarSortPage } from "./Sort"; import { ToolbarFilterPage } from "./Filter"; import { ToolbarShareViewPage } from "./ShareView"; import { ToolbarViewMenuPage } from "./ViewMenu"; import * as fs from "fs"; -import { DashboardPage } from ".."; -import { GridPage } from "../Grid"; +import { GridPage } from "../../Grid"; import { ToolbarActionsPage } from "./Actions"; +import { GalleryPage } from "../../Gallery"; +import { FormPage } from "../../Form"; export class ToolbarPage extends BasePage { - readonly dashboard: DashboardPage; + readonly parent: GridPage | GalleryPage | FormPage; readonly fields: ToolbarFieldsPage; readonly sort: ToolbarSortPage; readonly filter: ToolbarFilterPage; @@ -19,9 +20,9 @@ export class ToolbarPage extends BasePage { readonly viewsMenu: ToolbarViewMenuPage; readonly actions: ToolbarActionsPage; - constructor(dashboard: DashboardPage) { - super(dashboard.rootPage); - this.dashboard = dashboard; + constructor(parent: GridPage | GalleryPage | FormPage) { + super(parent.rootPage); + this.parent = parent; this.fields = new ToolbarFieldsPage(this); this.sort = new ToolbarSortPage(this); this.filter = new ToolbarFilterPage(this); @@ -110,11 +111,4 @@ export class ToolbarPage extends BasePage { .locator(`.nc-toolbar-btn.nc-actions-menu-btn`) .waitFor({ state: "hidden" }); } - - async waitLoading() { - await this.dashboard - .get() - .locator('[pw-data="grid-load-spinner"]') - .waitFor({ state: "hidden" }); - } } diff --git a/scripts/playwright/pages/Dashboard/index.ts b/scripts/playwright/pages/Dashboard/index.ts index 3401fc4e1b..a414bb1afa 100644 --- a/scripts/playwright/pages/Dashboard/index.ts +++ b/scripts/playwright/pages/Dashboard/index.ts @@ -10,7 +10,7 @@ import { TreeViewPage } from "./TreeView"; import { SettingsPage } from "./Settings"; import { ViewSidebarPage } from "./ViewSidebar"; import { GalleryPage } from "./Gallery"; -import { ToolbarPage } from "./Toolbar"; +import { ToolbarPage } from "./common/Toolbar"; export class DashboardPage extends BasePage { readonly project: any; @@ -25,7 +25,6 @@ export class DashboardPage extends BasePage { readonly linkRecord: LinkRecord; readonly settings: SettingsPage; readonly viewSidebar: ViewSidebarPage; - readonly toolbar: ToolbarPage; constructor(rootPage: Page, project: any) { super(rootPage); @@ -41,7 +40,6 @@ export class DashboardPage extends BasePage { this.linkRecord = new LinkRecord(this); this.settings = new SettingsPage(this); this.viewSidebar = new ViewSidebarPage(this); - this.toolbar = new ToolbarPage(this); } get() { diff --git a/scripts/playwright/tests/metaSync.spec.ts b/scripts/playwright/tests/metaSync.spec.ts index cee72b0644..ab3e316fd3 100644 --- a/scripts/playwright/tests/metaSync.spec.ts +++ b/scripts/playwright/tests/metaSync.spec.ts @@ -33,7 +33,7 @@ test.describe("Meta sync", () => { test.setTimeout(process.env.CI ? 100000 : 70000); await dashboard.gotoSettings(); - await settings.selectTab({tab: SettingTab['Project Metadata']}); + await settings.selectTab({tab: SettingTab.ProjectMetadata}); await dbExec( `CREATE TABLE ${projectPrefix}table1 (id INT NOT NULL, col1 INT NULL, PRIMARY KEY (id))` @@ -230,16 +230,16 @@ test.describe("Meta sync", () => { await dashboard.treeView.openTable({ title: "Table1" }); - await dashboard.toolbar.clickFields(); - await dashboard.toolbar.fields.click({ title: "Col1" }); - await dashboard.toolbar.clickFields(); + await dashboard.grid.toolbar.clickFields(); + await dashboard.grid.toolbar.fields.click({ title: "Col1" }); + await dashboard.grid.toolbar.clickFields(); - await dashboard.toolbar.sort.addSort({ + await dashboard.grid.toolbar.sort.addSort({ columnTitle: "Col1", isAscending: false, }); - await dashboard.toolbar.filter.addNew({ + await dashboard.grid.toolbar.filter.addNew({ columnTitle: "Col1", opType: ">=", value: "5", diff --git a/scripts/playwright/tests/tableColumnOperation.spec.ts b/scripts/playwright/tests/tableColumnOperation.spec.ts index 2caa259979..0a7323144e 100644 --- a/scripts/playwright/tests/tableColumnOperation.spec.ts +++ b/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", isVisible: true }); + await grid.column.verify({ title: "column_name_b", isVisible: false }); await grid.addNewRow({ index: 0, value: `Row 0` }); await grid.verifyRow({ index: 0 }); diff --git a/scripts/playwright/tests/toolbarOperations.spec.ts b/scripts/playwright/tests/toolbarOperations.spec.ts index 60861ef221..e9f700ad40 100644 --- a/scripts/playwright/tests/toolbarOperations.spec.ts +++ b/scripts/playwright/tests/toolbarOperations.spec.ts @@ -1,7 +1,8 @@ import { test } from "@playwright/test"; import { DashboardPage } from "../pages/Dashboard"; +import { ToolbarPage } from "../pages/Dashboard/common/Toolbar"; import setup from "../setup"; -import { ToolbarPage } from "../pages/Dashboard/Toolbar"; + test.describe("Toolbar operations (GRID)", () => { let dashboard: DashboardPage, toolbar: ToolbarPage; @@ -18,7 +19,7 @@ test.describe("Toolbar operations (GRID)", () => { test.beforeEach(async ({ page }) => { context = await setup({ page }); dashboard = new DashboardPage(page, context.project); - toolbar = dashboard.toolbar; + toolbar = dashboard.grid.toolbar; }); test("Hide, Sort, Filter", async () => {