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

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

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

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

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

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)

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)

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

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,

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