forked from tsai/budibase
Andrew Kingston
6 years ago
15 changed files with 150 additions and 175 deletions
@ -1,54 +1,60 @@ |
|||||
xcontext('Create Components', () => { |
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") |
||||
|
}) |
||||
|
|
||||
before(() => { |
// https://on.cypress.io/interacting-with-elements
|
||||
cy.server() |
it("should add a container", () => { |
||||
cy.visit('localhost:4001/_builder') |
cy.navigateToFrontend() |
||||
// https://on.cypress.io/type
|
cy.get(".switcher > :nth-child(2)").click() |
||||
cy.createApp('Table App', 'Table App Description') |
cy.contains("Container").click() |
||||
cy.createTable('dog', 'name', 'age') |
}) |
||||
cy.addRow('bob', '15') |
it("should add a headline", () => { |
||||
}) |
cy.addHeadlineComponent("An Amazing headline!") |
||||
|
|
||||
// https://on.cypress.io/interacting-with-elements
|
getIframeBody().contains("An Amazing headline!") |
||||
it('should add a container', () => { |
}) |
||||
cy.contains('frontend').click() |
it("change the font size of the headline", () => { |
||||
cy.get('.switcher > :nth-child(2)').click() |
cy.contains("Typography").click() |
||||
|
cy.get("[data-cy=font-size-prop-control]").click() |
||||
|
cy.contains("60px").click() |
||||
|
cy.contains("Design").click() |
||||
|
|
||||
cy.contains('Container').click() |
getIframeBody() |
||||
}) |
.contains("An Amazing headline!") |
||||
it('should add a headline', () => { |
.should("have.css", "font-size", "60px") |
||||
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 = () => { |
const getIframeDocument = () => { |
||||
return cy |
return ( |
||||
.get('iframe') |
cy |
||||
// Cypress yields jQuery element, which has the real
|
.get("iframe") |
||||
// DOM element under property "0".
|
// Cypress yields jQuery element, which has the real
|
||||
// From the real DOM iframe element we can get
|
// DOM element under property "0".
|
||||
// the "document" element, it is stored in "contentDocument" property
|
// From the real DOM iframe element we can get
|
||||
// Cypress "its" command can access deep properties using dot notation
|
// the "document" element, it is stored in "contentDocument" property
|
||||
// https://on.cypress.io/its
|
// Cypress "its" command can access deep properties using dot notation
|
||||
.its('0.contentDocument').should('exist') |
// https://on.cypress.io/its
|
||||
|
.its("0.contentDocument") |
||||
|
.should("exist") |
||||
|
) |
||||
} |
} |
||||
|
|
||||
const getIframeBody = () => { |
const getIframeBody = () => { |
||||
// get the document
|
// get the document
|
||||
return getIframeDocument() |
return ( |
||||
// automatically retries until body is loaded
|
getIframeDocument() |
||||
.its('body').should('not.be.undefined') |
// automatically retries until body is loaded
|
||||
// wraps "body" DOM element to allow
|
.its("body") |
||||
// chaining more Cypress commands, like ".find(...)"
|
.should("not.be.undefined") |
||||
.then(cy.wrap) |
// wraps "body" DOM element to allow
|
||||
} |
// chaining more Cypress commands, like ".find(...)"
|
||||
|
.then(cy.wrap) |
||||
|
) |
||||
|
} |
||||
|
|||||
Loading…
Reference in new issue