Browse Source

test(cypress): Common test for GQL & Rest, Filter , Test for filter, row creation, etc...

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/510/head
Pranav C 3 years ago
parent
commit
163aba26b3
  1. 3
      cypress.json
  2. 155
      cypress/integration/common/filter_sort_fields_operations_spec.js
  3. 174
      cypress/integration/common/table_operations_spec.js
  4. 14
      cypress/integration/graphql/project_operations_spec.js
  5. 74
      cypress/integration/rest/api_operations_spec.js
  6. 18
      cypress/integration/rest/project_operations_spec.js
  7. 120
      cypress/integration/rest/table_operations_spec.js
  8. 36
      cypress/integration/rest/table_view_spec.js
  9. 25
      cypress/integration/rest/users_spec.js
  10. 184
      cypress/support/commands.js
  11. 1
      docker-compose-cypress.yml
  12. 6
      package-lock.json
  13. 1
      package.json
  14. 2
      packages/nc-gui/components/auth/userManagement.vue
  15. 2
      packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue
  16. 2
      packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue
  17. 9
      packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
  18. 2
      packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
  19. 4
      packages/nc-lib-gui/package.json

3
cypress.json

@ -4,5 +4,6 @@
"pageLoadTimeout": 600000,
"viewportWidth": 1800,
"viewportHeight": 1000,
"video": false
"video": false,
"retries": 2
}

155
cypress/integration/common/filter_sort_fields_operations_spec.js

@ -0,0 +1,155 @@
const genTest = (type) => {
describe(`${type.toUpperCase()} api - Filter, Fields, Sort`, () => {
before(() => {
cy.waitForSpinners();
if (type === 'rest') {
cy.openOrCreateRestProject({
new: true
});
} else {
cy.openOrCreateGqlProject({
new: true
});
}
// open country table
cy.openTableTab('Country');
// cy.intercept({
// method: "GET",
// url: "/nc/**/api/v1/Country**",
// hostname: 'localhost',
// port: 8080
// }).as("dataGetFirst");
// cy.wait("@dataGetFirst");
// todo: wait until api call completes
cy.wait(2000)
})
// check pagination
it('Check country table - ', () => {
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')
cy.get('.nc-pagination .v-pagination > li:first-child').click()
});
// create new row
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
})
// Test sort
it('Add sort option', () => {
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
cy.get('.nc-sort-item-remove-btn').click()
cy.contains('Zambia').should('not.exist')
})
// Test fields
it.only('Add fields options', () => {
cy.get('th:contains(LastUpdate)').should('be.visible')
// toggle and confirm it's hidden
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('not.be.visible')
// 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')
// drag fields
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_column1')
cy.get('.nc-col-create-or-edit-card').contains('Save').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_column2')
cy.get('.nc-col-create-or-edit-card').contains('Save').click()
// 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'));
})*/
})
// Test filter
it('Add filter options', () => {
cy.get('.nc-filter-menu-btn').click()
cy.contains('Add Filter').click();
cy.get('.nc-filter-field-select').last().click();
cy.get('.menuable__content__active .v-list-item:contains(Country)').click()
cy.get('.nc-filter-operation-select').last().click();
cy.get('.menuable__content__active .v-list-item:contains("is equal")').click()
cy.get('.nc-filter-value-select input:text').last().type('India');
cy.get('td:contains(India)').should('exist')
// remove sort and check
cy.get('.nc-filter-item-remove-btn').click()
cy.contains('td:contains(India)').should('not.exist')
})
})
}
genTest('rest')
genTest('graphql')

174
cypress/integration/common/table_operations_spec.js

