Cypress test fixes and a correction for the version update behaviour

packages/bbui/src/SideNavigation/Item.svelte

@@ -7,6 +7,7 @@
   export let icon = ""
   export let selected = false
   export let disabled = false
+  export let dataCy
 </script>
 
 <li
@@ -14,6 +15,7 @@
   class:is-selected={selected}
   class:is-disabled={disabled}
   on:click
+  data-cy={dataCy}
 >
   {#if heading}
     <h2 class="spectrum-SideNav-heading" id="nav-heading-{heading}">

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

@@ -1,4 +1,5 @@
 import filterTests from "../support/filterTests"
+import clientPackage from "@budibase/client/package.json"
 
 filterTests(['all'], () => {
   context("Application Overview screen", () => {
@@ -6,67 +7,10 @@ filterTests(['all'], () => {
       cy.login()
       cy.createTestApp()
     })
-    
-    /*
-      The ability to switch accounts will deffo be necessary
-
-      x APP Screen
-        Click on app name
-        Click on edit
-      
-      x Edit Icon Functionality
-
-      Lock button display and behaviour
-      
-      Edit button status and behaviour
-
-      ** To ratifying alot of this stuff will require the app itself
-        cy.visit(`${Cypress.config().baseUrl}/builder`)
-        cy.wait(2000)
-        cy.request(`${Cypress.config().baseUrl}/api/applications?status=all`)
-          .its("body")
-          .then(val => {
-            const findAppName = val.some(val => val.name == name)
-            if (findAppName) {
-
-      Publish Card
-        x Never published
-        Unpublished
-          Should show the last valid publish date
-        x Published
-          Should show the valid publish date
-      Edit Card
-        D or DH or the first letter of their email.
-        Timestamp vaguely matches.
-      Version Card
-        How to get use cases? Available/Unavailable?
-      
-      Settings Tab
-        Edit Url
-        Edit Name
-
-        Versioning?
-
-      Tab behaviour
-        Click all 3 main tabs.
-        Check positioning.
-        Dashcard behaviour. Concentrate on the App version
-          Header behaviour on click
-          Quick link behaviour 
-
-      Locking behaviour
-        Button contents, D or DH or the first letter of their email.
-        Locked by you
-        Locked by someone else
-
-        Timeout check. Apps > edit > back > app title
-        "This lock will expire in 10 minutes from now"
-    */
 
     it("Should be accessible from the applications list", () => {
       cy.visit(`${Cypress.config().baseUrl}/builder`)
       
-      // Reusable command? toAppOverview
       cy.get(".appTable .title").eq(0)
       .invoke('attr', 'data-cy')
       .then(($dataCy) => {
@@ -206,10 +150,143 @@ filterTests(['all'], () => {
       })
     })
 
-    it("Should log out.", () => { 
-      //You
-      //Last edited a few seconds ago.
-      cy.logOut();
+    it("Should reflect the last time the application was edited", () => {
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.get(".appTable .name").eq(0).click()
+
+      cy.get(".header-right button").contains("Edit").click({ force: true });
+
+      cy.navigateToFrontend()
+
+      cy.addComponent("Elements", "Headline").then(componentId => {
+        cy.getComponent(componentId).should("exist")
+      })
+
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.get(".appTable .name").eq(0).click()
+
+      cy.get(".overview-tab [data-cy='edited-by']").within(() => {
+        cy.get(".editor-name").contains("You")
+        cy.get(".last-edit-text").contains("Last edited a few seconds ago")
+      })
+    });
+
+    it("Should reflect application version is up-to-date", () => {
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.get(".appTable .name").eq(0).click()
+
+      cy.get(".overview-tab [data-cy='app-version']").within(() => {
+        cy.get(".version-status").contains("You're running the latest!")
+      })
+    });
+
+    it("Should navigate to the settings tab when clicking the App Version card header", () => {
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.get(".appTable .name").eq(0).click()
+
+      cy.get(".spectrum-Tabs-item.is-selected").contains("Overview")
+      cy.get(".overview-tab").should("be.visible")
+
+      cy.get(".overview-tab [data-cy='app-version'] .dash-card-header").click({ force : true })
+
+      cy.get(".spectrum-Tabs-item.is-selected").contains("Settings")
+      cy.get(".settings-tab").should("be.visible")
+      cy.get(".overview-tab").should("not.exist")
+
+    });
+
+    it("Should allow the upgrading of an application, if available.", () => {
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.get(".appTable .name").eq(0).click()
+      cy.wait(500)
+
+      cy.location().then(loc => {
+        const params = loc.pathname.split("/")
+        const appId = params[params.length - 1]
+        cy.log(appId)
+        //Downgrade the app for the test
+        cy.alterAppVersion(appId, "0.0.1-alpha.0")
+        .then(()=>{
+          cy.reload()
+          cy.wait(1000)
+          cy.log("Current deployment version: " + clientPackage.version)
+
+          cy.get(".version-status a").contains("Update").click()
+          cy.get(".spectrum-Tabs-item.is-selected").contains("Settings")
+
+          cy.get(".version-section .page-action button").contains("Update").click({ force: true })
+          
+          cy.intercept('POST', '**/applications/**/client/update').as('updateVersion')
+          cy.get(".spectrum-Modal.is-open button").contains("Update").click({ force: true })
+
+          cy.wait("@updateVersion")
+          .its('response.statusCode').should('eq', 200)
+          .then(() => {
+            cy.visit(`${Cypress.config().baseUrl}/builder`)
+            cy.get(".appTable .name").eq(0).click()
+
+            cy.get(".spectrum-Tabs-item").contains("Overview").click({ force: true })
+            cy.get(".overview-tab [data-cy='app-version']").within(() => {
+              cy.get(".spectrum-Heading").contains(clientPackage.version)
+              cy.get(".version-status").contains("You're running the latest!")
+            })
+          })
+        })
+      });
+      
     })
+
+    it("Should allow editing of the app details.", () => {
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.get(".appTable .name").eq(0).click()
+
+      cy.get(".spectrum-Tabs-item").contains("Settings").click()
+      cy.get(".spectrum-Tabs-item.is-selected").contains("Settings")
+      cy.get(".settings-tab").should("be.visible")
+
+      cy.get(".details-section .page-action button").contains("Edit").click({ force: true })
+      cy.updateAppName("sample name")
+
+      //publish and check its disabled
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.get(".appTable .app-row-actions button").contains("Edit").eq(0).click({force: true})
+
+      cy.get(".toprightnav button.spectrum-Button").contains("Publish").click({ force : true })
+      cy.get(".spectrum-Modal [data-cy='deploy-app-modal']").should("be.visible")
+      .within(() => {
+        cy.get(".spectrum-Button").contains("Publish").click({ force : true })
+        cy.wait(1000)
+      });
+
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.get(".appTable .name").eq(0).click()
+      cy.get(".spectrum-Tabs-item").contains("Settings").click()
+      cy.get(".spectrum-Tabs-item.is-selected").contains("Settings")
+
+      cy.get(".details-section .page-action .spectrum-Button").scrollIntoView()
+      cy.wait(1000)
+      cy.get(".details-section .page-action .spectrum-Button").should("be.disabled")
+
+    })
+    
+    after(() => {
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.get(".appTable .app-row-actions button").contains("Edit").eq(0).click({force: true})
+
+      cy.get(".deployment-top-nav svg[aria-label='Globe']")
+      .click({ force: true })
+
+      cy.get("[data-cy='publish-popover-menu']").should("be.visible")
+      cy.get("[data-cy='publish-popover-menu'] [data-cy='publish-popover-action']")
+      .click({ force : true })
+      
+      cy.get("[data-cy='unpublish-modal']").should("be.visible")
+      .within(() => {
+        cy.get(".confirm-wrap button").click({ force: true }
+      )})
+      cy.wait(1000)
+      cy.deleteAllApps()
+    })
+
   })
 })

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

@@ -112,19 +112,9 @@ filterTests(['all'], () => {
       cy.get("[data-cy='app-row-actions-menu-popover']").eq(0).within(() => {
         cy.get(".spectrum-Menu-item").contains("Edit").click({ force: true })
       })
-      cy.get(".spectrum-Modal")
-        .within(() => {
-          if (noName == true) {
-            cy.get("input").clear()
-            cy.get(".spectrum-Dialog-grid").click()
-              .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-ButtonGroup").contains("Save").click({ force: true })
-          cy.wait(500)
-        })
-      }
-    })
+
+      cy.updateAppName(changedName, noName)
+
+    }
+  })
 })

