Merge pull request #2819 from Budibase/cypress-testing

Cypress testing - New Tests/Commands + Other Changes

packages/builder/cypress/integration/addMultiOptionDatatype.spec.js

@@ -0,0 +1,41 @@
+context("Add Multi-Option Datatype", () => {
+    before(() => {
+      cy.login()
+      cy.createTestApp()
+    })
+
+    it("should create a new table, with data", () => {
+        cy.createTable("Multi Data")
+        cy.addColumn("Multi Data", "Test Data", "Multi-select", "1\n2\n3\n4\n5")
+        cy.addRowMultiValue(["1", "2", "3", "4", "5"])
+    })
+
+    it ("should add form with multi select picker, containing 5 options", () => {
+        cy.navigateToFrontend()
+        cy.wait(500)
+        // Add data provider
+        cy.get(`[data-cy="category-Data Provider"]`).click()
+        cy.get('[data-cy="dataSource-prop-control"]').click()
+        cy.get(".dropdown").contains("Multi Data").click()
+        cy.wait(500)
+        // Add Form with schema to match table
+        cy.addComponent("Form", "Form")
+        cy.get('[data-cy="dataSource-prop-control"').click()
+        cy.get(".dropdown").contains("Multi Data").click()
+        cy.wait(500)
+        // Add multi-select picker to form
+        cy.addComponent("Form", "Multi-select Picker").then((componentId) => {
+            cy.get('[data-cy="field-prop-control"]').type("Test Data").type('{enter}')
+            cy.wait(1000)
+            cy.getComponent(componentId).contains("Choose some options").click()
+            // Check picker has 5 items
+            cy.getComponent(componentId).find('li').should('have.length', 5)
+            // Select all items
+            for (let i = 1; i < 6; i++) {
+                cy.getComponent(componentId).find('li').contains(i).click()
+            }
+            // Check items have been selected
+            cy.getComponent(componentId).find('.spectrum-Picker-label').contains("(5)")
+        })
+    })
+})

packages/builder/cypress/integration/addRadioButtons.spec.js

@@ -0,0 +1,35 @@
+context("Add Radio Buttons", () => {
+    before(() => {
+      cy.login()
+      cy.createTestApp()
+    })
+
+it("should add Radio Buttons options picker on form, add data, and confirm", () => {
+    cy.navigateToFrontend()
+    cy.addComponent("Form", "Form")
+    cy.addComponent("Form", "Options Picker").then((componentId) => {
+        // Provide field setting
+    cy.get(`[data-cy="field-prop-control"]`).type("1")
+    // Open dropdown and select Radio buttons
+    cy.get(`[data-cy="optionsType-prop-control"]`).click().then(() => {
+        cy.get('.spectrum-Popover').contains('Radio buttons')
+        .wait(500)
+        .click()
+        })
+    const radioButtonsTotal = 3
+    // Add values and confirm total
+    addRadioButtonData(radioButtonsTotal)
+    cy.getComponent(componentId).find('[type="radio"]')
+    .should('have.length', radioButtonsTotal)
+        })
+    })
+    
+    const addRadioButtonData = (totalRadioButtons) => {
+        cy.get(`[data-cy="optionsSource-prop-control"]`).click().then(() => {
+            cy.get('.spectrum-Popover').contains('Custom')
+            .wait(500)
+            .click()
+        })
+        cy.addCustomSourceOptions(totalRadioButtons)
+    }
+})

packages/builder/cypress/integration/createTable.spec.js

