wip(cypress): add tests for expanded form

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/smartsheet/expanded-form/Header.vue

@@ -54,7 +54,7 @@ const copyRecordUrl = () => {
 </script>
 
 <template>
-  <div class="flex p-2 items-center gap-2 p-4">
+  <div class="flex p-2 items-center gap-2 p-4 nc-expanded-form-header">
     <h5 class="text-lg font-weight-medium flex items-center gap-1 mb-0 min-w-0 overflow-x-hidden truncate">
       <mdi-table-arrow-right :style="{ color: iconColor }" />
 
@@ -82,7 +82,7 @@ const copyRecordUrl = () => {
         <!-- todo: i18n -->
         <div class="text-center w-full">Copy record URL</div>
       </template>
-      <mdi-link v-if="!isNew" class="cursor-pointer select-none text-gray-500 mx-1" @click="copyRecordUrl" />
+      <mdi-link v-if="!isNew" class="cursor-pointer select-none text-gray-500 mx-1 nc-copy-row-url" @click="copyRecordUrl" />
     </a-tooltip>
     <a-tooltip v-if="!isSqlView" placement="bottom">
       <!--      Toggle comments draw -->
@@ -97,7 +97,7 @@ const copyRecordUrl = () => {
       />
     </a-tooltip>
 
-    <a-button class="!text mx-1" @click="emit('cancel')">
+    <a-button class="!text mx-1 nc-expand-form-close-btn" @click="emit('cancel')">
       <!-- Cancel -->
       {{ $t('general.cancel') }}
     </a-button>

scripts/cypress/integration/common/4g_table_view_expanded_form.js

@@ -0,0 +1,105 @@
+import { isTestSuiteActive } from '../../support/page_objects/projectConstants';
+
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+export const genTest = (apiType, dbType) => {
+  if (!isTestSuiteActive(apiType, dbType)) return;
+
+  describe(`${apiType.toUpperCase()} api - Table views: Expanded form`, () => {
+
+    before(() => {
+      cy.restoreLocalStorage();
+
+      // open a table to work on views
+      //
+      cy.openTableTab('Country', 25);
+    });
+
+    beforeEach(() => {
+      cy.restoreLocalStorage();
+    });
+
+    afterEach(() => {
+      cy.saveLocalStorage();
+    });
+
+    after(() => {
+      cy.restoreLocalStorage();
+      cy.closeTableTab('Country');
+      cy.saveLocalStorage();
+    });
+
+    // Common routine to create/edit/delete GRID & GALLERY view
+    // Input: viewType - 'grid'/'gallery'
+    //
+    const viewTest = (viewType) => {
+      it(`Create ${viewType} view`, () => {
+        // click on 'Grid/Gallery' button on Views bar
+        cy.get(`.nc-create-${viewType}-view`).click();
+
+        // Pop up window, click Submit (accepting default name for view)
+        cy.getActiveModal('.nc-modal-view-create').find('.ant-btn-primary').click();
+        cy.toastWait('View created successfully');
+
+        // validate if view was created && contains default name 'Country1'
+        cy.get(`.nc-${viewType}-view-item`)
+          .contains(`${capitalizeFirstLetter(viewType)}-1`)
+          .should('exist');
+      });
+
+
+      it(`Expand a row in ${viewType} and verify url`, () => {
+
+        if (viewType === 'grid') {
+          cy.get('.nc-row-expand')
+            .first()
+            .click({ force: true });
+        } else if (viewType === 'gallery') {
+          cy.get('.nc-gallery-container .ant-card')
+            .first()
+            .click({ force: true });
+        }
+        cy.url().should('include', 'rowId=1');
+
+        // copy url
+        cy.get('.nc-copy-row-url').click();
+
+        cy.window().then((win) => {
+          win.navigator.clipboard.readText().then((text) => {
+            expect(text).to.contains('?rowId=1');
+          });
+        });
+
+        cy.get('.nc-expand-form-close-btn').click();
+
+      });
+
+      it(`Visit a ${viewType} row url and verify expanded form`, () => {
+        cy.url()
+          .then((url) => {
+            cy.restoreLocalStorage();
+            cy.visit('/' + url.split('/').slice(3).join('/').split('?')[0] + '?rowId=2');
+            cy.get('.nc-expanded-form-header').should('exist');
+            cy.saveLocalStorage();
+          });
+      });
+
+      it(`Visit an invalid ${viewType} row url and verify expanded form`, () => {
+        cy.url()
+          .then((url) => {
+            cy.restoreLocalStorage();
+            cy.visit('/' + url.split('/').slice(3).join('/').split('?')[0] + '?rowId=99999999');
+            cy.get('.nc-expanded-form-header').should('not.exist');
+            cy.saveLocalStorage();
+          });
+      });
+
+
+    };
+
+    viewTest('grid');  // grid view
+    viewTest('gallery');  // gallery view
+  });
+};

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

@@ -6,6 +6,7 @@ let t4c = require("../common/4c_form_view_detailed");
 let t4d = require("../common/4d_table_view_grid_locked");
 let t4e = require("../common/4e_form_view_share");
 let t4f = require("../common/4f_pg_grid_view_share");
+let t4g = require("../common/4g_table_view_expanded_form");
 const {
     setCurrentMode,
 } = require("../../support/page_objects/projectConstants");
@@ -20,6 +21,7 @@ const nocoTestSuite = (apiType, dbType) => {
     t4b.genTest(apiType, dbType);
     t4d.genTest(apiType, dbType);
     t4e.genTest(apiType, dbType);
+    t4g.genTest(apiType, dbType);
     // tbd t4f.genTest(apiType, dbType);
 };
 

scripts/cypress/integration/test/restViews.js

@@ -6,6 +6,7 @@ let t4c = require("../common/4c_form_view_detailed");
 let t4d = require("../common/4d_table_view_grid_locked");
 let t4e = require("../common/4e_form_view_share");
 let t4f = require("../common/4f_grid_view_share");
+let t4g = require("../common/4g_table_view_expanded_form");
 const {
     setCurrentMode,
 } = require("../../support/page_objects/projectConstants");
@@ -21,6 +22,7 @@ const nocoTestSuite = (apiType, dbType) => {
     t4d.genTest(apiType, dbType);
     t4e.genTest(apiType, dbType);
     t4f.genTest(apiType, dbType);
+    t4g.genTest(apiType, dbType);
 };
 
 nocoTestSuite("rest", "mysql");