test(pw): closeTab delay, relational column verification WIP

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

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

@@ -14,7 +14,7 @@ export class CellPageObject extends BasePage {
   }
 
   get({index, columnHeader}: {index: number, columnHeader: string}): Locator {
-    return this.grid.get().locator(`td[data-pw=cell-${columnHeader}-${index}]`);
+    return this.grid.get().locator(`td[data-pw="cell-${columnHeader}-${index}"]`);
   }
 
   async click({index, columnHeader}: {index: number, columnHeader: string}) {

scripts/playwright/pages/Dashboard/TreeView.ts

@@ -13,7 +13,7 @@ export class TreeViewPage extends BasePage {
   }
 
   get() {
-    return this.dashboard.get().locator(".nc-treeview-container");;
+    return this.dashboard.get().locator(".nc-treeview-container");
   }
 
   async focusTable({ title }: { title: string }) {
@@ -22,6 +22,14 @@ export class TreeViewPage extends BasePage {
 
   async openTable({ title }: { title: string }) {
     await this.get().locator(`.nc-project-tree-tbl-${title}`).click();
+
+    await expect(this.rootPage).toHaveURL(
+      `/#/nc/${this.project.id}/table/${title}`
+    );
+    await this.dashboard
+      .get()
+      .locator('[pw-data="grid-load-spinner"]')
+      .waitFor({ state: "hidden" });
   }
 
   async createTable({ title }: { title: string }) {

scripts/playwright/pages/Dashboard/index.ts

@@ -30,7 +30,7 @@ export class DashboardPage extends BasePage {
   }
 
   get() {
-    return this.rootPage.locator('html');
+    return this.rootPage.locator("html");
   }
 
   async goto() {
@@ -49,4 +49,13 @@ export class DashboardPage extends BasePage {
       .textContent()
       .then((text) => expect(text).toContain(title));
   }
+
+  async closeTab({ title }: { title: string }) {
+    let tab = await this.tabBar.locator(`.ant-tabs-tab:has-text("${title}")`);
+    await tab.locator("button.ant-tabs-tab-remove").click();
+
+    // fix me!
+    // await tab.waitFor({ state: "detached" });
+    await this.rootPage.waitForTimeout(2000);
+  }
 }

scripts/playwright/tests/virtualColumnRelational.spec.ts

@@ -0,0 +1,36 @@
+import { test } from "@playwright/test";
+import { expect } from "@playwright/test";
+import { DashboardPage } from "../pages/Dashboard";
+import { SettingsPage } from "../pages/Dashboard/Settings";
+import setup from "../setup";
+
+test.describe.only("Relational Columns", () => {
+  let dashboard: DashboardPage, settings: SettingsPage;
+  let context: any;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page });
+    dashboard = new DashboardPage(page, context.project);
+    settings = new SettingsPage(page);
+  });
+
+  test("Belongs To", async () => {
+    // close 'Team & Auth' tab
+    await dashboard.closeTab({ title: "Team & Auth" });
+    await dashboard.treeView.openTable({ title: "Country" });
+
+    const cell = await dashboard.grid.cell.get({
+      index: 0,
+      columnHeader: "City List",
+    });
+
+    // expect(await cell.locator(".chip").count()).toBe(3);
+    // expect(await cell.locator(".chip").nth(0)).toHaveText("Kabul");
+
+    await dashboard.grid.cell.verify({
+      index: 0,
+      columnHeader: "City List",
+      value: "Kabul",
+    });
+  });
+});