test: relation columns

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

scripts/playwright/pages/Dashboard/ExpandedForm/index.ts

@@ -1,7 +1,7 @@
 // playwright-dev-page.ts
-import {  Locator } from '@playwright/test';
-import BasePage from '../../Base';
-import { DashboardPage } from '..';
+import { expect, Locator } from "@playwright/test";
+import BasePage from "../../Base";
+import { DashboardPage } from "..";
 
 export class ExpandedFormPage extends BasePage {
   readonly dashboard: DashboardPage;
@@ -10,23 +10,137 @@ export class ExpandedFormPage extends BasePage {
   constructor(dashboard: DashboardPage) {
     super(dashboard.rootPage);
     this.dashboard = dashboard;
-    this.addNewTableButton = this.dashboard.get().locator('.nc-add-new-table');
+    this.addNewTableButton = this.dashboard.get().locator(".nc-add-new-table");
   }
 
   get() {
     return this.dashboard.get().locator(`.nc-drawer-expanded-form`);
   }
 
-  async fillField({columnTitle, value}: {columnTitle: string, value: string}) {
-    const field = this.get().locator(`[pw-data="nc-expand-col-${columnTitle}"]`);
-    await field.locator('input').fill(value);
+  async fillField({
+    columnTitle,
+    value,
+  }: {
+    columnTitle: string;
+    value: string;
+  }) {
+    const field = this.get().locator(
+      `[pw-data="nc-expand-col-${columnTitle}"]`
+    );
+    await field.locator("input").fill(value);
   }
-  
+
   async save() {
     await this.get().locator('button:has-text("Save Row")').click();
-    await this.get().press('Escape');
-    await this.get().waitFor({state: 'hidden'});
-    await this.toastWait({message: `updated successfully.`});
-    await this.get().locator('[pw-data="grid-load-spinner"]').waitFor({ state: 'hidden' });
+    await this.get().press("Escape");
+    await this.get().waitFor({ state: "hidden" });
+    await this.toastWait({ message: `updated successfully.` });
+    await this.get()
+      .locator('[pw-data="grid-load-spinner"]')
+      .waitFor({ state: "hidden" });
+  }
+}
+
+export class ChildList extends BasePage {
+  readonly dashboard: DashboardPage;
+
+  constructor(dashboard: DashboardPage) {
+    super(dashboard.rootPage);
+    this.dashboard = dashboard;
+  }
+
+  async verify({
+    cardTitle,
+  }: {
+    cardTitle: string[];
+  }) {
+    // DOM element validation
+    //    button: Link to 'City'
+    //    icon: reload
+    expect(
+      await this.get().locator(`button:has-text("Link to 'City'")`).isVisible()
+    ).toBeTruthy();
+    expect(
+      await this.get().locator(`[data-cy="nc-child-list-reload"]`).isVisible()
+    ).toBeTruthy();
+
+    // child list body validation (card count, card title)
+    const cardCount = cardTitle.length;
+    await this.get().locator(".ant-modal-content").waitFor();
+    {
+      let childList = this.get().locator(`.ant-card`);
+      const childCards = await childList.count();
+      await expect(childCards).toEqual(cardCount);
+      for (let i = 0; i < cardCount; i++) {
+        expect(await childList.nth(i).textContent()).toContain(cardTitle[i]);
+        // icon: unlink
+        // icon: delete
+        expect(
+          await childList
+            .nth(i)
+            .locator(`[data-cy="nc-child-list-icon-unlink"]`)
+            .isVisible()
+        ).toBeTruthy();
+        expect(
+          await childList
+            .nth(i)
+            .locator(`[data-cy="nc-child-list-icon-delete"]`)
+            .isVisible()
+        ).toBeTruthy();
+      }
+    }
+  }
+
+  async close() {
+    await this.get().locator(`.ant-modal-close-x`).click();
+    await this.get().waitFor({ state: "hidden" });
+  }
+
+  get() {
+    return this.dashboard.get().locator(`.nc-modal-child-list`);
+  }
+}
+
+export class LinkRecord extends BasePage {
+  readonly dashboard: DashboardPage;
+
+  constructor(dashboard: DashboardPage) {
+    super(dashboard.rootPage);
+    this.dashboard = dashboard;
+  }
+
+  async verify(cardTitle?: string[]) {
+    await this.dashboard.get().locator(".nc-modal-link-record").waitFor();
+    let linkRecord = await this.get();
+
+    // DOM element validation
+    // button: Add new record
+    // icon: reload
+    expect(
+      await linkRecord.locator(`button:has-text("Add new record")`).isVisible()
+    ).toBeTruthy();
+    expect(await linkRecord.locator(`.nc-reload`).isVisible()).toBeTruthy();
+    // placeholder: Filter query
+    expect(
+      await linkRecord.locator(`[placeholder="Filter query"]`).isVisible()
+    ).toBeTruthy();
+
+    {
+      let childList = linkRecord.locator(`.ant-card`);
+      const childCards = await childList.count();
+      await expect(childCards).toEqual(cardTitle.length);
+      for (let i = 0; i < cardTitle.length; i++) {
+        expect(await childList.nth(i).textContent()).toContain(cardTitle[i]);
+      }
+    }
+  }
+
+  async close() {
+    await this.get().locator(`.ant-modal-close-x`).click();
+    await this.get().waitFor({ state: "hidden" });
+  }
+
+  get() {
+    return this.dashboard.get().locator(`.nc-modal-link-record`);
   }
-}
+}

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

@@ -25,6 +25,11 @@ export class CellPageObject extends BasePage {
     return this.get({index, columnHeader}).dblclick();
   }
 
+  async inCellExpand({index, columnHeader}: {index: number, columnHeader: string}) {
+    await this.get({index, columnHeader}).hover();
+    await this.get({index, columnHeader}).locator('.nc-action-icon >> nth=0').click();
+  }
+
   async verify({index, columnHeader, value}: {index: number, columnHeader: string, value: string | string[]}) {
     const _verify = async (text) => {
       await expect.poll(async () => {
@@ -41,4 +46,21 @@ export class CellPageObject extends BasePage {
       await _verify(value);
     }
   }
+
+  // verifyVirtualCell
+  //  : virtual relational cell- HM, BT, MM
+  //  : verify link count & cell value
+  //
+  async verifyVirtualCell({index, columnHeader, value}: {index: number, columnHeader: string, value: string[]}) {
+    const count = value.length;
+    const cell = this.get({index, columnHeader});
+    const chips = cell.locator(".chips > .chip");
+    const chipCount = await chips.count();
+
+    // verify chip count & contents
+    expect(chipCount).toEqual(count);
+    for (let i = 0; i < chipCount; ++i) {
+      expect(await chips.nth(i).textContent()).toBe(value[i]);
+    }
+  }
 }

scripts/playwright/pages/Dashboard/TreeView.ts

@@ -20,6 +20,8 @@ export class TreeViewPage extends BasePage {
     await this.get().locator(`.nc-project-tree-tbl-${title}`).focus();
   }
 
+  // assumption: first view rendered is always GRID
+  //
   async openTable({ title }: { title: string }) {
     await this.get().locator(`.nc-project-tree-tbl-${title}`).click();
 
@@ -30,6 +32,7 @@ export class TreeViewPage extends BasePage {
       .get()
       .locator('[pw-data="grid-load-spinner"]')
       .waitFor({ state: "hidden" });
+    await this.dashboard.get().locator('.nc-grid-add-new-cell').waitFor();
   }
 
   async createTable({ title }: { title: string }) {
@@ -46,6 +49,7 @@ export class TreeViewPage extends BasePage {
     await this.dashboard.get()
       .locator('[pw-data="grid-load-spinner"]')
       .waitFor({ state: "hidden" });
+    await this.dashboard.get().locator('.nc-grid-add-new-cell').waitFor();
   }
 
   async verifyTable({ title, index }: { title: string; index?: number }) {

scripts/playwright/pages/Dashboard/index.ts

@@ -2,7 +2,7 @@
 import { Locator, Page, expect } from "@playwright/test";
 import BasePage from "../Base";
 import { GridPage } from "./Grid";
-import { ExpandedFormPage } from "./ExpandedForm";
+import { ExpandedFormPage, ChildList, LinkRecord } from "./ExpandedForm";
 import { TreeViewPage } from "./TreeView";
 import { SettingsPage } from "./Settings";
 import { ViewSidebarPage } from "./ViewSidebar";
@@ -14,6 +14,8 @@ export class DashboardPage extends BasePage {
   readonly treeView: TreeViewPage;
   readonly grid: GridPage;
   readonly expandedForm: ExpandedFormPage;
+  readonly childList: ChildList;
+  readonly linkRecord: LinkRecord;
   readonly settings: SettingsPage;
   readonly viewSidebar: ViewSidebarPage;
 
@@ -25,6 +27,8 @@ export class DashboardPage extends BasePage {
     this.treeView = new TreeViewPage(this, project);
     this.grid = new GridPage(this);
     this.expandedForm = new ExpandedFormPage(this);
+    this.childList = new ChildList(this);
+    this.linkRecord = new LinkRecord(this);
     this.settings = new SettingsPage(this);
     this.viewSidebar = new ViewSidebarPage(this);
   }

scripts/playwright/tests/virtualColumnRelational.spec.ts

@@ -11,25 +11,56 @@ test.describe("Relational Columns", () => {
     dashboard = new DashboardPage(page, context.project);
   });
 
-  test("Belongs To", async () => {
+  test("Relational columns: HM, BT, MM", async () => {
     // close 'Team & Auth' tab
     await dashboard.closeTab({ title: "Team & Auth" });
-    await dashboard.treeView.openTable({ title: "Country" });
-
-    const firstCell = await dashboard.grid.cell.get({
-      index: 1,
-      columnHeader: "City List",
-    });
 
-    // expect(await cell.locator(".chip").count()).toBe(3);
-    // expect(await cell.locator(".chip").nth(0)).toHaveText("Kabul");
+    const cityList = [["Kabul"], ["Batna", "Bchar", "Skikda"]]
+    await dashboard.treeView.openTable({ title: "Country" });
+    for(let i = 0; i < cityList.length; i++) {
+      await dashboard.grid.cell.verifyVirtualCell({
+        index: i,
+        columnHeader: "City List",
+        value: cityList[i],
+      });
+    }
 
-    await dashboard.grid.cell.verify({
+    // click on expand icon, open child list
+    await dashboard.grid.cell.inCellExpand({
       index: 0,
       columnHeader: "City List",
-      value: ["Kabul"],
+    });
+    await dashboard.childList.verify({
+      cardTitle: ["Kabul"],
     });
 
+    // open link record modal
+    //
+    await dashboard.childList.get().locator(`button:has-text("Link to 'City'")`).click();
+    await dashboard.linkRecord.verify([
+      "A Corua (La Corua)",
+      "Abha",
+      "Abu Dhabi",
+      "Acua",
+      "Adana",
+      "Addis Abeba",
+      "Aden",
+      "Adoni",
+      "Ahmadnagar",
+      "Akishima",
+    ]);
+    await dashboard.linkRecord.close();
+    await dashboard.closeTab({ title: "Country" });
 
+    await dashboard.treeView.openTable({ title: "City" });
+    const countryList = [["Spain"], ["Saudi Arabia"]]
+    for(let i = 0; i < countryList.length; i++) {
+      await dashboard.grid.cell.verifyVirtualCell({
+        index: i,
+        columnHeader: "Country",
+        value: countryList[i],
+      });
+    }
+    await dashboard.closeTab({ title: "City" });
   });
 });