Merge pull request #3846 from nocodb/test/preview-mode

test: enable preview mode tests

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) => {
@@ -27,52 +28,72 @@ export const genTest = (apiType, dbType, roleType) => {
   ///////////////////////////////////////////////////////////
   //// Test Suite
 
+  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);
-      cy.openTableTab("City", 25);
 
-      cy.wait(3000);
+      clear = Cypress.LocalStorage.clear;
+      Cypress.LocalStorage.clear = () => {};
+
+      // configureAcl();
+
+      cy.openTableTab("City", 25);
 
       settingsPage.openProjectMenu();
       cy.getActiveMenu(".nc-dropdown-project-menu")
         .find(`[data-submenu-id="preview-as"]`)
         .should("exist")
         .click();
-      cy.wait(1000);
+
-      cy.get(".ant-dropdown-menu-submenu")
+      cy.get(".nc-role-preview-menu").should("have.length", 3);
-        .eq(4)
+      cy.get(`.nc-role-preview-menu:contains("Editor")`)
-        .find(`[data-menu-id="editor"]`)
         .should("exist")
         .click();
-
-      cy.wait(10000);
-
-      cy.saveLocalStorage();
-    });
-
-    beforeEach(() => {
-      cy.restoreLocalStorage();
     });
 
     after(() => {
-      // cy.get(".nc-preview-reset").click({ force: true });
+      cy.get(".nc-preview-btn-exit-to-app").click();
-      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();
+      settingsPage.openMenu(settingsPage.PROJ_METADATA);
-      // cy.get(".nc-exp-imp-metadata").dblclick({ force: true });
+      settingsPage.openTab(settingsPage.UI_ACCESS_CONTROL);
-      cy.get(".nc-ui-acl-tab").click({ force: true });
 
       // validate if it has 19 entries representing tables & views
       if (isPostgres()) cy.get(".nc-acl-table-row").should("have.length", 24);
@@ -81,13 +102,15 @@ export const genTest = (apiType, dbType, roleType) => {
 
       // restore access
       //
-      enableTableAccess("language", "editor");
+      enableTableAccess("Language", "editor");
-      enableTableAccess("language", "commenter");
+      enableTableAccess("Language", "commenter");
-      enableTableAccess("language", "viewer");
+      enableTableAccess("Language", "viewer");
 
-      enableTableAccess("customerlist", "editor");
+      enableTableAccess("CustomerList", "editor");
-      enableTableAccess("customerlist", "commenter");
+      enableTableAccess("CustomerList", "commenter");
-      enableTableAccess("customerlist", "viewer");
+      enableTableAccess("CustomerList", "viewer");
+      cy.saveLocalStorage();
+      Cypress.LocalStorage.clear = clear;
     });
 
     const genTestSub = (roleType) => {
@@ -97,9 +120,6 @@ export const genTest = (apiType, dbType, roleType) => {
           .find(`[type="radio"][value="${roleType}"]`)
           .should("exist")
           .click();
-
-        cy.wait(5000);
-        cy.saveLocalStorage();
       });
 
       it(`Role preview: ${roleType}: Advance settings`, () => {
@@ -136,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

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

@@ -1,12 +1,9 @@
-import { loginPage } from '../../support/page_objects/navigation';
+import { loginPage } from "../../support/page_objects/navigation";
-import { roles } from '../../support/page_objects/projectConstants';
+import { roles } from "../../support/page_objects/projectConstants";
 
 export const genTest = (apiType, dbType) => {
   describe(`${apiType.toUpperCase()} api - Super user test`, () => {
-    before(() => {
+    before(() => {});
-      loginPage.signIn(roles.owner.credentials);
-      cy.saveLocalStorage();
-    });
 
     beforeEach(() => {
       cy.restoreLocalStorage();
@@ -16,70 +13,71 @@ export const genTest = (apiType, dbType) => {
       cy.saveLocalStorage();
     });
 
-    after(() => {
+    after(() => {});
-    });
-
 
     it(`Open App store page and check slack app`, () => {
-
+      cy.visit("/#/apps").then((win) => {
-      cy.visit('/#/apps').then(win => {
+        cy.get(".nc-app-store-title").should("exist");
-        cy.get('.nc-app-store-title').should('exist');
+        cy.get(".nc-app-store-card-Slack").should("exist");
-        cy.get('.nc-app-store-card-Slack').should('exist');
 
         // install slack app
-        cy.get('.nc-app-store-card-Slack .install-btn')
+        cy.get(".nc-app-store-card-Slack .install-btn").invoke(
-          .invoke('attr', 'style', 'right: 10px')
+          "attr",
+          "style",
+          "right: 10px"
+        );
 
-          cy.get('.nc-app-store-card-Slack .install-btn .nc-app-store-card-install')
+        cy.get(
-          .click();
+          ".nc-app-store-card-Slack .install-btn .nc-app-store-card-install"
+        ).click();
 
-        cy.getActiveModal('.nc-modal-plugin-install')
+        cy.getActiveModal(".nc-modal-plugin-install")
           .find('[placeholder="Channel Name"]')
-          .type('Test channel')
+          .type("Test channel");
 
-        cy.getActiveModal('.nc-modal-plugin-install')
+        cy.getActiveModal(".nc-modal-plugin-install")
           .find('[placeholder="Webhook URL"]')
-          .type('http://test.com')
+          .type("http://test.com");
-
 
-        cy.getActiveModal('.nc-modal-plugin-install')
+        cy.getActiveModal(".nc-modal-plugin-install")
           .find('button:contains("Save")')
-          .click()
+          .click();
-
-        cy.toastWait('Successfully installed')
 
-        cy.get('.nc-app-store-card-Slack .install-btn .nc-app-store-card-install').should('not.exist');
+        cy.toastWait("Successfully installed");
 
+        cy.get(
+          ".nc-app-store-card-Slack .install-btn .nc-app-store-card-install"
+        ).should("not.exist");
 
         // update slack app config
-        cy.get('.nc-app-store-card-Slack .install-btn .nc-app-store-card-edit').should('exist').click()
+        cy.get(".nc-app-store-card-Slack .install-btn .nc-app-store-card-edit")
-        cy.getActiveModal('.nc-modal-plugin-install')
+          .should("exist")
-          .should('exist')
+          .click();
+        cy.getActiveModal(".nc-modal-plugin-install")
+          .should("exist")
           .find('[placeholder="Channel Name"]')
-          .should('have.value', 'Test channel')
+          .should("have.value", "Test channel")
           .clear()
-          .type('Test channel 2')
+          .type("Test channel 2");
 
-        cy.getActiveModal('.nc-modal-plugin-install')
+        cy.getActiveModal(".nc-modal-plugin-install")
           .get('button:contains("Save")')
-          .click()
+          .click();
-
-
-        cy.toastWait('Successfully installed')
 
+        cy.toastWait("Successfully installed");
 
         // reset slack app
-        cy.get('.nc-app-store-card-Slack .install-btn .nc-app-store-card-reset').should('exist').click()
+        cy.get(".nc-app-store-card-Slack .install-btn .nc-app-store-card-reset")
+          .should("exist")
+          .click();
 
-        cy.getActiveModal('.nc-modal-plugin-uninstall')
+        cy.getActiveModal(".nc-modal-plugin-uninstall")
-          .should('exist')
+          .should("exist")
           .find('button:contains("Confirm")')
-          .click()
+          .click();
-
-        cy.toastWait('Plugin uninstalled successfully')
 
+        cy.toastWait("Plugin uninstalled successfully");
       });
-
     });
   });
-}
+};

scripts/cypress/integration/test/pg-restRoles.js

@@ -12,7 +12,7 @@ const nocoTestSuite = (apiType, dbType) => {
   t01.genTest(apiType, dbType);
 
   t5a.genTest(apiType, dbType);
-  // t5b.genTest(apiType, dbType);
+  t5b.genTest(apiType, dbType);
   t5c.genTest(apiType, dbType);
 };
 

scripts/cypress/integration/test/restRoles.js

@@ -12,9 +12,8 @@ const nocoTestSuite = (apiType, dbType) => {
   t01.genTest(apiType, dbType);
 
   t5a.genTest(apiType, dbType);
-  // t5b.genTest(apiType, dbType);
+  t5b.genTest(apiType, dbType);
-   t5c.genTest(apiType, dbType);
+  t5c.genTest(apiType, dbType);
-
 };
 
 nocoTestSuite("rest", "mysql");

scripts/cypress/integration/test/xcdb-restRoles.js

@@ -12,7 +12,7 @@ const nocoTestSuite = (apiType, dbType) => {
   t01.genTest(apiType, dbType);
 
   t5a.genTest(apiType, dbType);
-  // t5b.genTest(apiType, dbType);
+  t5b.genTest(apiType, dbType);
   t5c.genTest(apiType, dbType);
 };