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
2024-06-18 18:35:37 +12:00 · 2021-09-27 18:19:25 +01:00 · 2021-09-27 18:19:25 +01:00 · 716dbe9c98
parent 8bea39aa15
commit 716dbe9c98
9 changed files with 200 additions and 15 deletions
--- a/packages/builder/cypress.json
+++ b/packages/builder/cypress.json
@ -1,5 +1,5 @@
 {
-  "baseUrl": "http://localhost:10001/builder/",
+  "baseUrl": "https://test.budi.live/builder/",
  "video": true,
  "projectId": "bmbemn",
  "env": {
--- a/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js
+++ b/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)")
+        })
+    })
+})
--- a/packages/builder/cypress/integration/addRadioButtons.spec.js
+++ b/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)
+    }
+})
+
+
+
+
--- a/packages/builder/cypress/integration/createApp.spec.js
+++ b/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")
  })
 })
--- a/packages/builder/cypress/integration/createTable.spec.js
+++ b/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", () => {
--- a/packages/builder/cypress/integration/createView.spec.js
+++ b/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.contains("TestView Updated").should("not.be.visible")
+    cy.wait(500)
+    cy.contains("TestView Updated").should("not.exist")
  })
 })

--- a/packages/builder/cypress/integration/customThemingProperties.spec.js
+++ b/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"]')
+    }
+
+})
--- a/packages/builder/cypress/setup.js
+++ b/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"
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@ -6,8 +6,8 @@
 //

 Cypress.Commands.add("login", () => {
-  cy.visit(`localhost:${Cypress.env("PORT")}/builder`)
-  cy.wait(500)
+  cy.visit(`https://test.budi.live/builder`)
+  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})
+  })
+})