diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue index 6ee368c210..c3fe34e491 100644 --- a/packages/nc-gui/components/dashboard/TreeView.vue +++ b/packages/nc-gui/components/dashboard/TreeView.vue @@ -321,12 +321,13 @@ function openTableCreateDialog() { class="nc-tree-item text-sm cursor-pointer group" :data-order="table.order" :data-id="table.id" + :pw-data="`tree-view-table-${table.title}`" @click="addTableTab(table)" >
-
+
expect(text).toContain(title)); } - - async createTable({ title }: { title: string }) { - await this.tablesSideBar.locator(".nc-add-new-table").click(); - - await this.page.locator(".ant-modal-body").waitFor(); - - await this.page.locator('[placeholder="Enter table name"]').fill(title); - await this.page.locator('button:has-text("Submit")').click(); - - await expect(this.page).toHaveURL( - `/#/nc/${this.project.id}/table/${title}` - ); - await this.page - .locator('[pw-data="grid-load-spinner"]') - .waitFor({ state: "hidden" }); - } - - async verifyTableExistsInSidebar({ title }: { title: string }) { - await expect( - this.tablesSideBar.locator(`.nc-project-tree-tbl-${title}`) - ).toBeVisible(); - } - - async verifyTableDoesNotExistInSidebar({ title }: { title: string }) { - await expect( - await this.tablesSideBar.locator(`.nc-project-tree-tbl-${title}`).count() - ).toBe(0); - } - - async deleteTable({ title }: { title: string }) { - await this.tablesSideBar - .locator(`.nc-project-tree-tbl-${title}`) - .click({ button: "right" }); - await this.page - .locator('div.nc-project-menu-item:has-text("Delete")') - .click(); - await this.page.locator('button:has-text("Yes")').click(); - await this.base.toastWait({ message: "Deleted table successfully" }); - } - - async renameTable({ title, newTitle }: { title: string; newTitle: string }) { - await this.tablesSideBar - .locator(`.nc-project-tree-tbl-${title}`) - .click({ button: "right" }); - await this.page - .locator('div.nc-project-menu-item:has-text("Rename")') - .click(); - await this.page.locator('[placeholder="Enter table name"]').fill(newTitle); - await this.page.locator('button:has-text("Submit")').click(); - await this.base.toastWait({ message: "Table renamed successfully" }); - } } diff --git a/scripts/playwright/pages/TreeView.ts b/scripts/playwright/pages/TreeView.ts new file mode 100644 index 0000000000..f2a7072e20 --- /dev/null +++ b/scripts/playwright/pages/TreeView.ts @@ -0,0 +1,83 @@ +import { expect, Page } from "@playwright/test"; +import { BasePage } from "./Base"; + +export class TreeViewPage { + readonly page: Page; + readonly base: BasePage; + readonly project: any; + + constructor(page: Page, project: any) { + this.page = page; + this.project = project; + this.base = new BasePage(page); + } + + get() { + return this.page.locator(".nc-treeview-container");; + } + + async openTable({ title }: { title: string }) { + await this.get().locator(`.nc-project-tree-tbl-${title}`).click(); + } + + async createTable({ title }: { title: string }) { + await this.get().locator(".nc-add-new-table").click(); + + await this.page.locator(".ant-modal-body").waitFor(); + + await this.page.locator('[placeholder="Enter table name"]').fill(title); + await this.page.locator('button:has-text("Submit")').click(); + + await expect(this.page).toHaveURL( + `/#/nc/${this.project.id}/table/${title}` + ); + await this.page + .locator('[pw-data="grid-load-spinner"]') + .waitFor({ state: "hidden" }); + } + + async verifyTableExists({ title }: { title: string }) { + await expect( + this.get().locator(`.nc-project-tree-tbl-${title}`) + ).toBeVisible(); + } + + async verifyTableDoesNotExist({ title }: { title: string }) { + await expect( + await this.get().locator(`.nc-project-tree-tbl-${title}`).count() + ).toBe(0); + } + + async deleteTable({ title }: { title: string }) { + await this.get() + .locator(`.nc-project-tree-tbl-${title}`) + .click({ button: "right" }); + await this.page + .locator('div.nc-project-menu-item:has-text("Delete")') + .click(); + await this.page.locator('button:has-text("Yes")').click(); + await this.base.toastWait({ message: "Deleted table successfully" }); + } + + async renameTable({ title, newTitle }: { title: string; newTitle: string }) { + await this.get() + .locator(`.nc-project-tree-tbl-${title}`) + .click({ button: "right" }); + await this.page + .locator('div.nc-project-menu-item:has-text("Rename")') + .click(); + await this.page.locator('[placeholder="Enter table name"]').fill(newTitle); + await this.page.locator('button:has-text("Submit")').click(); + await this.base.toastWait({ message: "Table renamed successfully" }); + } + + async reorderTables({ sourceTable, destinationTable}: { + sourceTable: string; + destinationTable: string; + }) { + + await this.page.locator(`[pw-data="tree-view-table-draggable-handle-${sourceTable}"]`).dragTo( + this.get().locator(`[pw-data="tree-view-table-${destinationTable}"]`), + ); + } +} diff --git a/scripts/playwright/setup/index.ts b/scripts/playwright/setup/index.ts index 4e5546ac1c..eef28ce7ae 100644 --- a/scripts/playwright/setup/index.ts +++ b/scripts/playwright/setup/index.ts @@ -1,6 +1,5 @@ -import { Page, TestInfo } from '@playwright/test'; +import { Page } from '@playwright/test'; import axios from 'axios'; -import { DashboardPage } from '../pages/Dashboard'; const setup = async ({page, typeOnLocalSetup}: {page: Page, typeOnLocalSetup?: string}) => { const type = process.env.CI ? process.env.E2E_TYPE : typeOnLocalSetup; @@ -29,9 +28,6 @@ const setup = async ({page, typeOnLocalSetup}: {page: Page, typeOnLocalSetup?: s await page.goto(`/#/nc/${project.id}/auth`); - const dashboardPage = new DashboardPage(page, project); - await dashboardPage.openTable({title: "Country"}) - return { project, token }; } diff --git a/scripts/playwright/tests/multiSelect.spec.ts b/scripts/playwright/tests/multiSelect.spec.ts index 3488dcf4a7..55640f244b 100644 --- a/scripts/playwright/tests/multiSelect.spec.ts +++ b/scripts/playwright/tests/multiSelect.spec.ts @@ -11,7 +11,7 @@ test.describe('Multi select', () => { test.beforeEach(async ({page}) => { context = await setup({ page }); dashboard = new DashboardPage(page, context.project); - await dashboard.createTable({ title: 'sheet1' }); + await dashboard.treeView.createTable({ title: 'sheet1' }); grid = new GridPage(page); await grid.column.create({ title: 'MultiSelect', type: 'MultiSelect' }); diff --git a/scripts/playwright/tests/singleSelect.spec.ts b/scripts/playwright/tests/singleSelect.spec.ts index 568245ec41..36792a6e3e 100644 --- a/scripts/playwright/tests/singleSelect.spec.ts +++ b/scripts/playwright/tests/singleSelect.spec.ts @@ -11,7 +11,7 @@ test.describe('Single select', () => { test.beforeEach(async ({page}) => { context = await setup({ page }); dashboard = new DashboardPage(page, context.project); - await dashboard.createTable({ title: 'sheet1' }); + await dashboard.treeView.createTable({ title: 'sheet1' }); grid = new GridPage(page); await grid.column.create({ title: 'SingleSelect', type: 'SingleSelect' }); diff --git a/scripts/playwright/tests/tableColumnOperation.spec.ts b/scripts/playwright/tests/tableColumnOperation.spec.ts index 96dffe1ddb..7b2ae4afdc 100644 --- a/scripts/playwright/tests/tableColumnOperation.spec.ts +++ b/scripts/playwright/tests/tableColumnOperation.spec.ts @@ -13,7 +13,7 @@ test.describe('Table Column Operations', () => { dashboard = new DashboardPage(page, context.project); grid = new GridPage(page); - await dashboard.createTable({title: "sheet1"}); + await dashboard.treeView.createTable({title: "sheet1"}); }) test('Create column', async () => { diff --git a/scripts/playwright/tests/tableOperations.spec.ts b/scripts/playwright/tests/tableOperations.spec.ts index c07fad0f65..6dcc5e5eac 100644 --- a/scripts/playwright/tests/tableOperations.spec.ts +++ b/scripts/playwright/tests/tableOperations.spec.ts @@ -15,11 +15,11 @@ test.describe('Table Operations', () => { }) test('Create, and delete table, verify in audit tab, and rename City table', async () => { - await dashboard.createTable({title: "tablex"}); - await dashboard.verifyTableExistsInSidebar({title: "tablex"}); + await dashboard.treeView.createTable({title: "tablex"}); + await dashboard.treeView.verifyTableExists({title: "tablex"}); - await dashboard.deleteTable({title: "tablex"}); - await dashboard.verifyTableDoesNotExistInSidebar({title: "tablex"}); + await dashboard.treeView.deleteTable({title: "tablex"}); + await dashboard.treeView.verifyTableDoesNotExist({title: "tablex"}); await dashboard.gotoSettings(); await settings.selectTab({title: 'Audit'}); @@ -27,8 +27,15 @@ test.describe('Table Operations', () => { await settings.audit.verifyRow({index: 1, opType: 'TABLE', opSubtype: 'CREATED', user: 'user@nocodb.com'}); await settings.close(); - await dashboard.renameTable({title: "City", newTitle: "Cityx"}); - await dashboard.verifyTableExistsInSidebar({title: "Cityx"}); + await dashboard.treeView.renameTable({title: "City", newTitle: "Cityx"}); + await dashboard.treeView.verifyTableExists({title: "Cityx"}); }); + test('Table drag and drop re order', async () => { + await dashboard.treeView.reorderTables({ + sourceTable: "City", + destinationTable: "Country" + }) + }) + });