test: [cypress] row operation (add using right click menu), delete multiple selected, row operation validations

Signed-off-by: dstala <sivadstala@gmail.com>

cypress/integration/common/filter_sort_fields_operations_spec.js

@@ -1,11 +1,10 @@
 
+import { mainPage } from "../../support/page_objects/mainPage"
 import { loginPage } from "../../support/page_objects/navigation"
 
-
 const genTest = (type) => {
 
   describe(`${type.toUpperCase()} api - Filter, Fields,  Sort`, () => {
-
     before(() => {
       loginPage.loginAndOpenProject(type)
 
@@ -15,48 +14,113 @@ const genTest = (type) => {
 
     })
 
+    describe(`Pagination`, () => {
     // check pagination
     it('Check country table - Pagination', () => {
-      cy.get('.nc-pagination').should('exist');
+        cy.get('.nc-pagination').should('exist')
-      cy.get('.nc-pagination .v-pagination > li:last-child').click()
+
-      cy.get('.nc-pagination .v-pagination > li:contains(2) button').should('have.class', 'v-pagination__item--active')
+        // verify > pagination option
+        mainPage.getPagination('>').click()
+        mainPage.getPagination(2).should('have.class', 'v-pagination__item--active')
+
+        // verify < pagination option
+        mainPage.getPagination('<').click()
+        mainPage.getPagination(1).should('have.class', 'v-pagination__item--active')
+      })
+    })
+
 
-      cy.get('.nc-pagination .v-pagination > li:first-child').click()
+    describe(`Row operations`, () => {
-    });
+      // create new row using + button in header
+      //
+      it('Add row using tool header button', () => {
 
-    // create new row
+        // add a row to end of Country table
-    it('Create new row', () => {
       cy.get('.nc-add-new-row-btn').click();
       cy.get('#data-table-form-Country > input').first().type('Test Country');
       cy.contains('Save Row').filter('button').click()
 
-      // todo: verify
+        // verify
+        mainPage.getPagination(5).click()
+        mainPage.getCell("Country", 10).contains("Test Country").should('exist')
     })
 
-    // Test sort
+      // delete slingle row
-    it('Add sort option', () => {
+      //
+      it('Delete row', () => {
+        // delete row added in previous step
+        mainPage.getCell("Country", 10).rightclick()
+        cy.getActiveMenu().contains('Delete Row').click()
+
+        // verify
+        mainPage.getCell("Country", 10).should('not.exist')
+      })
+
+      // create new row using right click menu option
+      //
+      it('Add row using rightclick menu option', () => {
+        mainPage.getPagination(5).click()
+
+        mainPage.getCell("Country", 9).rightclick()
+        cy.getActiveMenu().contains('Insert New Row').click()
+        mainPage.getCell("Country", 10).dblclick().type('Test Country-1{enter}')
+
+        mainPage.getCell("Country", 10).rightclick()
+        cy.getActiveMenu().contains('Insert New Row').click()
+        mainPage.getCell("Country", 11).dblclick().type('Test Country-2{enter}')
+
+        // verify
+        mainPage.getCell("Country", 10).contains("Test Country-1").should('exist')
+        mainPage.getCell("Country", 11).contains("Test Country-2").should('exist')  
+      })    
+
+      // delete selected rows (multiple)
+      //
+      it('Delete Selected', () => {
+        mainPage.getRow(10).find('.mdi-checkbox-blank-outline').click({force: true})
+        mainPage.getRow(11).find('.mdi-checkbox-blank-outline').click({force: true})
+
+        mainPage.getCell("Country", 10).rightclick()
+        cy.getActiveMenu().contains('Delete Selected Row').click()
+
+        // verify
+        mainPage.getCell("Country", 10).should('not.exist')
+        mainPage.getCell("Country", 11).should('not.exist')   
+      })
+
+    })
+
+    
+    describe(`Sort operations`, () => {
+      it('Enable sort', () => {
+        // Sort menu operations (Country Column, Z->A)
       cy.get('.nc-sort-menu-btn').click()
       cy.contains('Add Sort Option').click();
       cy.get('.nc-sort-field-select div').first().click()
       cy.get('.menuable__content__active .v-list-item:contains(Country)').click()
       cy.get('.nc-sort-dir-select div').first().click()
       cy.get('.menuable__content__active .v-list-item:contains("Z -> A")').click()
+        
       cy.contains('Zambia').should('exist')
+      })
 
-      // remove sort and check
+      it('Disable sort', () => {
+        // remove sort and validate
       cy.get('.nc-sort-item-remove-btn').click()
       cy.contains('Zambia').should('not.exist')
     })
 
+    })
+
 
     describe('Field Operation', () => {
-
       before(() => {
         cy.get('.nc-fields-menu-btn').click()
       })
 
       if ('Hide field', () => {
         cy.get('th:contains(LastUpdate)').should('be.visible')
+
         // toggle and confirm it's hidden
         cy.get('.menuable__content__active .v-list-item label:contains(LastUpdate)').click()
         cy.get('th:contains(LastUpdate)').should('not.be.visible')
@@ -69,56 +133,7 @@ const genTest = (type) => {
     })
 
 
-    // Test fields
-    // it('Add fields options', () => {
-
-
-      // toggle and confirm it's visible
-      // // cy.get('.nc-fields-menu-btn').click()
-      // cy.get('.menuable__content__active .v-list-item label:contains(LastUpdate)').click()
-      // cy.get('th:contains(LastUpdate)').should('be.visible')
-
-
-      // cy.get('.menuable__content__active .v-list-item label:contains(Country)').closest('.v-list-item').dragTo('.v-list-item:has(.menuable__content__active .v-list-item label:contains(LastUpdate)')
-      /*    cy.get('.nc-fields-menu-btn').click()
-
-
-          cy.get('.menuable__content__active .v-list-item').eq(1).invoke('attr','draggable', 'true')
-
-          cy.get('.menuable__content__active .v-list-item').eq(1).drag('.menuable__content__active .v-list > d')
-          cy.get('.menuable__content__active .v-list-item').eq(1).move({x: 100, y: 100})
-
-
-          cy.get('.menuable__content__active .v-list-item').then($el => {
-            const draggable = $el[1]; // Cypress.$('.menuable__content__active .v-list-item label:contains(Country)').closest('.v-list-item')[0]  // Pick up this
-            const droppable = $el[$el.length - 3];
-            draggable.setAttribute('draggable', 'true')
-            // console.log(draggable, droppable)
-            // const coords = droppable.getBoundingClientRect()
-            // cy.wrap(draggable).click().dragTo(droppable)
-
-
-            // cy.wrap(draggable).trigger("dragstart");
-            // cy.wrap(droppable).trigger("drop");
-
-            // cy.wrap(draggable).drop(droppable);
-
-
-            // draggable.parentElement.dispatchEvent(new MouseEvent('dragenter'))
-            // draggable.parentElement.dispatchEvent(new MouseEvent('dragover'))
-            // draggable.dispatchEvent(new MouseEvent('pointerdown'))
-            // draggable.dispatchEvent(new MouseEvent('mousemove'));
-            // draggable.dispatchEvent(new MouseEvent('mousedown'));
-            // draggable.dispatchEvent(new MouseEvent('mousemove', {clientX: 10, clientY: 0}));
-            // draggable.dispatchEvent(new MouseEvent('mousemove', {clientX: coords.x + 10, clientY: coords.y + 10}));
-            // draggable.dispatchEvent(new MouseEvent('mouseup'));
-          })*/
-
-    // })
-
-
     describe('Filter operations', () => {
-
       it('Create Filter', () => {
         cy.get('.nc-filter-menu-btn').click()
         cy.contains('Add Filter').click();
@@ -133,26 +148,13 @@ const genTest = (type) => {
       })
 
       it('Delete Filter', () => {
-
         // remove sort and check
         cy.get('.nc-filter-item-remove-btn').click()
         cy.contains('td:contains(India)').should('not.exist')
-
       })
-
     })
-
-
-    //
-    // // Test filter
-    // it('Add filter options', () => {
-    //
-    //
-    // })
-
   })
 }
 
-
 genTest('rest')
 genTest('graphql')

cypress/support/page_objects/mainPage.js

@@ -98,6 +98,23 @@ export class _mainPage {
         cy.get('.nc-invite-or-save-btn').click()  
         cy.wait(1000)       
     }
+
+    getCell = (columnHeader, cellNumber) => {
+        return cy.get(`tbody > :nth-child(${cellNumber}) > [data-col="${columnHeader}"]`)
+    }
+
+    getPagination = (pageNumber) => {
+        if(pageNumber == '<')
+            return cy.get('.nc-pagination .v-pagination > li:first-child')
+        if(pageNumber == '>')
+            return cy.get('.nc-pagination .v-pagination > li:last-child')
+            
+        return cy.get(`.nc-pagination .v-pagination > li:contains(${pageNumber}) button`)
+    }
+
+    getRow = (rowIndex) => {
+        return cy.get('.xc-row-table').find('tr').eq(rowIndex)
+    }
 }