test(cypress): table column - create, edit, rename, delete

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

cypress.json

@@ -3,5 +3,6 @@
   "defaultCommandTimeout": 10000,
   "pageLoadTimeout": 600000,
   "viewportWidth": 1800,
-  "viewportHeight": 1000
+  "viewportHeight": 1000,
+  "video": false
 }

cypress/integration/graphql/create_table_spec.js

@@ -1,20 +0,0 @@
-describe('Rest api project test', () => {
-
-  before(() => {
-    cy.waitForSpinners();
-    cy.openOrCreateGqlProject();
-  })
-
-  it('Create Table', () => {
-    cy.get('.add-btn').click();
-    const name = 'Test' + Date.now();
-    cy.get('.nc-create-table-card .nc-table-name input[type="text"]').first().click().clear().type(name)
-    cy.get('.nc-create-table-card .nc-table-name-alias input[type="text"]').first().should('have.value', name.toLowerCase())
-    cy.wait(5000)
-    cy.get('.nc-create-table-card .nc-create-table-submit').first().click()
-    cy.get(`.project-tab:contains(${name})`).should('exist')
-    cy.url().should('contain', `?name=${name}&`)
-  });
-
-
-})

cypress/integration/graphql/table_operations_spec.js

@@ -0,0 +1,72 @@
+describe('GraphQL api - Table', () => {
+
+  const name = 'Test' + Date.now();
+
+  before(() => {
+    cy.waitForSpinners();
+    cy.openOrCreateRestProject();
+  })
+
+  // create a new random table
+  it('Create Table', () => {
+    cy.get('.add-btn').click();
+    cy.get('.nc-create-table-card .nc-table-name input[type="text"]').first().click().clear().type(name)
+    cy.get('.nc-create-table-card .nc-table-name-alias input[type="text"]').first().should('have.value', name.toLowerCase())
+    cy.wait(5000)
+    cy.get('.nc-create-table-card .nc-create-table-submit').first().click()
+    cy.get(`.project-tab:contains(${name})`).should('exist')
+    cy.url().should('contain', `?name=${name}&`)
+  });
+
+
+  // add new column to newly created table
+  it('Create Table Column', () => {
+    cy.get('.nc-project-tree').find('.v-list-item__title:contains(Tables)', {timeout: 10000})
+      .first().click()
+
+    cy.get('.nc-project-tree').contains(name, {timeout: 6000}).first().click({force: true});
+
+    cy.get(`.project-tab:contains(${name}):visible`).should('exist')
+
+    cy.get('.v-window-item--active .nc-grid  tr > th:last button').click({force: true});
+    cy.get('.nc-column-name-input input').clear().type('new_column')
+    cy.get('.nc-col-create-or-edit-card').contains('Save').click()
+
+  });
+
+  // delete the newly created column
+  it('Delete table column', () => {
+    cy
+      .get('th:contains(new_column)')
+      .should('exist');
+
+    cy.get('th:contains(new_column) .mdi-menu-down')
+      .trigger('mouseover')
+      .click()
+
+    cy.get('.nc-column-delete').click()
+    cy.get('button:contains(Confirm)').click()
+
+
+    cy
+      .get('th:contains(new_column)')
+      .should('not.exist');
+
+  })
+
+
+  // delete newly created table
+  it('Delete Table', () => {
+    cy.get('.nc-project-tree').find('.v-list-item__title:contains(Tables)', {timeout: 10000})
+      .first().click()
+
+    cy.get('.nc-project-tree').contains(name, {timeout: 6000}).first().click({force: true});
+
+    cy.get(`.project-tab:contains(${name}):visible`).should('exist')
+
+    cy.get('.nc-table-delete-btn:visible').click()
+
+    cy.get('button:contains(Submit)').click()
+    cy.get(`.project-tab:contains(${name}):visible`).first().should('not.exist')
+  });
+})

cypress/integration/rest/api_operations_spec.js

