Update other cypress helpers to work with spectrum

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -9,7 +9,7 @@
   export let longPressable = false
   export let disabled = false
   export let icon = ""
-
+  export let dataCy = null
   export let size = "M"
 
   function longPress(element) {
@@ -34,6 +34,7 @@
 </script>
 
 <button
+  data-cy={dataCy}
   use:longPress
   class:spectrum-ActionButton--quiet={quiet}
   class:spectrum-ActionButton--emphasized={emphasized}

packages/builder/cypress/support/commands.js

@@ -101,11 +101,12 @@ Cypress.Commands.add("createTestTableWithData", () => {
 Cypress.Commands.add("createTable", tableName => {
   // Enter table name
   cy.get("[data-cy=new-table]").click()
-  cy.get(".modal").within(() => {
+  cy.get(".spectrum-Modal").within(() => {
     cy.get("input")
       .first()
       .type(tableName)
-    cy.get(".buttons")
+      .blur()
+    cy.get(".spectrum-ButtonGroup")
       .contains("Create")
       .click()
   })
@@ -115,30 +116,32 @@ Cypress.Commands.add("createTable", tableName => {
 Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
   // Select Table
   cy.contains(".nav-item", tableName).click()
-  cy.contains("Create New Column").click()
+  cy.contains("Create column").click()
 
   // Configure column
-  cy.get(".actions").within(() => {
+  cy.get(".spectrum-Modal").within(() => {
     cy.get("input")
       .first()
       .type(columnName)
+      .blur()
 
     // Unset table display column
-    cy.contains("display column").click()
+    cy.contains("display column").click({ force: true })
     cy.get("select").select(type)
     cy.contains("Save").click()
   })
 })
 
 Cypress.Commands.add("addRow", values => {
-  cy.contains("Create New Row").click()
+  cy.contains("Create row").click()
-  cy.get(".modal").within(() => {
+  cy.get(".spectrum-Modal").within(() => {
     for (let i = 0; i < values.length; i++) {
       cy.get("input")
         .eq(i)
         .type(values[i])
+        .blur()
     }
-    cy.get(".buttons")
+    cy.get(".spectrum-ButtonGroup")
       .contains("Create")
       .click()
   })
@@ -147,20 +150,22 @@ Cypress.Commands.add("addRow", values => {
 Cypress.Commands.add("createUser", (email, password, role) => {
   // Create User
   cy.contains("Users").click()
-  cy.contains("Create New User").click()
+  cy.contains("Create user").click()
-  cy.get(".modal").within(() => {
+  cy.get(".spectrum-Modal").within(() => {
     cy.get("input")
       .first()
       .type(email)
+      .blur()
     cy.get("input")
       .eq(1)
       .type(password)
+      .blur()
     cy.get("select")
       .first()
       .select(role)
 
     // Save
-    cy.get(".buttons")
+    cy.get(".spectrum-ButtonGroup")
       .contains("Create User")
       .click()
   })
@@ -197,14 +202,16 @@ Cypress.Commands.add("navigateToFrontend", () => {
 
 Cypress.Commands.add("createScreen", (screenName, route) => {
   cy.get("[data-cy=new-screen]").click()
-  cy.get(".modal").within(() => {
+  cy.get(".spectrum-Modal").within(() => {
     cy.get("input")
       .eq(0)
       .type(screenName)
+      .blur()
     if (route) {
       cy.get("input")
         .eq(1)
         .type(route)
+        .blur()
     }
     cy.contains("Create Screen").click()
   })

packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte

@@ -16,7 +16,7 @@
       </div>
     </Tab>
   </Tabs>
-  <div class="add-button">
+  <div class="add-button" data-cy="new-screen">
     <Icon hoverable name="AddCircle" on:click={modal.show} />
   </div>
 </div>

packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte

@@ -48,6 +48,7 @@
         quiet
         size="S"
         slot="control"
+        dataCy={`category-${item.name}`}
         on:click={() => onItemChosen(item)}>
         <div class="buttonContent">
           {item.name}