Cypress test fixes and refactoring. Removed debugging elements

packages/bbui/src/Icon/Icon.svelte

@@ -10,6 +10,7 @@
   export let hoverable = false
   export let disabled = false
   export let color
+  export let dataCy = null
 
   $: rotation = getRotation(direction)
 
@@ -20,6 +21,7 @@
 
 <svg
   on:click
+  data-cy={dataCy}
   class:hoverable
   class:disabled
   class="spectrum-Icon spectrum-Icon--size{size}"

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

@@ -11,7 +11,7 @@ filterTests(['all'], () => {
           cy.applicationInAppTable("Cypress Tests")
           cy.get(".appTable")
             .within(() => {
-              cy.get(".spectrum-Icon").eq(1).click()
+              cy.get("[data-cy='app-row-actions-menu']").eq(0).click()
             })
           cy.get(".spectrum-Menu").contains("Edit icon").click()
           // Select random icon
@@ -38,6 +38,7 @@ filterTests(['all'], () => {
               cy.get(".title").children().children()
               .should('have.attr', 'style').and('contains', 'color')
             })
+          cy.deleteAllApps()
       })
   })
 })

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

@@ -99,30 +99,32 @@ filterTests(['all'], () => {
       cy.searchForApplication(originalName)
       cy.get(".appTable")
         .within(() => {
-          cy.get(".spectrum-Icon").eq(1).click()
+          cy.get("[data-cy='app-row-actions-menu']").eq(0).click()
-          })
+        })
-        // Check for when an app is published
+      // Check for when an app is published
-        if (published == true) {
+      if (published == true) {
-          // Should not have Edit as option, will unpublish app
+        // Should not have Edit as option, will unpublish app
-          cy.should("not.have.value", "Edit")
+        cy.should("not.have.value", "Edit")
-          cy.get(".spectrum-Menu").contains("Unpublish").click()
+        cy.get(".spectrum-Menu").contains("Unpublish").click()
-          cy.get(".spectrum-Dialog-grid").contains("Unpublish app").click()
+        cy.get(".spectrum-Dialog-grid").contains("Unpublish app").click()
-          cy.get(".appTable > :nth-child(5) > :nth-child(2) > .spectrum-Icon").click()
+        cy.get(".appTable > :nth-child(5) > :nth-child(2) > .spectrum-Icon").click()
-        }
+      }
-        cy.contains("Edit").click()
+      cy.get(".app-row-actions").within(() => {
-        cy.get(".spectrum-Modal")
+        cy.get(".spectrum-Button").contains("Edit").click({ force: true })
-          .within(() => {
+      })
-            if (noName == true) {
+      cy.get(".spectrum-Modal")
-              cy.get("input").clear()
+        .within(() => {
-              cy.get(".spectrum-Dialog-grid").click()
+          if (noName == true) {
-                .contains("App name must be letters, numbers and spaces only")
-              return cy
-            }
             cy.get("input").clear()
-            cy.get("input").eq(0).type(changedName).should("have.value", changedName).blur()
+            cy.get(".spectrum-Dialog-grid").click()
-            cy.get(".spectrum-ButtonGroup").contains("Save").click({ force: true })
+              .contains("App name must be letters, numbers and spaces only")
-            cy.wait(500)
+            return cy
-          })
+          }
-        }
+          cy.get("input").clear()
+          cy.get("input").eq(0).type(changedName).should("have.value", changedName).blur()
+          cy.get(".spectrum-ButtonGroup").contains("Save").click({ force: true })
+          cy.wait(500)
+        })
+      }
     })
 })

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

