Minor test enhancements and publish workflow test spec added

packages/bbui/src/Modal/ModalContent.svelte

@@ -23,6 +23,7 @@
   export let secondaryButtonText = undefined
   export let secondaryAction = undefined
   export let secondaryButtonWarning = false
+  export let dataCy = null
 
   const { hide, cancel } = getContext(Context.Modal)
   let loading = false
@@ -63,6 +64,7 @@
   role="dialog"
   tabindex="-1"
   aria-modal="true"
+  data-cy={dataCy}
 >
   <div class="spectrum-Dialog-grid">
     <h1

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

@@ -0,0 +1,109 @@
+import filterTests from "../support/filterTests"
+
+filterTests(['all'], () => {
+  context("Publish Application Workflow", () => {
+    before(() => {
+      cy.login()
+      cy.createTestApp()
+    })
+
+    it("Should reflect the unpublished status correctly", () => {
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.wait(1000)
+
+      cy.get(".appTable")
+      let appStatusEle = cy.get(".app-status").eq(0)
+      appStatusEle.contains("Unpublished")
+      appStatusEle.get("svg[aria-label='GlobeStrike']").should("exist")
+      appStatusEle.get(".app-row-actions .spectrum-Button").contains("Preview")
+
+      appStatusEle.get(".app-row-actions .spectrum-Button").contains("Edit").click({ force: true })
+
+      cy.get(".app-status-icon svg[aria-label='GlobeStrike']").should("exist")
+      cy.get(".app-status-icon svg[aria-label='Globe']").should("not.exist")
+    })
+
+    it("Should publish an application and correctly reflect that", () => {
+      //Assuming the previous test was run and the unpublished app is open in edit mode.
+
+      cy.get(".toprightnav button.spectrum-Button").contains("Publish").click({ force : true })
+
+      let deployModal = cy.get(".spectrum-Modal [data-cy='deploy-app-modal']").should("be.visible")
+      deployModal.within(() => {
+        cy.get(".spectrum-Button").contains("Publish").click({ force : true })
+        cy.wait(1000)
+      });
+
+      let deployModalSuccess = cy.get(".spectrum-Modal [data-cy='deploy-app-success-modal']")
+      deployModalSuccess.should("be.visible")
+
+      deployModalSuccess.within(() => {
+        cy.get("[data-cy='deployed-app-url'] input").should('have.value', Cypress.config().baseUrl + '/app/cypress-tests')
+        cy.get(".spectrum-Button").contains("Done").click({ force: true })
+      });
+
+      deployModalSuccess.should("exist")
+
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.wait(1000)
+
+      cy.get(".appTable")
+      let appStatusEle = cy.get(".app-status").eq(0)
+      appStatusEle.contains("Published")
+      appStatusEle.get("svg[aria-label='Globe']").should("exist")
+      appStatusEle.get(".app-row-actions .spectrum-Button").contains("View app")
+
+      appStatusEle.get(".app-row-actions .spectrum-Button").contains("Edit").click({ force: true })
+
+      const publishStatusIcon = cy.get(".app-status-icon svg[aria-label='Globe']").should("exist")
+      publishStatusIcon.click({ force: true })
+      
+      const publishingMenu = cy.get("[data-cy='publish-popover-action']")
+      publishingMenu.should("be.visible")
+
+      publishingMenu.get("button[data-cy='publish-popover-action']").should("exist")
+      publishingMenu.get("button").contains("View App").should("exist")
+
+      publishingMenu.get(".publish-popover-message").should("have.text", "Last Published: a few seconds ago")
+
+    })
+
+    it("Should unpublish an application from the top navigation and reflect the status change", () => {
+      //Assuming the previous test app exists and is published
+      
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+
+      cy.get(".appTable")
+      let appStatusEle = cy.get(".app-status").eq(0)
+      appStatusEle.contains("Published")
+      appStatusEle.get("svg[aria-label='Globe']").should("exist")
+      appStatusEle.get(".app-row-actions .spectrum-Button").contains("View app")
+
+      appStatusEle.get(".app-row-actions .spectrum-Button").contains("Edit").click({ force: true })
+
+      //The published status 
+      const publishStatusIcon = cy.get(".app-status-icon svg[aria-label='Globe']").should("exist")
+      publishStatusIcon.click({ force: true })
+      
+      const publishingMenu = cy.get("[data-cy='publish-popover-action']")
+      publishingMenu.should("be.visible")
+
+      const unpublishButton = publishingMenu.get("button[data-cy='publish-popover-action']")
+      unpublishButton.should("exist")
+
+      unpublishButton.click({ force : true })
+
+      const unpublishModal = cy.get("[data-cy='unpublish-modal']")
+      unpublishModal.should("be.visible")
+      unpublishModal.get(".confirm-wrap button").click({ force: true })
+
+      cy.get(".app-status-icon svg[aria-label='GlobeStrike']").should("exist")
+
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+
+      appStatusEle = cy.get(".appTable")
+      appStatusEle.get(".app-status").eq(0).contains("Unpublished")
+
+    })
+  })
+})

