Update cypress tests to account for component restructuring

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

@@ -1,41 +1,43 @@
 context("Add Multi-Option Datatype", () => {
-    before(() => {
-      cy.login()
-      cy.createTestApp()
-    })
+  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 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.get(`[data-cy="category-Data Provider"]`).click()
-        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)")
-        })
+  it("should add form with multi select picker, containing 5 options", () => {
+    cy.navigateToFrontend()
+    cy.wait(500)
+    // Add data provider
+    cy.get(`[data-cy="component-Data Provider"]`).click()
+    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)")
     })
+  })
 })