@@ -10,7 +10,7 @@ filterTests(['smoke', 'all'], () => {
         it("should try to revert an unpublished app", () => {
             // Click revert icon
             cy.get(".toprightnav").within(() => {
-                cy.get(".spectrum-Icon").eq(1).click()
+                cy.get("[data-cy='revert-application-topnav']").click({ force: true })
             })
             cy.get(".spectrum-Dialog-grid").within(() => {
                 // Enter app name before revert
@@ -33,11 +33,15 @@ filterTests(['smoke', 'all'], () => {
             cy.get(".spectrum-ButtonGroup").within(() => {
                 cy.get(".spectrum-Button").contains("Publish").click({ force: true })
             })
+            cy.wait(1000)
+            cy.get(".spectrum-ButtonGroup").within(() => {
+                cy.get(".spectrum-Button").contains("Done").click({ force: true })
+            })
             // Add second component - Button
             cy.addComponent("Elements", "Button")
             // Click Revert
             cy.get(".toprightnav").within(() => {
-                cy.get(".spectrum-Icon").eq(1).click()
+                cy.get("[data-cy='revert-application-topnav']").click({ force: true })
             })
             cy.get(".spectrum-Dialog-grid").within(() => {
                 // Click Revert
@@ -54,7 +58,7 @@ filterTests(['smoke', 'all'], () => {
         it("should enter incorrect app name when reverting", () => {
             // Click Revert
             cy.get(".toprightnav").within(() => {
-                cy.get(".spectrum-Icon").eq(1).click({ force: true })
+                cy.get("[data-cy='revert-application-topnav']").click({ force: true })
             })
             // Enter incorrect app name
             cy.get(".spectrum-Dialog-grid").within(() => {

packages/builder/src/components/deploy/RevertModal.svelte

@@ -28,7 +28,12 @@
   }
 </script>
 
-<Icon name="Revert" hoverable on:click={revertModal.show} />
+<Icon
+  name="Revert"
+  hoverable
+  on:click={revertModal.show}
+  dataCy="revert-application-topnav"
+/>
 <Modal bind:this={revertModal}>
   <ModalContent
     title="Revert Changes"

packages/builder/src/components/start/AppRow.svelte

@@ -23,7 +23,7 @@
 
 <div class="title">
   <div style="display: flex;">
-    <div style="color: {app.icon?.color || ''}">
+    <div class="app-icon" style="color: {app.icon?.color || ''}">
       <Icon size="XL" name={app.icon?.name || "Apps"} />
     </div>
     <div class="name" on:click={() => editApp(app)}>
@@ -69,7 +69,7 @@
   </div>
 </div>
 <div data-cy={`row_actions_${app.appId}`}>
-  <div class="app-actions">
+  <div class="app-row-actions">
     {#if app.deployed}
       <Button size="S" secondary quiet on:click={() => viewApp(app)}
         >View app
@@ -89,7 +89,7 @@
     </Button>
   </div>
   <ActionMenu align="right">
-    <Icon hoverable slot="control" name="More" />
+    <Icon hoverable slot="control" name="More" dataCy="app-row-actions-menu" />
     {#if app.deployed}
       <MenuItem on:click={() => viewApp(app)} icon="GlobeOutline">
         View published app
@@ -115,7 +115,7 @@
 </div>
 
 <style>
-  .app-actions {
+  .app-row-actions {
     grid-gap: var(--spacing-s);
     display: grid;
     grid-template-columns: 75px 75px;

packages/builder/src/pages/builder/app/[application]/_layout.svelte

@@ -57,9 +57,6 @@
     .filter(deployment => deployment.status === "SUCCESS")
     .sort((a, b) => a.updatedAt > b.updatedAt)
 
-  $: console.log("Deployments ", deployments)
-  $: console.log("Latest Deployments ", latestDeployments)
-
   $: isPublished =
     selectedApp.deployed && latestDeployments && latestDeployments?.length
       ? true

packages/server/src/api/controllers/application.js

@@ -352,7 +352,7 @@ exports.revertClient = async ctx => {
 exports.delete = async ctx => {
   let appId = ctx.params.appId
 
-  if (ctx.query.unpublish) {
+  if (ctx.query && ctx.query.unpublish) {
     appId = getProdAppID(appId)
   }