diff --git a/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js b/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js index 88ab6b94a7..f436f3ff39 100644 --- a/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js +++ b/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js @@ -17,16 +17,15 @@ filterTests(['all'], () => { it("should add form with multi select picker, containing 5 options", () => { cy.navigateToFrontend() // Add data provider - cy.get(interact.CATEGORY_DATA, { timeout: 2000 }).click() - cy.get(interact.COMPONENT_DATA_PROVIDER).click() + cy.searchAndAddComponent("Data Provider") cy.get(interact.DATASOURCE_PROP_CONTROL).click() cy.get(interact.DROPDOWN).contains("Multi Data").click() // Add Form with schema to match table - cy.addComponent("Form", "Form") + cy.searchAndAddComponent("Form") cy.get(interact.DATASOURCE_PROP_CONTROL).click() cy.get(interact.DROPDOWN).contains("Multi Data").click() // Add multi-select picker to form - cy.addComponent("Form", "Multi-select Picker").then(componentId => { + cy.searchAndAddComponent("Multi-select Picker").then(componentId => { cy.get(interact.DATASOURCE_FIELD_CONTROL).type("Test Data").type("{enter}") cy.wait(1000) cy.getComponent(componentId).contains("Choose some options").click() diff --git a/packages/builder/cypress/integration/addRadioButtons.spec.js b/packages/builder/cypress/integration/addRadioButtons.spec.js index 578b519341..91cfd0c7fa 100644 --- a/packages/builder/cypress/integration/addRadioButtons.spec.js +++ b/packages/builder/cypress/integration/addRadioButtons.spec.js @@ -10,15 +10,13 @@ filterTests(['all'], () => { it("should add Radio Buttons options picker on form, add data, and confirm", () => { cy.navigateToFrontend() - cy.wait(500) - cy.addComponent("Form", "Form") - cy.addComponent("Form", "Options Picker").then((componentId) => { - // Provide field setting + cy.searchAndAddComponent("Form") + cy.searchAndAddComponent("Options Picker").then((componentId) => { + // Provide field setting cy.get(interact.DATASOURCE_FIELD_CONTROL).type("1") // Open dropdown and select Radio buttons cy.get(interact.OPTION_TYPE_PROP_CONTROL).click().then(() => { cy.get(interact.SPECTRUM_POPOVER).contains('Radio buttons') - .wait(500) .click() }) const radioButtonsTotal = 3 @@ -32,8 +30,8 @@ filterTests(['all'], () => { const addRadioButtonData = (totalRadioButtons) => { cy.get(interact.OPTION_SOURCE_PROP_CONROL).click().then(() => { cy.get(interact.SPECTRUM_POPOVER).contains('Custom') - .wait(500) .click() + .wait(1000) }) cy.addCustomSourceOptions(totalRadioButtons) } diff --git a/packages/builder/cypress/integration/appOverview.spec.js b/packages/builder/cypress/integration/appOverview.spec.js index dbfce3ce63..feaace6fb6 100644 --- a/packages/builder/cypress/integration/appOverview.spec.js +++ b/packages/builder/cypress/integration/appOverview.spec.js @@ -205,7 +205,7 @@ filterTests(["all"], () => { cy.navigateToFrontend() - cy.addComponent("Elements", "Headline").then(componentId => { + cy.searchAndAddComponent("Headline").then(componentId => { cy.getComponent(componentId).should("exist") }) diff --git a/packages/builder/cypress/integration/createBinding.spec.js b/packages/builder/cypress/integration/createBinding.spec.js index 5abe0b27d8..160f23d2d6 100644 --- a/packages/builder/cypress/integration/createBinding.spec.js +++ b/packages/builder/cypress/integration/createBinding.spec.js @@ -9,13 +9,13 @@ filterTests(['smoke', 'all'], () => { }) it("should add a current user binding", () => { - cy.addComponent("Elements", "Paragraph").then(() => { + cy.searchAndAddComponent("Paragraph").then(() => { addSettingBinding("text", "Current User._id") }) }) it("should handle an invalid binding", () => { - cy.addComponent("Elements", "Paragraph").then(componentId => { + cy.searchAndAddComponent("Paragraph").then(componentId => { // Cypress needs to escape curly brackets cy.get("[data-cy=setting-text] input") .type("{{}{{}{{} Current User._id {}}{}}") @@ -27,7 +27,7 @@ filterTests(['smoke', 'all'], () => { xit("should add a URL param binding", () => { const paramName = "foo" cy.createScreen(`/test/:${paramName}`) - cy.addComponent("Elements", "Paragraph").then(componentId => { + cy.searchAndAddComponent("Paragraph").then(componentId => { addSettingBinding("text", `URL.${paramName}`) // The builder preview pages don't have a real URL, so all we can do // is check that we were able to bind to the property, and that the @@ -37,7 +37,7 @@ filterTests(['smoke', 'all'], () => { }) it("should add a binding with a handlebars helper", () => { - cy.addComponent("Elements", "Paragraph").then(componentId => { + cy.searchAndAddComponent("Paragraph").then(componentId => { // Cypress needs to escape curly brackets cy.get("[data-cy=setting-text] input") .type("{{}{{} add 1 2 {}}{}}") diff --git a/packages/builder/cypress/integration/createComponents.spec.js b/packages/builder/cypress/integration/createComponents.spec.js index eff7fc216f..649a77e442 100644 --- a/packages/builder/cypress/integration/createComponents.spec.js +++ b/packages/builder/cypress/integration/createComponents.spec.js @@ -31,13 +31,13 @@ filterTests(["all"], () => { } it("should add a container", () => { - cy.addComponent("Layout", "Container").then(componentId => { + cy.searchAndAddComponent("Container").then(componentId => { cy.getComponent(componentId).should("exist") }) }) it("should add a headline", () => { - cy.addComponent("Elements", "Headline").then(componentId => { + cy.searchAndAddComponent("Headline").then(componentId => { headlineId = componentId cy.getComponent(headlineId).should("exist") }) @@ -63,11 +63,11 @@ filterTests(["all"], () => { }) it("should create a form and reset to match schema", () => { - cy.addComponent("Form", "Form").then(() => { + cy.searchAndAddComponent("Form").then(() => { cy.get("[data-cy=setting-dataSource]").contains("Custom").click() cy.get(interact.DROPDOWN).contains("dog").click() cy.wait(500) - cy.addComponent("Form", "Field Group").then(fieldGroupId => { + cy.searchAndAddComponent("Field Group").then(fieldGroupId => { cy.contains("Update form fields").click() cy.get(".spectrum-Modal") .get(".confirm-wrap .spectrum-Button") @@ -88,7 +88,7 @@ filterTests(["all"], () => { }) it("deletes a component", () => { - cy.addComponent("Elements", "Paragraph").then(componentId => { + cy.searchAndAddComponent("Paragraph").then(componentId => { cy.get("[data-cy=setting-_instanceName] input").type(componentId).blur() cy.get( ".nav-items-container .nav-item.selected .actions > div > .icon" @@ -104,7 +104,7 @@ filterTests(["all"], () => { }) it("should clear the iframe place holder when a form field has been set", () => { - cy.addComponent("Form", "Form").then(formId => { + cy.searchAndAddComponent("Form").then(formId => { //For deletion cy.get("[data-cy=setting-_instanceName] input") .clear() @@ -123,10 +123,7 @@ filterTests(["all"], () => { const testFieldFocusOnCreate = componentLabel => { cy.log("Adding: " + componentLabel) - return cy.addComponent("Form", componentLabel).then(componentId => { - cy.getComponent(componentId) - .find(".component-placeholder") - .should("exist") + return cy.searchAndAddComponent(componentLabel).then(componentId => { cy.get("[data-cy=setting-field] button.spectrum-Picker").click() //Click the first appropriate field. They are filtered by type @@ -157,7 +154,7 @@ filterTests(["all"], () => { }) it("should populate the provider for charts with a data provider in its path", () => { - cy.addComponent("Data", "Data Provider").then(providerId => { + cy.searchAndAddComponent("Data Provider").then(providerId => { //For deletion cy.get("[data-cy=setting-_instanceName] input") .clear() @@ -181,7 +178,7 @@ filterTests(["all"], () => { const testFocusOnCreate = chartLabel => { cy.log("Adding: " + chartLabel) - cy.addComponent("Chart", chartLabel).then(componentId => { + cy.searchAndAddComponent(chartLabel).then(componentId => { cy.get( "[data-cy=dataProvider-prop-control] .spectrum-Picker" ).should("not.have.class", "is-focused") @@ -207,7 +204,7 @@ filterTests(["all"], () => { }) it("should replace the placeholder when a url is set on an image", () => { - cy.addComponent("Elements", "Image").then(imageId => { + cy.searchAndAddComponent("Image").then(imageId => { cy.get("[data-cy=setting-_instanceName] input") .clear() .type(imageId) @@ -229,7 +226,7 @@ filterTests(["all"], () => { }) it("should add a markdown component.", () => { - cy.addComponent("Elements", "Markdown Viewer").then(markdownId => { + cy.searchAndAddComponent("Markdown Viewer").then(markdownId => { cy.get("[data-cy=setting-_instanceName] input") .clear() .type(markdownId) @@ -253,8 +250,7 @@ filterTests(["all"], () => { }) it("should direct the user when adding an Icon component.", () => { - cy.addComponent("Elements", "Icon").then(iconId => { - cy.getComponent(iconId).find(".component-placeholder").should("exist") + cy.searchAndAddComponent("Icon").then(iconId => { cy.get("[data-cy=setting-_instanceName] input") .clear() .type(iconId) diff --git a/packages/builder/cypress/integration/datasources/postgreSql.spec.js b/packages/builder/cypress/integration/datasources/postgreSql.spec.js index ccecfbd5df..0c3f2b9124 100644 --- a/packages/builder/cypress/integration/datasources/postgreSql.spec.js +++ b/packages/builder/cypress/integration/datasources/postgreSql.spec.js @@ -108,7 +108,7 @@ filterTests(["all"], () => { }) it("should delete a relationship", () => { - cy.get(".hierarchy-items-container").contains("PostgreSQL").click() + cy.get(".hierarchy-items-container").contains("PostgreSQL").click({ force: true }) cy.reload() // Delete one relationship cy.get(".spectrum-Table") @@ -156,7 +156,7 @@ filterTests(["all"], () => { it("should switch to schema with no tables", () => { // Switch Schema - To one without any tables - cy.get(".hierarchy-items-container").contains("PostgreSQL").click() + cy.get(".hierarchy-items-container").contains("PostgreSQL").click({ force: true }) switchSchema("randomText") // No tables displayed @@ -219,7 +219,7 @@ filterTests(["all"], () => { // Access query cy.get(".hierarchy-items-container", { timeout: 2000 }) .contains(queryName + " (1)") - .click() + .click({ force: true }) // Rename query cy.wait(1000) diff --git a/packages/builder/cypress/integration/revertApp.spec.js b/packages/builder/cypress/integration/revertApp.spec.js index 4c6f245b76..006b6854ba 100644 --- a/packages/builder/cypress/integration/revertApp.spec.js +++ b/packages/builder/cypress/integration/revertApp.spec.js @@ -30,7 +30,7 @@ filterTests(['smoke', 'all'], () => { cy.navigateToFrontend() // Add initial component - Paragraph - cy.addComponent("Elements", "Paragraph") + cy.searchAndAddComponent("Paragraph") // Publish app cy.get(interact.SPECTRUM_BUTTON).contains("Publish").click({ force: true }) cy.get(interact.SPECTRUM_BUTTON_GROUP).within(() => { @@ -42,7 +42,7 @@ filterTests(['smoke', 'all'], () => { }) // Add second component - Button - cy.addComponent("Elements", "Button") + cy.searchAndAddComponent("Button") // Click Revert cy.get(interact.TOP_RIGHT_NAV).within(() => { cy.get(interact.AREA_LABEL_REVERT).click({ force: true }) diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index 309d051483..65126bc3d2 100644 --- a/packages/builder/cypress/support/commands.js +++ b/packages/builder/cypress/support/commands.js @@ -4,8 +4,7 @@ Cypress.on("uncaught:exception", () => { // ACCOUNTS & USERS Cypress.Commands.add("login", (email, password) => { - cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 5000 }) - cy.wait(2000) + cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 10000 }) cy.url().then(url => { if (url.includes("builder/admin")) { // create admin user @@ -210,7 +209,7 @@ Cypress.Commands.add("deleteApp", name => { cy.get(".app-overview-actions-icon").within(() => { cy.get(".spectrum-Icon").click({ force: true }) }) - cy.get(".spectrum-Menu").contains("Delete").click() + cy.get(".spectrum-Menu").contains("Delete").click({ force: true }) cy.get(".spectrum-Dialog-grid").within(() => { cy.get("input").type(name) }) @@ -491,29 +490,45 @@ Cypress.Commands.add("selectTable", tableName => { }) Cypress.Commands.add("addCustomSourceOptions", totalOptions => { - cy.get(".spectrum-ActionButton") - .contains("Define Options") - .click() - .then(() => { - for (let i = 0; i < totalOptions; i++) { - // Add radio button options - cy.get(".spectrum-Button") - .contains("Add Option") - .click({ force: true }) - .then(() => { - cy.get("[placeholder='Label']", { timeout: 500 }).eq(i).type(i) - cy.get("[placeholder='Value']").eq(i).type(i) - }) - } - // Save options - cy.get(".spectrum-Button").contains("Save").click({ force: true }) - }) + cy.get('[data-cy="customOptions-prop-control"]').within(() => { + cy.get(".spectrum-ActionButton-label").click({ force: true }) + }) + for (let i = 0; i < totalOptions; i++) { + // Add radio button options + cy.get(".spectrum-Button-label", { timeout: 1000 }) + .contains("Add Option") + .click({ force: true }) + .then(() => { + cy.get("[placeholder='Label']", { timeout: 500 }).eq(i).type(i) + cy.get("[placeholder='Value']").eq(i).type(i) + }) + } + // Save options + cy.get(".spectrum-Button").contains("Save").click({ force: true }) }) // DESIGN SECTION -Cypress.Commands.add("addComponent", (category, component) => { - cy.get(".spectrum-Button").contains("Component").click() +Cypress.Commands.add("searchAndAddComponent", component => { + // Open component menu + cy.get(".spectrum-Button").contains("Component").click({ force: true }) + // Search and add component + cy.get(".spectrum-Textfield-input").wait(500).clear().type(component) + cy.get(".body").within(() => { + cy.get(".component") + .contains(new RegExp("^" + component + "$"), { timeout: 3000 }) + .click({ force: true }) + }) + cy.wait(1000) + cy.location().then(loc => { + const params = loc.pathname.split("/") + const componentId = params[params.length - 1] + cy.getComponent(componentId, { timeout: 3000 }).should("exist") + return cy.wrap(componentId) + }) +}) + +Cypress.Commands.add("addComponent", (category, component) => { if (category) { cy.get(`[data-cy="category-${category}"]`, { timeout: 3000 }).click({ force: true, diff --git a/packages/builder/cypress/support/interact.js b/packages/builder/cypress/support/interact.js index 727c57bccc..b96e2692b4 100644 --- a/packages/builder/cypress/support/interact.js +++ b/packages/builder/cypress/support/interact.js @@ -12,7 +12,7 @@ export const APP_NAME_INPUT = "input" // we need to update this with atribute cy export const SPECTRUM_BUTTON_GROUP = ".spectrum-ButtonGroup" export const SPECTRUM_MODAL_INPUT = ".spectrum-Modal input" -//AddMultiOptionDatatype test +//AddMultiOptionDatatype export const CATEGORY_DATA = '[data-cy="category-Data"]' export const COMPONENT_DATA_PROVIDER = '[data-cy="component-Data Provider"]' export const DATASOURCE_PROP_CONTROL = '[data-cy="dataSource-prop-control"]'