@@ -37,7 +37,7 @@ context("Create a Table", () => {
     cy.get(".spectrum-Modal input").clear()
     cy.get(".spectrum-Modal input").type("RoverUpdated")
     cy.contains("Save").click()
-    cy.contains("RoverUpdated").should("have.text", "RoverUpdated")
+    cy.contains("Updated").should("have.text", "Updated")
   })
 
   it("deletes a row", () => {

packages/builder/cypress/integration/createView.spec.js

@@ -62,7 +62,7 @@ context("Create a View", () => {
       cy.get(".spectrum-Picker-label").eq(1).click()
       cy.contains("age").click({ force: true })
 
-      cy.contains("Save").click()
+      cy.get(".spectrum-Button").contains("Save").click({ force: true })
     })
     cy.wait(1000)
 
@@ -123,7 +123,7 @@ context("Create a View", () => {
     cy.contains(".nav-item", "Test View")
       .find(".actions .icon")
       .click({ force: true })
-    cy.contains("Edit").click()
+    cy.get(".spectrum-Menu-itemLabel").contains("Edit").click()
     cy.get(".modal-inner-wrapper").within(() => {
       cy.get("input").type(" Updated")
       cy.contains("Save").click()
@@ -138,8 +138,8 @@ context("Create a View", () => {
       .click({ force: true })
     cy.contains("Delete").click()
     cy.contains("Delete View").click()
-    cy.wait(1000)
+    cy.wait(500)
-    cy.contains("TestView Updated").should("not.be.visible")
+    cy.contains("TestView Updated").should("not.exist")
   })
 })
 

packages/builder/cypress/integration/customThemingProperties.spec.js

@@ -0,0 +1,61 @@
+context("Custom Theming Properties", () => {
+    before(() => {
+      cy.login()
+      cy.createTestApp()
+      cy.navigateToFrontend()
+    })
+
+    // Default Values
+    // Button roundness = Large
+    // Primary colour = Blue 600
+    // Primary colour (hover) = Blue 500
+    // Navigation bar background colour = Gray 100
+    // Navigation bar text colour = Gray 800
+    it("should reset the color property values", () => {
+      // Open Theme modal and change colours  
+      cy.get(".spectrum-ActionButton-label").contains("Theme").click()
+        cy.get(".spectrum-Picker").contains("Large").click()
+        .parents()
+        .get(".spectrum-Menu-itemLabel").contains("None").click()
+        changeThemeColors()
+        // Reset colours
+        cy.get(".spectrum-Button-label").contains("Reset").click({force: true})
+        // Check values have reset
+        checkThemeColorDefaults()
+    })
+    
+    const changeThemeColors = () => {
+      // Changes the theme colours
+      cy.get(".spectrum-FieldLabel").contains("Primary color")
+        .parent().find(".container.svelte-z3cm5a").click()
+        .find('[title="Red 400"]').click()
+        cy.get(".spectrum-FieldLabel").contains("Primary color (hover)")
+        .parent().find(".container.svelte-z3cm5a").click()
+        .find('[title="Orange 400"]').click()
+        cy.get(".spectrum-FieldLabel").contains("Navigation bar background color")
+        .parent().find(".container.svelte-z3cm5a").click()
+        .find('[title="Yellow 400"]').click()
+        cy.get(".spectrum-FieldLabel").contains("Navigation bar text color")
+        .parent().find(".container.svelte-z3cm5a").click()
+        .find('[title="Green 400"]').click()
+    }
+    
+    const checkThemeColorDefaults = () => {
+      cy.get(".spectrum-FieldLabel").contains("Primary color")
+        .parent().find(".container.svelte-z3cm5a").click()
+        .get('[title="Blue 600"]').children().find('[aria-label="Checkmark"]')
+        cy.get(".spectrum-Dialog-grid").click()
+        cy.get(".spectrum-FieldLabel").contains("Primary color (hover)")
+        .parent().find(".container.svelte-z3cm5a").click()
+        .get('[title="Blue 500"]').children().find('[aria-label="Checkmark"]')
+        cy.get(".spectrum-Dialog-grid").click()
+        cy.get(".spectrum-FieldLabel").contains("Navigation bar background color")
+        .parent().find(".container.svelte-z3cm5a").click()
+        .get('[title="Gray 100"]').children().find('[aria-label="Checkmark"]')
+        cy.get(".spectrum-Dialog-grid").click()
+        cy.get(".spectrum-FieldLabel").contains("Navigation bar text color")
+        .parent().find(".container.svelte-z3cm5a").click()
+        .get('[title="Gray 800"]').children().find('[aria-label="Checkmark"]')
+    }
+
+})

packages/builder/cypress/support/commands.js

@@ -5,9 +5,13 @@
 // ***********************************************
 //
 
+Cypress.on('uncaught:exception', (err, runnable) => {
+  return false
+})
+
 Cypress.Commands.add("login", () => {
   cy.visit(`localhost:${Cypress.env("PORT")}/builder`)
-  cy.wait(500)
+  cy.wait(2000)
   cy.url().then(url => {
     if (url.includes("builder/admin")) {
       // create admin user
@@ -22,6 +26,7 @@ Cypress.Commands.add("login", () => {
         cy.get("input").first().type("test@test.com")
         cy.get('input[type="password"]').type("test")
         cy.get("button").first().click()
+        cy.wait(1000)
       })
     }
   })
@@ -100,24 +105,32 @@ Cypress.Commands.add("createTable", tableName => {
   cy.contains(tableName).should("be.visible")
 })
 
-Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
+Cypress.Commands.add(
-  // Select Table
+  "addColumn",
-  cy.selectTable(tableName)
+  (tableName, columnName, type, multiOptions = null) => {
-  cy.contains(".nav-item", tableName).click()
+    // Select Table
-  cy.contains("Create column").click()
+    cy.selectTable(tableName)
+    cy.contains(".nav-item", tableName).click()
+    cy.contains("Create column").click()
 
-  // Configure column
+    // Configure column
-  cy.get(".spectrum-Modal").within(() => {
+    cy.get(".spectrum-Modal").within(() => {
-    cy.get("input").first().type(columnName).blur()
+      cy.get("input").first().type(columnName).blur()
 
-    // Unset table display column
+      // Unset table display column
-    cy.contains("display column").click({ force: true })
+      cy.contains("display column").click({ force: true })
-    cy.get(".spectrum-Picker-label").click()
+      cy.get(".spectrum-Picker-label").click()
-    cy.contains(type).click()
+      cy.contains(type).click()
 
-    cy.contains("Save Column").click()
+      // Add options for Multi-select Type
-  })
+      if (multiOptions !== null) {
-})
+        cy.get(".spectrum-Textfield-input").eq(1).type(multiOptions)
+      }
+
+      cy.contains("Save Column").click()
+    })
+  }
+)
 
 Cypress.Commands.add("addRow", values => {
   cy.contains("Create row").click()
@@ -129,6 +142,21 @@ Cypress.Commands.add("addRow", values => {
   })
 })
 
+Cypress.Commands.add("addRowMultiValue", values => {
+  cy.contains("Create row").click()
+  cy.get(".spectrum-Form-itemField")
+    .click()
+    .then(() => {
+      cy.get(".spectrum-Popover").within(() => {
+        for (let i = 0; i < values.length; i++) {
+          cy.get(".spectrum-Menu-item").eq(i).click()
+        }
+      })
+      cy.get(".spectrum-Dialog-grid").click("top")
+      cy.get(".spectrum-ButtonGroup").contains("Create").click()
+    })
+})
+
 Cypress.Commands.add("createUser", email => {
   // quick hacky recorded way to create a user
   cy.contains("Users").click()
@@ -147,7 +175,9 @@ Cypress.Commands.add("addComponent", (category, component) => {
   if (category) {
     cy.get(`[data-cy="category-${category}"]`).click()
   }
-  cy.get(`[data-cy="component-${component}"]`).click()
+  if (component) {
+    cy.get(`[data-cy="component-${component}"]`).click()
+  }
   cy.wait(1000)
   cy.location().then(loc => {
     const params = loc.pathname.split("/")
@@ -169,8 +199,11 @@ Cypress.Commands.add("getComponent", componentId => {
 })
 
 Cypress.Commands.add("navigateToFrontend", () => {
+  // Clicks on Design tab and then the Home nav item
   cy.wait(1000)
   cy.contains("Design").click()
+  cy.get(".spectrum-Search").type("/")
+  cy.get(".nav-item").contains("Home").click()
 })
 
 Cypress.Commands.add("createScreen", (screenName, route) => {
@@ -193,3 +226,24 @@ Cypress.Commands.add("selectTable", tableName => {
   cy.expandBudibaseConnection()
   cy.contains(".nav-item", tableName).click()
 })
+
+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.wait(500)
+            cy.get("[placeholder='Label']").eq(i).type(i)
+            cy.get("[placeholder='Value']").eq(i).type(i)
+          })
+      }
+      // Save options
+      cy.get(".spectrum-Button").contains("Save").click({ force: true })
+    })
+})