test: preview (disabled, wip)

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

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

@@ -5,6 +5,7 @@ import BasePage from "../../Base";
 import { CellPageObject } from "../common/Cell";
 import { ColumnPageObject } from "./Column";
 import { ToolbarPage } from "../common/Toolbar";
+import { ProjectMenuObject } from "../common/ProjectMenu";
 
 export class GridPage extends BasePage {
   readonly dashboard: DashboardPage;
@@ -13,6 +14,7 @@ export class GridPage extends BasePage {
   readonly column: ColumnPageObject;
   readonly cell: CellPageObject;
   readonly toolbar: ToolbarPage;
+  readonly projectMenu: ProjectMenuObject;
 
   constructor(dashboardPage: DashboardPage) {
     super(dashboardPage.rootPage);
@@ -21,6 +23,7 @@ export class GridPage extends BasePage {
     this.column = new ColumnPageObject(this);
     this.cell = new CellPageObject(this);
     this.toolbar = new ToolbarPage(this);
+    this.projectMenu = new ProjectMenuObject(this);
   }
 
   get() {

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

@@ -13,10 +13,14 @@ export class ViewSidebarPage extends BasePage {
   constructor(dashboard: DashboardPage) {
     super(dashboard.rootPage);
     this.dashboard = dashboard;
-    this.createGalleryButton = this.get().locator(".nc-create-gallery-view");
-    this.createGridButton = this.get().locator(".nc-create-grid-view");
-    this.createFormButton = this.get().locator(".nc-create-form-view");
-    this.createKanbanButton = this.get().locator(".nc-create-kanban-view");
+    this.createGalleryButton = this.get().locator(
+      ".nc-create-gallery-view:visible"
+    );
+    this.createGridButton = this.get().locator(".nc-create-grid-view:visible");
+    this.createFormButton = this.get().locator(".nc-create-form-view:visible");
+    this.createKanbanButton = this.get().locator(
+      ".nc-create-kanban-view:visible"
+    );
   }
 
   get() {

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

@@ -0,0 +1,36 @@
+import BasePage from "../../../Base";
+import { GridPage } from "../../Grid";
+import { GalleryPage } from "../../Gallery";
+import { KanbanPage } from "../../Kanban";
+import { FormPage } from "../../Form";
+
+export class ProjectMenuObject extends BasePage {
+  constructor(parent: GridPage | GalleryPage | KanbanPage | FormPage) {
+    super(parent.rootPage);
+  }
+
+  get() {
+    return this.rootPage.locator(`[pw-data="nc-fields-menu"]`);
+  }
+
+  async toggle() {
+    await this.rootPage.locator('[pw-data="nc-project-menu"]').click();
+  }
+
+  async click({ menu, subMenu }: { menu: string; subMenu: string }) {
+    let pMenu = await this.rootPage.locator(
+      `.nc-dropdown-project-menu:visible`
+    );
+    await pMenu
+      .locator(`div.nc-project-menu-item:has-text("${menu}"):visible`)
+      .click();
+    await this.rootPage.waitForTimeout(2000);
+
+    if (subMenu) {
+      await this.rootPage
+        .locator(`div.nc-project-menu-item:has-text("${subMenu}"):visible`)
+        .click();
+      await this.rootPage.waitForTimeout(10000);
+    }
+  }
+}

scripts/playwright/tests/rolesPreview.spec.ts

@@ -0,0 +1,121 @@
+import { test } from "@playwright/test";
+import { DashboardPage } from "../pages/Dashboard";
+import setup from "../setup";
+import { ToolbarPage } from "../pages/Dashboard/common/Toolbar";
+import {
+  SettingsPage,
+  SettingsSubTab,
+  SettingTab,
+} from "../pages/Dashboard/Settings";
+
+let roles = ["Editor", "Commenter", "Viewer"];
+
+test.describe.skip("Preview Mode", () => {
+  let dashboard: DashboardPage;
+  let toolbar: ToolbarPage;
+  let settings: SettingsPage;
+
+  let context: any;
+
+  test.beforeAll(async ({ page }) => {
+    context = await setup({ page });
+    dashboard = new DashboardPage(page, context.project);
+    toolbar = dashboard.grid.toolbar;
+    settings = dashboard.settings;
+  });
+
+  test("Test case name", async () => {
+    // close 'Team & Auth' tab
+    await dashboard.closeTab({ title: "Team & Auth" });
+
+    // configure ACL
+    // configure access control
+    await dashboard.gotoSettings();
+    await settings.selectTab({
+      tab: SettingTab.ProjectMetadata,
+      subTab: SettingsSubTab.ACL,
+    });
+    await settings.acl.toggle({ table: "Language", role: "editor" });
+    await settings.acl.toggle({ table: "Language", role: "commenter" });
+    await settings.acl.toggle({ table: "Language", role: "viewer" });
+    await settings.acl.toggle({ table: "CustomerList", role: "editor" });
+    await settings.acl.toggle({ table: "CustomerList", role: "commenter" });
+    await settings.acl.toggle({ table: "CustomerList", role: "viewer" });
+    await settings.acl.save();
+    await settings.close();
+
+    // await dashboard.grid.projectMenu.toggle();
+    // await dashboard.grid.projectMenu.click({
+    //   menu: "Preview as",
+    //   subMenu: "Editor",
+    // });
+    //
+    // // wait for preview mode to be enabled
+    // await dashboard.rootPage.locator(".nc-preview-btn-exit-to-app").waitFor();
+  });
+
+  async function roleTest(role: string) {
+    await dashboard.grid.projectMenu.toggle();
+    await dashboard.grid.projectMenu.click({
+      menu: "Preview as",
+      subMenu: role,
+    });
+
+    // wait for preview mode to be enabled
+    await dashboard.rootPage.locator(".nc-preview-btn-exit-to-app").waitFor();
+
+    console.log("project menu");
+    await dashboard.validateProjectMenu({
+      role: role.toLowerCase(),
+    });
+
+    await dashboard.treeView.openTable({ title: "Country" });
+
+    console.log("view sidebar");
+    await dashboard.viewSidebar.validateRoleAccess({
+      role: role.toLowerCase(),
+    });
+
+    console.log("toolbar");
+    await toolbar.validateRoleAccess({
+      role: role.toLowerCase(),
+    });
+
+    console.log("tree view");
+    await dashboard.treeView.validateRoleAccess({
+      role: role.toLowerCase(),
+    });
+
+    console.log("grid");
+    await dashboard.grid.validateRoleAccess({
+      role: role.toLowerCase(),
+    });
+
+    await dashboard.grid.openExpandedRow({ index: 0 });
+    console.log("expanded row");
+    await dashboard.expandedForm.validateRoleAccess({
+      role: role.toLowerCase(),
+    });
+
+    // Access control validation
+    console.log("access control");
+    await dashboard.treeView.verifyTable({
+      title: "Language",
+      exists: role.toLowerCase() === "creator" ? true : false,
+    });
+    await dashboard.treeView.verifyTable({
+      title: "CustomerList",
+      exists: role.toLowerCase() === "creator" ? true : false,
+    });
+
+    // close preview mode
+    await dashboard.rootPage.locator(".nc-preview-btn-exit-to-app").click();
+  }
+
+  test("Role Test", async () => {
+    for (let i = 0; i < roles.length; i++) {
+      console.log("Role: ", roles[i]);
+      await roleTest(roles[i]);
+    }
+  });
+});