test: kanban part2/2

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

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

@@ -109,4 +109,61 @@ export class KanbanPage extends BasePage {
   async waitLoading() {
     await this.rootPage.waitForTimeout(1000);
   }
+
+  async addNewStack(param: { title: string }) {
+    await this.toolbar.clickAddEditStack();
+    await this.toolbar.addEditStack.addOption({ title: param.title });
+  }
+
+  async collapseStack(param: { index: number }) {
+    await this.get().locator(`.nc-kanban-stack-head`).nth(param.index).click();
+    const modal = await this.rootPage.locator(
+      `.nc-dropdown-kanban-stack-context-menu`
+    );
+    await modal
+      .locator('.ant-dropdown-menu-item:has-text("Collapse Stack")')
+      .click();
+  }
+
+  async expandStack(param: { index: number }) {
+    await this.rootPage
+      .locator(`.nc-kanban-collapsed-stack`)
+      .nth(param.index)
+      .click();
+  }
+
+  async collapseStackCount() {
+    return await this.rootPage.locator(".nc-kanban-collapsed-stack").count();
+  }
+
+  async verifyCollapseStackCount(param: { count: number }) {
+    expect(await this.collapseStackCount()).toBe(param.count);
+  }
+
+  async addCard(param: { stackIndex: number }) {
+    await this.get()
+      .locator(`.nc-kanban-stack-head`)
+      .nth(param.stackIndex)
+      .click();
+    const modal = await this.rootPage.locator(
+      `.nc-dropdown-kanban-stack-context-menu`
+    );
+    await modal
+      .locator('.ant-dropdown-menu-item:has-text("Add new record")')
+      .click();
+  }
+
+  async deleteStack(param: { index: number }) {
+    await this.get().locator(`.nc-kanban-stack-head`).nth(param.index).click();
+    const modal = await this.rootPage.locator(
+      `.nc-dropdown-kanban-stack-context-menu`
+    );
+    await modal
+      .locator('.ant-dropdown-menu-item:has-text("Delete Stack")')
+      .click();
+    const confirmationModal = await this.rootPage.locator(
+      `.nc-modal-kanban-delete-stack`
+    );
+    await confirmationModal.locator(`button:has-text("Delete")`).click();
+  }
 }

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

@@ -38,12 +38,12 @@ export class ViewSidebarPage extends BasePage {
       .locator(".ant-modal-content")
       .locator('button:has-text("Submit"):visible')
       .click();
-      await this.waitForResponse({
-        httpMethodsToMatch: ["POST"],
-        requestUrlPathToMatch: "/api/v1/db/meta/tables/",
-        uiAction: submitAction,
-        responseJsonMatcher: (json) => json.title === title,
-      });
+    await this.waitForResponse({
+      httpMethodsToMatch: ["POST"],
+      requestUrlPathToMatch: "/api/v1/db/meta/tables/",
+      uiAction: submitAction,
+      responseJsonMatcher: (json) => json.title === title,
+    });
     await this.toastWait({ message: "View created successfully" });
     // Todo: Wait for view to be rendered
     await this.rootPage.waitForTimeout(1000);
@@ -149,4 +149,17 @@ export class ViewSidebarPage extends BasePage {
     await this.get().press("Enter");
     await this.toastWait({ message: "View renamed successfully" });
   }
+
+  async copyView({ title }: { title: string }) {
+    await this.get().locator(`[pw-data="view-sidebar-view-${title}"]`).hover();
+    await this.get()
+      .locator(`[pw-data="view-sidebar-view-actions-${title}"]`)
+      .locator(".nc-view-copy-icon")
+      .click();
+    const submitAction = this.rootPage
+      .locator(".ant-modal-content")
+      .locator('button:has-text("Submit"):visible')
+      .click();
+    await this.toastWait({ message: "View created successfully" });
+  }
 }

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

@@ -0,0 +1,25 @@
+import BasePage from "../../../Base";
+import { ToolbarPage } from "./index";
+
+export class ToolbarAddEditStackPage extends BasePage {
+  readonly toolbar: ToolbarPage;
+
+  constructor(toolbar: ToolbarPage) {
+    super(toolbar.rootPage);
+    this.toolbar = toolbar;
+  }
+
+  get() {
+    return this.rootPage.locator(`.nc-dropdown-kanban-add-edit-stack-menu`);
+  }
+
+  async addOption({ title }: { title: string }) {
+    await this.get().locator(`.ant-btn-dashed`).click();
+    await this.get().locator(`.nc-select-option >> input`).last().fill(title);
+    await this.get()
+      .locator(`.nc-select-option >> input`)
+      .last()
+      .press("Enter");
+    await this.toastWait({ message: "Column updated" });
+  }
+}

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

@@ -41,4 +41,10 @@ export class ToolbarFieldsPage extends BasePage {
     await this.get().locator(`button:has-text("Show all")`).click();
     await this.toolbar.clickFields();
   }
+
+  async toggleShowSystemFields() {
+    await this.toolbar.clickFields();
+    await this.get().locator(`.nc-fields-show-system-fields`).click();
+    await this.toolbar.clickFields();
+  }
 }

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

@@ -12,6 +12,7 @@ import { GalleryPage } from "../../Gallery";
 import { KanbanPage } from "../../Kanban";
 import { FormPage } from "../../Form";
 import { ToolbarStackbyPage } from "./StackBy";
