From b473604bc4326d8fa1e4fbae607fac3413e8f9df Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Thu, 11 Jun 2020 12:56:16 +0200 Subject: [PATCH] adds tests to add components and change props on them --- .../integration/createComponents.spec.js | 53 +++++++++++++++++++ packages/builder/cypress/support/commands.js | 12 +++++ .../src/components/common/Input.svelte | 2 + .../userInterface/PropertyControl.svelte | 3 +- 4 files changed, 69 insertions(+), 1 deletion(-) create mode 100644 packages/builder/cypress/integration/createComponents.spec.js diff --git a/packages/builder/cypress/integration/createComponents.spec.js b/packages/builder/cypress/integration/createComponents.spec.js new file mode 100644 index 0000000000..ad23566c0d --- /dev/null +++ b/packages/builder/cypress/integration/createComponents.spec.js @@ -0,0 +1,53 @@ +context('Create Model', () => { + + before(() => { + cy.visit('localhost:4001/_builder') + // https://on.cypress.io/type + cy.createApp('Model App', 'Model App Description') + cy.createModel('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 background color of the headline', () => { + cy.contains('Background').click() + cy.get('input[name="background"]') + .type('rgb(102, 51, 153)') + cy.contains('Design').click() + + getIframeBody().contains('An Amazing headline!').should('have.css', 'background-color', 'rgb(102, 51, 153)') + }) +}) + +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) +} \ No newline at end of file diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index 29a2e00673..ffe265a2a2 100644 --- a/packages/builder/cypress/support/commands.js +++ b/packages/builder/cypress/support/commands.js @@ -81,4 +81,16 @@ Cypress.Commands.add("createUser", (username, password, level) => { // Save cy.contains('Save').click() +}) + +Cypress.Commands.add("addHeadlineComponent", (text) => { + // Create User + cy.get('.switcher > :nth-child(2)').click() + + cy.contains('Text').click() + cy.contains('Headline').click() + cy.get('.tabs > :nth-child(2)').click() + cy.get('input[type="text"]') + .type(text) + cy.contains('Design').click() }) \ No newline at end of file diff --git a/packages/builder/src/components/common/Input.svelte b/packages/builder/src/components/common/Input.svelte index 82305be60a..5db342b2c8 100644 --- a/packages/builder/src/components/common/Input.svelte +++ b/packages/builder/src/components/common/Input.svelte @@ -2,6 +2,7 @@ import { onMount } from "svelte" import { buildStyle } from "../../helpers.js" export let value = "" + export let name = "" export let textAlign = "left" export let width = "160px" export let placeholder = "" @@ -25,6 +26,7 @@ handleChange(key, val)} onChange={val => handleChange(key, val)} - {...props} /> + {...props} + name={key} />