From 552a2e00aaf29942d5ecc07466001fbbfa4e9221 Mon Sep 17 00:00:00 2001 From: Mitch-Budibase Date: Wed, 20 Jul 2022 17:44:30 +0100 Subject: [PATCH] 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]"