test: kanban part-1

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

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

@@ -309,7 +309,7 @@ watch(view, async (nextView) => {
 </script>
 
 <template>
-  <div class="flex h-full bg-white px-2">
+  <div class="flex h-full bg-white px-2" data-pw="nc-kanban-wrapper">
     <div ref="kanbanContainerRef" class="nc-kanban-container flex my-4 px-3 overflow-x-scroll overflow-y-hidden">
       <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']" overlay-class-name="nc-dropdown-kanban-context-menu">
         <!-- Draggable Stack -->

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

@@ -0,0 +1,112 @@
+// playwright-dev-page.ts
+import { Locator, expect } from "@playwright/test";
+import { DashboardPage } from "..";
+import BasePage from "../../Base";
+import { ToolbarPage } from "../common/Toolbar";
+
+export class KanbanPage extends BasePage {
+  readonly dashboard: DashboardPage;
+  readonly toolbar: ToolbarPage;
+
+  constructor(dashboard: DashboardPage) {
+    super(dashboard.rootPage);
+    this.dashboard = dashboard;
+    this.toolbar = new ToolbarPage(this);
+  }
+
+  get() {
+    return this.dashboard.get().locator('[data-pw="nc-kanban-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 addOption() {}
+
+  async dragDropCard(param: { from: string; to: string }) {
+    // const { from, to } = param;
+    // const srcStack = await this.get().locator(`.nc-kanban-stack`).nth(1);
+    // const dstStack = await this.get().locator(`.nc-kanban-stack`).nth(2);
+    // const fromCard = await srcStack.locator(`.nc-kanban-item`).nth(1);
+    // const toCard = await dstStack.locator(`.nc-kanban-item`).nth(1);
+    // const [fromCard, toCard] = await Promise.all([
+    //   srcStack.locator(`.nc-kanban-item[data-draggable="true"]`).nth(0),
+    //   dstStack.locator(`.nc-kanban-item[data-draggable="true"]`).nth(0),
+    // ]);
+    // const fromCard = await this.get().locator(`.nc-kanban-item`).nth(0);
+    // const toCard = await this.get().locator(`.nc-kanban-item`).nth(25);
+    // await fromCard.dragTo(toCard);
+  }
+
+  async dragDropStack(param: { from: number; to: number }) {
+    const { from, to } = param;
+    const [fromStack, toStack] = await Promise.all([
+      this.rootPage.locator(`.nc-kanban-stack-head`).nth(from),
+      this.rootPage.locator(`.nc-kanban-stack-head`).nth(to),
+    ]);
+    await fromStack.dragTo(toStack);
+  }
+
+  async verifyStackCount(param: { count: number }) {
+    const { count } = param;
+    expect(await this.get().locator(`.nc-kanban-stack`).count()).toBe(count);
+  }
+
+  async verifyStackOrder(param: { order: string[] }) {
+    const { order } = param;
+    const stacks = await this.get().locator(`.nc-kanban-stack`).count();
+    for (let i = 0; i < stacks; i++) {
+      const stack = await this.get().locator(`.nc-kanban-stack`).nth(i);
+      const stackTitle = await stack
+        .locator(`.nc-kanban-stack-head`)
+        .innerText();
+      expect(stackTitle).toBe(order[i]);
+    }
+  }
+
+  async verifyStackFooter(param: { count: number[] }) {
+    const { count } = param;
+    const stacks = await this.get().locator(`.nc-kanban-stack`).count();
+    for (let i = 0; i < stacks; i++) {
+      const stack = await this.get().locator(`.nc-kanban-stack`).nth(i);
+      const stackFooter = await stack
+        .locator(`.nc-kanban-data-count`)
+        .innerText();
+      expect(stackFooter).toContain(
+        `${count[i]} record${count[i] !== 1 ? "s" : ""}`
+      );
+    }
+  }
+
+  async verifyCardCount(param: { count: number[] }) {
+    const { count } = param;
+    const stacks = await this.get().locator(`.nc-kanban-stack`).count();
+    for (let i = 0; i < stacks; i++) {
+      const stack = await this.get().locator(`.nc-kanban-stack`).nth(i);
+      const stackCards = await stack.locator(`.nc-kanban-item`).count();
+      expect(stackCards).toBe(count[i]);
+    }
+  }
+
+  async verifyCardOrder(param: { order: string[]; stackIndex: number }) {
+    const { order, stackIndex } = param;
+    const stack = await this.get().locator(`.nc-kanban-stack`).nth(stackIndex);
+    for (let i = 0; i < order.length; i++) {
+      const card = await stack.locator(`.nc-kanban-item`).nth(i);
+      const cardTitle = await card.locator(`.nc-cell`).innerText();
+      expect(cardTitle).toBe(order[i]);
+    }
+  }
+
+  async waitLoading() {
+    await this.rootPage.waitForTimeout(1000);
+  }
+}

scripts/playwright/pages/Dashboard/common/Toolbar/Fields.ts

@@ -29,4 +29,16 @@ export class ToolbarFieldsPage extends BasePage {
       .click();
     await this.toolbar.parent.waitLoading();
   }
+
+  async hideAll() {
+    await this.toolbar.clickFields();
+    await this.get().locator(`button:has-text("Hide all")`).click();
+    await this.toolbar.clickFields();
+  }
+
+  async showAll() {
+    await this.toolbar.clickFields();
+    await this.get().locator(`button:has-text("Show all")`).click();
+    await this.toolbar.clickFields();
+  }
 }

scripts/playwright/pages/Dashboard/common/Toolbar/Filter.ts

@@ -41,13 +41,16 @@ export class ToolbarFilterPage extends BasePage {
       .locator(`.ant-select-item:has-text("${opType}")`)
       .click();
 
-    const fillFilter = this.rootPage.locator(".nc-filter-value-select").last().fill(value);
+    const fillFilter = this.rootPage
+      .locator(".nc-filter-value-select")
+      .last()
+      .fill(value);
 
     if (isLocallySaved) {
       await this.waitForResponse({
         uiAction: fillFilter,
         httpMethodsToMatch: ["GET"],
-        requestUrlPathToMatch: `${value.replace(' ', '+')}`,
+        requestUrlPathToMatch: `${value.replace(" ", "+")}`,
       });
     } else {
       await this.waitForResponse({
@@ -56,7 +59,6 @@ export class ToolbarFilterPage extends BasePage {
         requestUrlPathToMatch: "/filters",
       });
     }
-
     await this.toolbar.clickFilter();
   }
 
@@ -69,12 +71,12 @@ export class ToolbarFilterPage extends BasePage {
 
   async resetFilter() {
     await this.toolbar.clickFilter();
-    await this.waitForResponse({
+    await this.get().locator(".nc-filter-item-remove-btn").click();
-      uiAction: this.get().locator(".nc-filter-item-remove-btn").click(),
+    // await this.waitForResponse({
-      httpMethodsToMatch: ["DELETE"],
+    //   uiAction: this.get().locator(".nc-filter-item-remove-btn").click(),
-      requestUrlPathToMatch: "/api/v1/db/meta/filters/",
+    //   httpMethodsToMatch: ["DELETE"],
-    })
+    //   requestUrlPathToMatch: "/api/v1/db/meta/filters/",
-   
+    // });
     await this.toolbar.clickFilter();
   }
 }

scripts/playwright/pages/Dashboard/common/Toolbar/StackBy.ts

@@ -0,0 +1,27 @@
+import BasePage from "../../../Base";
+import { ToolbarPage } from "./index";
+
+export class ToolbarStackbyPage extends BasePage {
+  readonly toolbar: ToolbarPage;
+
+  constructor(toolbar: ToolbarPage) {
+    super(toolbar.rootPage);
+    this.toolbar = toolbar;
+  }
+
+  get() {
+    return this.rootPage.locator(`.nc-dropdown-kanban-stacked-by-menu`);
+  }
+
+  async click({ title }: { title: string }) {
+    await this.get().locator(`.nc-kanban-grouping-field-select`).click();
+    await this.rootPage
+      .locator(".ant-select-dropdown:visible")
+      .locator(`div[title="${title}"]`)
+      .click();
+  }
+
+  // click({ title }: { title: string }) {
+  //   return this.get().locator(`[pw-data="nc-fields-menu-${title}"]`).click();
+  // }
+}

scripts/playwright/pages/Dashboard/common/Toolbar/index.ts

@@ -9,18 +9,21 @@ import * as fs from "fs";
 import { GridPage } from "../../Grid";
 import { ToolbarActionsPage } from "./Actions";
 import { GalleryPage } from "../../Gallery";
+import { KanbanPage } from "../../Kanban";
 import { FormPage } from "../../Form";
+import { ToolbarStackbyPage } from "./StackBy";
 
 export class ToolbarPage extends BasePage {
-  readonly parent: GridPage | GalleryPage | FormPage;
+  readonly parent: GridPage | GalleryPage | FormPage | KanbanPage;
   readonly fields: ToolbarFieldsPage;
   readonly sort: ToolbarSortPage;
   readonly filter: ToolbarFilterPage;
   readonly shareView: ToolbarShareViewPage;
   readonly viewsMenu: ToolbarViewMenuPage;
   readonly actions: ToolbarActionsPage;
+  readonly stackBy: ToolbarStackbyPage;
 
-  constructor(parent: GridPage | GalleryPage | FormPage) {
+  constructor(parent: GridPage | GalleryPage | FormPage | KanbanPage) {
     super(parent.rootPage);
     this.parent = parent;
     this.fields = new ToolbarFieldsPage(this);
@@ -29,6 +32,7 @@ export class ToolbarPage extends BasePage {
     this.shareView = new ToolbarShareViewPage(this);
     this.viewsMenu = new ToolbarViewMenuPage(this);
     this.actions = new ToolbarActionsPage(this);
+    this.stackBy = new ToolbarStackbyPage(this);
   }
 
   get() {
@@ -44,7 +48,6 @@ export class ToolbarPage extends BasePage {
     if (menuOpen) await this.fields.get().waitFor({ state: "hidden" });
   }
 
-
   async clickFields() {
     const menuOpen = await this.fields.get().isVisible();
 
@@ -80,6 +83,12 @@ export class ToolbarPage extends BasePage {
     if (menuOpen) await this.shareView.get().waitFor({ state: "hidden" });
   }
 
+  async clickStackByField() {
+    await this.get()
+      .locator(`.nc-toolbar-btn.nc-kanban-stacked-by-menu-btn`)
+      .click();
+  }
+
   async clickAddNewRow() {
     await this.get().locator(`.nc-toolbar-btn.nc-add-new-row-btn`).click();
   }
@@ -106,6 +115,17 @@ export class ToolbarPage extends BasePage {
     await expect(file).toEqual(expectedData);
   }
 
+  async verifyStackByButton({ title }: { title: string }) {
+    await this.get()
+      .locator(`.nc-toolbar-btn.nc-kanban-stacked-by-menu-btn`)
+      .waitFor({ state: "visible" });
+    expect(
+      await this.get().locator(
+        `.nc-toolbar-btn.nc-kanban-stacked-by-menu-btn:has-text("${title}")`
+      )
+    ).toBeVisible();
+  }
+
   async verifyDownloadDisabled() {
     await this.get()
       .locator(`.nc-toolbar-btn.nc-actions-menu-btn`)

scripts/playwright/pages/Dashboard/index.ts

@@ -10,6 +10,7 @@ import { TreeViewPage } from "./TreeView";
 import { SettingsPage } from "./Settings";
 import { ViewSidebarPage } from "./ViewSidebar";
 import { GalleryPage } from "./Gallery";
+import { KanbanPage } from "./Kanban";
 import { ToolbarPage } from "./common/Toolbar";
 
 export class DashboardPage extends BasePage {
@@ -20,6 +21,7 @@ export class DashboardPage extends BasePage {
   readonly grid: GridPage;
   readonly gallery: GalleryPage;
   readonly form: FormPage;
+  readonly kanban: KanbanPage;
   readonly expandedForm: ExpandedFormPage;
   readonly childList: ChildList;
   readonly linkRecord: LinkRecord;
@@ -35,6 +37,7 @@ export class DashboardPage extends BasePage {
     this.grid = new GridPage(this);
     this.gallery = new GalleryPage(this);
     this.form = new FormPage(this);
+    this.kanban = new KanbanPage(this);
     this.expandedForm = new ExpandedFormPage(this);
     this.childList = new ChildList(this);
     this.linkRecord = new LinkRecord(this);

scripts/playwright/tests/viewKanban.spec.ts

@@ -0,0 +1,146 @@
+import { test } from "@playwright/test";
+import { DashboardPage } from "../pages/Dashboard";
+import { ToolbarPage } from "../pages/Dashboard/common/Toolbar";
+
+import setup from "../setup";
+
+test.describe("View", () => {
+  let dashboard: DashboardPage, toolbar: ToolbarPage;
+  let context: any;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page });
+    dashboard = new DashboardPage(page, context.project);
+    toolbar = toolbar = dashboard.kanban.toolbar;
+  });
+
+  test("Kanban", async () => {
+    // close 'Team & Auth' tab
+    await dashboard.closeTab({ title: "Team & Auth" });
+    await dashboard.treeView.openTable({ title: "Film" });
+
+    await dashboard.viewSidebar.createKanbanView({
+      title: "Film Kanban",
+    });
+    await dashboard.viewSidebar.verifyView({
+      title: "Film Kanban",
+      index: 1,
+    });
+
+    // configure stack-by field
+    await toolbar.clickStackByField();
+    await toolbar.stackBy.click({ title: "Rating" });
+    // click again to close menu
+    await toolbar.clickStackByField();
+
+    const kanban = dashboard.kanban;
+    await kanban.verifyStackCount({ count: 6 });
+    await kanban.verifyStackOrder({
+      order: ["Uncategorized", "G", "PG", "PG-13", "R", "NC-17"],
+    });
+    await kanban.verifyStackFooter({
+      count: [0, 178, 194, 223, 195, 210],
+    });
+    await kanban.verifyCardCount({
+      count: [0, 25, 25, 25, 25, 25],
+    });
+
+    // hide fields
+    await toolbar.fields.hideAll();
+    await toolbar.fields.toggle({ title: "Title" });
+    await kanban.verifyCardCount({
+      count: [0, 25, 25, 25, 25, 25],
+    });
+
+    // verify card order
+    const order = [
+      ["ACE GOLDFINGER", "AFFAIR PREJUDICE", "AFRICAN EGG"],
+      ["ACADEMY DINOSAUR", "AGENT TRUMAN", "ALASKA PHANTOM"],
+      ["AIRPLANE SIERRA", "ALABAMA DEVIL", "ALTER VICTORY"],
+      ["AIRPORT POLLOCK", "ALONE TRIP", "AMELIE HELLFIGHTERS"],
+      ["ADAPTATION HOLES", "ALADDIN CALENDAR", "ALICE FANTASIA"],
+    ];
+    for (let i = 1; i <= order.length; i++)
+      await kanban.verifyCardOrder({
+        stackIndex: i,
+        order: order[i - 1],
+      });
+
+    // // verify inter stack drag-drop
+    // await kanban.dragDropCard({
+    //   from: "ACE GOLDFINGER",
+    //   to: "ACADEMY DINOSAUR",
+    // });
+
+    // verify drag drop stack
+    await kanban.dragDropStack({
+      from: 1, // G
+      to: 2, // PG
+    });
+    await kanban.verifyStackOrder({
+      order: ["Uncategorized", "PG", "G", "PG-13", "R", "NC-17"],
+    });
+    // verify drag drop stack
+    await kanban.dragDropStack({
+      from: 2, // G
+      to: 1, // PG
+    });
+    await kanban.verifyStackOrder({
+      order: ["Uncategorized", "G", "PG", "PG-13", "R", "NC-17"],
+    });
+
+    // verify sort
+    await toolbar.sort.addSort({ columnTitle: "Title", isAscending: false });
+    // verify card order
+    const order2 = [
+      ["YOUNG LANGUAGE", "WEST LION"],
+      ["WORST BANGER", "WORDS HUNTER"],
+    ];
+    for (let i = 1; i <= order2.length; i++)
+      await kanban.verifyCardOrder({
+        stackIndex: i,
+        order: order2[i - 1],
+      });
+    await toolbar.sort.resetSort();
+    // verify card order
+    const order3 = [
+      ["ACE GOLDFINGER", "AFFAIR PREJUDICE", "AFRICAN EGG"],
+      ["ACADEMY DINOSAUR", "AGENT TRUMAN", "ALASKA PHANTOM"],
+    ];
+    for (let i = 1; i <= order3.length; i++)
+      await kanban.verifyCardOrder({
+        stackIndex: i,
+        order: order3[i - 1],
+      });
+
+    // verify filter
+    await toolbar.filter.addNew({
+      columnTitle: "Title",
+      opType: "is like",
+      value: "BA",
+      isLocallySaved: false,
+    });
+    // verify card order
+    const order4 = [
+      ["BAKED CLEOPATRA", "BALLROOM MOCKINGBIRD"],
+      ["ARIZONA BANG", "EGYPT TENENBAUMS"],
+    ];
+    for (let i = 1; i <= order4.length; i++)
+      await kanban.verifyCardOrder({
+        stackIndex: i,
+        order: order4[i - 1],
+      });
+    await toolbar.filter.resetFilter();
+    const order5 = [
+      ["ACE GOLDFINGER", "AFFAIR PREJUDICE", "AFRICAN EGG"],
+      ["ACADEMY DINOSAUR", "AGENT TRUMAN", "ALASKA PHANTOM"],
+    ];
+    for (let i = 1; i <= order5.length; i++)
+      await kanban.verifyCardOrder({
+        stackIndex: i,
+        order: order5[i - 1],
+      });
+
+    await dashboard.rootPage.waitForTimeout(1000);
+  });
+});