test: m2m relation verification

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

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

@@ -51,14 +51,22 @@ export class ChildList extends BasePage {
 
   async verify({
     cardTitle,
+    linkField,
   }: {
     cardTitle: string[];
+    linkField: string;
   }) {
     // DOM element validation
+    //    title: Child list
     //    button: Link to 'City'
     //    icon: reload
+    expect(await this.get().locator(`.ant-modal-title`).innerText()).toBe(
+      `Child list`
+    );
     expect(
-      await this.get().locator(`button:has-text("Link to 'City'")`).isVisible()
+      await this.get()
+        .locator(`button:has-text("Link to '${linkField}'")`)
+        .isVisible()
     ).toBeTruthy();
     expect(
       await this.get().locator(`[data-cy="nc-child-list-reload"]`).isVisible()
@@ -114,8 +122,12 @@ export class LinkRecord extends BasePage {
     let linkRecord = await this.get();
 
     // DOM element validation
-    // button: Add new record
+    //    title: Link Record
-    // icon: reload
+    //    button: Add new record
+    //    icon: reload
+    expect(await this.get().locator(`.ant-modal-title`).innerText()).toBe(
+      `Link record`
+    );
     expect(
       await linkRecord.locator(`button:has-text("Add new record")`).isVisible()
     ).toBeTruthy();

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

@@ -13,33 +13,74 @@ export class CellPageObject extends BasePage {
     this.selectOption = new SelectOptionCellPageObject(this);
   }
 
-  get({index, columnHeader}: {index: number, columnHeader: string}): Locator {
+  get({
-    return this.grid.get().locator(`td[data-pw="cell-${columnHeader}-${index}"]`);
+    index,
+    columnHeader,
+  }: {
+    index: number;
+    columnHeader: string;
+  }): Locator {
+    return this.grid
+      .get()
+      .locator(`td[data-pw="cell-${columnHeader}-${index}"]`);
   }
 
-  async click({index, columnHeader}: {index: number, columnHeader: string}) {
+  async click({
-    return this.get({index, columnHeader}).click();
+    index,
+    columnHeader,
+  }: {
+    index: number;
+    columnHeader: string;
+  }) {
+    return this.get({ index, columnHeader }).click();
   }
 
-  async dblclick({index, columnHeader}: {index: number, columnHeader: string}) {
+  async dblclick({
-    return this.get({index, columnHeader}).dblclick();
+    index,
+    columnHeader,
+  }: {
+    index: number;
+    columnHeader: string;
+  }) {
+    return this.get({ index, columnHeader }).dblclick();
   }
 
-  async inCellExpand({index, columnHeader}: {index: number, columnHeader: string}) {
+  async inCellExpand({
-    await this.get({index, columnHeader}).hover();
+    index,
-    await this.get({index, columnHeader}).locator('.nc-action-icon >> nth=0').click();
+    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[]}) {
+  async verify({
+    index,
+    columnHeader,
+    value,
+  }: {
+    index: number;
+    columnHeader: string;
+    value: string | string[];
+  }) {
     const _verify = async (text) => {
-      await expect.poll(async () => {
+      await expect
-        const innerTexts = await this.get({index, columnHeader}).allInnerTexts()
+        .poll(async () => {
-        return typeof(innerTexts) === "string" ? [innerTexts]: innerTexts;
+          const innerTexts = await this.get({
-      }).toContain(text);
+            index,
-    }
+            columnHeader,
+          }).allInnerTexts();
+          return typeof innerTexts === "string" ? [innerTexts] : innerTexts;
+        })
+        .toContain(text);
+    };
 
-    if(Array.isArray(value)) {
+    if (Array.isArray(value)) {
-      for(const text of value) {
+      for (const text of value) {
         await _verify(text);
       }
     } else {
@@ -51,16 +92,28 @@ export class CellPageObject extends BasePage {
   //  : virtual relational cell- HM, BT, MM
   //  : verify link count & cell value
   //
-  async verifyVirtualCell({index, columnHeader, value}: {index: number, columnHeader: string, value: string[]}) {
+  async verifyVirtualCell({
-    const count = value.length;
+    index,
-    const cell = this.get({index, columnHeader});
+    columnHeader,
+    count,
+    value,
+  }: {
+    index: number;
+    columnHeader: string;
+    count: number;
+    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) {
+
+    // verify only the elements that are passed in
+    for (let i = 0; i < value.length; ++i) {
       expect(await chips.nth(i).textContent()).toBe(value[i]);
     }
   }
-}
+}

scripts/playwright/tests/virtualColumnRelational.spec.ts

@@ -15,12 +15,16 @@ test.describe("Relational Columns", () => {
     // close 'Team & Auth' tab
     await dashboard.closeTab({ title: "Team & Auth" });
 
-    const cityList = [["Kabul"], ["Batna", "Bchar", "Skikda"]]
+    ///////////// Has many
+    //
+
+    const cityList = [["Kabul"], ["Batna", "Bchar", "Skikda"]];
     await dashboard.treeView.openTable({ title: "Country" });
-    for(let i = 0; i < cityList.length; i++) {
+    for (let i = 0; i < cityList.length; i++) {
       await dashboard.grid.cell.verifyVirtualCell({
         index: i,
         columnHeader: "City List",
+        count: cityList[i].length,
         value: cityList[i],
       });
     }
@@ -32,11 +36,15 @@ test.describe("Relational Columns", () => {
     });
     await dashboard.childList.verify({
       cardTitle: ["Kabul"],
+      linkField: "City",
     });
 
     // open link record modal
     //
-    await dashboard.childList.get().locator(`button:has-text("Link to 'City'")`).click();
+    await dashboard.childList
+      .get()
+      .locator(`button:has-text("Link to 'City'")`)
+      .click();
     await dashboard.linkRecord.verify([
       "A Corua (La Corua)",
       "Abha",
@@ -52,15 +60,76 @@ test.describe("Relational Columns", () => {
     await dashboard.linkRecord.close();
     await dashboard.closeTab({ title: "Country" });
 
+    ///////////// Belongs to
+    //
+
     await dashboard.treeView.openTable({ title: "City" });
-    const countryList = [["Spain"], ["Saudi Arabia"]]
+    const countryList = [["Spain"], ["Saudi Arabia"]];
-    for(let i = 0; i < countryList.length; i++) {
+    for (let i = 0; i < countryList.length; i++) {
       await dashboard.grid.cell.verifyVirtualCell({
         index: i,
         columnHeader: "Country",
+        count: countryList[i].length,
         value: countryList[i],
       });
     }
     await dashboard.closeTab({ title: "City" });
+
+    ///////////// Many to many
+    //
+    await dashboard.treeView.openTable({ title: "Actor" });
+    const filmList = [
+      [
+        "ACADEMY DINOSAUR",
+        "ANACONDA CONFESSIONS",
+        "ANGELS LIFE",
+        "BULWORTH COMMANDMENTS",
+        "CHEAPER CLYDE",
+        "COLOR PHILADELPHIA",
+        "ELEPHANT TROJAN",
+        "GLEAMING JAWBREAKER",
+        "HUMAN GRAFFITI",
+        "KING EVOLUTION",
+      ],
+    ];
+    for (let i = 0; i < filmList.length; i++) {
+      await dashboard.grid.cell.verifyVirtualCell({
+        index: i,
+        columnHeader: "Film List",
+        // Count hardwired to avoid verifying all 19 entries
+        count: 19,
+        value: filmList[i],
+      });
+    }
+    // click on expand icon, open child list
+    await dashboard.grid.cell.inCellExpand({
+      index: 0,
+      columnHeader: "Film List",
+    });
+    await dashboard.childList.verify({
+      cardTitle: filmList[0],
+      linkField: "Film",
+    });
+
+    // open link record modal
+    //
+    await dashboard.childList
+      .get()
+      .locator(`button:has-text("Link to 'Film'")`)
+      .click();
+    await dashboard.linkRecord.verify([
+      "ACE GOLDFINGER",
+      "ADAPTATION HOLES",
+      "AFFAIR PREJUDICE",
+      "AFRICAN EGG",
+      "AGENT TRUMAN",
+      "AIRPLANE SIERRA",
+      "AIRPORT POLLOCK",
+      "ALABAMA DEVIL",
+      "ALADDIN CALENDAR",
+      "ALAMO VIDEOTAPE",
+    ]);
+    await dashboard.linkRecord.close();
+    await dashboard.closeTab({ title: "Actor" });
   });
 });