From 14a9eebfa1d7e6242714f9a06945383172278a4d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 28 Apr 2021 15:08:43 +0100
Subject: [PATCH] Update other cypress helpers to work with spectrum

---
 .../bbui/src/ActionButton/ActionButton.svelte |  3 +-
 packages/builder/cypress/support/commands.js  | 31 ++++++++++++-------
 .../AutomationPanel/AutomationPanel.svelte    |  2 +-
 .../AppPreview/ComponentSelectionList.svelte  |  1 +
 4 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte
index c7bfbc32db..a4bfd29c83 100644
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/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}
diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js
index 8f89cfc925..6c3b1fb5a1 100644
--- a/packages/builder/cypress/support/commands.js
+++ b/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.get(".modal").within(() => {
+  cy.contains("Create row").click()
+  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.get(".modal").within(() => {
+  cy.contains("Create user").click()
+  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()
   })
diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
index d363b5504b..dbcbc33db0 100644
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/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>
diff --git a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte b/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
index 0ecf51e74f..391bf18086 100644
--- a/packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
+++ b/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}