From b473604bc4326d8fa1e4fbae607fac3413e8f9df Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
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 @@
 </script>
 
 <input
+  {name}
   class:centerPlaceholder
   type="text"
   value={displayValue}
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index a7ea35c014..9ecd5aad52 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -36,7 +36,8 @@
       {...handlevalueKey(value)}
       on:change={val => handleChange(key, val)}
       onChange={val => handleChange(key, val)}
-      {...props} />
+      {...props}
+      name={key} />
   </div>
 </div>