diff --git a/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js b/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js index 3e0ba92ba4..38ae881db8 100644 --- a/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js +++ b/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js @@ -41,7 +41,7 @@ filterTests(['all'], () => { } // Check items have been selected cy.getComponent(componentId) - .find(interact.SPECTRUM_Picker_LABEL) + .find(interact.SPECTRUM_PICKER_LABEL) .contains("(5)") }) }) diff --git a/packages/builder/cypress/integration/appPublishWorkflow.spec.js b/packages/builder/cypress/integration/appPublishWorkflow.spec.js index fb3c48645f..d05a97f691 100644 --- a/packages/builder/cypress/integration/appPublishWorkflow.spec.js +++ b/packages/builder/cypress/integration/appPublishWorkflow.spec.js @@ -1,4 +1,5 @@ import filterTests from "../support/filterTests" +const interact = require('../support/interact') filterTests(['all'], () => { context("Publish Application Workflow", () => { @@ -11,49 +12,63 @@ filterTests(['all'], () => { cy.visit(`${Cypress.config().baseUrl}/builder`) cy.wait(1000) - cy.get(".appTable .app-status").eq(0) + cy.get(interact.APP_TABLE_STATUS).eq(0) .within(() => { cy.contains("Unpublished") - cy.get("svg[aria-label='GlobeStrike']").should("exist") + cy.get(interact.GLOBESTRIKE).should("exist") }) - cy.get(".appTable .app-row-actions").eq(0) + cy.get(interact.APP_TABLE_ROW_ACTION).eq(0) .within(() => { - cy.get(".spectrum-Button").contains("View") - cy.get(".spectrum-Button").contains("Edit").click({ force: true }) + cy.get(interact.SPECTRUM_BUTTON_TEMPLATE).contains("Preview") + cy.get(interact.SPECTRUM_BUTTON_TEMPLATE).contains("Edit").click({ force: true }) }) - cy.get(".deployment-top-nav svg[aria-label='GlobeStrike']").should("exist") - cy.get(".deployment-top-nav svg[aria-label='Globe']").should("not.exist") + cy.get(interact.DEPLOYMENT_TOP_NAV_GLOBESTRIKE).should("exist") + cy.get(interact.DEPLOYMENT_TOP_GLOBE).should("not.exist") }) it("Should publish an application and correctly reflect that", () => { //Assuming the previous test was run and the unpublished app is open in edit mode. + cy.get(interact.TOPRIGHTNAV_BUTTON_SPECTRUM).contains("Publish").click({ force : true }) - cy.publishApp("cypress-tests") + cy.get(interact.DEPLOY_APP_MODAL).should("be.visible") + .within(() => { + cy.get(interact.SPECTRUM_BUTTON).contains("Publish").click({ force : true }) + cy.wait(1000) + }); + + //Verify that the app url is presented correctly to the user + cy.get(interact.DEPLOY_APP_MODAL) + .should("be.visible") + .within(() => { + let appUrl = Cypress.config().baseUrl + '/app/cypress-tests' + cy.get(interact.DEPLOY_APP_URL_INPUT).should('have.value', appUrl) + cy.get(interact.SPECTRUM_BUTTON).contains("Done").click({ force: true }) + }) cy.visit(`${Cypress.config().baseUrl}/builder`) cy.wait(1000) - cy.get(".appTable .app-status").eq(0) + cy.get(interact.APP_TABLE_STATUS).eq(0) .within(() => { cy.contains("Published") - cy.get("svg[aria-label='Globe']").should("exist") + cy.get(interact.GLOBE).should("exist") }) - cy.get(".appTable .app-row-actions").eq(0) + cy.get(interact.APP_TABLE_ROW_ACTION).eq(0) .within(() => { - cy.get(".spectrum-Button").contains("View") - cy.get(".spectrum-Button").contains("Edit").click({ force: true }) + cy.get(interact.SPECTRUM_BUTTON).contains("View") + cy.get(interact.SPECTRUM_BUTTON).contains("Edit").click({ force: true }) }) - cy.get(".deployment-top-nav svg[aria-label='Globe']").should("exist").click({ force: true }) + cy.get(interact.DEPLOYMENT_TOP_GLOBE).should("exist").click({ force: true }) - cy.get("[data-cy='publish-popover-menu']").should("be.visible") + cy.get(interact.PUBLISH_POPOVER_MENU).should("be.visible") .within(() => { - cy.get("[data-cy='publish-popover-action']").should("exist") - cy.get("button").contains("View").should("exist") - cy.get(".publish-popover-message").should("have.text", "Last published a few seconds ago") + cy.get(interact.PUBLISH_POPOVER_ACTION).should("exist") + cy.get("button").contains("View app").should("exist") + cy.get(interact.PUBLISH_POPOVER_MESSAGE).should("have.text", "Last published a few seconds ago") }) }) @@ -62,36 +77,36 @@ filterTests(['all'], () => { cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(".appTable .app-status").eq(0) + cy.get(interact.APP_TABLE_STATUS).eq(0) .within(() => { cy.contains("Published") cy.get("svg[aria-label='Globe']").should("exist") }) - cy.get(".appTable .app-row-actions").eq(0) + cy.get(interact.APP_TABLE_ROW_ACTION).eq(0) .within(() => { - cy.get(".spectrum-Button").contains("View") - cy.get(".spectrum-Button").contains("Edit").click({ force: true }) + cy.get(interact.SPECTRUM_BUTTON).contains("View app") + cy.get(interact.SPECTRUM_BUTTON).contains("Edit").click({ force: true }) }) //The published status - cy.get(".deployment-top-nav svg[aria-label='Globe']").should("exist") + cy.get(interact.DEPLOYMENT_TOP_GLOBE).should("exist") .click({ force: true }) - cy.get("[data-cy='publish-popover-menu']").should("be.visible") + cy.get(interact.PUBLISH_POPOVER_MENU).should("be.visible") cy.get("[data-cy='publish-popover-menu'] [data-cy='publish-popover-action']") .click({ force : true }) - cy.get("[data-cy='unpublish-modal']").should("be.visible") + cy.get(interact.UNPUBLISH_MODAL).should("be.visible") .within(() => { - cy.get(".confirm-wrap button").click({ force: true } + cy.get(interact.CONFIRM_WRAP_BUTTON).click({ force: true } )}) - cy.get(".deployment-top-nav svg[aria-label='GlobeStrike']").should("exist") + cy.get(interact.DEPLOYMENT_TOP_NAV_GLOBESTRIKE).should("exist") cy.visit(`${Cypress.config().baseUrl}/builder`) - cy.get(".appTable .app-status").eq(0).contains("Unpublished") + cy.get(interact.APP_TABLE_STATUS).eq(0).contains("Unpublished") }) }) diff --git a/packages/builder/cypress/integration/autoScreensUI.spec.js b/packages/builder/cypress/integration/autoScreensUI.spec.js index 2c2a43e711..eebeac3e71 100644 --- a/packages/builder/cypress/integration/autoScreensUI.spec.js +++ b/packages/builder/cypress/integration/autoScreensUI.spec.js @@ -1,4 +1,5 @@ import filterTests from "../support/filterTests" +const interact = require('../support/interact') filterTests(['smoke', 'all'], () => { context("Auto Screens UI", () => { @@ -12,10 +13,10 @@ filterTests(['smoke', 'all'], () => { cy.closeModal(); cy.contains("Design").click() - cy.get("[aria-label=AddCircle]").click() - cy.get(".spectrum-Modal").within(() => { - cy.get(".item.disabled").contains("Autogenerated screens") - cy.get(".confirm-wrap .spectrum-Button").should('be.disabled') + 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.deleteAllApps() @@ -26,14 +27,14 @@ filterTests(['smoke', 'all'], () => { cy.selectExternalDatasource("REST") cy.selectExternalDatasource("S3") - cy.get(".spectrum-Modal").within(() => { - cy.get(".spectrum-Button").contains("Save and continue to query").click({ force : true }) + cy.get(interact.SPECTRUM_MODAL).within(() => { + cy.get(interact.SPECTRUM_BUTTON).contains("Save and continue to query").click({ force : true }) }) cy.navigateToAutogeneratedModal() - cy.get('.data-source-entry').should('have.length', 1) - cy.get('.data-source-entry') + cy.get(interact.DATA_SOURCE_ENTRY).should('have.length', 1) + cy.get(interact.DATA_SOURCE_ENTRY) cy.deleteAllApps() }); @@ -43,8 +44,8 @@ filterTests(['smoke', 'all'], () => { // Create Autogenerated screens from the internal table cy.createDatasourceScreen(["Cypress Tests"]) // Confirm screens have been auto generated - cy.get(".nav-items-container").contains("cypress-tests").click({ force: true }) - cy.get(".nav-items-container").should('contain', 'cypress-tests/:id') + cy.get(interact.NAV_ITEMS_CONTAINER).contains("cypress-tests").click({ force: true }) + cy.get(interact.NAV_ITEMS_CONTAINER).should('contain', 'cypress-tests/:id') .and('contain', 'cypress-tests/new/row') }) @@ -56,12 +57,12 @@ filterTests(['smoke', 'all'], () => { // Create Autogenerated screens from the internal tables cy.createDatasourceScreen([initialTable, secondTable]) // Confirm screens have been auto generated - cy.get(".nav-items-container").contains("cypress-tests").click({ force: true }) + cy.get(interact.NAV_ITEMS_CONTAINER).contains("cypress-tests").click({ force: true }) // Previously generated tables are suffixed with numbers - as expected - cy.get(".nav-items-container").should('contain', 'cypress-tests-2/:id') + cy.get(interact.NAV_ITEMS_CONTAINER).should('contain', 'cypress-tests-2/:id') .and('contain', 'cypress-tests-2/new/row') - cy.get(".nav-items-container").contains("table-two").click() - cy.get(".nav-items-container").should('contain', 'table-two/:id') + 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/new/row') }) @@ -71,17 +72,17 @@ filterTests(['smoke', 'all'], () => { cy.createTable("Table Four") cy.createDatasourceScreen(["Table Three", "Table Four"], "Admin") - cy.get(".nav-items-container").contains("table-three").click() - cy.get(".nav-items-container").should('contain', 'table-three/:id') + cy.get(interact.NAV_ITEMS_CONTAINER).contains("table-three").click() + cy.get(interact.NAV_ITEMS_CONTAINER).should('contain', 'table-three/:id') .and('contain', 'table-three/new/row') - cy.get(".nav-items-container").contains("table-four").click() - cy.get(".nav-items-container").should('contain', 'table-four/:id') + 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/new/row') //The access level should now be set to admin. Previous screens should be filtered. - cy.get(".nav-items-container").contains("table-two").should('not.exist') - cy.get(".nav-items-container").contains("cypress-tests").should('not.exist') + cy.get(interact.NAV_ITEMS_CONTAINER).contains("table-two").should('not.exist') + cy.get(interact.NAV_ITEMS_CONTAINER).contains("cypress-tests").should('not.exist') }) if (Cypress.env("TEST_ENV")) { @@ -94,8 +95,8 @@ filterTests(['smoke', 'all'], () => { // Create Autogenerated screens from a MySQL table - MySQL contains books table cy.createDatasourceScreen(["books"]) - cy.get(".nav-items-container").contains("books").click() - cy.get(".nav-items-container").should('contain', 'books/:id') + cy.get(interact.NAV_ITEMS_CONTAINER).contains("books").click() + cy.get(interact.NAV_ITEMS_CONTAINER).should('contain', 'books/:id') .and('contain', 'books/new/row') }) } diff --git a/packages/builder/cypress/integration/createApp.spec.js b/packages/builder/cypress/integration/createApp.spec.js index ce5e2bd0c2..df617e3d9f 100644 --- a/packages/builder/cypress/integration/createApp.spec.js +++ b/packages/builder/cypress/integration/createApp.spec.js @@ -30,7 +30,7 @@ filterTests(['smoke', 'all'], () => { .its("body") .then(val => { if (val.length > 0) { - cy.get(interact.SPECTRUM_BUTTON_TEMPLATE).contains("Templates").click({force: true}) + cy.get(interact.SPECTRUM_BUTTON).contains("Templates").click({force: true}) } }) diff --git a/packages/builder/cypress/integration/createComponents.spec.js b/packages/builder/cypress/integration/createComponents.spec.js index e13439d9c6..43a76c700e 100644 --- a/packages/builder/cypress/integration/createComponents.spec.js +++ b/packages/builder/cypress/integration/createComponents.spec.js @@ -1,6 +1,7 @@ // TODO for now components are skipped, might not be good to keep doing this import filterTests from "../support/filterTests" +const interact = require('../support/interact') filterTests(['all'], () => { xcontext("Create Components", () => { @@ -31,32 +32,32 @@ filterTests(['all'], () => { it("should change the text of the headline", () => { const text = "Lorem ipsum dolor sit amet." - cy.get("[data-cy=Settings]").click() - cy.get("[data-cy=setting-text] input") + cy.get(interact.SETTINGS).click() + cy.get(interact.SETTINGS_INPUT) .type(text) .blur() cy.getComponent(headlineId).should("have.text", text) }) it("should change the size of the headline", () => { - cy.get("[data-cy=Design]").click() + cy.get(interact.DESIGN).click() cy.contains("Typography").click() - cy.get("[data-cy=font-size-prop-control]").click() + cy.get(interact.FONT_SIZE_PROP_CONTROL).click() cy.contains("60px").click() cy.getComponent(headlineId).should("have.css", "font-size", "60px") }) it("should create a form and reset to match schema", () => { cy.addComponent("Form", "Form").then(() => { - cy.get("[data-cy=Settings]").click() - cy.get("[data-cy=setting-dataSource]") + cy.get(interact.SETTINGS).click() + cy.get(interact.DATA_CY_DATASOURCE) .contains("Choose option") .click() - cy.get(".dropdown") + cy.get(interact.DROPDOWN) .contains("dog") .click() cy.addComponent("Form", "Field Group").then(fieldGroupId => { - cy.get("[data-cy=Settings]").click() + cy.get(interact.SETTINGS).click() cy.contains("Update Form Fields").click() cy.get(".modal") .get("button.primary") @@ -70,7 +71,7 @@ filterTests(['all'], () => { .find("input") .should("have.length", 2) cy.getComponent(fieldGroupId) - .find(".spectrum-Picker") + .find(interact.SPECTRUM_PICKER) .should("have.length", 1) }) }) @@ -84,7 +85,7 @@ filterTests(['all'], () => { cy.get(".ui-nav ul .nav-item.selected .ri-more-line").click({ force: true, }) - cy.get(".dropdown-container") + cy.get(interact.DROPDOWN_CONTAINER) .contains("Delete") .click() cy.get(".modal") diff --git a/packages/builder/cypress/support/interact.js b/packages/builder/cypress/support/interact.js index 11794d940d..22ab13a48b 100644 --- a/packages/builder/cypress/support/interact.js +++ b/packages/builder/cypress/support/interact.js @@ -17,10 +17,44 @@ 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"]' export const DROPDOWN = ".dropdown" -export const SPECTRUM_Picker_LABEL = ".spectrum-Picker-label" +export const SPECTRUM_PICKER_LABEL = ".spectrum-Picker-label" export const DATASOURCE_FIELD_CONTROL = '[data-cy="field-prop-control"]' export const OPTION_TYPE_PROP_CONTROL = '[data-cy="optionsType-prop-control' //AddRadioButtons export const SPECTRUM_POPOVER = ".spectrum-Popover" export const OPTION_SOURCE_PROP_CONROL = '[data-cy="optionsSource-prop-control' +export const APP_TABLE_STATUS = ".appTable .app-status" +export const APP_TABLE_ROW_ACTION = ".appTable .app-row-actions" +export const DEPLOYMENT_TOP_NAV_GLOBESTRIKE = + ".deployment-top-nav svg[aria-label=GlobeStrike]" +export const DEPLOYMENT_TOP_GLOBE = ".deployment-top-nav svg[aria-label=Globe]" +export const PUBLISH_POPOVER_MENU = '[data-cy="publish-popover-menu"]' +export const PUBLISH_POPOVER_ACTION = '[data-cy="publish-popover-action"]' +export const PUBLISH_POPOVER_MESSAGE = ".publish-popover-message" +export const SPECTRUM_BUTTON = ".spectrum-Button" +export const TOPRIGHTNAV_BUTTON_SPECTRUM = ".toprightnav button.spectrum-Button" + +//createComponents +export const SETTINGS = "[data-cy=Settings]" +export const SETTINGS_INPUT = "[data-cy=setting-text] input" +export const DESIGN = "[data-cy=Design]" +export const FONT_SIZE_PROP_CONTRO = "[data-cy=font-size-prop-control]" +export const DATA_CY_DATASOURCE = "[data-cy=setting-dataSource]" +export const DROPDOWN_CONTAINER = ".dropdown-container" +export const SPECTRUM_PICKER = ".spectrum-Picker" + +//autoScreens +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" + +//publishWorkFlow +export const DEPLOY_APP_MODAL = ".spectrum-Modal [data-cy=deploy-app-modal]" +export const DEPLOY_APP_URL_INPUT = "[data-cy=deployed-app-url] input" +export const GLOBESTRIKE = "svg[aria-label=GlobeStrike]" +export const GLOBE = "svg[aria-label=Globe]" +export const UNPUBLISH_MODAL = "[data-cy=unpublish-modal]" +export const CONFIRM_WRAP_BUTTON = ".confirm-wrap button"