packages/builder/src/components/common/ConfirmDialog.svelte

@@ -9,6 +9,7 @@
   export let onCancel = undefined
   export let warning = true
   export let disabled
+  export let dataCy = null
 
   let modal
 
@@ -28,6 +29,7 @@
     {cancelText}
     {warning}
     {disabled}
+    {dataCy}
   >
     <Body size="S">
       {body}

packages/builder/src/components/common/inputs/CopyInput.svelte

@@ -4,6 +4,7 @@
   export let label = null
   export let value
   export let copyValue
+  export let dataCy = null
 
   const copyToClipboard = val => {
     const dummy = document.createElement("textarea")
@@ -16,7 +17,7 @@
   }
 </script>
 
-<div>
+<div data-cy={dataCy}>
   <Input readonly {value} {label} />
   <div class="icon" on:click={() => copyToClipboard(value || copyValue)}>
     <Icon size="S" name="Copy" />

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

@@ -73,6 +73,7 @@
     title="Publish to Production"
     confirmText="Publish"
     onConfirm={deployApp}
+    dataCy={"deploy-app-modal"}
   >
     <span
       >The changes you have made will be published to the production version of
@@ -97,7 +98,12 @@
 <!-- Publish complete -->
 <span class="publish-modal-wrap">
   <Modal bind:this={publishCompleteModal}>
-    <ModalContent confirmText="Done" cancelText="View App" onCancel={viewApp}>
+    <ModalContent
+      confirmText="Done"
+      cancelText="View App"
+      onCancel={viewApp}
+      dataCy={"deploy-app-success-modal"}
+    >
       <div slot="header" class="app-published-header">
         <svg
           width="26px"
@@ -109,7 +115,11 @@
         </svg>
         <span class="app-published-header-text">App Published!</span>
       </div>
-      <CopyInput value={publishedUrl} label="You can view your app at:" />
+      <CopyInput
+        value={publishedUrl}
+        label="You can view your app at:"
+        dataCy="deployed-app-url"
+      />
     </ModalContent>
   </Modal>
 </span>

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

@@ -229,8 +229,9 @@
             bind:this={publishPopover}
             align="right"
             disabled={!isPublished}
+            dataCy="publish-popover-menu"
           >
-            <div slot="control" class="icon">
+            <div slot="control" class="icon app-status-icon">
               <Icon
                 size="M"
                 hoverable
@@ -272,7 +273,7 @@
           <PopoverMenu bind:this={notPublishedPopover} align="right">
             <div
               slot="control"
-              class="icon"
+              class="icon app-status-icon"
               on:mouseenter={() => {
                 notPublishedPopover.show()
               }}
@@ -297,6 +298,7 @@
       title="Confirm unpublish"
       okText="Unpublish app"
       onOk={confirmUnpublishApp}
+      dataCy={"unpublish-modal"}
     >
       Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
     </ConfirmDialog>

packages/builder/src/pages/builder/portal/apps/index.svelte

@@ -456,6 +456,7 @@
   title="Confirm unpublish"
   okText="Unpublish app"
   onOk={confirmUnpublishApp}
+  dataCy={"unpublish-modal"}
 >
   Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
 </ConfirmDialog>