From 552a2e00aaf29942d5ecc07466001fbbfa4e9221 Mon Sep 17 00:00:00 2001 From: Mitch-Budibase Date: Wed, 20 Jul 2022 17:44:30 +0100 Subject: [PATCH 1/5] AutoScreensUI test changes Changes related to the UI redesign - Also added new command to filter screens by access level --- .../addMultiOptionDatatype.spec.js | 2 +- .../cypress/integration/autoScreensUI.spec.js | 43 +++++++++---------- packages/builder/cypress/support/commands.js | 26 ++++++++--- packages/builder/cypress/support/interact.js | 2 +- 4 files changed, 42 insertions(+), 31 deletions(-) diff --git a/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js b/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js index 32f62efe1f..88ab6b94a7 100644 --- a/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js +++ b/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js @@ -17,7 +17,7 @@ filterTests(['all'], () => { it("should add form with multi select picker, containing 5 options", () => { cy.navigateToFrontend() // Add data provider - cy.get(interact.CATEGORY_DATA, { timeout: 500 }).click() + cy.get(interact.CATEGORY_DATA, { timeout: 2000 }).click() cy.get(interact.COMPONENT_DATA_PROVIDER).click() cy.get(interact.DATASOURCE_PROP_CONTROL).click() cy.get(interact.DROPDOWN).contains("Multi Data").click() diff --git a/packages/builder/cypress/integration/autoScreensUI.spec.js b/packages/builder/cypress/integration/autoScreensUI.spec.js index ca997479ae..9431fc1782 100644 --- a/packages/builder/cypress/integration/autoScreensUI.spec.js +++ b/packages/builder/cypress/integration/autoScreensUI.spec.js @@ -14,11 +14,8 @@ filterTests(['smoke', 'all'], () => { cy.closeModal(); cy.contains("Design").click() - cy.get(interact.LABEL_ADD_CIRCLE).click() - cy.get(interact.SPECTRUM_MODAL).within(() => { - cy.get(interact.ITEM_DISABLED).contains("Autogenerated screens") - cy.get(interact.CONFIRM_WRAP_SPE_BUTTON).should('be.disabled') - }) + cy.navigateToAutogeneratedModal() + cy.get(interact.CONFIRM_WRAP_SPE_BUTTON).should('be.disabled') cy.deleteAllApps() }); @@ -45,25 +42,25 @@ filterTests(['smoke', 'all'], () => { // Create Autogenerated screens from the internal table cy.createDatasourceScreen(["Cypress Tests"]) // Confirm screens have been auto generated - cy.get(interact.NAV_ITEMS_CONTAINER).contains("cypress-tests").click({ force: true }) - cy.get(interact.NAV_ITEMS_CONTAINER).should('contain', 'cypress-tests/:id') + cy.get(interact.BODY).should('contain', "cypress-tests") + .and('contain', 'cypress-tests/:id') .and('contain', 'cypress-tests/new/row') }) it("should generate multiple internal table screens at once", () => { - // Create a second internal table const initialTable = "Cypress Tests" const secondTable = "Table Two" + // Create a second internal table cy.createTable(secondTable) // Create Autogenerated screens from the internal tables cy.createDatasourceScreen([initialTable, secondTable]) // Confirm screens have been auto generated - cy.get(interact.NAV_ITEMS_CONTAINER).contains("cypress-tests").click({ force: true }) // Previously generated tables are suffixed with numbers - as expected - cy.get(interact.NAV_ITEMS_CONTAINER).should('contain', 'cypress-tests-2/:id') + cy.get(interact.BODY).should('contain', 'cypress-tests-2') + .and('contain', 'cypress-tests-2/:id') .and('contain', 'cypress-tests-2/new/row') - cy.get(interact.NAV_ITEMS_CONTAINER).contains("table-two").click() - cy.get(interact.NAV_ITEMS_CONTAINER).should('contain', 'table-two/:id') + .and('contain', 'table-two') + .and('contain', 'table-two/:id') .and('contain', 'table-two/new/row') }) @@ -73,17 +70,17 @@ filterTests(['smoke', 'all'], () => { cy.createTable("Table Four") cy.createDatasourceScreen(["Table Three", "Table Four"], "Admin") - cy.get(interact.NAV_ITEMS_CONTAINER).contains("table-three").click() - cy.get(interact.NAV_ITEMS_CONTAINER).should('contain', 'table-three/:id') + // Filter screens to Admin + cy.filterScreensAccessLevel('Admin') + + cy.get(interact.BODY).should('contain', 'table-three') + .and('contain', 'table-three/:id') .and('contain', 'table-three/new/row') - - cy.get(interact.NAV_ITEMS_CONTAINER).contains("table-four").click() - cy.get(interact.NAV_ITEMS_CONTAINER).should('contain', 'table-four/:id') + .and('contain', 'table-four') + .and('contain', 'table-four/:id') .and('contain', 'table-four/new/row') - - //The access level should now be set to admin. Previous screens should be filtered. - cy.get(interact.NAV_ITEMS_CONTAINER).contains("table-two").should('not.exist') - cy.get(interact.NAV_ITEMS_CONTAINER).contains("cypress-tests").should('not.exist') + .and('not.contain', 'table-two') + .and('not.contain', 'cypress-tests') }) if (Cypress.env("TEST_ENV")) { @@ -96,8 +93,8 @@ filterTests(['smoke', 'all'], () => { // Create Autogenerated screens from a MySQL table - MySQL contains books table cy.createDatasourceScreen(["books"]) - cy.get(interact.NAV_ITEMS_CONTAINER).contains("books").click() - cy.get(interact.NAV_ITEMS_CONTAINER).should('contain', 'books/:id') + cy.get(interact.BODY).should('contain', 'books') + .and('contain', 'books/:id') .and('contain', 'books/new/row') }) } diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index 21df5b8592..914faba461 100644 --- a/packages/builder/cypress/support/commands.js +++ b/packages/builder/cypress/support/commands.js @@ -510,8 +510,10 @@ Cypress.Commands.add("addCustomSourceOptions", totalOptions => { }) }) -// DESIGN AREA +// DESIGN SECTION Cypress.Commands.add("addComponent", (category, component) => { + cy.get(".spectrum-Button").contains("Component").click() + if (category) { cy.get(`[data-cy="category-${category}"]`, { timeout: 3000 }).click({ force: true, @@ -546,7 +548,7 @@ Cypress.Commands.add("getComponent", componentId => { Cypress.Commands.add("createScreen", (route, accessLevelLabel) => { // Blank Screen cy.contains("Design").click() - cy.get("[aria-label=AddCircle]").click() + cy.get(".header > .add-button").click() cy.get(".spectrum-Modal").within(() => { cy.get("[data-cy='blank-screen']").click() cy.get(".spectrum-Button").contains("Continue").click({ force: true }) @@ -571,7 +573,7 @@ Cypress.Commands.add( "createDatasourceScreen", (datasourceNames, accessLevelLabel) => { cy.contains("Design").click() - cy.get("[aria-label=AddCircle]").click() + cy.get(".header > .add-button").click() cy.get(".spectrum-Modal").within(() => { cy.get(".item").contains("Autogenerated screens").click() cy.get(".spectrum-Button").contains("Continue").click({ force: true }) @@ -626,13 +628,23 @@ Cypress.Commands.add( } ) +Cypress.Commands.add("filterScreensAccessLevel", accessLevel => { + // Filters screens by access level dropdown + cy.get(".body").within(() => { + cy.get(".spectrum-Form-item").eq(1).click() + }) + cy.get(".spectrum-Menu").within(() => { + cy.contains(accessLevel).click() + }) +}) + // NAVIGATION Cypress.Commands.add("navigateToFrontend", () => { // Clicks on Design tab and then the Home nav item cy.wait(500) cy.contains("Design").click() cy.get(".spectrum-Search", { timeout: 2000 }).type("/") - cy.get(".nav-item", { timeout: 2000 }).contains("home").click() + cy.get(".nav-item", { timeout: 2000 }).contains("home").click({ force: true }) }) Cypress.Commands.add("navigateToDataSection", () => { @@ -644,9 +656,11 @@ Cypress.Commands.add("navigateToDataSection", () => { Cypress.Commands.add("navigateToAutogeneratedModal", () => { // Screen name must already exist within data source cy.contains("Design").click() - cy.get("[aria-label=AddCircle]").click() + cy.get(".header > .add-button").click() cy.get(".spectrum-Modal").within(() => { - cy.get(".item").contains("Autogenerated screens").click() + cy.get(".item", { timeout: 2000 }) + .contains("Autogenerated screens") + .click({ force: true }) cy.get(".spectrum-Button").contains("Continue").click({ force: true }) cy.wait(500) }) diff --git a/packages/builder/cypress/support/interact.js b/packages/builder/cypress/support/interact.js index 0b31d8a8c5..727c57bccc 100644 --- a/packages/builder/cypress/support/interact.js +++ b/packages/builder/cypress/support/interact.js @@ -51,7 +51,7 @@ export const LABEL_ADD_CIRCLE = "[aria-label=AddCircle]" export const ITEM_DISABLED = ".item.disabled" export const CONFIRM_WRAP_SPE_BUTTON = ".confirm-wrap .spectrum-Button" export const DATA_SOURCE_ENTRY = ".data-source-entry" -export const NAV_ITEMS_CONTAINER = ".nav-items-container" +export const BODY = ".body" //publishWorkFlow export const DEPLOY_APP_MODAL = ".spectrum-Modal [data-cy=deploy-app-modal]" From f396e330181831fb2cbc00d0ce341a4f2eb31514 Mon Sep 17 00:00:00 2001 From: Mitch-Budibase Date: Wed, 20 Jul 2022 19:21:30 +0100 Subject: [PATCH 2/5] CreateScreen Tests Updated the current createScreen test file: - Reworked a test related to access levels - Tests for screens of all access levels and deleting all screens (and starting new screen journey) - Added commands to delete screen and delete all screens --- .../cypress/integration/createScreen.spec.js | 39 ++++++++++++------- packages/builder/cypress/support/commands.js | 37 ++++++++++++++++++ 2 files changed, 63 insertions(+), 13 deletions(-) diff --git a/packages/builder/cypress/integration/createScreen.spec.js b/packages/builder/cypress/integration/createScreen.spec.js index 94a827f26f..a516e279f4 100644 --- a/packages/builder/cypress/integration/createScreen.spec.js +++ b/packages/builder/cypress/integration/createScreen.spec.js @@ -1,4 +1,5 @@ import filterTests from "../support/filterTests" +const interact = require('../support/interact') filterTests(["smoke", "all"], () => { context("Screen Tests", () => { @@ -10,32 +11,44 @@ filterTests(["smoke", "all"], () => { it("Should successfully create a screen", () => { cy.createScreen("test") - cy.get(".nav-items-container").within(() => { + cy.get(interact.BODY).within(() => { cy.contains("/test").should("exist") }) }) it("Should update the url", () => { cy.createScreen("test with spaces") - cy.get(".nav-items-container").within(() => { + cy.get(interact.BODY).within(() => { cy.contains("/test-with-spaces").should("exist") }) }) - it("Should create a blank screen with the selected access level", () => { - cy.createScreen("admin only", "Admin") + it("should delete all screens then create first screen via button", () => { + cy.deleteAllScreens() + + cy.contains("Create first screen").click() + cy.get(interact.BODY, { timeout: 2000 }).should('contain', '/home') + }) - cy.get(".nav-items-container").within(() => { - cy.contains("/admin-only").should("exist") - }) + it("Should create and filter screens by access level", () => { + const accessLevels = ["Basic", "Admin", "Public", "Power"] - cy.createScreen("open to all", "Public") + for (const access of accessLevels){ + // Create screen with specified access level + cy.createScreen(access, access) + // Filter by access level and confirm screen visible + cy.filterScreensAccessLevel(access) + cy.get(interact.BODY).within(() => { + cy.get(interact.NAV_ITEM).should('contain', access.toLowerCase()) + }) + } - cy.get(".nav-items-container").within(() => { - cy.contains("/open-to-all").should("exist") - //The access level should now be set to admin. Previous screens should be filtered. - cy.get(".nav-item").contains("/test-screen").should("not.exist") - }) + // Filter by All screens - Confirm all screens visible + cy.filterScreensAccessLevel("All screens") + cy.get(interact.BODY).should('contain', accessLevels[0]) + .and('contain', accessLevels[1]) + .and('contain', accessLevels[2]) + .and('contain', accessLevels[3]) }) }) }) diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index 914faba461..309d051483 100644 --- a/packages/builder/cypress/support/commands.js +++ b/packages/builder/cypress/support/commands.js @@ -638,6 +638,43 @@ Cypress.Commands.add("filterScreensAccessLevel", accessLevel => { }) }) +Cypress.Commands.add("deleteScreen", screen => { + // Navigates to Design section and deletes specified screen + cy.contains("Design").click() + cy.get(".body").within(() => { + cy.contains(screen) + .siblings(".actions") + .within(() => { + cy.get(".spectrum-Icon").click({ force: true }) + }) + }) + cy.get(".spectrum-Menu > .spectrum-Menu-item > .spectrum-Menu-itemLabel") + .contains("Delete") + .click() + + cy.get( + ".spectrum-Dialog-grid > .spectrum-ButtonGroup > .confirm-wrap > .spectrum-Button" + ).click({ force: true }) + cy.get(".spectrum-Dialog-grid", { timeout: 10000 }).should("not.exist") +}) + +Cypress.Commands.add("deleteAllScreens", () => { + // Deletes all screens + cy.get(".body") + .find(".nav-item") + .its("length") + .then(len => { + for (let i = 0; i < len; i++) { + cy.get(".body > .nav-item") + .eq(0) + .invoke("text") + .then(text => { + cy.deleteScreen(text.trim()) + }) + } + }) +}) + // NAVIGATION Cypress.Commands.add("navigateToFrontend", () => { // Clicks on Design tab and then the Home nav item From 7b227817e908725cf33151ab100459b731d16557 Mon Sep 17 00:00:00 2001 From: Mitch-Budibase Date: Fri, 22 Jul 2022 16:33:00 +0100 Subject: [PATCH 3/5] Cypress: Test Changes + New Command Data-cy IDs are gone for components (I assume due to the UI redesign) For now I have created a new command to search and add a component. Tests have been updated to reflect this --- .../addMultiOptionDatatype.spec.js | 7 +-- .../integration/addRadioButtons.spec.js | 10 ++-- .../cypress/integration/appOverview.spec.js | 2 +- .../cypress/integration/createBinding.spec.js | 8 +-- .../integration/createComponents.spec.js | 28 ++++----- .../datasources/postgreSql.spec.js | 6 +- .../cypress/integration/revertApp.spec.js | 4 +- packages/builder/cypress/support/commands.js | 59 ++++++++++++------- packages/builder/cypress/support/interact.js | 2 +- 9 files changed, 67 insertions(+), 59 deletions(-) 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"]' From bec8e3be3ead0b1599b4ea8b662ebfe1aa6d64f0 Mon Sep 17 00:00:00 2001 From: Mitch-Budibase Date: Fri, 22 Jul 2022 16:54:17 +0100 Subject: [PATCH 4/5] Updated createApp.spec.js Including an extended timeout for the first test. Specifically when the test is looking for the create app button --- packages/builder/cypress/integration/createApp.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/cypress/integration/createApp.spec.js b/packages/builder/cypress/integration/createApp.spec.js index 1dd0d2264f..516489b093 100644 --- a/packages/builder/cypress/integration/createApp.spec.js +++ b/packages/builder/cypress/integration/createApp.spec.js @@ -13,7 +13,7 @@ filterTests(['smoke', 'all'], () => { it("should show the new user UI/UX", () => { cy.visit(`${Cypress.config().baseUrl}/builder/portal/apps/create`, { timeout: 5000 }) //added /portal/apps/create cy.wait(1000) - cy.get(interact.CREATE_APP_BUTTON).contains('Start from scratch').should("exist") + cy.get(interact.CREATE_APP_BUTTON, { timeout: 10000 }).contains('Start from scratch').should("exist") cy.get(interact.TEMPLATE_CATEGORY_FILTER).should("exist") cy.get(interact.TEMPLATE_CATEGORY).should("exist") From a5c8219034b4e14006ba28dfbedf285ffa7852f6 Mon Sep 17 00:00:00 2001 From: Mitch-Budibase Date: Fri, 22 Jul 2022 17:39:38 +0100 Subject: [PATCH 5/5] Update command file Including a wait which seems necessary when logging in for the first time --- packages/builder/cypress/support/commands.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index 65126bc3d2..cc92ca280a 100644 --- a/packages/builder/cypress/support/commands.js +++ b/packages/builder/cypress/support/commands.js @@ -5,6 +5,7 @@ Cypress.on("uncaught:exception", () => { // ACCOUNTS & USERS Cypress.Commands.add("login", (email, password) => { cy.visit(`${Cypress.config().baseUrl}/builder`, { timeout: 10000 }) + cy.wait(2000) cy.url().then(url => { if (url.includes("builder/admin")) { // create admin user