+import { ToolbarAddEditStackPage } from "./AddEditKanbanStack";
 
 export class ToolbarPage extends BasePage {
   readonly parent: GridPage | GalleryPage | FormPage | KanbanPage;
@@ -22,6 +23,7 @@ export class ToolbarPage extends BasePage {
   readonly viewsMenu: ToolbarViewMenuPage;
   readonly actions: ToolbarActionsPage;
   readonly stackBy: ToolbarStackbyPage;
+  readonly addEditStack: ToolbarAddEditStackPage;
 
   constructor(parent: GridPage | GalleryPage | FormPage | KanbanPage) {
     super(parent.rootPage);
@@ -33,6 +35,7 @@ export class ToolbarPage extends BasePage {
     this.viewsMenu = new ToolbarViewMenuPage(this);
     this.actions = new ToolbarActionsPage(this);
     this.stackBy = new ToolbarStackbyPage(this);
+    this.addEditStack = new ToolbarAddEditStackPage(this);
   }
 
   get() {
@@ -131,4 +134,8 @@ export class ToolbarPage extends BasePage {
       .locator(`.nc-toolbar-btn.nc-actions-menu-btn`)
       .waitFor({ state: "hidden" });
   }
+
+  async clickAddEditStack() {
+    await this.get().locator(`.nc-kanban-add-edit-stack-menu-btn`).click();
+  }
 }

scripts/playwright/tests/viewKanban.spec.ts

@@ -90,7 +90,11 @@ test.describe("View", () => {
     });
 
     // verify sort
-    await toolbar.sort.addSort({ columnTitle: "Title", isAscending: false });
+    await toolbar.sort.addSort({
+      columnTitle: "Title",
+      isAscending: false,
+      isLocallySaved: false,
+    });
     // verify card order
     const order2 = [
       ["YOUNG LANGUAGE", "WEST LION"],
@@ -143,4 +147,117 @@ test.describe("View", () => {
 
     await dashboard.rootPage.waitForTimeout(1000);
   });
+
+  test("Kanban view operations", 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,
+    });
+
+    await toolbar.sort.addSort({
+      columnTitle: "Title",
+      isAscending: false,
+      isLocallySaved: false,
+    });
+    await toolbar.filter.addNew({
+      columnTitle: "Title",
+      opType: "is like",
+      value: "BA",
+      isLocallySaved: false,
+    });
+    await toolbar.fields.hideAll();
+    await toolbar.fields.toggle({ title: "Title" });
+
+    await dashboard.viewSidebar.copyView({ title: "Film Kanban" });
+    await dashboard.viewSidebar.verifyView({
+      title: "Kanban-1",
+      index: 2,
+    });
+    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, 4, 5, 8, 6, 6],
+    });
+    await kanban.verifyCardCount({
+      count: [0, 4, 5, 8, 6, 6],
+    });
+    // verify card order
+    const order2 = [
+      ["BAREFOOT MANCHURIAN", "BARBARELLA STREETCAR"],
+      ["WORST BANGER", "PRESIDENT BANG"],
+    ];
+    for (let i = 1; i <= order2.length; i++)
+      await kanban.verifyCardOrder({
+        stackIndex: i,
+        order: order2[i - 1],
+      });
+
+    await dashboard.viewSidebar.deleteView({ title: "Kanban-1" });
+    ///////////////////////////////////////////////
+
+    await dashboard.viewSidebar.openView({ title: "Film Kanban" });
+
+    // add new stack
+    await kanban.addNewStack({ title: "Test" });
+    await dashboard.rootPage.waitForTimeout(1000);
+    await kanban.verifyStackCount({ count: 7 });
+    await kanban.verifyStackOrder({
+      order: ["Uncategorized", "G", "PG", "PG-13", "R", "NC-17", "Test"],
+    });
+
+    // collapse stack
+    await kanban.verifyCollapseStackCount({ count: 0 });
+    await kanban.collapseStack({ index: 0 });
+    await kanban.verifyCollapseStackCount({ count: 1 });
+    await kanban.expandStack({ index: 0 });
+    await kanban.verifyCollapseStackCount({ count: 0 });
+
+    // add record to stack & verify
+    await toolbar.fields.hideAll();
+    await toolbar.fields.toggleShowSystemFields();
+    await toolbar.fields.toggle({ title: "LanguageId" });
+    await toolbar.fields.toggle({ title: "Title" });
+    await toolbar.sort.resetSort();
+    await toolbar.filter.resetFilter();
+
+    await kanban.addCard({ stackIndex: 6 });
+    await dashboard.expandedForm.fillField({
+      columnTitle: "Title",
+      value: "New record",
+    });
+    await dashboard.expandedForm.fillField({
+      columnTitle: "LanguageId",
+      value: "1",
+    });
+    await dashboard.expandedForm.save();
+
+    await kanban.verifyStackCount({ count: 7 });
+    await kanban.verifyStackOrder({
+      order: ["Uncategorized", "G", "PG", "PG-13", "R", "NC-17", "Test"],
+    });
+    await kanban.verifyCardCount({
+      count: [0, 25, 25, 25, 25, 25, 1],
+    });
+
+    // delete stack
+    await kanban.deleteStack({ index: 6 });
+    await dashboard.rootPage.waitForTimeout(1000);
+    await kanban.verifyStackCount({ count: 6 });
+    await kanban.verifyStackOrder({
+      order: ["Uncategorized", "G", "PG", "PG-13", "R", "NC-17"],
+    });
+    await kanban.verifyCardCount({
+      count: [1, 25, 25, 25, 25, 25],
+    });
+  });
 });