test: preview-mode corrections

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

packages/nc-gui/components/general/PreviewAs.vue

@@ -82,7 +82,7 @@ watch(previewAs, (newRole) => {
       <div class="divider -ml-4" />
 
       <!-- Close -->
-      <div class="flex items-center gap-2 cursor-pointer" @click="previewAs = null">
+      <div class="flex items-center gap-2 cursor-pointer nc-preview-btn-exit-to-app" @click="previewAs = null">
         <MdiExitToApp />
         {{ $t('general.close') }}
       </div>
@@ -91,7 +91,7 @@ watch(previewAs, (newRole) => {
 
   <template v-else>
     <template v-for="role of roleList" :key="role.value">
-      <a-menu-item @click="previewAs = role.value">
+      <a-menu-item class="nc-role-preview-menu" @click="previewAs = role.value">
         <div class="nc-project-menu-item group">
           <component :is="roleIcon[role.value]" class="group-hover:text-accent" />
 

scripts/cypress/integration/common/5b_preview_role.js

@@ -19,6 +19,7 @@ import {
   _topRightMenu,
   enableTableAccess,
   _accessControl,
+  disableTableAccess,
 } from "../spec/roleValidation.spec";
 
 export const genTest = (apiType, dbType, roleType) => {
@@ -29,10 +30,44 @@ export const genTest = (apiType, dbType, roleType) => {
 
   let clear;
 
+  function configureAcl() {
+    // open Project metadata tab
+    //
+    settingsPage.openMenu(settingsPage.PROJ_METADATA);
+    settingsPage.openTab(settingsPage.UI_ACCESS_CONTROL);
+
+    // validate if it has 19 entries representing tables & views
+    if (isPostgres()) cy.get(".nc-acl-table-row").should("have.length", 24);
+    else if (isXcdb()) cy.get(".nc-acl-table-row").should("have.length", 19);
+    else cy.get(".nc-acl-table-row").should("have.length", 19);
+
+    // disable table & view access
+    //
+    disableTableAccess("Language", "editor");
+    disableTableAccess("Language", "commenter");
+    disableTableAccess("Language", "viewer");
+
+    disableTableAccess("CustomerList", "editor");
+    disableTableAccess("CustomerList", "commenter");
+    disableTableAccess("CustomerList", "viewer");
+
+    cy.get("button.nc-acl-save").click();
+    cy.toastWait("Updated UI ACL for tables successfully");
+
+    mainPage.closeMetaTab();
+  }
+
   describe("Role preview validations", () => {
     // Sign in/ open project
     before(() => {
+      // cy.restoreLocalStorage();
       loginPage.loginAndOpenProject(apiType, dbType);
+
+      clear = Cypress.LocalStorage.clear;
+      Cypress.LocalStorage.clear = () => {};
+
+      // configureAcl();
+
       cy.openTableTab("City", 25);
 
       settingsPage.openProjectMenu();
@@ -40,45 +75,25 @@ export const genTest = (apiType, dbType, roleType) => {
         .find(`[data-submenu-id="preview-as"]`)
         .should("exist")
         .click();
-      cy.get(".ant-dropdown-menu-submenu")
-        .eq(4)
-        .find(`[data-menu-id="editor"]`)
+
+      cy.get(".nc-role-preview-menu").should("have.length", 3);
+      cy.get(`.nc-role-preview-menu:contains("Editor")`)
         .should("exist")
         .click();
-      cy.saveLocalStorage();
-
-      clear = Cypress.LocalStorage.clear;
-      Cypress.LocalStorage.clear = () => {};
-    });
-
-    beforeEach(() => {
-      cy.restoreLocalStorage();
-    });
-
-    afterEach(() => {
-      cy.saveLocalStorage();
-      Cypress.LocalStorage.clear = clear;
     });
 
     after(() => {
-      cy.restoreLocalStorage();
+      cy.get(".nc-preview-btn-exit-to-app").click();
 
-      // cy.get(".nc-preview-reset").click({ force: true });
-      cy.get(".mdi-exit-to-app").click();
       // wait for page rendering to complete
       cy.get(".nc-grid-row", { timeout: 25000 }).should("have.length", 25);
 
-      // cy.get('.nc-preview-reset:visible').should('not-exist')
-
-      // mainPage.navigationDraw(mainPage.ROLE_VIEW).contains('Reset Preview').should('not.exist')
-      // cy.get('.nc-preview-reset').should('not-exist')
       cy.closeTableTab("City");
 
       // open Project metadata tab
       //
-      mainPage.navigationDraw(mainPage.PROJ_METADATA).click();
-      // cy.get(".nc-exp-imp-metadata").dblclick({ force: true });
-      cy.get(".nc-ui-acl-tab").click({ force: true });
+      settingsPage.openMenu(settingsPage.PROJ_METADATA);
+      settingsPage.openTab(settingsPage.UI_ACCESS_CONTROL);
 
       // validate if it has 19 entries representing tables & views
       if (isPostgres()) cy.get(".nc-acl-table-row").should("have.length", 24);
@@ -87,15 +102,15 @@ export const genTest = (apiType, dbType, roleType) => {
 
       // restore access
       //
-      enableTableAccess("language", "editor");
-      enableTableAccess("language", "commenter");
-      enableTableAccess("language", "viewer");
-
-      enableTableAccess("customerlist", "editor");
-      enableTableAccess("customerlist", "commenter");
-      enableTableAccess("customerlist", "viewer");
+      enableTableAccess("Language", "editor");
+      enableTableAccess("Language", "commenter");
+      enableTableAccess("Language", "viewer");
 
+      enableTableAccess("Customerlist", "editor");
+      enableTableAccess("Customerlist", "commenter");
+      enableTableAccess("Customerlist", "viewer");
       cy.saveLocalStorage();
+      Cypress.LocalStorage.clear = clear;
     });
 
     const genTestSub = (roleType) => {
@@ -141,13 +156,6 @@ export const genTest = (apiType, dbType, roleType) => {
         _viewMenu(roleType, "preview");
       });
 
-      it(`Role preview: ${roleType}: Top Right Menu bar`, () => {
-        // Share button is conditional
-        // Rest are static/ mandatory
-        //
-        _topRightMenu(roleType, "preview");
-      });
-
       it(`Role preview: ${roleType}: Edit Schema`, () => {
         // Schema related validations
         //  - Add/delete table