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

Merge pull request #1263 from Budibase/cypress-design-tests 

Cypress design tests
This commit is contained in:
Andrew Kingston 2021-03-09 12:33:59 +00:00 committed by GitHub
parent 1f03851f0d 2444041018
commit efb189c711
17 changed files with 278 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/builder/cypress.json
View File

@ -1,8 +1,8 @@
{
"baseUrl": "http://localhost:4005/_builder/",
"baseUrl": "http://localhost:4001/_builder/",
"video": true,
"projectId": "bmbemn",
"env": {
"PORT": "4005"
"PORT": "4001"
}
}

19
packages/builder/cypress/integration/createApp.spec.js
View File

@ -1,18 +1,7 @@
context('Create an Application', () => {
beforeEach(() => {
cy.server()
context("Create an Application", () => {
it("should create a new application", () => {
cy.createTestApp()
cy.visit(`localhost:${Cypress.env("PORT")}/_builder`)
})
// https://on.cypress.io/interacting-with-elements
it('should create a new application', () => {
// https://on.cypress.io/type
cy.createApp('My Cool App', 'This is a description')
cy.visit(`localhost:${Cypress.env("PORT")}/_builder`)
cy.contains('My Cool App').should('exist')
cy.contains("Cypress Tests").should("exist")
})
})

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

@ -1,12 +1,6 @@
context("Create a automation", () => {
before(() => {
cy.server()
cy.visit(`localhost:${Cypress.env("PORT")}/_builder`)
cy.createApp(
"Automation Test App",
"This app is used to test that automations do in fact work!"
)
cy.createTestApp()
})
// https://on.cypress.io/interacting-with-elements

65
packages/builder/cypress/integration/createBinding.spec.js
View File

@ -1,18 +1,59 @@
xcontext('Create a Binding', () => {
context("Create Bindings", () => {
before(() => {
cy.visit(`localhost:${Cypress.env("PORT")}/_builder`)
cy.createApp('Binding App', 'Binding App Description')
cy.createTestApp()
cy.navigateToFrontend()
})
it('add an input binding', () => {
cy.get(".nav-items-container").contains('Home').click()
cy.contains("Add").click()
cy.get("[data-cy=Input]").click()
cy.get("[data-cy=Textfield]").click()
cy.contains("Heading").click()
cy.get("[data-cy=text-binding-button]").click()
cy.get("[data-cy=binding-dropdown-modal]").contains('Input 1').click()
cy.get("[data-cy=binding-dropdown-modal] textarea").should('have.value', 'Home{{ Input 1 }}')
it("should add a current user binding", () => {
cy.addComponent("Elements", "Paragraph").then(componentId => {
addSettingBinding("text", "Current User._id")
cy.getComponent(componentId).should(
"have.text",
`ro_ta_users_us_test@test.com`
)
})
})
it("should handle an invalid binding", () => {
cy.addComponent("Elements", "Paragraph").then(componentId => {
// Cypress needs to escape curly brackets
cy.get("[data-cy=setting-text] input")
.type("{{}{{}{{} Current User._id {}}{}}")
.blur()
cy.getComponent(componentId).should("have.text", "{{{ user._id }}")
})
})
it("should add a URL param binding", () => {
const paramName = "foo"
cy.createScreen("Test Param", `/test/:${paramName}`)
cy.addComponent("Elements", "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
// component exists on the page
cy.getComponent(componentId).should("have.text", "")
})
})
it("should add a binding with a handlebars helper", () => {
cy.addComponent("Elements", "Paragraph").then(componentId => {
// Cypress needs to escape curly brackets
addSettingBinding("text", "{{}{{} add 1 2 {}}{}}", false)
cy.getComponent(componentId).should("have.text", "3")
})
})
})
const addSettingBinding = (setting, bindingText, clickOption = true) => {
cy.get(`[data-cy="setting-${setting}"] [data-cy=text-binding-button]`).click()
cy.get(".drawer").within(() => {
if (clickOption) {
cy.contains(bindingText).click()
cy.get("textarea").should("have.value", `{{ ${bindingText} }}`)
} else {
cy.get("textarea").type(bindingText)
}
cy.get("button").click()
})
}

128
packages/builder/cypress/integration/createComponents.spec.js
View File

@ -1,60 +1,90 @@
xcontext("Create Components", () => {
context("Create Components", () => {
let headlineId
before(() => {
cy.server()
cy.visit(`localhost:${Cypress.env("PORT")}/_builder`)
// https://on.cypress.io/type
cy.createApp("Table App", "Table App Description")
cy.createTable("dog", "name", "age")
cy.addRow("bob", "15")
})
// https://on.cypress.io/interacting-with-elements
it("should add a container", () => {
cy.createTestApp()
cy.createTable("dog")
cy.addColumn("dog", "name", "string")
cy.addColumn("dog", "age", "number")
cy.addColumn("dog", "type", "options")
cy.navigateToFrontend()
cy.get(".switcher > :nth-child(2)").click()
cy.contains("Container").click()
})
it("should add a headline", () => {
cy.addHeadlineComponent("An Amazing headline!")
getIframeBody().contains("An Amazing headline!")
it("should add a container", () => {
cy.addComponent(null, "Container").then(componentId => {
cy.getComponent(componentId).should("exist")
})
it("change the font size of the headline", () => {
})
it("should add a headline", () => {
cy.addComponent("Elements", "Headline").then(componentId => {
headlineId = componentId
cy.getComponent(headlineId).should("exist")
})
})
it("should change the text of the headline", () => {
const text = "Lorem ipsum dolor sit amet."
cy.get("[data-cy=Settings]").click()
cy.get("[data-cy=setting-text] input")
.type(text)
.blur()
cy.getComponent(headlineId).should("have.text", text)
})
it("should change the size of the headline", () => {
cy.get("[data-cy=Design]").click()
cy.contains("Typography").click()
cy.get("[data-cy=font-size-prop-control]").click()
cy.contains("60px").click()
cy.contains("Design").click()
cy.getComponent(headlineId).should("have.css", "font-size", "60px")
})
getIframeBody()
.contains("An Amazing headline!")
.should("have.css", "font-size", "60px")
it("should create a form and reset to match schema", () => {
cy.addComponent("Form", "Form").then(() => {
cy.get("[data-cy=Settings]").click()
cy.get("[data-cy=setting-datasource]")
.contains("Choose option")
.click()
cy.get(".dropdown")
.contains("dog")
.click()
cy.addComponent("Form", "Field Group").then(fieldGroupId => {
cy.get("[data-cy=Settings]").click()
cy.contains("Update Form Fields").click()
cy.get(".modal")
.get("button.primary")
.click()
cy.getComponent(fieldGroupId).within(() => {
cy.contains("name").should("exist")
cy.contains("age").should("exist")
cy.contains("type").should("exist")
})
cy.getComponent(fieldGroupId)
.find("input")
.should("have.length", 2)
cy.getComponent(fieldGroupId)
.find(".spectrum-Picker")
.should("have.length", 1)
})
})
})
it("deletes a component", () => {
cy.addComponent("Elements", "Paragraph").then(componentId => {
cy.get("[data-cy=setting-_instanceName] input")
.type(componentId)
.blur()
cy.get(".ui-nav ul .nav-item.selected .ri-more-line").click({
force: true,
})
cy.get(".dropdown-container")
.contains("Delete")
.click()
cy.get(".modal")
.contains("Delete Component")
.click()
cy.getComponent(componentId).should("not.exist")
})
})
})
const getIframeDocument = () => {
return (
cy
.get("iframe")
// Cypress yields jQuery element, which has the real
// DOM element under property "0".
// From the real DOM iframe element we can get
// the "document" element, it is stored in "contentDocument" property
// Cypress "its" command can access deep properties using dot notation
// https://on.cypress.io/its
.its("0.contentDocument")
.should("exist")
)
}
const getIframeBody = () => {
// get the document
return (
getIframeDocument()
// automatically retries until body is loaded
.its("body")
.should("not.be.undefined")
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
.then(cy.wrap)
)
}

10
packages/builder/cypress/integration/createScreen.js Normal file
View File

@ -0,0 +1,10 @@
context("Screen Tests", () => {
before(() => {
cy.createTestApp()
cy.navigateToFrontend()
})
it("Should successfully create a screen", () => {
cy.createScreen("Test Screen", "/test")
})
})

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

@ -1,7 +1,6 @@
context("Create a Table", () => {
before(() => {
cy.visit(`localhost:${Cypress.env("PORT")}/_builder`)
cy.createApp("Table App", "Table App Description")
cy.createTestApp()
})
it("should create a new Table", () => {
@ -26,7 +25,9 @@ context("Create a Table", () => {
.trigger("mouseover")
.find(".ri-pencil-line")
.click({ force: true })
cy.get(".actions input").first().type("updated")
cy.get(".actions input")
.first()
.type("updated")
// Unset table display column
cy.contains("display column").click()
cy.contains("Save Column").click()
@ -44,7 +45,9 @@ context("Create a Table", () => {
it("deletes a row", () => {
cy.get(".ag-checkbox-input").check({ force: true })
cy.contains("Delete 1 row(s)").click()
cy.get(".modal").contains("Delete").click()
cy.get(".modal")
.contains("Delete")
.click()
cy.contains("RoverUpdated").should("not.exist")
})
@ -55,12 +58,16 @@ context("Create a Table", () => {
.click({ force: true })
cy.contains("Delete").click()
cy.wait(50)
cy.get(".buttons").contains("Delete").click()
cy.get(".buttons")
.contains("Delete")
.click()
cy.contains("nameupdated").should("not.exist")
})
it("deletes a table", () => {
cy.get(".ri-more-line").first().click({ force: true })
cy.get(".ri-more-line")
.first()
.click({ force: true })
cy.get("[data-cy=delete-table]").click()
cy.contains("Delete Table").click()
cy.contains("dog").should("not.exist")

15
packages/builder/cypress/integration/createUser.spec.js
View File

@ -1,17 +1,10 @@
context('Create a User', () => {
context("Create a User", () => {
before(() => {
cy.server()
cy.visit(`localhost:${Cypress.env("PORT")}/_builder`)
// https://on.cypress.io/type
cy.createApp('User App', 'This app is used to test user creation')
cy.createTestApp()
})
// https://on.cypress.io/interacting-with-elements
it('should create a user', () => {
it("should create a user", () => {
cy.createUser("bbuser@test.com", "test", "ADMIN")
// // Check to make sure user was created!
cy.contains("bbuser").should('be.visible')
cy.contains("bbuser").should("be.visible")
})
})

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

@ -1,15 +1,6 @@
function removeSpacing(headers) {
let newHeaders = []
for (let header of headers) {
newHeaders.push(header.replace(/\s\s+/g, " "))
}
return newHeaders
}
context("Create a View", () => {
before(() => {
cy.visit(`localhost:${Cypress.env("PORT")}/_builder`)
cy.createApp("View App", "View App Description")
cy.createTestApp()
cy.createTable("data")
cy.addColumn("data", "group", "Text")
cy.addColumn("data", "age", "Number")
@ -36,16 +27,28 @@ context("Create a View", () => {
const headers = Array.from($headers).map(header =>
header.textContent.trim()
)
expect(removeSpacing(headers)).to.deep.eq([ "rating Number", "age Number", "group Text" ])
expect(removeSpacing(headers)).to.deep.eq([
"rating Number",
"age Number",
"group Text",
])
})
})
it("filters the view by age over 10", () => {
cy.contains("Filter").click()
cy.contains("Add Filter").click()
cy.get(".menu-container").find("select").first().select("age")
cy.get(".menu-container").find("select").eq(1).select("More Than")
cy.get(".menu-container").find("input").type(18)
cy.get(".menu-container")
.find("select")
.first()
.select("age")
cy.get(".menu-container")
.find("select")
.eq(1)
.select("More Than")
cy.get(".menu-container")
.find("input")
.type(18)
cy.contains("Save").click()
cy.get("[role=rowgroup] .ag-row").get($values => {
expect($values).to.have.length(5)
@ -57,9 +60,15 @@ context("Create a View", () => {
cy.viewport("macbook-15")
cy.contains("Calculate").click()
cy.get(".menu-container").find("select").eq(0).select("Statistics")
cy.get(".menu-container")
.find("select")
.eq(0)
.select("Statistics")
cy.wait(50)
cy.get(".menu-container").find("select").eq(1).select("age")
cy.get(".menu-container")
.find("select")
.eq(1)
.select("age")
cy.contains("Save").click()
cy.wait(100)
cy.get(".ag-center-cols-viewport").scrollTo("100%")
@ -68,19 +77,19 @@ context("Create a View", () => {
const headers = Array.from($headers).map(header =>
header.textContent.trim()
)
expect(removeSpacing(headers)).to.deep.eq([ "avg Number",
expect(removeSpacing(headers)).to.deep.eq([
"avg Number",
"sumsqr Number",
"count Number",
"max Number",
"min Number",
"sum Number",
"field Text" ])
"field Text",
])
})
cy.get(".ag-cell").then($values => {
let values = Array.from($values).map(header =>
header.textContent.trim()
)
expect(values).to.deep.eq([ "31", "5347", "5", "49", "20", "155", "age" ])
let values = Array.from($values).map(header => header.textContent.trim())
expect(values).to.deep.eq(["31", "5347", "5", "49", "20", "155", "age"])
})
})
@ -99,7 +108,15 @@ context("Create a View", () => {
.find(".ag-cell")
.then($values => {
const values = Array.from($values).map(value => value.textContent)
expect(values).to.deep.eq([ "Students", "23.333333333333332", "1650", "3", "25", "20", "70" ])
expect(values).to.deep.eq([
"Students",
"23.333333333333332",
"1650",
"3",
"25",
"20",
"70",
])
})
})
@ -124,3 +141,11 @@ context("Create a View", () => {
cy.contains("TestView Updated").should("not.be.visible")
})
})
function removeSpacing(headers) {
let newHeaders = []
for (let header of headers) {
newHeaders.push(header.replace(/\s\s+/g, " "))
}
return newHeaders
}

13
packages/builder/cypress/integration/screens.spec.js
View File

@ -1,13 +0,0 @@
context('Screen Tests', () => {
before(() => {
cy.server()
cy.visit(`localhost:${Cypress.env("PORT")}/_builder`)
cy.createApp('Conor Cy App', 'Table App Description')
cy.navigateToFrontend()
})
it('Should successfully create a screen', () => {
cy.createScreen("test Screen", "/test")
})
})

3
packages/builder/cypress/setup.js
View File

@ -3,15 +3,12 @@
// 2. Initialises using `.budibase`
// 3. Runs the server using said folder
const rimraf = require("rimraf")
const { join, resolve } = require("path")
const initialiseBudibase = require("../../server/src/utilities/initialiseBudibase")
const cypressConfig = require("../cypress.json")
const homedir = join(require("os").homedir(), ".budibase")
rimraf.sync(homedir)
process.env.BUDIBASE_API_KEY = "6BE826CB-6B30-4AEC-8777-2E90464633DE"
process.env.NODE_ENV = "cypress"
process.env.ENABLE_ANALYTICS = "false"

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

@ -25,8 +25,8 @@
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
Cypress.Commands.add("createApp", name => {
cy.visit(`localhost:${Cypress.env("PORT")}/_builder`)
cy.contains("Create New Web App").click()
cy.get("body")
.then($body => {
if ($body.find("input[name=apiKey]").length) {
@ -41,9 +41,7 @@ Cypress.Commands.add("createApp", name => {
cy.get("input[name=applicationName]")
.type(name)
.should("have.value", name)
cy.contains("Next").click()
cy.get("input[name=email]")
.click()
.type("test@test.com")
@ -57,6 +55,28 @@ Cypress.Commands.add("createApp", name => {
})
})
Cypress.Commands.add("deleteApp", name => {
cy.visit(`localhost:${Cypress.env("PORT")}/_builder`)
cy.get("body").then($body => {
cy.wait(1000)
if ($body.find(`[data-cy="app-${name}"]`).length) {
cy.get(`[data-cy="app-${name}"] a`).click()
cy.get("[data-cy=settings-icon]").click()
cy.get(".modal-content").within(() => {
cy.contains("Danger Zone").click()
cy.get("input").type("DELETE")
cy.contains("Delete Entire App").click()
})
}
})
})
Cypress.Commands.add("createTestApp", () => {
const appName = "Cypress Tests"
cy.deleteApp(appName)
cy.createApp(appName, "This app is used for Cypress testing.")
})
Cypress.Commands.add("createTestTableWithData", () => {
cy.createTable("dog")
cy.addColumn("dog", "name", "Text")
@ -87,6 +107,7 @@ Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
cy.get("input")
.first()
.type(columnName)
// Unset table display column
cy.contains("display column").click()
cy.get("select").select(type)
@ -96,15 +117,12 @@ Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
Cypress.Commands.add("addRow", values => {
cy.contains("Create New Row").click()
cy.get(".modal").within(() => {
for (let i = 0; i < values.length; i++) {
cy.get("input")
.eq(i)
.type(values[i])
}
// Save
cy.get(".buttons")
.contains("Create")
.click()
@ -114,9 +132,7 @@ Cypress.Commands.add("addRow", values => {
Cypress.Commands.add("createUser", (email, password, role) => {
// Create User
cy.contains("Users").click()
cy.contains("Create New User").click()
cy.get(".modal").within(() => {
cy.get("input")
.first()
@ -135,20 +151,29 @@ Cypress.Commands.add("createUser", (email, password, role) => {
})
})
Cypress.Commands.add("addHeadlineComponent", text => {
cy.get(".switcher > :nth-child(2)").click()
cy.get("[data-cy=Text]").click()
cy.get("[data-cy=Headline]").click()
cy.get(".tabs > :nth-child(2)").click()
cy.contains("Settings").click()
cy.get('input[name="text"]').type(text)
cy.contains("Design").click()
Cypress.Commands.add("addComponent", (category, component) => {
if (category) {
cy.get(`[data-cy="category-${category}"]`).click()
}
cy.get(`[data-cy="component-${component}"]`).click()
cy.wait(500)
cy.location().then(loc => {
const params = loc.pathname.split("/")
const componentId = params[params.length - 1]
cy.getComponent(componentId).should("exist")
return cy.wrap(componentId)
})
})
Cypress.Commands.add("addButtonComponent", () => {
cy.get(".switcher > :nth-child(2)").click()
cy.get("[data-cy=Button]").click()
Cypress.Commands.add("getComponent", componentId => {
return cy
.get("iframe")
.its("0.contentDocument")
.should("exist")
.its("body")
.should("not.be.null")
.then(cy.wrap)
.find(`[data-component-id=${componentId}]`)
})
Cypress.Commands.add("navigateToFrontend", () => {

4
packages/builder/package.json
View File

@ -14,8 +14,8 @@
"cy:run": "cypress run",
"cy:open": "cypress open",
"cy:run:ci": "cypress run --browser electron --record --key f308590b-6070-41af-b970-794a3823d451",
"cy:test": "start-server-and-test cy:setup http://localhost:4005/_builder cy:run",
"cy:ci": "start-server-and-test cy:setup http://localhost:4005/_builder cy:run:ci"
"cy:test": "start-server-and-test cy:setup http://localhost:4001/_builder cy:run",
"cy:ci": "start-server-and-test cy:setup http://localhost:4001/_builder cy:run:ci"
},
"jest": {
"globals": {

2
packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
View File

@ -57,6 +57,7 @@
<div
bind:this={anchors[idx]}
class="category"
data-cy={item.isCategory ? `category-${item.name}` : `component-${item.name}`}
on:click={() => onItemChosen(item, idx)}
class:active={idx === selectedIndex}>
{#if item.icon}<i class={item.icon} />{/if}
@ -74,6 +75,7 @@
{#each enrichedStructure[selectedIndex].children as item}
{#if !item.showOnAsset || item.showOnAsset.includes($currentAssetName)}
<DropdownItem
data-cy={`component-${item.name}`}
icon={item.icon}
title={item.name}
on:click={() => onItemChosen(item)} />

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
View File

@ -69,7 +69,7 @@
}
</script>
<div class="property-control" bind:this={anchor}>
<div class="property-control" bind:this={anchor} data-cy={`setting-${key}`}>
<div class="label">{label}</div>
<div data-cy={`${key}-prop-control`} class="control">
<svelte:component

5
packages/builder/src/components/settings/Link.svelte
View File

@ -5,7 +5,10 @@
let modal
</script>
<div class="topnavitemright settings" on:click={modal.show}>
<div
class="topnavitemright settings"
data-cy="settings-icon"
on:click={modal.show}>
<i class="ri-settings-3-line" />
</div>
<Modal bind:this={modal} width="600px">

2
packages/builder/src/components/start/AppCard.svelte
View File

@ -30,7 +30,7 @@
<div class="apps-card">
<Heading small black>{name}</Heading>
<Spacer medium />
<div class="card-footer">
<div class="card-footer" data-cy={`app-${name}`}>
<TextButton text medium blue href="/_builder/{_id}">
Open
{name}