Minor modal refactor for testing. Updates to the cypress tests around creating screens
This commit is contained in:
Dean
parent
d601ec47f4
commit
cf15ed2511
|
|
@ -26,7 +26,7 @@ filterTests(['smoke', 'all'], () => {
|
|||
|
||||
it("should add a URL param binding", () => {
|
||||
const paramName = "foo"
|
||||
cy.createScreen("Test Param", `/test/:${paramName}`)
|
||||
cy.createScreen(`/test/:${paramName}`)
|
||||
cy.addComponent("Elements", "Paragraph").then(componentId => {
|
||||
addSettingBinding("text", `URL.${paramName}`)
|
||||
// The builder preview pages don't have a real URL, so all we can do
|
||||
|
|
|
|||
|
|
@ -9,27 +9,27 @@ filterTests(["smoke", "all"], () => {
|
|||
})
|
||||
|
||||
it("Should successfully create a screen", () => {
|
||||
cy.createScreen("Test Screen", "/test")
|
||||
cy.createScreen("/test")
|
||||
cy.get(".nav-items-container").within(() => {
|
||||
cy.contains("/test").should("exist")
|
||||
})
|
||||
})
|
||||
|
||||
it("Should update the url", () => {
|
||||
cy.createScreen("Test Screen", "test with spaces")
|
||||
cy.createScreen("test with spaces")
|
||||
cy.get(".nav-items-container").within(() => {
|
||||
cy.contains("/test-with-spaces").should("exist")
|
||||
})
|
||||
})
|
||||
|
||||
it("Should create a blank screen with the selected access level", () => {
|
||||
cy.createScreen("Test Screen Admin", "admin only", "Admin")
|
||||
cy.createScreen("admin only", "Admin")
|
||||
|
||||
cy.get(".nav-items-container").within(() => {
|
||||
cy.contains("/admin-only").should("exist")
|
||||
})
|
||||
|
||||
cy.createScreen("Test Screen Public", "open to all", "Public")
|
||||
cy.createScreen("open to all", "Public")
|
||||
|
||||
cy.get(".nav-items-container").within(() => {
|
||||
cy.contains("/open-to-all").should("exist")
|
||||
|
|
@ -37,5 +37,11 @@ filterTests(["smoke", "all"], () => {
|
|||
cy.get(".nav-item").contains("/test-screen").should("not.exist")
|
||||
})
|
||||
})
|
||||
|
||||
it("Should create a set of datasource screens with the selected access level", () => {
|
||||
|
||||
cy.createDatasourceScreen("Cypress Tests", "Public")
|
||||
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@ Cypress.Commands.add("createTestApp", () => {
|
|||
const appName = "Cypress Tests"
|
||||
cy.deleteApp(appName)
|
||||
cy.createApp(appName, "This app is used for Cypress testing.")
|
||||
cy.createScreen("home", "home")
|
||||
cy.createScreen("home")
|
||||
})
|
||||
|
||||
Cypress.Commands.add("createTestTableWithData", () => {
|
||||
|
|
@ -283,28 +283,59 @@ Cypress.Commands.add("navigateToDataSection", () => {
|
|||
})
|
||||
|
||||
//Blank
|
||||
Cypress.Commands.add("createScreen", (screenName, route, accessLevelLabel) => {
|
||||
Cypress.Commands.add("createScreen", (route, accessLevelLabel) => {
|
||||
cy.contains("Design").click()
|
||||
cy.get("[aria-label=AddCircle]").click()
|
||||
cy.get(".spectrum-Modal").within(() => {
|
||||
cy.get(".item").contains("Blank").click()
|
||||
cy.get(".item").contains("Blank screen").click()
|
||||
cy.get(".spectrum-Button").contains("Continue").click({ force: true })
|
||||
cy.wait(500)
|
||||
})
|
||||
cy.get(".spectrum-Dialog-grid").within(() => {
|
||||
cy.get(".spectrum-Form-itemField").eq(0).type(route)
|
||||
cy.get(".spectrum-Button").contains("Continue").click({ force: true })
|
||||
cy.wait(1000)
|
||||
})
|
||||
|
||||
cy.get(".spectrum-Modal").within(() => {
|
||||
if (accessLevelLabel) {
|
||||
cy.get(".spectrum-Picker-label").click()
|
||||
cy.wait(500)
|
||||
cy.contains(accessLevelLabel).click()
|
||||
}
|
||||
|
||||
cy.get(".spectrum-Button").contains("Continue").click({ force: true })
|
||||
cy.wait(1000)
|
||||
cy.get(".spectrum-Button").contains("Done").click({ force: true })
|
||||
})
|
||||
})
|
||||
|
||||
Cypress.Commands.add("createDatasourceScreen", (datasourceName, accessLevelLabel) => {
|
||||
cy.contains("Design").click()
|
||||
cy.get("[aria-label=AddCircle]").click()
|
||||
cy.get(".spectrum-Modal").within(() => {
|
||||
cy.get(".item").contains("Autogenerated screens").click()
|
||||
cy.get(".spectrum-Button").contains("Continue").click({ force: true })
|
||||
cy.wait(500)
|
||||
})
|
||||
cy.get(".spectrum-Modal [data-cy='data-source-modal']").within(() => {
|
||||
cy.get(".data-source-entry").contains(datasourceName).should("exist")
|
||||
cy.get(".data-source-entry").contains(datasourceName).click({ force: true })
|
||||
|
||||
cy.get(".data-source-entry").contains(datasourceName).get(".data-source-check").should("exist")
|
||||
cy.get(".spectrum-Button").contains("Confirm").click({ force: true })
|
||||
})
|
||||
|
||||
cy.get(".spectrum-Modal").within(() => {
|
||||
if (accessLevelLabel) {
|
||||
cy.get(".spectrum-Picker-label").click()
|
||||
cy.wait(500)
|
||||
cy.contains(accessLevelLabel).click()
|
||||
}
|
||||
cy.get(".spectrum-Button").contains("Done").click({ force: true })
|
||||
})
|
||||
|
||||
cy.contains("Design").click()
|
||||
})
|
||||
|
||||
|
||||
Cypress.Commands.add("navigateToAutogeneratedModal", () => {
|
||||
// Screen name must already exist within data source
|
||||
cy.contains("Design").click()
|
||||
|
|
|
|||
|
|
@ -60,90 +60,94 @@
|
|||
})
|
||||
</script>
|
||||
|
||||
<ModalContent
|
||||
title="Create CRUD Screens"
|
||||
confirmText="Confirm"
|
||||
cancelText="Back"
|
||||
onConfirm={confirmDatasourceSelection}
|
||||
{onCancel}
|
||||
disabled={!selectedScreens.length}
|
||||
size="L"
|
||||
>
|
||||
<Layout noPadding gap="S">
|
||||
{#each filteredSources as datasource}
|
||||
<div class="data-source-wrap">
|
||||
<div class="data-source-header">
|
||||
<div class="datasource-icon">
|
||||
<svelte:component
|
||||
this={ICONS[datasource.source]}
|
||||
height="24"
|
||||
width="24"
|
||||
/>
|
||||
<span data-cy="data-source-modal">
|
||||
<ModalContent
|
||||
title="Create CRUD Screens"
|
||||
confirmText="Confirm"
|
||||
cancelText="Back"
|
||||
onConfirm={confirmDatasourceSelection}
|
||||
{onCancel}
|
||||
disabled={!selectedScreens.length}
|
||||
size="L"
|
||||
>
|
||||
<Layout noPadding gap="S">
|
||||
{#each filteredSources as datasource}
|
||||
<div class="data-source-wrap">
|
||||
<div class="data-source-header">
|
||||
<div class="datasource-icon">
|
||||
<svelte:component
|
||||
this={ICONS[datasource.source]}
|
||||
height="24"
|
||||
width="24"
|
||||
/>
|
||||
</div>
|
||||
<div class="data-source-name">{datasource.name}</div>
|
||||
</div>
|
||||
<div class="data-source-name">{datasource.name}</div>
|
||||
</div>
|
||||
{#if Array.isArray(datasource.entities)}
|
||||
{#each datasource.entities.filter(table => table._id !== "ta_users") as table}
|
||||
<div
|
||||
class="data-source-entry"
|
||||
class:selected={selectedScreens.find(x => x.table === table.name)}
|
||||
on:click={() => toggleScreenSelection(table, datasource)}
|
||||
>
|
||||
<svg
|
||||
width="16px"
|
||||
height="16px"
|
||||
class="spectrum-Icon"
|
||||
style="color: white"
|
||||
focusable="false"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-Table" />
|
||||
</svg>
|
||||
{table.name}
|
||||
|
||||
{#if selectedScreens.find(x => x.table === table.name)}
|
||||
<span class="data-source-check">
|
||||
<Icon size="S" name="CheckmarkCircle" />
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
{#if datasource["entities"] && !Array.isArray(datasource.entities)}
|
||||
{#each Object.keys(datasource.entities).filter(table => table._id !== "ta_users") as table_key}
|
||||
<div
|
||||
class="data-source-entry"
|
||||
class:selected={selectedScreens.find(
|
||||
x => x.table === datasource.entities[table_key].name
|
||||
)}
|
||||
on:click={() =>
|
||||
toggleScreenSelection(
|
||||
datasource.entities[table_key],
|
||||
datasource
|
||||
{#if Array.isArray(datasource.entities)}
|
||||
{#each datasource.entities.filter(table => table._id !== "ta_users") as table}
|
||||
<div
|
||||
class="data-source-entry"
|
||||
class:selected={selectedScreens.find(
|
||||
x => x.table === table.name
|
||||
)}
|
||||
>
|
||||
<svg
|
||||
width="16px"
|
||||
height="16px"
|
||||
class="spectrum-Icon"
|
||||
style="color: white"
|
||||
focusable="false"
|
||||
on:click={() => toggleScreenSelection(table, datasource)}
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-Table" />
|
||||
</svg>
|
||||
{datasource.entities[table_key].name}
|
||||
<svg
|
||||
width="16px"
|
||||
height="16px"
|
||||
class="spectrum-Icon"
|
||||
style="color: white"
|
||||
focusable="false"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-Table" />
|
||||
</svg>
|
||||
{table.name}
|
||||
|
||||
{#if selectedScreens.find(x => x.table === datasource.entities[table_key].name)}
|
||||
<span class="data-source-check">
|
||||
<Icon size="S" name="CheckmarkCircle" />
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</Layout>
|
||||
</ModalContent>
|
||||
{#if selectedScreens.find(x => x.table === table.name)}
|
||||
<span class="data-source-check">
|
||||
<Icon size="S" name="CheckmarkCircle" />
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
{#if datasource["entities"] && !Array.isArray(datasource.entities)}
|
||||
{#each Object.keys(datasource.entities).filter(table => table._id !== "ta_users") as table_key}
|
||||
<div
|
||||
class="data-source-entry"
|
||||
class:selected={selectedScreens.find(
|
||||
x => x.table === datasource.entities[table_key].name
|
||||
)}
|
||||
on:click={() =>
|
||||
toggleScreenSelection(
|
||||
datasource.entities[table_key],
|
||||
datasource
|
||||
)}
|
||||
>
|
||||
<svg
|
||||
width="16px"
|
||||
height="16px"
|
||||
class="spectrum-Icon"
|
||||
style="color: white"
|
||||
focusable="false"
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-Table" />
|
||||
</svg>
|
||||
{datasource.entities[table_key].name}
|
||||
|
||||
{#if selectedScreens.find(x => x.table === datasource.entities[table_key].name)}
|
||||
<span class="data-source-check">
|
||||
<Icon size="S" name="CheckmarkCircle" />
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</Layout>
|
||||
</ModalContent>
|
||||
</span>
|
||||
|
||||
<style>
|
||||
.data-source-wrap {
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
<div data-cy="autogenerated-screens" class="content screen-type-wrap">
|
||||
<Icon name="WebPages" />
|
||||
<div class="screen-type-text">
|
||||
<Heading size="XS">Autogenerated Screens</Heading>
|
||||
<Heading size="XS">Autogenerated screens</Heading>
|
||||
<Body size="S">
|
||||
Add autogenerated screens with CRUD functionality to get a working
|
||||
app quickly! (Requires a data source)
|
||||
|
|
|
|||
|
|
@ -178,7 +178,7 @@
|
|||
|
||||
const roleSelectBack = () => {
|
||||
if (screenMode === "blankScreen") {
|
||||
newScreenModal.show()
|
||||
screenDetailsModal.show()
|
||||
} else {
|
||||
datasourceModal.show()
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue