test: locked view

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

scripts/playwright/pages/Dashboard/Grid/Toolbar/ViewMenu.ts

@@ -0,0 +1,98 @@
+import { Locator, expect } from "@playwright/test";
+import BasePage from "../../../Base";
+import { ToolbarPage } from ".";
+
+export class ToolbarViewMenuPage extends BasePage {
+  readonly toolbar: ToolbarPage;
+  readonly viewsMenuBtn: Locator;
+
+  constructor(toolbar: ToolbarPage) {
+    super(toolbar.rootPage);
+    this.toolbar = toolbar;
+    this.viewsMenuBtn = this.toolbar.get().locator(`.nc-actions-menu-btn`);
+  }
+
+  get() {
+    return this.rootPage.locator(`.ant-dropdown.nc-dropdown-actions-menu`);
+  }
+
+  getLockTypeSubMenu() {
+    return this.rootPage.locator(`[id="sub_menu_1_$$_lock-type-popup"]`);
+  }
+
+  // menu items
+  //    Collaborative View
+  //    Download
+  //    Upload
+  //    Shared View List
+  //    Webhooks
+  //    Get API Snippet
+  //    ERD View
+
+  async click({ menu, subMenu }: { menu: string; subMenu?: string }) {
+    await this.viewsMenuBtn.click();
+    await this.get()
+      .locator(`.ant-dropdown-menu-title-content:has-text("${menu}")`)
+      .first()
+      .click();
+    if (subMenu) {
+      await this.getLockTypeSubMenu()
+        .locator(`.nc-locked-menu-item:has-text("${subMenu}")`)
+        .last()
+        .click();
+      switch (subMenu) {
+        case "Locked View":
+          await this.toastWait({
+            message: "Successfully Switched to locked view",
+          });
+          break;
+        case "Collaborative View":
+          await this.toastWait({
+            message: "Successfully Switched to collaborative view",
+          });
+          break;
+        default:
+          break;
+      }
+    }
+    await this.toolbar.grid.waitLoading();
+  }
+
+  async verifyLockMode() {
+    expect(
+      await this.toolbar.get().locator(`.nc-fields-menu-btn.nc-toolbar-btn`)
+    ).toBeDisabled();
+    expect(
+      await this.toolbar.get().locator(`.nc-filter-menu-btn.nc-toolbar-btn`)
+    ).toBeDisabled();
+    expect(
+      await this.toolbar.get().locator(`.nc-sort-menu-btn.nc-toolbar-btn`)
+    ).toBeDisabled();
+    expect(
+      await this.toolbar
+        .get()
+        .locator(`.nc-add-new-row-btn.nc-toolbar-btn > .nc-icon.disabled`)
+    ).toBeVisible();
+
+    await this.toolbar.grid.verifyEditDisabled({ columnHeader: "Country" });
+  }
+
+  async verifyCollaborativeMode() {
+    expect(
+      await this.toolbar.get().locator(`.nc-fields-menu-btn.nc-toolbar-btn`)
+    ).toBeEnabled();
+    expect(
+      await this.toolbar.get().locator(`.nc-filter-menu-btn.nc-toolbar-btn`)
+    ).toBeEnabled();
+    expect(
+      await this.toolbar.get().locator(`.nc-sort-menu-btn.nc-toolbar-btn`)
+    ).toBeEnabled();
+    expect(
+      await this.toolbar
+        .get()
+        .locator(`.nc-add-new-row-btn.nc-toolbar-btn > .nc-icon`)
+    ).toBeVisible();
+
+    await this.toolbar.grid.verifyEditEnabled({ columnHeader: "Country" });
+  }
+}

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

@@ -5,6 +5,7 @@ import { ToolbarFieldsPage } from "./Fields";
 import { ToolbarSortPage } from "./Sort";
 import { ToolbarFilterPage } from "./Filter";
 import { ToolbarShareViewPage } from "./ShareView";
+import { ToolbarViewMenuPage } from "./ViewMenu";
 import * as fs from "fs";
 
 export class ToolbarPage extends BasePage {
@@ -13,6 +14,7 @@ export class ToolbarPage extends BasePage {
   readonly sort: ToolbarSortPage;
   readonly filter: ToolbarFilterPage;
   readonly shareView: ToolbarShareViewPage;
+  readonly viewsMenu: ToolbarViewMenuPage;
 
   constructor(grid: GridPage) {
     super(grid.rootPage);
@@ -21,6 +23,7 @@ export class ToolbarPage extends BasePage {
     this.sort = new ToolbarSortPage(this);
     this.filter = new ToolbarFilterPage(this);
     this.shareView = new ToolbarShareViewPage(this);
+    this.viewsMenu = new ToolbarViewMenuPage(this);
   }
 
   get() {

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

@@ -196,4 +196,74 @@ export class GridPage extends BasePage {
       .locator('[pw-data="grid-load-spinner"]')
       .waitFor({ state: "hidden" });
   }
+
+  async verifyEditDisabled({
+    columnHeader = "Title",
+  }: { columnHeader?: string } = {}) {
+    // double click to toggle to edit mode
+    const cell = this.cell.get({ index: 0, columnHeader: columnHeader });
+    await this.cell.dblclick({
+      index: 0,
+      columnHeader: columnHeader,
+    });
+    expect(await cell.locator("input")).not.toBeVisible();
+
+    // right click menu
+    await this.get().locator(`td[data-pw="cell-${columnHeader}-0"]`).click({
+      button: "right",
+    });
+    expect(
+      await this.rootPage.locator("text=Insert New Row")
+    ).not.toBeVisible();
+
+    // in cell-add
+    await this.cell.get({ index: 0, columnHeader: "City List" }).hover();
+    expect(
+      await this.cell
+        .get({ index: 0, columnHeader: "City List" })
+        .locator(".nc-action-icon.nc-plus")
+    ).not.toBeVisible();
+
+    // expand row
+    await this.cell.get({ index: 0, columnHeader: "City List" }).hover();
+    expect(
+      await this.cell
+        .get({ index: 0, columnHeader: "City List" })
+        .locator(".nc-action-icon >> nth=0")
+    ).not.toBeVisible();
+  }
+
+  async verifyEditEnabled({
+    columnHeader = "Title",
+  }: { columnHeader?: string } = {}) {
+    // double click to toggle to edit mode
+    const cell = this.cell.get({ index: 0, columnHeader: columnHeader });
+    await this.cell.dblclick({
+      index: 0,
+      columnHeader: columnHeader,
+    });
+    expect(await cell.locator("input")).toBeVisible();
+
+    // right click menu
+    await this.get().locator(`td[data-pw="cell-${columnHeader}-0"]`).click({
+      button: "right",
+    });
+    expect(await this.rootPage.locator("text=Insert New Row")).toBeVisible();
+
+    // in cell-add
+    await this.cell.get({ index: 0, columnHeader: "City List" }).hover();
+    expect(
+      await this.cell
+        .get({ index: 0, columnHeader: "City List" })
+        .locator(".nc-action-icon.nc-plus")
+    ).toBeVisible();
+
+    // expand row
+    await this.cell.get({ index: 0, columnHeader: "City List" }).hover();
+    expect(
+      await this.cell
+        .get({ index: 0, columnHeader: "City List" })
+        .locator(".nc-action-icon >> nth=0")
+    ).toBeVisible();
+  }
 }

scripts/playwright/tests/viewGridLocked.spec.ts

@@ -0,0 +1,40 @@
+import { test } from "@playwright/test";
+import { DashboardPage } from "../pages/Dashboard";
+import setup from "../setup";
+
+test.describe("Grid view locked", () => {
+  let dashboard: DashboardPage;
+  let context: any;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page });
+    dashboard = new DashboardPage(page, context.project);
+  });
+
+  test("ReadOnly lock & collaboration mode", async () => {
+    // close 'Team & Auth' tab
+    await dashboard.closeTab({ title: "Team & Auth" });
+    await dashboard.treeView.openTable({ title: "Country" });
+
+    await dashboard.grid.toolbar.viewsMenu.verifyCollaborativeMode();
+
+    // enable view lock
+    await dashboard.grid.toolbar.viewsMenu.click({
+      menu: "Collaborative View",
+      subMenu: "Locked View",
+    });
+
+    // verify view lock
+    await dashboard.grid.toolbar.viewsMenu.verifyLockMode();
+
+    // enable collaborative view
+    await dashboard.grid.toolbar.viewsMenu.click({
+      menu: "Locked View",
+      subMenu: "Collaborative View",
+    });
+
+    await dashboard.grid.toolbar.viewsMenu.verifyCollaborativeMode();
+
+    await dashboard.rootPage.waitForTimeout(1000);
+  });
+});