test: gallery framework

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

packages/nc-gui/components/smartsheet/Gallery.vue

@@ -163,13 +163,14 @@ watch(view, async (nextView) => {
 </script>
 
 <template>
-  <div class="flex flex-col h-full w-full overflow-auto nc-gallery">
+  <div class="flex flex-col h-full w-full overflow-auto nc-gallery" data-pw="nc-gallery-wrapper">
     <div class="nc-gallery-container grid gap-2 my-4 px-3">
       <div v-for="record in data" :key="`record-${record.row.id}`">
         <LazySmartsheetRow :row="record">
           <a-card
             hoverable
             class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]"
+            :data-pw="`nc-gallery-card-${record.row.id}`"
             @click="expandFormClick($event, record)"
           >
             <template v-if="galleryData?.fk_cover_image_col_id" #cover>

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

@@ -0,0 +1,45 @@
+// playwright-dev-page.ts
+import { Locator, expect } from "@playwright/test";
+import { DashboardPage } from "..";
+import BasePage from "../../Base";
+
+export class GalleryPage extends BasePage {
+  readonly dashboard: DashboardPage;
+  readonly dashboardPage: DashboardPage;
+
+  constructor(dashboardPage: DashboardPage) {
+    super(dashboardPage.rootPage);
+    this.dashboard = dashboardPage;
+  }
+
+  get() {
+    return this.dashboard.get().locator('[data-pw="nc-gallery-wrapper"]');
+  }
+
+  card(index: number) {
+    return this.get().locator(`.ant-card`).nth(index);
+  }
+
+  async openExpandedRow({ index }: { index: number }) {
+    await this.card(index).click();
+    await (
+      await this.rootPage.locator(".ant-drawer-body").elementHandle()
+    )?.waitForElementState("stable");
+  }
+
+  async verifyRowCount(param: { count: number }) {
+    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="grid-fields-menu-${title}"]`)
+      .locator('input[type="checkbox"]')
+      .click();
+    await this.rootPage.waitForTimeout(1000);
+    await this.rootPage.locator(`.nc-fields-menu-btn`).click();
+  }
+}

scripts/playwright/pages/Dashboard/index.ts

@@ -9,6 +9,7 @@ import { LinkRecord } from "./Grid/Column/LTAR/LinkRecord";
 import { TreeViewPage } from "./TreeView";
 import { SettingsPage } from "./Settings";
 import { ViewSidebarPage } from "./ViewSidebar";
+import { GalleryPage } from "./Gallery";
 
 export class DashboardPage extends BasePage {
   readonly project: any;
@@ -16,6 +17,7 @@ export class DashboardPage extends BasePage {
   readonly tabBar: Locator;
   readonly treeView: TreeViewPage;
   readonly grid: GridPage;
+  readonly gallery: GalleryPage;
   readonly form: FormPage;
   readonly expandedForm: ExpandedFormPage;
   readonly childList: ChildList;
@@ -30,6 +32,7 @@ export class DashboardPage extends BasePage {
     this.tabBar = rootPage.locator(".nc-tab-bar");
     this.treeView = new TreeViewPage(this, project);
     this.grid = new GridPage(this);
+    this.gallery = new GalleryPage(this);
     this.form = new FormPage(this);
     this.expandedForm = new ExpandedFormPage(this);
     this.childList = new ChildList(this);

scripts/playwright/tests/expandedFormUrl.spec.ts

@@ -11,82 +11,90 @@ test.describe("Expanded form URL", () => {
     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" });
+  function viewTest(viewType: string) {
+    test(viewType, async () => {
+      // close 'Team & Auth' tab
+      await dashboard.closeTab({ title: "Team & Auth" });
+      await dashboard.treeView.openTable({ title: "Country" });
 
-    await dashboard.viewSidebar.createGridView({ title: "CountryGrid" });
+      let viewObj;
+      if (viewType === "grid") {
+        viewObj = dashboard.grid;
+      } else if (viewType === "gallery") {
+        viewObj = dashboard.gallery;
+        await viewObj.fields({ title: "City List" });
+      }
 
-    // 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");
+      if (viewType === "grid") {
+        await dashboard.viewSidebar.createGridView({ title: "CountryExpand" });
+      } else if (viewType === "gallery") {
+        await dashboard.viewSidebar.createGalleryView({
+          title: "CountryExpand",
+        });
+      }
 
-    // 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();
+      // expand row & verify URL
+      await viewObj.openExpandedRow({ index: 0 });
+      await dashboard.expandedForm.verify({
+        header: "Afghanistan",
+        url: "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 dashboard.grid.verifyRowCount({ count: 25 });
+      // // verify copied URL in clipboard
+      // await dashboard.expandedForm.copyUrlButton.click();
+      // const expandedFormUrl = await dashboard.expandedForm.getClipboardText();
+      // expect(expandedFormUrl).toContain("rowId=1");
 
-    // 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);
+      // 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();
 
-    // close child card
-    await dashboard.expandedForm.cancel();
-    await dashboard.expandedForm.verify({
-      header: "Afghanistan",
-      url: "rowId=1",
-    });
-    await dashboard.expandedForm.cancel();
-  });
+      // 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 });
 
-  test.skip("Gallery", async () => {
-    // close 'Team & Auth' tab
-    await dashboard.closeTab({ title: "Team & Auth" });
-    await dashboard.treeView.openTable({ title: "Country" });
+      // 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);
 
-    await dashboard.viewSidebar.createGalleryView({ title: "CountryGallery" });
-    await dashboard.grid.toolbar.fields.toggle({ title: "City List" });
+      // close child card
+      await dashboard.expandedForm.cancel();
+      await dashboard.expandedForm.verify({
+        header: "Afghanistan",
+        url: "rowId=1",
+      });
+      await dashboard.expandedForm.cancel();
+    });
+  }
 
-    // expand row & verify URL
-  });
+  viewTest("grid");
+  // viewTest("gallery");
 });