github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Merge pull request #3857 from nocodb/test/pg-grid-view-share 

test: pg grid view share
pull/3894/head
Raju Udava 2 years ago committed by GitHub
parent
c596ae3718 7f08233b96
commit
1b434fa0bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 243 additions and 180 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
  2. 3
      scripts/cypress/integration/common/4f_grid_view_share.js
  3. 365
      scripts/cypress/integration/common/4f_pg_grid_view_share.js
  4. 2
      scripts/cypress/integration/test/pg-restViews.js
  5. 34
      scripts/cypress/support/commands.js
  6. 3
      scripts/cypress/support/page_objects/mainPage.js

16
packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
Unescape View File

@ -102,9 +102,17 @@ watch(
<div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col py-6">
<div class="flex mb-4 items-center gap-2 px-12">
<div class="flex-1" />
<MdiReload v-if="!isForm" class="cursor-pointer text-gray-500" @click="loadChildrenList" />
<a-button v-if="!readonly" type="primary" ghost class="!text-xs" size="small" @click="emit('attachRecord')">
<MdiReload v-if="!isForm" class="cursor-pointer text-gray-500" data-cy="nc-child-list-reload" @click="loadChildrenList" />
<a-button
v-if="!readonly"
type="primary"
ghost
class="!text-xs"
data-cy="nc-child-list-button-link-to"
size="small"
@click="emit('attachRecord')"
>
<div class="flex items-center gap-1">
<MdiLinkVariantRemove class="text-xs" type="primary" @click="unlinkRow(row)" />
Link to '{{ relatedTableMeta.title }}'
@ -135,11 +143,13 @@ watch(
<div v-if="!readonly" class="flex gap-2">
<MdiLinkVariantRemove
class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
data-cy="nc-child-list-icon-unlink"
@click.stop="unlinkRow(row)"
/>
<MdiDeleteOutline
v-if="!readonly && !isPublic"
class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
data-cy="nc-child-list-icon-delete"
@click.stop="deleteRelatedRow(row, unlinkIfNewRow)"
/>
</div>

3
scripts/cypress/integration/common/4f_grid_view_share.js
Unescape View File

@ -31,7 +31,8 @@ export const genTest = (apiType, dbType) => {
.find(".share-link-box")
.contains("/nc/view/", { timeout: 10000 })
.then(($obj) => {
cy.get("body").type("{esc}");
// cy.get("body").type("{esc}");
cy.closeActiveModal(".nc-modal-share-view");
// viewURL.push($obj.text())
viewURL[viewName] = $obj.text().trim();
});

365
scripts/cypress/integration/common/4f_pg_grid_view_share.js
Unescape View File

@ -1,5 +1,6 @@
import { isTestSuiteActive } from "../../support/page_objects/projectConstants";
import { mainPage } from "../../support/page_objects/mainPage";
import { loginPage } from "../../support/page_objects/navigation";
let storedURL = "";
@ -14,13 +15,74 @@ let viewURL = {};
export const genTest = (apiType, dbType) => {
if (!isTestSuiteActive(apiType, dbType)) return;
function verifyLtarCell(columnName, index, cellValue, options) {
if (cellValue !== "")
cy.get(`:nth-child(${index}) > [data-title="${columnName}"]`)
.find(".chip")
.eq(0)
.contains(cellValue)
.should("exist");
mainPage
.getCell(columnName, index)
.click()
.find(".nc-icon.nc-unlink-icon")
.should(`${options.unlink ? "exist" : "not.exist"}`);
mainPage
.getCell(columnName, index)
.click()
.find(".nc-icon.nc-plus")
.should(`${options.plus ? "exist" : "not.exist"}`);
mainPage
.getCell(columnName, index)
.click()
.find(".nc-icon.nc-arrow-expand")
.should(`${options.expand ? "exist" : "not.exist"}`);
}
function actionLtarCell(columnName, index, button) {
mainPage
.getCell(columnName, index)
.click()
.find(`.nc-icon${button}`)
.click({ force: true });
}
function verifyChildListCard(cardValue, options) {
// reload button
cy.getActiveModal(".nc-modal-child-list")
.find(`[data-cy="nc-child-list-reload"]`)
.should(`${options.reload ? "exist" : "not.exist"}`);
// link-to button
cy.getActiveModal(".nc-modal-child-list")
.find(`[data-cy="nc-child-list-button-link-to"]`)
.should(`${options.linkTo ? "exist" : "not.exist"}`);
// child card
// - contents : should exist
// - link-to button : should not exist
// - delete button : should not exist
if (cardValue !== "") {
cy.getActiveModal(".nc-modal-child-list")
.find(".ant-card")
.contains(cardValue)
.should("exist");
cy.getActiveModal(".nc-modal-child-list")
.find(".ant-card")
.find(`[data-cy="nc-child-list-icon-unlink"]`)
.should(`${options.unlink ? "exist" : "not.exist"}`);
cy.getActiveModal(".nc-modal-child-list")
.find(".ant-card")
.find(`[data-cy="nc-child-list-icon-delete"]`)
.should(`${options.delete ? "exist" : "not.exist"}`);
}
}
const generateViewLink = (viewName) => {
// click on share view
// cy.get(".v-navigation-drawer__content > .container")
// .find(".v-list > .v-list-item")
// .contains("Share View")
// .click();
mainPage.shareView().click({ force: true });
mainPage.shareView().click();
cy.wait(1000);
// wait, as URL initially will be /undefined
cy.getActiveModal(".nc-modal-share-view")
@ -33,23 +95,23 @@ export const genTest = (apiType, dbType) => {
.find(".share-link-box")
.contains("/nc/view/", { timeout: 10000 })
.then(($obj) => {
cy.get("body").type("{esc}");
// viewURL.push($obj.text())
// cy.get("body").type("{esc}");
cy.closeActiveModal(".nc-modal-share-view");
viewURL[viewName] = $obj.text().trim();
});
};
let clear;
describe(`${apiType.toUpperCase()} api - GRID view (Share)`, () => {
// Run once before test- create project (rest/graphql)
//
before(() => {
cy.fileHook();
mainPage.tabReset();
// open a table to work on views
//
cy.restoreLocalStorage();
cy.openTableTab("Address", 25);
cy.saveLocalStorage();
clear = Cypress.LocalStorage.clear;
Cypress.LocalStorage.clear = () => {};
});
beforeEach(() => {
@ -63,7 +125,11 @@ export const genTest = (apiType, dbType) => {
after(() => {
// close table
// mainPage.deleteCreatedViews()
cy.restoreLocalStorage();
cy.closeTableTab("Address");
cy.saveLocalStorage();
Cypress.LocalStorage.clear = clear;
});
// Common routine to create/edit/delete GRID & GALLERY view
@ -85,14 +151,22 @@ export const genTest = (apiType, dbType) => {
});
it(`Share ${viewType.toUpperCase()} hide, sort, filter & verify`, () => {
cy.intercept("/api/v1/db/meta/audits/comments/**").as(
"waitForPageLoad"
);
cy.get(`.nc-view-item.nc-${viewType}-view-item`)
.contains("Address1")
.contains("Grid-1")
.click();
mainPage.hideField("Address2");
mainPage.sortField("Address", "Z → A");
mainPage.filterField("Address", "is like", "Ab");
generateViewLink("combined");
cy.log(viewURL["combined"]);
cy.wait(["@waitForPageLoad"]);
// kludge: additional wait to ensure page load is completed
cy.wait(2000);
});
it(`Share GRID view : ensure we have only one link even if shared multiple times`, () => {
@ -101,16 +175,8 @@ export const genTest = (apiType, dbType) => {
generateViewLink("combined");
// verify if only one link exists in table
// cy.get(".v-navigation-drawer__content > .container")
// .find(".v-list > .v-list-item")
// .contains("Share View")
// .parent()
// .find("button.mdi-dots-vertical")
// .click();
mainPage.shareViewList().click();
// cy.getActiveMenu().find(".v-list-item").contains("Views List").click();
cy.get('th:contains("View Link")').should("exist");
cy.get('th:contains("View Link")')
@ -121,12 +187,10 @@ export const genTest = (apiType, dbType) => {
.its("length")
.should("eq", 1)
.then(() => {
// cy.get(".v-overlay__content > .d-flex > .v-icon").click();
// close modal (fix me! add a close button to share view list modal)
cy.get(".v-overlay--active > .v-overlay__scrim").click({
force: true,
});
cy.get("button.ant-modal-close:visible").click();
});
cy.signOut();
});
it(`Share ${viewType.toUpperCase()} view : Visit URL, Verify title`, () => {
@ -134,19 +198,20 @@ export const genTest = (apiType, dbType) => {
cy.visit(viewURL["combined"], {
baseUrl: null,
});
cy.wait(5000);
// wait for page rendering to complete
cy.get(".nc-grid-row").should("have.length", 18);
// verify title
cy.get("div.model-name").contains("Address1").should("exist");
cy.get(".nc-shared-view-title").contains("Grid-1").should("exist");
});
it(`Share ${viewType.toUpperCase()} view : verify fields hidden/open`, () => {
// verify column headers
cy.get('[data-col="Address"]').should("exist");
cy.get('[data-col="Address2"]').should("not.exist");
cy.get('[data-col="District"]').should("exist");
cy.get('[data-title="Address"]').should("exist");
cy.get('[data-title="Address2"]').should("not.exist");
cy.get('[data-title="District"]').should("exist");
});
it(`Share ${viewType.toUpperCase()} view : verify fields sort/ filter`, () => {
@ -187,7 +252,10 @@ export const genTest = (apiType, dbType) => {
};
// download & verify
mainPage.downloadAndVerifyCsv(`Address_exported_1.csv`, verifyCsv);
mainPage.downloadAndVerifyCsvFromSharedView(
`Address_exported_1.csv`,
verifyCsv
);
mainPage.unhideField("LastUpdate");
});
@ -196,18 +264,16 @@ export const genTest = (apiType, dbType) => {
mainPage.clearSort();
mainPage
.getCell("Address", 1)
//ncv2@fixme
.contains("669 Firozabad Loop")
//.contains("217 Botshabelo Place")
.should("exist");
});
it(`Share ${viewType.toUpperCase()} view : Enable sort`, () => {
// Sort menu operations (Country Column, Z->A)
mainPage.sortField("Address", "Z → A");
mainPage.sortField("Address", "A → Z");
mainPage
.getCell("Address", 1)
.contains("669 Firozabad Loop")
.contains("1013 Tabuk Boulevard")
.should("exist");
});
@ -218,7 +284,7 @@ export const genTest = (apiType, dbType) => {
cy.get(".nc-grid-row").should("have.length", 3);
mainPage
.getCell("Address", 1)
.contains("1888 Kabul Drive")
.contains("1294 Firozabad Drive")
.should("exist");
});
@ -228,7 +294,7 @@ export const genTest = (apiType, dbType) => {
// expected output, statically configured
let storedRecords = [
`Address,District,PostalCode,Phone,Location,Customer List,Staff List,City,Staff List`,
`1888 Kabul Drive,,20936,,1,,Ife,,`,
`1294 Firozabad Drive,,70618,,2,,Pingxiang,,`,
`1661 Abha Drive,,14400,,1,,Pudukkottai,,`,
];
@ -243,13 +309,18 @@ export const genTest = (apiType, dbType) => {
expect(strCol[2]).to.be.equal(retCol[2]);
}
};
mainPage.downloadAndVerifyCsv(`Address_exported_1.csv`, verifyCsv);
mainPage.downloadAndVerifyCsvFromSharedView(
`Address_exported_1.csv`,
verifyCsv
);
mainPage.unhideField("LastUpdate");
});
it(`Share ${viewType.toUpperCase()} view : Delete Filter`, () => {
// Remove sort and Validate
mainPage.filterReset();
mainPage.clearSort();
mainPage
.getCell("Address", 1)
.contains("669 Firozabad Loop")
@ -258,103 +329,64 @@ export const genTest = (apiType, dbType) => {
it(`Share GRID view : Virtual column validation > has many`, () => {
// verify column headers
cy.get('[data-col="Customer List"]').should("exist");
cy.get('[data-col="Staff List"]').should("exist");
cy.get('[data-col="City"]').should("exist");
cy.get('[data-col="Staff List"]').should("exist");
cy.get('[data-title="Customer List"]').should("exist");
cy.get('[data-title="Staff List"]').should("exist");
cy.get('[data-title="City"]').should("exist");
cy.get('[data-title="Staff List1"]').should("exist");
// has many field validation
mainPage
.getCell("Customer List", 3)
.click()
.find("button.mdi-close-thick")
.should("not.exist");
mainPage
.getCell("Customer List", 3)
.click()
.find("button.mdi-plus")
.should("not.exist");
mainPage
.getCell("Customer List", 3)
.click()
.find("button.mdi-arrow-expand")
.click();
cy.getActiveModal(".nc-modal-child-list")
.find("button.mdi-reload")
.should("exist");
cy.getActiveModal(".nc-modal-child-list")
.find("button")
.contains("Link to")
.should("not.exist");
cy.getActiveModal(".nc-modal-child-list")
.find(".child-card")
.contains("2")
.should("exist");
cy.getActiveModal(".nc-modal-child-list")
.find(".child-card")
.find("button")
.should("not.exist");
cy.get("body").type("{esc}");
verifyLtarCell("Customer List", 1, "1", {
unlink: false,
plus: false,
expand: true,
});
actionLtarCell("Customer List", 1, ".nc-arrow-expand");
verifyChildListCard("1", {
reload: true,
linkTo: false,
unlink: false,
delete: false,
});
cy.closeActiveModal(".nc-modal-child-list");
});
it(`Share GRID view : Virtual column validation > belongs to`, () => {
// belongs to field validation
mainPage
.getCell("City", 1)
.click()
.find("button.mdi-close-thick")
.should("not.exist");
mainPage
.getCell("City", 1)
.click()
.find("button.mdi-arrow-expand")
.should("not.exist");
mainPage
.getCell("City", 1)
.find(".v-chip")
.contains("al-Ayn")
.should("exist");
verifyLtarCell("City", 1, "al-Ayn", {
unlink: false,
plus: false,
expand: false,
});
});
it(`Share GRID view : Virtual column validation > many to many`, () => {
// many-to-many field validation
mainPage
.getCell("Staff List", 1)
.click()
.find("button.mdi-close-thick")
.should("not.exist");
mainPage
.getCell("Staff List", 1)
.click()
.find("button.mdi-plus")
.should("not.exist");
mainPage
.getCell("Staff List", 1)
.click()
.find("button.mdi-arrow-expand")
.click();
cy.getActiveModal(".nc-modal-child-list")
.find("button.mdi-reload")
.should("exist");
cy.getActiveModal(".nc-modal-child-list")
.find("button")
.contains("Link to")
.should("not.exist");
cy.get("body").type("{esc}");
// many to many field verification
verifyLtarCell("Staff List1", 1, "", {
unlink: false,
plus: false,
expand: true,
});
actionLtarCell("Staff List1", 1, ".nc-arrow-expand");
verifyChildListCard("", {
reload: true,
linkTo: false,
unlink: false,
delete: false,
});
});
it(`Delete ${viewType.toUpperCase()} view`, () => {
// go back to base page
cy.visit(storedURL, {
baseUrl: null,
});
loginPage.loginAndOpenProject(apiType, dbType);
cy.openTableTab("Address", 25);
// number of view entries should be 2 before we delete
cy.get(".nc-view-item").its("length").should("eq", 2);
cy.get(".nc-view-delete-icon").eq(0).click({ force: true });
cy.getActiveModal(".nc-modal-view-delete")
.find(".ant-btn-dangerous")
.click();
cy.toastWait("View deleted successfully");
// confirm if the number of veiw entries is reduced by 1
@ -368,11 +400,11 @@ export const genTest = (apiType, dbType) => {
describe(`${apiType.toUpperCase()} api - Grid view/ row-column update verification`, () => {
before(() => {
cy.fileHook();
cy.restoreLocalStorage();
// Address table has belongs to, has many & many-to-many
cy.openTableTab("Country", 25);
cy.saveLocalStorage();
// store base URL- to re-visit and delete form view later
cy.url().then((url) => {
storedURL = url;
@ -380,60 +412,52 @@ export const genTest = (apiType, dbType) => {
});
});
after(() => {
// close table
beforeEach(() => {
cy.restoreLocalStorage();
cy.visit(storedURL, {
baseUrl: null,
});
// delete row
mainPage.getPagination(5).click();
// wait for page rendering to complete
cy.get(".nc-grid-row").should("have.length", 10);
mainPage
.getRow(10)
.find(".mdi-checkbox-blank-outline")
.click({ force: true });
mainPage.getCell("Country", 10).rightclick();
cy.getActiveMenu(".nc-dropdown-grid-context-menu")
.contains("Delete Selected Row")
.click();
// delete column
cy.get(`th:contains('dummy') .mdi-menu-down`)
.trigger("mouseover")
.click();
cy.get(".nc-column-delete").click();
cy.get("button:contains(Confirm)").click();
cy.toastWait("Update table successful");
});
mainPage.deleteCreatedViews();
afterEach(() => {
cy.saveLocalStorage();
});
// close table
after(() => {
cy.restoreLocalStorage();
cy.closeTableTab("Country");
cy.saveLocalStorage();
});
it(`Generate default Shared GRID view URL`, () => {
// add row
cy.get(".nc-add-new-row-btn").click();
cy.get("#data-table-form-Country > input").first().click().type("a");
cy.contains("Save row").filter("button").click({ force: true });
cy.get(".nc-expand-col-Country")
.find(".nc-cell > input")
.should("exist")
.first()
.clear({ force: true })
.type("a");
cy.getActiveDrawer(".nc-drawer-expanded-form")
.find("button")
.contains("Save row")
.should("exist")
.click();
cy.toastWait("updated successfully");
cy.getActiveDrawer(".nc-drawer-expanded-form")
.find("button")
.contains("Cancel")
.should("exist")
.click();
// add column
mainPage.addColumn("dummy", "Country");
cy.signOut();
// visit public view
cy.log(viewURL["rowColUpdate"]);
cy.restoreLocalStorage();
cy.visit(viewURL["rowColUpdate"], {
baseUrl: null,
});
cy.wait(5000);
//5
// wait for public view page to load!
// wait for page rendering to complete
cy.get(".nc-grid-row").should("have.length", 25);
@ -441,15 +465,40 @@ export const genTest = (apiType, dbType) => {
it(`Share GRID view : new row visible`, () => {
// verify row
cy.get(`.v-pagination > li:contains('5') button`).click();
// cy.get(`.v-pagination > li:contains('5') button`).click();
cy.get(
`.nc-pagination > .ant-pagination-item.ant-pagination-item-5`
).click();
// wait for page rendering to complete
cy.get(".nc-grid-row").should("have.length", 10);
mainPage.getCell("Country", 10).contains("a").should("exist");
});
it.skip(`Share GRID view : new column visible`, () => {
it(`Share GRID view : new column visible`, () => {
// verify column headers
cy.get('[data-col="dummy"]').should("exist");
cy.get('[data-title="dummy"]').should("exist");
});
it(`Clean up`, () => {
loginPage.loginAndOpenProject(apiType, dbType);
cy.openTableTab("Country", 25);
// delete row
mainPage.getPagination(5).click();
// kludge: flicker on load
cy.wait(3000);
// wait for page rendering to complete
cy.get(".nc-grid-row").should("have.length", 10);
mainPage.getCell("Country", 10).rightclick();
cy.getActiveMenu(".nc-dropdown-grid-context-menu")
.find('.ant-dropdown-menu-item:contains("Delete Row")')
.first()
.click();
// delete column
mainPage.deleteColumn("dummy");
mainPage.deleteCreatedViews();
});
});
};

2
scripts/cypress/integration/test/pg-restViews.js
Unescape View File

@ -21,8 +21,8 @@ const nocoTestSuite = (apiType, dbType) => {
t4b.genTest(apiType, dbType);
t4d.genTest(apiType, dbType);
t4e.genTest(apiType, dbType);
t4f.genTest(apiType, dbType);
t4g.genTest(apiType, dbType);
// tbd t4f.genTest(apiType, dbType);
};
nocoTestSuite("rest", "postgres");

34
scripts/cypress/support/commands.js
Unescape View File

@ -30,32 +30,32 @@ import { isXcdb, isPostgres } from "./page_objects/projectConstants";
require("@4tw/cypress-drag-drop");
// recursively gets an element, returning only after it's determined to be attached to the DOM for good
Cypress.Commands.add('getSettled', (selector, opts = {}) => {
Cypress.Commands.add("getSettled", (selector, opts = {}) => {
const retries = opts.retries || 3;
const delay = opts.delay || 400;
const isAttached = (resolve, count = 0) => {
const el = Cypress.$(selector);
const el = Cypress.$(selector);
// is element attached to the DOM?
count = Cypress.dom.isAttached(el) ? count + 1 : 0;
// is element attached to the DOM?
count = Cypress.dom.isAttached(el) ? count + 1 : 0;
// hit our base case, return the element
if (count >= retries) {
return resolve(el);
}
// hit our base case, return the element
if (count >= retries) {
return resolve(el);
}
// retry after a bit of a delay
setTimeout(() => isAttached(resolve, count), delay);
// retry after a bit of a delay
setTimeout(() => isAttached(resolve, count), delay);
};
// wrap, so we can chain cypress commands off the result
return cy.wrap(null).then(() => {
return new Cypress.Promise((resolve) => {
return isAttached(resolve, 0);
}).then((el) => {
return cy.wrap(el);
});
return new Cypress.Promise((resolve) => {
return isAttached(resolve, 0);
}).then((el) => {
return cy.wrap(el);
});
});
});
@ -280,6 +280,10 @@ Cypress.Commands.add("getActiveModal", (wrapperSelector) => {
return cy.get(".ant-modal-content:visible").last();
});
Cypress.Commands.add("closeActiveModal", (wrapperSelector) => {
cy.getActiveModal(wrapperSelector).find(".ant-modal-close-x").click();
});
Cypress.Commands.add("getActiveMenu", (overlaySelector) => {
if (overlaySelector) {
return cy.getSettled(`${overlaySelector} .ant-dropdown-content:visible`);

3
scripts/cypress/support/page_objects/mainPage.js
Unescape View File

@ -545,8 +545,7 @@ export class _mainPage {
downloadAndVerifyCsvFromSharedView = (filename, verifyCsv) => {
cy.get(".nc-actions-menu-btn").click();
cy.get(".nc-project-menu-item")
.contains("Download as CSV")
cy.get(".nc-project-menu-item:contains('Download as CSV')")
.should("exist")
.click();

Write Preview
Loading…
Cancel
Save