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,15 +11,30 @@ test.describe("Expanded form URL", () => {
     dashboard = new DashboardPage(page, context.project);
   });
 
-  test("Grid", async () => {
+  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" });
+      }
+
+      if (viewType === "grid") {
+        await dashboard.viewSidebar.createGridView({ title: "CountryExpand" });
+      } else if (viewType === "gallery") {
+        await dashboard.viewSidebar.createGalleryView({
+          title: "CountryExpand",
+        });
+      }
 
       // expand row & verify URL
-    await dashboard.grid.openExpandedRow({ index: 0 });
+      await viewObj.openExpandedRow({ index: 0 });
       await dashboard.expandedForm.verify({
         header: "Afghanistan",
         url: "rowId=1",
@@ -48,7 +63,7 @@ test.describe("Expanded form URL", () => {
       );
       await dashboard.toastWait({ message: "Record not found" });
       // ensure grid is displayed after invalid URL access
-    await dashboard.grid.verifyRowCount({ count: 25 });
+      await viewObj.verifyRowCount({ count: 25 });
 
       // Nested URL
       await dashboard.rootPage.goto(
@@ -78,15 +93,8 @@ test.describe("Expanded form URL", () => {
       });
       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
-  });
+  viewTest("grid");
+  // viewTest("gallery");
 });