budibase/packages/builder/cypress/integration/createComponents.spec.js

54 lines
1.8 KiB
JavaScript

xcontext('Create Components', () => {
before(() => {
cy.server()
cy.visit('localhost:4001/_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.contains('frontend').click()
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('change the font size of the headline', () => {
cy.contains('Typography').click()
cy.get('[data-cy=font-size-prop-control]').click()
cy.contains("60px").click()
cy.contains('Design').click()
getIframeBody().contains('An Amazing headline!').should('have.css', 'font-size', '60px')
})
})
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)
}