@@ -0,0 +1,18 @@
+describe('Rest api - CRUD/Filter', () => {
+
+  before(() => {
+    cy.waitForSpinners();
+    cy.openOrCreateRestProject();
+
+    // open country table
+    cy.openTableTab('Country');
+
+  })
+
+  // create a new random table
+  it('Check country table - ', () => {
+    cy.get('.nc-pagination').should('exist')
+  });
+
+
+})

cypress/integration/rest/table_operations_spec.js

@@ -7,6 +7,7 @@ describe('Rest api - Table', () => {
     cy.openOrCreateRestProject();
   })
 
+  // create a new random table
   it('Create Table', () => {
     cy.get('.add-btn').click();
     cy.get('.nc-create-table-card .nc-table-name input[type="text"]').first().click().clear().type(name)
@@ -17,24 +18,94 @@ describe('Rest api - Table', () => {
     cy.url().should('contain', `?name=${name}&`)
   });
 
+
+  // add new column to newly created table
   it('Create Table Column', () => {
+    cy.get('.nc-project-tree').find('.v-list-item__title:contains(Tables)', {timeout: 10000})
+      .first().click()
 
+    cy.get('.nc-project-tree').contains(name, {timeout: 6000}).first().click({force: true});
 
-    cy.get('.nc-project-tree :contains(Tables)', {timeout: 10000})
-      .first().click()
-      .contains(name, {timeout: 6000}).first().click({force: true});
     cy.get(`.project-tab:contains(${name}):visible`).should('exist')
 
-    cy.get('.v-window-item--active .nc-grid  tr > th:last button').click();
+    cy.get('.v-window-item--active .nc-grid  tr > th:last button').click({force: true});
+    cy.get('.nc-column-name-input input').clear().type('new_column')
+    cy.get('.nc-col-create-or-edit-card').contains('Save').click()
+    cy
+      .get('th:contains(new_column)')
+      .should('exist');
+  });
+
+  // edit the newly created column
+  it('Edit table column - rename & uidt update', () => {
 
 
-  });
+    cy.get('th:contains(new_column) .mdi-menu-down')
+      .trigger('mouseover')
+      .click()
+
+    cy.get('.nc-column-edit').click()
+
+
+    // change column type and verify
+    cy.get('.nc-ui-dt-dropdown').click()
+    cy.contains('LongText').click()
+    cy.get('.nc-col-create-or-edit-card').contains('Save').click()
+
+    cy.get('th[data-col="new_column"] .mdi-text-subject').should('exist')
+
+
+    cy.get('th:contains(new_column) .mdi-menu-down')
+      .trigger('mouseover')
+      .click()
+
+    cy.get('.nc-column-edit').click()
+
+    // rename column and verify
+    cy.get('.nc-column-name-input input').clear().type('updated_column')
+    cy.get('.nc-col-create-or-edit-card').contains('Save').click()
+
 
+    cy
+      .get('th:contains(updated_column)')
+      .should('exist');
+    cy
+      .get('th:contains(new_column)')
+      .should('not.exist');
 
+
+  })
+
+
+  // delete the newly created column
+  it('Delete table column', () => {
+    cy
+      .get('th:contains(updated_column)')
+      .should('exist');
+
+    cy.get('th:contains(updated_column) .mdi-menu-down')
+      .trigger('mouseover')
+      .click()
+
+    cy.get('.nc-column-delete').click()
+    cy.get('button:contains(Confirm)').click()
+
+
+    cy
+      .get('th:contains(updated_column)')
+      .should('not.exist');
+
+  })
+
+
+  // delete newly created table
   it('Delete Table', () => {
-    cy.get('.nc-project-tree :contains(Tables)', {timeout: 10000})
+
+    cy.get('.nc-project-tree').find('.v-list-item__title:contains(Tables)', {timeout: 10000})
       .first().click()
-      .contains(name, {timeout: 6000}).first().click({force: true});
+
+    cy.get('.nc-project-tree').contains(name, {timeout: 6000}).first().click({force: true});
+
     cy.get(`.project-tab:contains(${name}):visible`).should('exist')
 
     cy.get('.nc-table-delete-btn:visible').click()

cypress/support/commands.js

@@ -87,8 +87,18 @@ Cypress.Commands.add('openOrCreateRestProject', () => {
 })
 
 
+Cypress.Commands.add('openTableTab', (tn) => {
+  cy.get('.nc-project-tree').find('.v-list-item__title:contains(Tables)', {timeout: 10000})
+    .first().click()
+
+  cy.get('.nc-project-tree').contains(tn, {timeout: 6000}).first().click({force: true});
+
+  cy.get(`.project-tab:contains(${tn}):visible`).should('exist')
+
+});
 Cypress.Commands.add('openOrCreateGqlProject', () => {
 
+
   cy.signinOrSignup()
 
 
@@ -111,3 +121,6 @@ Cypress.Commands.add('openOrCreateGqlProject', () => {
   cy.url({timeout: 20000}).should('contain', '#/nc/')
 
 })
+
+
+

docker-compose-cypress.yml

@@ -19,6 +19,7 @@ services:
       - -c
       - |
         echo "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"
+        # cp -r /home/app1/ /home/app/
         rm /home/app/package-lock.json
         cd /home/app/ && npm i && EE=true npm run run
   xc-cypress-nc-gui:
@@ -36,6 +37,7 @@ services:
       - |
         echo "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"
         apk --update --no-cache add git
+        # cp -r /home/app1/ /home/app/
         rm /home/app/package-lock.json
-        cd /home/app/ && npm i && npm run dev
-        # cd /home/app/ && npm i && NODE_ENV=development npm run build && npm start
+        # cd /home/app/ && npm i && npm run dev
+        cd /home/app/ && npm i && NODE_ENV=development npm run build && npm start

packages/nc-gui/components/project/spreadsheet/components/editColumn.vue

@@ -4,7 +4,7 @@
     max-width="400px"
     max-height="95vh"
     style="overflow: auto"
-    class="elevation-0 card"
+    class="elevation-0 card nc-col-create-or-edit-card"
   >
     <v-form ref="form" v-model="valid">
       <v-container fluid @click.stop.prevent>
@@ -29,7 +29,7 @@
                 v => !!v || 'Required',
                 v => !meta || !meta.columns || meta.columns.every(c => column && c.cn === column.cn || v !== c.cn ) && meta.v.every(c => v !== c._cn ) || 'Duplicate column name'
               ]"
-              class="caption"
+              class="caption nc-column-name-input"
               label="Column name"
               dense
               outlined
@@ -72,7 +72,7 @@
                     hide-details
                     item-value="name"
                     item-text="name"
-                    class="caption ui-type"
+                    class="caption ui-type nc-ui-dt-dropdown"
                     :class="{'primary lighten-5' : newColumn.uidt }"
                     label="Column type"
                     dense

packages/nc-gui/components/project/spreadsheet/components/headerCell.vue

@@ -59,7 +59,7 @@
         </v-icon>
       </template>
       <v-list dense>
-        <v-list-item dense @click="editColumnMenu = true">
+        <v-list-item class="nc-column-edit" dense @click="editColumnMenu = true">
           <x-icon small class="mr-1" color="primary">
             mdi-pencil
           </x-icon>
@@ -76,7 +76,7 @@
             <span class="caption font-weight-bold">Primary value will be shown in place of primary key</span>
           </v-tooltip>
         </v-list-item>
-        <v-list-item @click="columnDeleteDialog = true">
+        <v-list-item class="nc-column-delete" @click="columnDeleteDialog = true">
           <x-icon small class="mr-1" color="error">
             mdi-delete-outline
           </x-icon>
@@ -108,7 +108,7 @@
       max-width="500"
       persistent
     >
-      <v-card>
+      <v-card class="nc-delete-dialog-card">
         <v-card-title class="grey darken-2 subheading white--text">
           Confirm
         </v-card-title>

packages/nc-gui/components/project/spreadsheet/components/pagination.vue

@@ -5,7 +5,7 @@
     style="max-width: 100%"
     :length="Math.ceil(count / size)"
     :total-visible="8"
-    color="primary lighten-2"
+    color="primary lighten-2 nc-pagination"
     @input="$emit('input',page)"
   />
   <div v-else class="mx-auto d-flex align-center mt-n1 " style="max-width:250px">