Minor modal refactor for testing. Updates to the cypress tests around creating screens

2024-06-21 11:51:00 +12:00 · 2022-04-22 14:57:13 +01:00 · 2022-04-22 14:57:13 +01:00 · cf15ed2511
parent d601ec47f4
commit cf15ed2511
6 changed files with 134 additions and 93 deletions
--- a/packages/builder/cypress/integration/createBinding.spec.js
+++ b/packages/builder/cypress/integration/createBinding.spec.js
@ -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
--- a/packages/builder/cypress/integration/createScreen.js
+++ b/packages/builder/cypress/integration/createScreen.js
@ -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")
+
+    })
  })
 })
--- a/packages/builder/cypress/support/commands.js
+++ b/packages/builder/cypress/support/commands.js
@ -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()
--- a/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/DatasourceModal.svelte
@ -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 {
--- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
@ -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)
--- a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
@ -178,7 +178,7 @@

  const roleSelectBack = () => {
    if (screenMode === "blankScreen") {
-      newScreenModal.show()
+      screenDetailsModal.show()
    } else {
      datasourceModal.show()
    }