MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2819 from Budibase/cypress-testing 

Cypress testing - New Tests/Commands + Other Changes
This commit is contained in:
Mitch-Budibase 2021-10-08 11:51:58 +01:00 committed by GitHub
parent 5e4e15fe9e ce64923813
commit 5ae5d8ddf0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 213 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
packages/builder/cypress/integration/addMultiOptionDatatype.spec.js Normal file
View File

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

35
packages/builder/cypress/integration/addRadioButtons.spec.js Normal file
View File

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

2
packages/builder/cypress/integration/createTable.spec.js
View File

@ -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", () => {

8
packages/builder/cypress/integration/createView.spec.js
View File

@ -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.contains("TestView Updated").should("not.be.visible")
cy.wait(500)
cy.contains("TestView Updated").should("not.exist")
})
})

61
packages/builder/cypress/integration/customThemingProperties.spec.js Normal file
View File

@ -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"]')
}
})

60
packages/builder/cypress/support/commands.js
View File

@ -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,7 +105,9 @@ 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()
@ -115,9 +122,15 @@ 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()
})
})
}
)
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()
}
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 })
})
})