feat(testing): Minor cleanup, added treeview page object and added basic test for tree view

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)"
               >
                 <GeneralTooltip class="pl-5 pr-3 py-2" modifier-key="Alt">
                   <template #title>{{ table.table_name }}</template>
                   <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
-                    <div class="flex w-auto">
+                    <div class="flex w-auto" :pw-data="`tree-view-table-draggable-handle-${table.title}`">
                       <MdiDragVertical
                         v-if="isUIAllowed('treeview-drag-n-drop')"
                         :class="`nc-child-draggable-icon-${table.title}`"

scripts/playwright/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "npx playwright test --workers=6",
+    "test": "npx playwright test --workers=4",
     "test-debug": "PWDEBUG=console npx playwright test -c playwright.config.ts test --headed --project=chromium --repeat-each 1 --retries 0 --timeout 0 --workers 1 --max-failures=1",
     "ci-test-mysql": "E2E_TYPE=mysql npx playwright test --workers=2"
   },

scripts/playwright/pages/Dashboard.ts

@@ -1,7 +1,8 @@
 // playwright-dev-page.ts
-import { expect, Locator, Page } from "@playwright/test";
+import { Locator, Page, expect } from "@playwright/test";
 import { BasePage } from "./Base";
 import { ExpandedFormPage } from "./ExpandedForm";
+import { TreeViewPage } from "./TreeView";
 
 export class DashboardPage {
   readonly project: any;
@@ -10,6 +11,7 @@ export class DashboardPage {
   readonly tabBar: Locator;
   readonly base: BasePage;
   readonly expandedForm: ExpandedFormPage;
+  readonly treeView: TreeViewPage;
 
   constructor(page: Page, project: any) {
     this.page = page;
@@ -18,6 +20,7 @@ export class DashboardPage {
     this.tablesSideBar = page.locator(".nc-treeview-container");
     this.tabBar = page.locator(".nc-tab-bar");
     this.expandedForm = new ExpandedFormPage(page);
+    this.treeView = new TreeViewPage(page, project);
   }
 
   async goto() {
@@ -31,61 +34,9 @@ export class DashboardPage {
       .click();
   }
 
-  async openTable({ title }: { title: string }) {
-    await this.tablesSideBar.locator(`.nc-project-tree-tbl-${title}`).click();
+  async verifyTableIsInTabBar({ title }: { title: string }) {
     await this.tabBar
       .textContent()
       .then((text) => 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" });
-  }
 }

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}"]`),
+    );
+  }
+}

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

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

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

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 () => {

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"
+    })
+  })
+
 });