packages/builder/cypress/support/commands.js

@@ -32,18 +32,15 @@ Cypress.Commands.add("login", () => {
   })
 })
 
-Cypress.Commands.add("basicOnboardAppUser", () => {
-  cy.createUser("another@budibase.com")
+Cypress.Commands.add("logOut", () => {
+  cy.visit(`${Cypress.config().baseUrl}/builder`)
+  cy.get(".user-dropdown .avatar > .icon").click({ force: true })
+  cy.get(".spectrum-Popover[data-cy='user-menu']").within(() => {
+    cy.get("li[data-cy='user-logout']").click({ force: true })
+  })
+  cy.wait(2000)
 })
 
-// log out.
-// Cypress.Commands.add("logOut", () => {
-//   cy.visit(`${Cypress.config().baseUrl}/builder`)
-//   cy.get(".user-dropdown .avatar > .icon").click({ force: true })
-
-//   cy.wait(2000)
-// })
-
 Cypress.Commands.add("closeModal", () => {
   cy.get(".spectrum-Modal").within(() => {
     cy.get(".close-icon").click()
@@ -174,6 +171,36 @@ Cypress.Commands.add("customiseAppIcon", () => {
   cy.wait(1000)
 })
 
+Cypress.Commands.add("alterAppVersion", (appId, version) => {
+  return cy
+    .request("put", `${Cypress.config().baseUrl}/api/applications/${appId}`, {
+      version: version || "0.0.1-alpha.0",
+    })
+    .then(resp => {
+      expect(resp.status).to.eq(200)
+    })
+})
+
+Cypress.Commands.add("updateAppName", (changedName, noName) => {
+  cy.get(".spectrum-Modal").within(() => {
+    if (noName == true) {
+      cy.get("input").clear()
+      cy.get(".spectrum-Dialog-grid")
+        .click()
+        .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-ButtonGroup").contains("Save").click({ force: true })
+    cy.wait(500)
+  })
+})
+
 Cypress.Commands.add("unlockApp", unlock_config => {
   let config = { ...unlock_config }
 

packages/builder/src/pages/builder/portal/_layout.svelte

@@ -160,7 +160,7 @@
           />
         </div>
         <div class="user-dropdown">
-          <ActionMenu align="right">
+          <ActionMenu align="right" dataCy="user-menu">
             <div slot="control" class="avatar">
               <Avatar
                 size="M"
@@ -186,7 +186,9 @@
             <MenuItem icon="UserDeveloper" on:click={() => $goto("../apps")}>
               Close developer mode
             </MenuItem>
-            <MenuItem icon="LogOut" on:click={logout}>Log out</MenuItem>
+            <MenuItem dataCy="user-logout" icon="LogOut" on:click={logout}
+              >Log out
+            </MenuItem>
           </ActionMenu>
         </div>
       </div>

packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte

@@ -79,7 +79,7 @@
           <div class="updated-by">
             {#if appEditor}
               <Avatar size="M" initials={getInitials(appEditor)} />
-              <div>
+              <div class="editor-name">
                 {appEditor._id === $auth.user._id ? "You" : appEditorText}
               </div>
             {/if}
@@ -107,10 +107,10 @@
       }}
       dataCy={"app-version"}
     >
-      <div class="version-content">
-        <Heading size="XS">{app?.version}</Heading>
+      <div class="version-content" data-cy={$store.version}>
+        <Heading size="XS">{$store.version}</Heading>
         {#if updateAvailable}
-          <p>
+          <p class="version-status">
             New version <strong>{clientPackage.version}</strong> is available -
             <Link
               on:click={() => {
@@ -123,7 +123,7 @@
             </Link>
           </p>
         {:else}
-          <p>You're running the latest!</p>
+          <p class="version-status">You're running the latest!</p>
         {/if}
       </div>
     </DashCard>

packages/builder/src/pages/builder/portal/overview/_components/SettingsTab.svelte

@@ -13,6 +13,7 @@
   import clientPackage from "@budibase/client/package.json"
   import VersionModal from "components/deploy/VersionModal.svelte"
   import UpdateAppModal from "components/start/UpdateAppModal.svelte"
+  import { AppStatus } from "constants"
 
   export let app
 
@@ -25,85 +26,93 @@
   $: appUrl = `${window.origin}/app${app?.url}`
   $: lockedBy = app?.lockedBy
   $: lockedByYou = $auth.user.email === lockedBy?.email
+  $: appDeployed = app.status === AppStatus.DEPLOYED
 </script>
 
-<div class="version-tab">
+<div class="settings-tab">
   <Page wide={false}>
     <Layout gap="XL" noPadding>
-      <Layout gap="XS" noPadding>
-        <Heading size="S">Name and Url</Heading>
-        <Divider />
-        <Body>
-          <div class="app-details">
-            <div class="app-name">
-              <div class="name-title detail-title">Name</div>
-              <div class="name">{app?.name}</div>
+      <span class="details-section">
+        <Layout gap="XS" noPadding>
+          <Heading size="S">Name and Url</Heading>
+          <Divider />
+          <Body>
+            <div class="app-details">
+              <div class="app-name">
+                <div class="name-title detail-title">Name</div>
+                <div class="name">{app?.name}</div>
+              </div>
+              <div class="app-url">
+                <div class="url-title detail-title">Url Path</div>
+                <div class="url">{appUrl}</div>
+              </div>
             </div>
-            <div class="app-url">
-              <div class="url-title detail-title">Url Path</div>
-              <div class="url">{appUrl}</div>
+            <div class="page-action">
+              <Button
+                cta
+                secondary
+                on:click={() => {
+                  updatingModal.show()
+                }}
+                disabled={appDeployed}
+              >
+                Edit
+              </Button>
             </div>
-          </div>
-          <div class="page-action">
-            <Button
-              cta
-              secondary
-              on:click={() => {
-                updatingModal.show()
-              }}
-              disabled={lockedBy && !lockedByYou}
-            >
-              Edit
-            </Button>
-          </div>
-        </Body>
-      </Layout>
-      <Layout gap="XS" noPadding>
-        <Heading size="S">App Version</Heading>
-        <Divider />
-        <Body>
-          {#if updateAvailable}
+          </Body>
+        </Layout>
+      </span>
+      <span class="version-section">
+        <Layout gap="XS" noPadding>
+          <Heading size="S">App Version</Heading>
+          <Divider />
+          <Body>
+            {#if updateAvailable}
+              <p class="version-status">
+                The app is currently using version
+                <strong>{$store.version}</strong>
+                but version <strong>{clientPackage.version}</strong> is available.
+              </p>
+            {:else}
+              <p class="version-status">
+                The app is currently using version
+                <strong>{$store.version}</strong>. You're running the latest!
+              </p>
+            {/if}
             <p>
-              The app is currently using version <strong>{app?.version}</strong>
-              but version <strong>{clientPackage.version}</strong> is available.
+              Updates can contain new features, performance improvements and bug
+              fixes.
             </p>
-          {:else}
+            <div class="page-action">
+              <Button
+                cta
+                on:click={versionModal.show()}
+                disabled={!updateAvailable}>Update App</Button
+              >
+            </div>
+          </Body>
+        </Layout>
+      </span>
+      <span class="selfhost-section">
+        <Layout gap="XS" noPadding>
+          <Heading size="S">Self-host Budibase</Heading>
+          <Divider />
+          <Body>
             <p>
-              The app is currently using version <strong>{app?.version}</strong
-              >. You're running the latest!
+              Self-host Budibase for free to get unlimited apps and more - and
+              it only takes a few minutes!
             </p>
-          {/if}
-          <p>
-            Updates can contain new features, performance improvements and bug
-            fixes.
-          </p>
-          <div class="page-action">
-            <Button
-              cta
-              on:click={versionModal.show()}
-              disabled={!updateAvailable}>Update App</Button
-            >
-          </div>
-        </Body>
-      </Layout>
-      <Layout gap="XS" noPadding>
-        <Heading size="S">Self-host Budibase</Heading>
-        <Divider />
-        <Body>
-          <p>
-            Self-host Budibase for free to get unlimited apps and more - and it
-            only takes a few minutes!
-          </p>
-          <div class="page-action">
-            <Button
-              cta
-              on:click={() => {
-                window.open(selfHostPath, "_blank")
-              }}>Self-host Budibase</Button
-            >
-          </div>
-        </Body>
-      </Layout>
+            <div class="page-action">
+              <Button
+                cta
+                on:click={() => {
+                  window.open(selfHostPath, "_blank")
+                }}>Self-host Budibase</Button
+              >
+            </div>
+          </Body>
+        </Layout>
+      </span>
     </Layout>
     <VersionModal bind:this={versionModal} hideIcon={true} />
     <Modal bind:this={updatingModal} padding={false} width="600px">