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

context("Add Multi-Option Datatype", () => {
  before(() => {
    cy.login()
    cy.createTestApp()
  })

  it("should create a new table, with data", () => {
    cy.createTable("Multi Data")
    cy.addColumn("Multi Data", "Test Data", "Multi-select", "1\n2\n3\n4\n5")
    cy.addRowMultiValue(["1", "2", "3", "4", "5"])
  })

    it ("should add form with multi select picker, containing 5 options", () => {
        cy.navigateToFrontend()
        cy.wait(500)
        // Add data provider
        cy.addComponent("Data", "Data Provider")
        cy.get('[data-cy="dataSource-prop-control"]').click()
        cy.get(".dropdown").contains("Multi Data").click()
        cy.wait(500)
        // Add Form with schema to match table
        cy.addComponent("Form", "Form")
        cy.get('[data-cy="dataSource-prop-control"').click()
        cy.get(".dropdown").contains("Multi Data").click()
        cy.wait(500)
        // Add multi-select picker to form
        cy.addComponent("Form", "Multi-select Picker").then((componentId) => {
            cy.get('[data-cy="field-prop-control"]').type("Test Data").type('{enter}')
            cy.wait(1000)
            cy.getComponent(componentId).contains("Choose some options").click()
            // Check picker has 5 items
            cy.getComponent(componentId).find('li').should('have.length', 5)
            // Select all items
            for (let i = 1; i < 6; i++) {
                cy.getComponent(componentId).find('li').contains(i).click()
            }
            // Check items have been selected
            cy.getComponent(componentId).find('.spectrum-Picker-label').contains("(5)")
        })
    })
  })