54 lines
1.8 KiB
JavaScript
54 lines
1.8 KiB
JavaScript
xcontext('Create Components', () => {
|
|
|
|
before(() => {
|
|
cy.server()
|
|
cy.visit('localhost:4001/_builder')
|
|
// https://on.cypress.io/type
|
|
cy.createApp('Model App', 'Model App Description')
|
|
cy.createTable('dog', 'name', 'age')
|
|
cy.addRecord('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)
|
|
} |