Cypress tests for the overview tab
This commit is contained in:
Dean
parent
f7fb3abaf3
commit
044d52edb4
|
|
@ -0,0 +1,215 @@
|
|||
import filterTests from "../support/filterTests"
|
||||
|
||||
filterTests(['all'], () => {
|
||||
context("Application Overview screen", () => {
|
||||
before(() => {
|
||||
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) => {
|
||||
const dataCy = $dataCy;
|
||||
cy.get(".appTable .name").eq(0).click()
|
||||
|
||||
cy.location().should((loc) => {
|
||||
expect(loc.pathname).to.eq('/builder/portal/overview/' + dataCy)
|
||||
})
|
||||
})
|
||||
|
||||
cy.visit(`${Cypress.config().baseUrl}/builder`)
|
||||
|
||||
cy.get(".appTable .title").eq(0)
|
||||
.invoke('attr', 'data-cy')
|
||||
.then(($dataCy) => {
|
||||
const dataCy = $dataCy;
|
||||
cy.get(".appTable .app-row-actions button").contains("View").click({force: true})
|
||||
|
||||
cy.location().should((loc) => {
|
||||
expect(loc.pathname).to.eq('/builder/portal/overview/' + dataCy)
|
||||
})
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
// Find a more suitable place for this.
|
||||
it("Should allow unlocking in the app list", () => {
|
||||
cy.visit(`${Cypress.config().baseUrl}/builder`)
|
||||
|
||||
cy.get(".appTable .lock-status").eq(0).contains("Locked by you").click()
|
||||
|
||||
cy.unlockApp({ owned : true })
|
||||
|
||||
cy.get(".appTable").should("exist")
|
||||
cy.get(".lock-status").should('not.be.visible')
|
||||
})
|
||||
|
||||
it("Should allow unlocking in the app overview screen", () => {
|
||||
cy.visit(`${Cypress.config().baseUrl}/builder`)
|
||||
|
||||
cy.get(".appTable .app-row-actions button").contains("Edit").eq(0).click({force: true})
|
||||
cy.wait(1000)
|
||||
cy.visit(`${Cypress.config().baseUrl}/builder`)
|
||||
|
||||
cy.get(".appTable .name").eq(0).click()
|
||||
|
||||
cy.get(".lock-status").eq(0).contains("Locked by you").click()
|
||||
|
||||
cy.unlockApp({ owned : true })
|
||||
|
||||
cy.get(".lock-status").should("not.be.visible")
|
||||
})
|
||||
|
||||
it("Should reflect the deploy state of an app that hasn't been published.", () => {
|
||||
cy.visit(`${Cypress.config().baseUrl}/builder`)
|
||||
|
||||
cy.get(".appTable .name").eq(0).click()
|
||||
|
||||
cy.get(".header-right button.spectrum-Button[data-cy='view-app']").should("be.disabled")
|
||||
|
||||
cy.get(".spectrum-Tabs-item.is-selected").contains("Overview")
|
||||
cy.get(".overview-tab").should("be.visible")
|
||||
|
||||
cy.get(".overview-tab [data-cy='app-status']").within(() => {
|
||||
cy.get(".status-display").contains("Unpublished")
|
||||
cy.get(".status-display .icon svg[aria-label='GlobeStrike']").should("exist")
|
||||
cy.get(".status-text").contains("-")
|
||||
})
|
||||
})
|
||||
|
||||
it("Should reflect the app deployment state", () => {
|
||||
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(".header-right button.spectrum-Button[data-cy='view-app']").should("not.be.disabled")
|
||||
|
||||
cy.get(".overview-tab [data-cy='app-status']").within(() => {
|
||||
cy.get(".status-display").contains("Published")
|
||||
cy.get(".status-display .icon svg[aria-label='GlobeCheck']").should("exist")
|
||||
cy.get(".status-text").contains("Last published a few seconds ago")
|
||||
})
|
||||
})
|
||||
|
||||
it("Should reflect an application that has been unpublished", () => {
|
||||
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.visit(`${Cypress.config().baseUrl}/builder`)
|
||||
cy.get(".appTable .name").eq(0).click()
|
||||
|
||||
cy.get(".overview-tab [data-cy='app-status']").within(() => {
|
||||
cy.get(".status-display").contains("Unpublished")
|
||||
cy.get(".status-display .icon svg[aria-label='GlobeStrike']").should("exist")
|
||||
cy.get(".status-text").contains("Last published a few seconds ago")
|
||||
})
|
||||
})
|
||||
|
||||
it("Should allow the editing of the application icon", () => {
|
||||
cy.visit(`${Cypress.config().baseUrl}/builder`)
|
||||
|
||||
cy.get(".appTable .name").eq(0).click()
|
||||
|
||||
cy.get(".app-logo .edit-hover").should("exist").invoke("show").click()
|
||||
|
||||
cy.customiseAppIcon()
|
||||
|
||||
cy.get(".app-logo")
|
||||
.within(() => {
|
||||
cy.get('[aria-label]').eq(0).children()
|
||||
.should('have.attr', 'xlink:href').and('not.contain', '#spectrum-icon-18-Apps')
|
||||
cy.get(".app-icon")
|
||||
.should('have.attr', 'style').and('contains', 'color')
|
||||
})
|
||||
})
|
||||
|
||||
it("Should log out.", () => {
|
||||
//You
|
||||
//Last edited a few seconds ago.
|
||||
cy.logOut();
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
@ -32,6 +32,18 @@ Cypress.Commands.add("login", () => {
|
|||
})
|
||||
})
|
||||
|
||||
Cypress.Commands.add("basicOnboardAppUser", () => {
|
||||
cy.createUser("another@budibase.com")
|
||||
})
|
||||
|
||||
// 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()
|
||||
|
|
@ -141,6 +153,56 @@ Cypress.Commands.add("deleteAllApps", () => {
|
|||
})
|
||||
})
|
||||
|
||||
Cypress.Commands.add("customiseAppIcon", () => {
|
||||
// Select random icon
|
||||
cy.get(".grid").within(() => {
|
||||
cy.get(".icon-item")
|
||||
.eq(Math.floor(Math.random() * 23) + 1)
|
||||
.click()
|
||||
})
|
||||
// Select random colour
|
||||
cy.get(".fill").click()
|
||||
cy.get(".colors").within(() => {
|
||||
cy.get(".color")
|
||||
.eq(Math.floor(Math.random() * 33) + 1)
|
||||
.click()
|
||||
})
|
||||
cy.intercept("**/applications/**").as("iconChange")
|
||||
cy.get(".spectrum-Button").contains("Save").click({ force: true })
|
||||
cy.wait("@iconChange")
|
||||
cy.get("@iconChange").its("response.statusCode").should("eq", 200)
|
||||
cy.wait(1000)
|
||||
})
|
||||
|
||||
Cypress.Commands.add("unlockApp", unlock_config => {
|
||||
let config = { ...unlock_config }
|
||||
|
||||
cy.get(".spectrum-Modal .spectrum-Dialog[data-cy='app-lock-modal']")
|
||||
.should("be.visible")
|
||||
.within(() => {
|
||||
if (config.owned) {
|
||||
cy.get(".spectrum-Dialog-heading").contains("Locked by you")
|
||||
cy.get(".lock-expiry-body").contains(
|
||||
"This lock will expire in 10 minutes from now"
|
||||
)
|
||||
|
||||
cy.intercept("**/lock").as("unlockApp")
|
||||
cy.get(".spectrum-Button")
|
||||
.contains("Release Lock")
|
||||
.click({ force: true })
|
||||
cy.wait("@unlockApp")
|
||||
cy.get("@unlockApp").its("response.statusCode").should("eq", 200)
|
||||
cy.get("@unlockApp").its("response.body").should("deep.equal", {
|
||||
message: "Lock released successfully.",
|
||||
})
|
||||
} else {
|
||||
//Show the name ?
|
||||
cy.get(".lock-expiry-body").should("not.be.visible")
|
||||
cy.get(".spectrum-Button").contains("Done")
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
Cypress.Commands.add("createTestApp", () => {
|
||||
const appName = "Cypress Tests"
|
||||
cy.deleteApp(appName)
|
||||
|
|
|
|||
|
|
@ -87,12 +87,14 @@
|
|||
</p>
|
||||
|
||||
{#if lockedByYou && lockExpiry > 0}
|
||||
{processStringSync(
|
||||
"This lock will expire in {{ duration time 'millisecond' }} from now",
|
||||
{
|
||||
time: lockExpiry,
|
||||
}
|
||||
)}
|
||||
<span class="lock-expiry-body">
|
||||
{processStringSync(
|
||||
"This lock will expire in {{ duration time 'millisecond' }} from now",
|
||||
{
|
||||
time: lockExpiry,
|
||||
}
|
||||
)}
|
||||
</span>
|
||||
{/if}
|
||||
<div class="lock-modal-actions">
|
||||
<ButtonGroup>
|
||||
|
|
|
|||
|
|
@ -4,11 +4,12 @@
|
|||
export let title = ""
|
||||
export let actionIcon
|
||||
export let action
|
||||
export let dataCy
|
||||
|
||||
$: actionDefined = typeof action === "function"
|
||||
</script>
|
||||
|
||||
<div class="dash-card">
|
||||
<div class="dash-card" data-cy={dataCy}>
|
||||
<div
|
||||
class={actionDefined ? "dash-card-header active" : "dash-card-header"}
|
||||
on:click={() => {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
export let editIcon
|
||||
</script>
|
||||
|
||||
<div class="title">
|
||||
<div class="title" data-cy={`${app.devId}`}>
|
||||
<div style="display: flex;">
|
||||
<div class="app-icon" style="color: {app.icon?.color || ''}">
|
||||
<Icon size="XL" name={app.icon?.name || "Apps"} />
|
||||
|
|
|
|||
|
|
@ -176,8 +176,11 @@
|
|||
secondary
|
||||
icon="Globe"
|
||||
disabled={!isPublished}
|
||||
on:click={viewApp}>View app</Button
|
||||
on:click={viewApp}
|
||||
dataCy="view-app"
|
||||
>
|
||||
View app
|
||||
</Button>
|
||||
<Button
|
||||
size="M"
|
||||
cta
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
|
||||
<div class="overview-tab">
|
||||
<div class="top">
|
||||
<DashCard title={"App Status"}>
|
||||
<DashCard title={"App Status"} dataCy={"app-status"}>
|
||||
<div class="status-content">
|
||||
<div class="status-display">
|
||||
{#if isPublished}
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
</p>
|
||||
</div>
|
||||
</DashCard>
|
||||
<DashCard title={"Last Edited"}>
|
||||
<DashCard title={"Last Edited"} dataCy={"edited-by"}>
|
||||
<div class="last-edited-content">
|
||||
{#await userPromise}
|
||||
<Avatar size="M" initials={"-"} />
|
||||
|
|
@ -105,6 +105,7 @@
|
|||
action={() => {
|
||||
navigateTab("Settings")
|
||||
}}
|
||||
dataCy={"app-version"}
|
||||
>
|
||||
<div class="version-content">
|
||||
<Heading size="XS">{app?.version}</Heading>
|
||||
|
|
@ -133,6 +134,7 @@
|
|||
action={() => {
|
||||
navigateTab("Automation History")
|
||||
}}
|
||||
dataCy={"automation-history"}
|
||||
>
|
||||
<div class="automation-content">
|
||||
<div class="automation-metrics">
|
||||
|
|
@ -158,6 +160,7 @@
|
|||
action={() => {
|
||||
navigateTab("Backups")
|
||||
}}
|
||||
dataCy={"backups"}
|
||||
>
|
||||
<div class="backups-content">test</div>
|
||||
</DashCard>
|
||||
|
|
|
|||
Loading…
Reference in New Issue