test: expanded form / grid

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

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

@@ -1,16 +1,19 @@
 // playwright-dev-page.ts
-import { Locator } from "@playwright/test";
+import { expect, Locator } from "@playwright/test";
 import BasePage from "../../Base";
 import { DashboardPage } from "..";
+// import clipboard from "clipboardy";
 
 export class ExpandedFormPage extends BasePage {
   readonly dashboard: DashboardPage;
   readonly addNewTableButton: Locator;
+  readonly copyUrlButton: Locator;
 
   constructor(dashboard: DashboardPage) {
     super(dashboard.rootPage);
     this.dashboard = dashboard;
     this.addNewTableButton = this.dashboard.get().locator(".nc-add-new-table");
+    this.copyUrlButton = this.dashboard.get().locator(".nc-copy-row-url");
   }
 
   get() {
@@ -55,4 +58,39 @@ export class ExpandedFormPage extends BasePage {
       .locator('[pw-data="grid-load-spinner"]')
       .waitFor({ state: "hidden" });
   }
+
+  async verify({ header, url }: { header: string; url: string }) {
+    expect(
+      await this.get().locator(`.nc-expanded-form-header`).last().innerText()
+    ).toContain(header);
+    expect(await this.rootPage.url()).toContain(url);
+  }
+
+  async close() {
+    await this.rootPage.keyboard.press("Escape");
+  }
+
+  async cancel() {
+    await this.get().locator('button:has-text("Cancel")').last().click();
+  }
+
+  // async getClipboardText() {
+  //   const clipboard = (await import("clipboardy")).default;
+  //   let clipText = await clipboard.read();
+  //   console.log(clipText);
+  //   return clipText;
+  // }
+
+  async openChildCard(param: { column: string; title: string }) {
+    let childList = await this.get().locator(
+      `[pw-data="nc-expand-col-${param.column}"]`
+    );
+    await childList.locator(`.ant-card:has-text("${param.title}")`).click();
+  }
+
+  async count() {
+    return await this.rootPage
+      .locator(`.nc-drawer-expanded-form .ant-drawer-content`)
+      .count();
+  }
 }

scripts/playwright/tests/expandedFormUrl.spec.ts

@@ -0,0 +1,92 @@
+import { expect, test } from "@playwright/test";
+import { DashboardPage } from "../pages/Dashboard";
+import setup from "../setup";
+
+test.describe("Expanded form URL", () => {
+  let dashboard: DashboardPage;
+  let context: any;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page });
+    dashboard = new DashboardPage(page, context.project);
+  });
+
+  test("Grid", async () => {
+    // close 'Team & Auth' tab
+    await dashboard.closeTab({ title: "Team & Auth" });
+    await dashboard.treeView.openTable({ title: "Country" });
+
+    await dashboard.viewSidebar.createGridView({ title: "CountryGrid" });
+
+    // expand row & verify URL
+    await dashboard.grid.openExpandedRow({ index: 0 });
+    await dashboard.expandedForm.verify({
+      header: "Afghanistan",
+      url: "rowId=1",
+    });
+
+    // // verify copied URL in clipboard
+    // await dashboard.expandedForm.copyUrlButton.click();
+    // const expandedFormUrl = await dashboard.expandedForm.getClipboardText();
+    // expect(expandedFormUrl).toContain("rowId=1");
+
+    // access a new rowID using URL
+    let url = await dashboard.rootPage.url();
+    await dashboard.expandedForm.close();
+    await dashboard.rootPage.goto(
+      "/" + url.split("/").slice(3).join("/").split("?")[0] + "?rowId=2"
+    );
+    await dashboard.expandedForm.verify({
+      header: "Algeria",
+      url: "rowId=2",
+    });
+    await dashboard.expandedForm.close();
+
+    // visit invalid rowID
+    await dashboard.rootPage.goto(
+      "/" + url.split("/").slice(3).join("/").split("?")[0] + "?rowId=999"
+    );
+    await dashboard.toastWait({ message: "Record not found" });
+    // ensure grid is displayed after invalid URL access
+    await dashboard.grid.verifyRowCount({ count: 25 });
+
+    // Nested URL
+    await dashboard.rootPage.goto(
+      "/" + url.split("/").slice(3).join("/").split("?")[0] + "?rowId=1"
+    );
+    await dashboard.expandedForm.verify({
+      header: "Afghanistan",
+      url: "rowId=1",
+    });
+    await dashboard.expandedForm.openChildCard({
+      column: "City List",
+      title: "Kabul",
+    });
+    await dashboard.rootPage.waitForTimeout(1000);
+    await dashboard.expandedForm.verify({
+      header: "Kabul",
+      url: "rowId=1",
+    });
+    let expandFormCount = await dashboard.expandedForm.count();
+    expect(expandFormCount).toBe(2);
+
+    // close child card
+    await dashboard.expandedForm.cancel();
+    await dashboard.expandedForm.verify({
+      header: "Afghanistan",
+      url: "rowId=1",
+    });
+    await dashboard.expandedForm.cancel();
+  });
+
+  test.skip("Gallery", async () => {
+    // close 'Team & Auth' tab
+    await dashboard.closeTab({ title: "Team & Auth" });
+    await dashboard.treeView.openTable({ title: "Country" });
+
+    await dashboard.viewSidebar.createGalleryView({ title: "CountryGallery" });
+    await dashboard.grid.toolbar.fields.toggle({ title: "City List" });
+
+    // expand row & verify URL
+  });
+});