feat(testing): Fixed gallery expandedFormUrl

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

@@ -33,18 +33,6 @@ export class GalleryPage extends BasePage {
     return;
   }
 
-  // kludge: move toolbar outside grid scope
-  async fields({ title }: { title: string }) {
-    await this.rootPage.locator(`.nc-fields-menu-btn`).click();
-    await this.rootPage.waitForTimeout(1000);
-    await this.rootPage
-      .locator(`[pw-data="nc-fields-menu-${title}"]`)
-      .locator('input[type="checkbox"]')
-      .click();
-    await this.rootPage.waitForTimeout(1000);
-    await this.rootPage.locator(`.nc-fields-menu-btn`).click();
-  }
-
   // todo: Wait for render to complete
   async waitLoading() {
     await this.rootPage.waitForTimeout(1000);

scripts/playwright/tests/expandedFormUrl.spec.ts

@@ -1,5 +1,7 @@
 import { expect, test } from "@playwright/test";
 import { DashboardPage } from "../pages/Dashboard";
+import { GalleryPage } from "../pages/Dashboard/Gallery";
+import { GridPage } from "../pages/Dashboard/Grid";
 import setup from "../setup";
 
 test.describe("Expanded form URL", () => {
@@ -11,90 +13,94 @@ test.describe("Expanded form URL", () => {
     dashboard = new DashboardPage(page, context.project);
   });
 
-  function viewTest(viewType: string) {
-    test(viewType, async () => {
-      // close 'Team & Auth' tab
-      await dashboard.closeTab({ title: "Team & Auth" });
-      await dashboard.treeView.openTable({ title: "Country" });
+  async function viewTest(viewType: string) {
+    // close 'Team & Auth' tab
+    await dashboard.closeTab({ title: "Team & Auth" });
+    await dashboard.treeView.openTable({ title: "Country" });
 
-      let viewObj;
-      if (viewType === "grid") {
-        viewObj = dashboard.grid;
-      } else if (viewType === "gallery") {
-        viewObj = dashboard.gallery;
-        await viewObj.fields({ title: "City List" });
-      }
+    let viewObj: GridPage | GalleryPage = dashboard.grid;
+    if (viewType === "grid") {
+      viewObj = dashboard.grid;
+    } else if (viewType === "gallery") {
+      viewObj = dashboard.gallery;
+    }
 
-      if (viewType === "grid") {
-        await dashboard.viewSidebar.createGridView({ title: "CountryExpand" });
-      } else if (viewType === "gallery") {
-        await dashboard.viewSidebar.createGalleryView({
-          title: "CountryExpand",
-        });
-      }
-
-      // expand row & verify URL
-      await viewObj.openExpandedRow({ index: 0 });
-      await dashboard.expandedForm.verify({
-        header: "Afghanistan",
-        url: "rowId=1",
+    if (viewType === "grid") {
+      await dashboard.viewSidebar.createGridView({ title: "CountryExpand" });
+    } else if (viewType === "gallery") {
+      await dashboard.viewSidebar.createGalleryView({
+        title: "CountryExpand",
       });
+      await viewObj.toolbar.clickFields();
+      await viewObj.toolbar.fields.click({ title: "City List" });
+    }
 
-      // // verify copied URL in clipboard
-      // await dashboard.expandedForm.copyUrlButton.click();
-      // const expandedFormUrl = await dashboard.expandedForm.getClipboardText();
-      // expect(expandedFormUrl).toContain("rowId=1");
+    // expand row & verify URL
+    await viewObj.openExpandedRow({ index: 0 });
+    await dashboard.expandedForm.verify({
+      header: "Afghanistan",
+      url: "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();
+    // // verify copied URL in clipboard
+    // await dashboard.expandedForm.copyUrlButton.click();
+    // const expandedFormUrl = await dashboard.expandedForm.getClipboardText();
+    // expect(expandedFormUrl).toContain("rowId=1");
 
-      // 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 viewObj.verifyRowCount({ count: 25 });
+    // 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();
 
-      // 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);
+    // 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 viewObj.verifyRowCount({ count: 25 });
 
-      // close child card
-      await dashboard.expandedForm.cancel();
-      await dashboard.expandedForm.verify({
-        header: "Afghanistan",
-        url: "rowId=1",
-      });
-      await dashboard.expandedForm.cancel();
+    // 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();
   }
 
-  viewTest("grid");
-  // viewTest("gallery");
+  test("Grid", async () => {
+    await viewTest("grid");
+  });
+
+  test("Gallery", async () => {
+    await viewTest("gallery");
+  });
 });