AutoScreensUI test changes

Changes related to the UI redesign
- Also added new command to filter screens by access level

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()

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.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')
       })
     }

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)
   })

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]"