Cypress Testing additions and changes

-Changing baseurl to be the test env
-Made a few updates to existing tests/commands
--New commands also added
-Add Radio Button Test
-Add Multi Option Datatype test
-Custom Theming Properties Test
--Just the one so far, more to come

packages/builder/cypress.json

@@ -1,5 +1,5 @@
 {
-  "baseUrl": "http://localhost:10001/builder/",
+  "baseUrl": "https://test.budi.live/builder/",
   "video": true,
   "projectId": "bmbemn",
   "env": {

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

@@ -0,0 +1,40 @@
+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.getComponent(componentId).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,39 @@
+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/createApp.spec.js

@@ -2,7 +2,7 @@ context("Create an Application", () => {
   it("should create a new application", () => {
     cy.login()
     cy.createTestApp()
-    cy.visit(`localhost:${Cypress.env("PORT")}/builder`)
+    cy.visit(`https://test.budi.live/builder`)
     cy.contains("Cypress Tests").should("exist")
   })
 })

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

@@ -38,7 +38,7 @@ context("Create a Table", () => {
     cy.wait(1000)
     cy.get(".spectrum-Modal input").type("Updated")
     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

@@ -1,3 +1,7 @@
+Cypress.on('uncaught:exception', (err, runnable) => {
+  return false;
+});
+
 context("Create a View", () => {
   before(() => {
     cy.login()
@@ -57,6 +61,7 @@ context("Create a View", () => {
   })
 
   it("creates a stats calculation view based on age", () => {
+    cy.wait(1000)
     cy.contains("Calculate").click()
     cy.get(".modal-inner-wrapper").within(() => {
       cy.get(".spectrum-Picker-label").eq(0).click()
@@ -65,7 +70,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)
 
@@ -126,7 +131,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()
@@ -141,8 +146,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/setup.js

@@ -16,7 +16,7 @@ process.env.PORT = MAIN_PORT
 process.env.JWT_SECRET = cypressConfig.env.JWT_SECRET
 process.env.COUCH_URL = `leveldb://${tmpdir}/.data/`
 process.env.SELF_HOSTED = 1
-process.env.WORKER_URL = "http://localhost:10002/"
+process.env.WORKER_URL = "https://test.budi.live/"
 process.env.MINIO_URL = `http://localhost:${MAIN_PORT}/`
 process.env.MINIO_ACCESS_KEY = "budibase"
 process.env.MINIO_SECRET_KEY = "budibase"

packages/builder/cypress/support/commands.js

@@ -6,8 +6,8 @@
 //
 
 Cypress.Commands.add("login", () => {
-  cy.visit(`localhost:${Cypress.env("PORT")}/builder`)
+  cy.visit(`https://test.budi.live/builder`)
-  cy.wait(500)
+  cy.wait(2000)
   cy.url().then(url => {
     if (url.includes("builder/admin")) {
       // create admin user
@@ -22,15 +22,17 @@ 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)
       })
     }
   })
 })
 
 Cypress.Commands.add("createApp", name => {
-  cy.visit(`localhost:${Cypress.env("PORT")}/builder`)
+  cy.visit(`https://test.budi.live/builder`)
   cy.wait(500)
   cy.contains(/Create (new )?app/).click()
+  cy.wait(500)
   cy.get(".spectrum-Modal")
     .within(() => {
       cy.get("input").eq(0).type(name).should("have.value", name).blur()
@@ -43,9 +45,9 @@ Cypress.Commands.add("createApp", name => {
 })
 
 Cypress.Commands.add("deleteApp", () => {
-  cy.visit(`localhost:${Cypress.env("PORT")}/builder`)
+  cy.visit(`https://test.budi.live/builder`)
   cy.wait(1000)
-  cy.request(`localhost:${Cypress.env("PORT")}/api/applications?status=all`)
+  cy.request(`https://test.budi.live/api/applications?status=all`)
     .its("body")
     .then(val => {
       console.log(val)
@@ -80,7 +82,7 @@ Cypress.Commands.add("createTable", tableName => {
   cy.contains(tableName).should("be.visible")
 })
 
-Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
+Cypress.Commands.add("addColumn", (tableName, columnName, type, multiOptions = null) => {
   // Select Table
   cy.selectTable(tableName)
   cy.contains(".nav-item", tableName).click()
@@ -95,6 +97,11 @@ Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
     cy.get(".spectrum-Picker-label").click()
     cy.contains(type).click()
 
+    // Add options for Multi-select Type
+    if(multiOptions !== null){
+      cy.get(".spectrum-Textfield-input").eq(1).type(multiOptions)
+    }
+
     cy.contains("Save Column").click()
   })
 })
@@ -109,6 +116,19 @@ 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()
@@ -127,7 +147,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("/")
@@ -149,8 +171,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) => {
@@ -173,3 +198,18 @@ 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})
+  })
+})