@ -0,0 +1,174 @@
const genTest = (type) => {
describe(`${type.toUpperCase()} api - Table`, () => {
before(() => {
cy.waitForSpinners();
if (type === 'rest') {
cy.openOrCreateRestProject({
new: true
});
} else {
cy.openOrCreateGqlProject({
new: true
});
}
const randVal = 'Test' + Date.now();
const updatedRandVal = 'Updated' + Date.now();
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}&`)
});
// create new row
it('Create/Edit/Delete row', () => {
// add new row
cy.get('.nc-add-new-row-btn').click();
cy.get('#data-table-form-Title > input').first().type(randVal);
cy.contains('Save Row').filter('button').click()
cy.get('td').contains(randVal).should('exist');
// update row
cy.get('td').contains(randVal)
.closest('tr')
.find('.nc-row-expand-icon')
.click();
cy.get('#data-table-form-Title > input').first().clear().type(updatedRandVal);
cy.contains('Save Row').filter('button').click()
cy.get('td').contains(updatedRandVal).should('exist');
cy.get('td').contains(randVal).should('not.exist');
cy.get('td').contains(updatedRandVal).rightclick()
// delete row
cy.getActiveMenu().find('.v-list-item:contains("Delete Row")').first().click()
cy.wait(1000)
cy.get('td').contains(randVal).should('not.exist');
})
// 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()
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', {force: true})
.click({force: true})
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', {force: true})
.click({force: true})
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').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')
});
})
});
}
genTest('rest')
genTest('graphql')

14
cypress/integration/graphql/project_operations_spec.js

@ -1,12 +1,19 @@
describe('GraphQL Project operations', () => {
beforeEach(() => {
cy.restoreLocalStorage();
});
afterEach(() => {
cy.saveLocalStorage();
});
before(() => {
cy.waitForSpinners();
cy.signinOrSignup();
})
it('Create Project', () => {
// cy.visit('')
cy.contains('New Project').trigger('onmouseover').trigger('mouseenter');
cy.get('.create-external-db-project').click()
cy.url({timeout: 6000}).should('contain', '#/project/')
@ -18,21 +25,24 @@ describe('GraphQL Project operations', () => {
});
it('Stop Project', () => {
cy.wait(100000)
cy.visit('./#/projects')
// cy.get('.nc-graphql-project-row .mdi-stop-circle-outline', {timeout: 10000}).last().trigger('onmouseover').trigger('mouseenter')
cy.get('.nc-graphql-project-row .mdi-stop-circle-outline', {timeout: 10000}).last().invoke('show').click();
cy.contains('Submit').closest('button').click();
});
it('Start Project', () => {
cy.visit('./#/projects')
cy.get('.nc-graphql-project-row .mdi-play-circle-outline', {timeout: 10000}).last().invoke('show').click();
cy.contains('Submit').closest('button').click();
});
it('Restart Project', () => {
cy.visit('./#/projects')
cy.get('.nc-graphql-project-row .mdi-restart', {timeout: 10000}).last().invoke('show').click();
cy.contains('Submit').closest('button').click();
});
it('Delete Project', () => {
cy.visit('./#/projects')
cy.get('.nc-graphql-project-row .mdi-delete-circle-outline', {timeout: 10000}).last().invoke('show').click();
cy.contains('Submit').closest('button').click();
});

74
cypress/integration/rest/api_operations_spec.js

@ -1,74 +0,0 @@
describe('Rest api - CRUD/Filter', () => {
before(() => {
cy.waitForSpinners();
cy.openOrCreateRestProject();
// open country table
cy.openTableTab('Country');
// cy.intercept({
// method: "GET",
// url: "/nc/**/api/v1/Country**",
// hostname: 'localhost',
// port: 8080
// }).as("dataGetFirst");
// cy.wait("@dataGetFirst");
// todo: wait until api call completes
cy.wait(2000)
})
// check pagination
it('Check country table - ', () => {
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)').should('have.class', 'v-pagination__item--active')
});
// create new row
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
})
// Test sort
it('Add sort option', () => {
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')
})
// Test fields
it('Add fields options', () => {
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('not.exist')
})
// Test filter
it('Add filter options', () => {
cy.get('.nc-filter-menu-btn').click()
cy.contains('Add Filter').click();
cy.get('.nc-filter-field-select').last().click();
cy.get('.menuable__content__active .v-list-item:contains(Country)').click()
cy.get('.nc-filter-operation-select').last().click();
cy.get('.menuable__content__active .v-list-item:contains("is equal")').click()
cy.get('.nc-filter-value-select input:text').last().type('India');
cy.get('td:contains(India)').should('exist')
})
})

18
cypress/integration/rest/project_operations_spec.js

@ -1,34 +1,46 @@
describe('Rest Project operations', () => {
beforeEach(() => {
cy.restoreLocalStorage();
});
afterEach(() => {
cy.saveLocalStorage();
});
before(() => {
cy.waitForSpinners();
cy.signinOrSignup();
})
it('Create Project', () => {
// cy.visit('')
cy.contains('New Project').trigger('onmouseover').trigger('mouseenter');
cy.get('.create-external-db-project').click()
cy.url({timeout: 6000}).should('contain', '#/project')
cy.url({timeout: 6000}).should('contain', '#/project/')
cy.get('.database-field input').click().clear().type('dummy_db')
cy.contains('Test Database Connection').click()
cy.contains('Ok & Save Project', {timeout: 3000}).click()
cy.url({timeout: 12000}).should('contain', '#/nc/')
});
it('Stop Project', () => {
cy.visit('./#/projects')
// cy.get('.nc-rest-project-row .mdi-stop-circle-outline', {timeout: 10000}).last().trigger('onmouseover').trigger('mouseenter')
cy.get('.nc-rest-project-row .mdi-stop-circle-outline', {timeout: 10000}).last().invoke('show').click();
cy.contains('Submit').closest('button').click();
});
it('Start Project', () => {
cy.visit('./#/projects')
cy.get('.nc-rest-project-row .mdi-play-circle-outline', {timeout: 10000}).last().invoke('show').click();
cy.contains('Submit').closest('button').click();
});
it('Restart Project', () => {
cy.visit('./#/projects')
cy.get('.nc-rest-project-row .mdi-restart', {timeout: 10000}).last().invoke('show').click();
cy.contains('Submit').closest('button').click();
});
it('Delete Project', () => {
cy.visit('./#/projects')
cy.get('.nc-rest-project-row .mdi-delete-circle-outline', {timeout: 10000}).last().invoke('show').click();
cy.contains('Submit').closest('button').click();
});

120
cypress/integration/rest/table_operations_spec.js

@ -1,120 +0,0 @@
describe('Rest 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()
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').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')
});
})

36
cypress/integration/rest/table_view_spec.js

@ -0,0 +1,36 @@
describe('Rest api - Table', () => {
const name = 'Test' + Date.now();
before(() => {
cy.waitForSpinners();
cy.openOrCreateRestProject();
cy.openTableTab('Country');
})
it('Create grid view', () => {
cy.get('.nc-create-grid-view').click();
cy.getActiveModal().find('button:contains(Submit)').click()
cy.get('.nc-view-item.nc-grid-view-item').should('exist')
})
it('Create gallery view', () => {
cy.get('.nc-create-gallery-view').click();
cy.getActiveModal().find('button:contains(Submit)').click()
cy.get('.nc-view-item.nc-gallery-view-item').should('exist')
})
/* it('Delete grid view', () => {
cy.get('.nc-view-item.nc-grid-view-item').then($items => {
cy.get('.nc-view-item.nc-grid-view-item .nc-view-delete-icon').last().invoke('show').click()
expect(Cypress.$('.nc-view-item.nc-grid-view-item').length).to.be.lt($items.length)
})
})
it('Delete gallery view', () => {
cy.get('.nc-view-item.nc-gallery-view-item').then($items => {
cy.get('.nc-view-item.nc-gallery-view-item .nc-view-delete-icon').last().invoke('show').click()
expect(Cypress.$('.nc-view-item.nc-gallery-view-item').length).to.be.lt($items.length)
})
})*/
})

25
cypress/integration/rest/users_spec.js

@ -0,0 +1,25 @@
describe('User mana', () => {
const email = `noco${Date.now()}@gmail.com`;
before(() => {
cy.waitForSpinners();
cy.openOrCreateRestProject();
})
it('Add new user', () => {
cy.get('.v-list-item:contains("Team & Auth")').click();
cy.get(`.project-tab:contains("Team & Auth"):visible`).should('exist')
cy.get(`td:contains("pranavc@gmail.com")`).should('exist')
cy.get('button:contains("New User")').first().click()
cy.get('label:contains(Email)').next('input').type(email)
cy.get('.nc-invite-or-save-btn').click()
})
})

184
cypress/support/commands.js

@ -24,6 +24,8 @@
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
require('@4tw/cypress-drag-drop')
// for waiting until page load
Cypress.Commands.add('waitForSpinners', () => {
cy.visit('http://localhost:3000', {
@ -33,7 +35,7 @@ Cypress.Commands.add('waitForSpinners', () => {
"Accept-Encoding": "gzip, deflate"
}
})
cy.get('#nuxt-loading', {timeout: 10_000}).should('have.length', 0)
cy.get('#nuxt-loading', {timeout: 10_0000}).should('have.length', 0)
})
Cypress.Commands.add('signinOrSignup', () => {
@ -63,28 +65,30 @@ Cypress.Commands.add('signinOrSignup', () => {
})
});
// for opening/creating a rest project
Cypress.Commands.add('openOrCreateRestProject', () => {
Cypress.Commands.add('openOrCreateRestProject', (_args) => {
const args = Object.assign({new: false}, _args)
// signin/signup
cy.signinOrSignup()
cy.wait(2000);
cy.get('body').then($body => {
// if project exist open
if ($body.find('.nc-rest-project-row').length) {
cy.get('.nc-rest-project-row').first().click()
// create new project
} else {
cy.contains('New Project').trigger('onmouseover').trigger('mouseenter');
cy.get('.create-external-db-project').click()
cy.url({timeout: 6000}).should('contain', '#/project')
cy.get('.database-field input').click().clear().type('sakila')
cy.contains('Test Database Connection').click()
cy.contains('Ok & Save Project', {timeout: 3000}).click()
}
})
cy.url({timeout: 20000}).should('contain', '#/nc/')
// signin/signup
cy.signinOrSignup()
cy.wait(2000);
cy.get('body').then($body => {
// if project exist open
if ($body.find('.nc-rest-project-row').length && !args.new) {
cy.get('.nc-rest-project-row').first().click()
// create new project
} else {
cy.contains('New Project').trigger('onmouseover').trigger('mouseenter');
cy.get('.create-external-db-project').click()
cy.url({timeout: 6000}).should('contain', '#/project')
cy.get('.database-field input').click().clear().type('sakila')
cy.contains('Test Database Connection').click()
cy.contains('Ok & Save Project', {timeout: 3000}).click()
}
})
cy.url({timeout: 20000}).should('contain', '#/nc/')
})
}
)
Cypress.Commands.add('openTableTab', (tn) => {
@ -96,8 +100,8 @@ Cypress.Commands.add('openTableTab', (tn) => {
cy.get(`.project-tab:contains(${tn}):visible`).should('exist')
});
Cypress.Commands.add('openOrCreateGqlProject', () => {
Cypress.Commands.add('openOrCreateGqlProject', (_args) => {
const args = Object.assign({new: false}, _args)
cy.signinOrSignup()
@ -105,7 +109,7 @@ Cypress.Commands.add('openOrCreateGqlProject', () => {
cy.wait(2000);
cy.get('body').then($body => {
// if project exist open
if ($body.find('.nc-graphql-project-row').length) {
if ($body.find('.nc-graphql-project-row').length && !args.new) {
cy.get('.nc-graphql-project-row').first().click()
// create new project
} else {
@ -122,5 +126,137 @@ Cypress.Commands.add('openOrCreateGqlProject', () => {
})
let LOCAL_STORAGE_MEMORY = {};
Cypress.Commands.add("saveLocalStorage", () => {
Object.keys(localStorage).forEach(key => {
LOCAL_STORAGE_MEMORY[key] = localStorage[key];
});
});
Cypress.Commands.add("restoreLocalStorage", () => {
Object.keys(LOCAL_STORAGE_MEMORY).forEach(key => {
localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key]);
});
});
Cypress.Commands.add("getActiveModal", () => {
return cy.get('.v-dialog.v-dialog--active')
});
Cypress.Commands.add("getActiveMenu", () => {
return cy.get('.menuable__content__active')
});
// Drag n Drop
// refer: https://stackoverflow.com/a/55409853
const getCoords = ($el) => {
const domRect = $el[0].getBoundingClientRect()
const coords = { x: domRect.left + (domRect.width / 2 || 0), y: domRect.top + (domRect.height / 2 || 0) }
return coords
}
const dragTo = (subject, to, opts) => {
opts = Cypress._.defaults(opts, {
// delay inbetween steps
delay: 0,
// interpolation between coords
steps: 0,
// >=10 steps
smooth: false,
})
if (opts.smooth) {
opts.steps = Math.max(opts.steps, 10)
}
const win = subject[0].ownerDocument.defaultView
const elFromCoords = (coords) => win.document.elementFromPoint(coords.x, coords.y)
const winMouseEvent = win.MouseEvent
const send = (type, coords, el) => {
el = el || elFromCoords(coords)
el.dispatchEvent(
new winMouseEvent(type, Object.assign({}, { clientX: coords.x, clientY: coords.y }, { bubbles: true, cancelable: true }))
)
}
const toSel = to
function drag (from, to, steps = 1) {
const fromEl = elFromCoords(from)
const _log = Cypress.log({
$el: fromEl,
name: 'drag to',
message: toSel,
})
_log.snapshot('before', { next: 'after', at: 0 })
_log.set({ coords: to })
send('mouseover', from, fromEl)
send('mousedown', from, fromEl)
cy.then(() => {
return Cypress.Promise.try(() => {
if (steps > 0) {
const dx = (to.x - from.x) / steps
const dy = (to.y - from.y) / steps
return Cypress.Promise.map(Array(steps).fill(), (v, i) => {
i = steps - 1 - i
let _to = {
x: from.x + dx * (i),
y: from.y + dy * (i),
}
send('mousemove', _to, fromEl)
return Cypress.Promise.delay(opts.delay)
}, { concurrency: 1 })
}
})
.then(() => {
send('mousemove', to, fromEl)
send('mouseover', to)
send('mousemove', to)
send('mouseup', to)
_log.snapshot('after', { at: 1 }).end()
})
})
}
const $el = subject
const fromCoords = getCoords($el)
const toCoords = getCoords(cy.$$(to))
drag(fromCoords, toCoords, opts.steps)
}
Cypress.Commands.addAll(
{ prevSubject: 'element' },
{
dragTo,
}
)

1
docker-compose-cypress.yml

@ -23,6 +23,7 @@ services:
echo "~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"
# cp -r /home/app1/ /home/app/
rm /home/app/package-lock.json
rm /home/app/noco.db
cd /home/app/ && npm i && EE=true npm run run
xc-cypress-nc-gui:
network_mode: host

6
package-lock.json generated

@ -3,6 +3,12 @@
"requires": true,
"lockfileVersion": 1,
"dependencies": {
"@4tw/cypress-drag-drop": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/@4tw/cypress-drag-drop/-/cypress-drag-drop-1.8.0.tgz",
"integrity": "sha512-hPg9JvG3f+rzunVj6cZjgHaNtZ8JMbHBwD00PZjyl6/ysqyZzeR74b8yWUF0zohWcCG9bHVu666EhotOiIKhZw==",
"dev": true
},
"@babel/code-frame": {
"version": "7.12.13",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",

1
package.json

@ -2,6 +2,7 @@
"name": "root",
"private": true,
"devDependencies": {
"@4tw/cypress-drag-drop": "^1.8.0",
"cypress": "^7.3.0",
"jsdoc-to-markdown": "^5.0.3",
"lerna": "^3.20.1"

2
packages/nc-gui/components/auth/userManagement.vue

@ -491,7 +491,7 @@
v-ge="['rows','save']"
tooltip="Save Changes"
color="primary"
btn.class="mt-5 mb-3 pr-5"
btn.class="mt-5 mb-3 pr-5 nc-invite-or-save-btn"
@click="saveUser"
>
<v-icon small left>

2
packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue

@ -9,7 +9,7 @@
v-if="!filter.readOnly"
:key="i + '_3'"
small
class=""
class="nc-filter-item-remove-btn"
@click.stop="filters.splice(i,1)"
>
mdi-close-box

2
packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue

@ -29,7 +29,7 @@
<div class="backgroundColor pa-2" style="min-width: 330px">
<div class="sort-grid" @click.stop>
<template v-for="(sort,i) in sortList" dense>
<v-icon :key="i + 'icon'" small @click.stop="sortList.splice(i,1)">
<v-icon :key="i + 'icon'" class="nc-sort-item-remove-btn" small @click.stop="sortList.splice(i,1)">
mdi-close-box
</v-icon>

9
packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue

@ -21,7 +21,8 @@
dense
:value="view.id"
active-class="x-active--text"
class="body-2 text-capitalize view"
class="body-2 text-capitalize view nc-view-item"
:class="`nc-${view.show_as}-view-item`"
>
<v-list-item-icon class="mr-n1">
<v-icon
@ -68,7 +69,7 @@
:tooltip="$t('nav_drawer.virtual_views.action.copy')"
x-small
color="primary"
icon-class="view-icon"
icon-class="view-icon nc-view-copy-icon"
@click.stop="copyView(view, i)"
>
mdi-content-copy
@ -79,7 +80,7 @@
:tooltip="$t('nav_drawer.virtual_views.action.rename')"
x-small
color="primary"
icon-class="view-icon"
icon-class="view-icon nc-view-edit-icon"
@click.stop="showRenameTextBox(view, i)"
>
mdi-pencil
@ -90,7 +91,7 @@
:tooltip="$t('nav_drawer.virtual_views.action.delete')"
small
color="error"
icon-class="view-icon"
icon-class="view-icon nc-view-delete-icon"
@click.stop="deleteView(view)"
>
mdi-delete-outline

2
packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue

@ -115,7 +115,7 @@
v-if="!groupedAggCount[ids[row]]"
color="pink"
small
class="row-expand-icon mr-1 pointer"
class="row-expand-icon nc-row-expand-icon mr-1 pointer"
@click="expandRow(row,rowMeta)"
>
mdi-arrow-expand

4
packages/nc-lib-gui/package.json

@ -1,6 +1,6 @@
{
"name": "nc-lib-gui",
"version": "0.2.38",
"version": "0.2.41",
"description": "> TODO: description",
"author": "“pranavxc” <pranavxc@gmail.com>",
"homepage": "https://gitlab.com/xgenecloud-ts/xgenecloud-ts#readme",
@ -30,4 +30,4 @@
"express": "^4.17.1",
"vuedraggable": "^2.24.3"
}
}
}
Loading…
Cancel
Save