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

import filterTests from "../support/filterTests"

filterTests(['all'], () => {
  context("Create Components", () => {
    let headlineId

    before(() => {
      cy.login()
      cy.createTestApp()
      cy.createTable("dog")
      cy.addColumn("dog", "name", "Text")
      cy.addColumn("dog", "age", "Number")
      cy.addColumn("dog", "breed", "Options")
      cy.navigateToFrontend()
      cy.wait(1000) //allow the iframe some wiggle room
    })

    it("should add a container", () => {
      cy.addComponent("Layout", "Container").then(componentId => {
        cy.getComponent(componentId).should("exist")
      })
    })

    it("should add a headline", () => {
      cy.addComponent("Elements", "Headline").then(componentId => {
        headlineId = componentId
        cy.getComponent(headlineId).should("exist")
      })
    })

    it("should change the text of the headline", () => {
      const text = "Lorem ipsum dolor sit amet."
      cy.get("[data-cy=setting-text] input")
        .type(text)
        .blur()
      cy.getComponent(headlineId).should("have.text", text)
    })

    it("should change the size of the headline", () => {
      cy.get("[data-cy=setting-size]").scrollIntoView().click()
      cy.get("[data-cy=setting-size]").within(() => {
        cy.get(".spectrum-Form-item li.spectrum-Menu-item").contains("3XL").click()
      })
      
      cy.getComponent(headlineId).within(() => {
        cy.get(".spectrum-Heading").should("have.css", "font-size", "60px")
      })
    })

    it("should create a form and reset to match schema", () => {
      cy.addComponent("Form", "Form").then(() => {
        cy.get("[data-cy=setting-dataSource]")
          .contains("Custom")
          .click()
        cy.get(".dropdown")
          .contains("dog")
          .click()
        cy.addComponent("Form", "Field Group").then(fieldGroupId => {
          cy.contains("Update form fields").click()
          cy.get(".spectrum-Modal")
            .get(".confirm-wrap .spectrum-Button")
            .click()
          cy.wait(500)
          cy.getComponent(fieldGroupId).within(() => {
            cy.contains("name").should("exist")
            cy.contains("age").should("exist")
            cy.contains("breed").should("exist")
          })
          cy.getComponent(fieldGroupId)
            .find("input")
            .should("have.length", 2)
          cy.getComponent(fieldGroupId)
            .find(".spectrum-Picker")
            .should("have.length", 1)
        })
      })
    })

    it("deletes a component", () => {
      cy.addComponent("Elements", "Paragraph").then(componentId => {
        cy.get("[data-cy=setting-_instanceName] input")
          .type(componentId)
          .blur()
        cy.get(".nav-items-container .nav-item.selected .actions > div > .icon").click({
          force: true,
        })
        cy.get(".spectrum-Popover.is-open li")
          .contains("Delete")
          .click()
        cy.get(".spectrum-Modal button")
          .contains("Delete Component")
          .click({
            force: true,
          })
        cy.getComponent(componentId).should("not.exist")
      })
    })

    it("should set focus to the field setting when fields are added to a form", () => {
      cy.addComponent("Form", "Form").then(() => {
        cy.get("[data-cy=setting-dataSource]")
          .contains("Custom")
          .click()
        cy.get(".dropdown")
          .contains("dog")
          .click()
        
        const componentTypeLabels = ["Text Field", "Number Field", "Password Field", 
          "Options Picker", "Checkbox", "Long Form Field", "Date Picker", "Attachment", 
          "JSON Field", "Multi-select Picker", "Relationship Picker"]

        const refocusTest = (componentId) => {
          let inputClasses

          cy.getComponent(componentId)
          .find(".showMe").should("exist").click({ force: true })
          
          cy.get("[data-cy=setting-field] .spectrum-InputGroup")
          .should("have.class", "is-focused").within(() => {
            cy.get("input").should(($input) => {
              expect($input).to.have.length(1)
              inputClasses = Cypress.$($input).attr('class')
            })
          })

          cy.focused().then(($focused) => {
            const focusedClasses = Cypress.$($focused).attr('class')
            expect(inputClasses).to.equal(focusedClasses)
          })
        }

        const testFieldFocusOnCreate = (componentLabel) => {
          let inputClasses

          cy.addComponent("Form", componentLabel).then((componentId) => {
           
            refocusTest(componentId)

            cy.get("[data-cy=setting-field] .spectrum-InputGroup")
            .should("have.class", "is-focused").within(() => {
              cy.get("input").should(($input) => {
                expect($input).to.have.length(1)
                inputClasses = Cypress.$($input).attr('class')
              })
            })
          })
          cy.focused().then(($focused) => {
            const focusedClasses = Cypress.$($focused).attr('class')
            expect(inputClasses).to.equal(focusedClasses)
          })
        }

        componentTypeLabels.forEach( testFieldFocusOnCreate )

      })
    })
  })
})