Fix cypress tests

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

@@ -14,35 +14,26 @@ context("Create a automation", () => {
     cy.createTestTableWithData()
 
     cy.contains("automate").click()
-    cy.contains("Create New Automation").click()
+    cy.get("[data-cy=new-automation]").click()
     cy.get(".modal").within(() => {
       cy.get("input").type("Add Row")
-      cy.get(".buttons")
-        .contains("Create")
-        .click()
+      cy.get(".buttons").contains("Create").click()
     })
 
     // Add trigger
-    cy.get("[data-cy=add-automation-component]").click()
-    cy.get("[data-cy=ROW_SAVED]").click()
-    cy.get("[data-cy=automation-block-setup]").within(() => {
-      cy.get("select")
-        .first()
-        .select("dog")
+    cy.contains("Trigger").click()
+    cy.contains("Row Saved").click()
+    cy.get(".setup").within(() => {
+      cy.get("select").first().select("dog")
     })
 
     // Create action
-    cy.get("[data-cy=CREATE_ROW]").click()
-    cy.get("[data-cy=automation-block-setup]").within(() => {
-      cy.get("select")
-        .first()
-        .select("dog")
-      cy.get("input")
-        .first()
-        .type("goodboy")
-      cy.get("input")
-        .eq(1)
-        .type("11")
+    cy.contains("Action").click()
+    cy.contains("Create Row").click()
+    cy.get(".setup").within(() => {
+      cy.get("select").first().select("dog")
+      cy.get("input").first().type("goodboy")
+      cy.get("input").eq(1).type("11")
     })
 
     // Save
@@ -50,11 +41,11 @@ context("Create a automation", () => {
 
     // Activate Automation
     cy.get("[data-cy=activate-automation]").click()
-    cy.get(".stop-button.highlighted").should("be.visible")
+    cy.get(".ri-stop-circle-fill.highlighted").should("be.visible")
   })
 
   it("should add row when a new row is added", () => {
-    cy.contains("backend").click()
+    cy.contains("data").click()
     cy.addRow(["Rover", 15])
     cy.reload()
     cy.contains("goodboy").should("have.text", "goodboy")

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

@@ -1,54 +1,60 @@
-xcontext('Create Components', () => {
-
+xcontext("Create Components", () => {
   before(() => {
     cy.server()
-        cy.visit('localhost:4001/_builder')
+    cy.visit("localhost:4001/_builder")
     // https://on.cypress.io/type
-        cy.createApp('Table App', 'Table App Description')
-        cy.createTable('dog', 'name', 'age')
-        cy.addRow('bob', '15')
+    cy.createApp("Table App", "Table App Description")
+    cy.createTable("dog", "name", "age")
+    cy.addRow("bob", "15")
   })
 
   // https://on.cypress.io/interacting-with-elements
-    it('should add a container', () => {
-        cy.contains('frontend').click()
-        cy.get('.switcher > :nth-child(2)').click()
-
-        cy.contains('Container').click()
+  it("should add a container", () => {
+    cy.navigateToFrontend()
+    cy.get(".switcher > :nth-child(2)").click()
+    cy.contains("Container").click()
   })
-    it('should add a headline', () => {
-        cy.addHeadlineComponent('An Amazing headline!')
+  it("should add a headline", () => {
+    cy.addHeadlineComponent("An Amazing headline!")
 
-        getIframeBody().contains('An Amazing headline!')
+    getIframeBody().contains("An Amazing headline!")
   })
-    it('change the font size of the headline', () => {
-        cy.contains('Typography').click()
-        cy.get('[data-cy=font-size-prop-control]').click()
+  it("change the font size of the headline", () => {
+    cy.contains("Typography").click()
+    cy.get("[data-cy=font-size-prop-control]").click()
     cy.contains("60px").click()
-        cy.contains('Design').click()
+    cy.contains("Design").click()
 
-        getIframeBody().contains('An Amazing headline!').should('have.css', 'font-size', '60px')
+    getIframeBody()
+      .contains("An Amazing headline!")
+      .should("have.css", "font-size", "60px")
   })
 })
 
 const getIframeDocument = () => {
-    return cy
-        .get('iframe')
+  return (
+    cy
+      .get("iframe")
       // Cypress yields jQuery element, which has the real
       // DOM element under property "0".
       // From the real DOM iframe element we can get
       // the "document" element, it is stored in "contentDocument" property
       // Cypress "its" command can access deep properties using dot notation
       // https://on.cypress.io/its
-        .its('0.contentDocument').should('exist')
+      .its("0.contentDocument")
+      .should("exist")
+  )
 }
 
 const getIframeBody = () => {
   // get the document
-    return getIframeDocument()
+  return (
+    getIframeDocument()
       // automatically retries until body is loaded
-        .its('body').should('not.be.undefined')
+      .its("body")
+      .should("not.be.undefined")
       // wraps "body" DOM element to allow
       // chaining more Cypress commands, like ".find(...)"
       .then(cy.wrap)
+  )
 }

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

@@ -8,7 +8,7 @@ context("Create a Table", () => {
     cy.createTable("dog")
 
     // Check if Table exists
-    cy.get(".title span").should("have.text", "dog")
+    cy.get(".table-title h1").should("have.text", "dog")
   })
 
   it("adds a new column to the table", () => {
@@ -24,9 +24,7 @@ context("Create a Table", () => {
   it("updates a column on the table", () => {
     cy.contains("name").click()
     cy.get("[data-cy='edit-column-header']").click()
-    cy.get(".actions input")
-      .first()
-      .type("updated")
+    cy.get(".actions input").first().type("updated")
     // Unset table display column
     cy.contains("display column").click()
     cy.contains("Save Column").click()
@@ -56,9 +54,7 @@ context("Create a Table", () => {
   })
 
   it("deletes a table", () => {
-    cy.contains("div", "dog")
-      .get(".ri-more-line")
-      .click()
+    cy.contains(".nav-item", "dog").get(".actions").invoke("show").click()
     cy.get("[data-cy=delete-table]").click()
     cy.contains("Delete Table").click()
     cy.contains("dog").should("not.exist")

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

@@ -22,7 +22,7 @@ context("Create a View", () => {
       cy.get("input").type("Test View")
       cy.contains("Save View").click()
     })
-    cy.get(".title").contains("Test View")
+    cy.get(".table-title h1").contains("Test View")
     cy.get("thead th div").should($headers => {
       expect($headers).to.have.length(3)
       const headers = $headers.map((i, header) => Cypress.$(header).text())
@@ -33,14 +33,8 @@ context("Create a View", () => {
   it("filters the view by age over 10", () => {
     cy.contains("Filter").click()
     cy.contains("Add Filter").click()
-    cy.get(".menu-container")
-      .find("select")
-      .first()
-      .select("age")
-    cy.get(".menu-container")
-      .find("select")
-      .eq(1)
-      .select("More Than")
+    cy.get(".menu-container").find("select").first().select("age")
+    cy.get(".menu-container").find("select").eq(1).select("More Than")
     cy.get("input").type(18)
     cy.contains("Save").click()
     cy.get("tbody tr").should($values => {
@@ -52,15 +46,9 @@ context("Create a View", () => {
     cy.contains("Calculate").click()
     // we may reinstate this - have commented this dropdown for now as there is only one option
     //cy.get(".menu-container").find("select").first().select("Statistics")
-    cy.get(".menu-container")
-      .find("select")
-      .eq(0)
-      .select("Statistics")
+    cy.get(".menu-container").find("select").eq(0).select("Statistics")
     cy.wait(50)
-    cy.get(".menu-container")
-      .find("select")
-      .eq(1)
-      .select("age")
+    cy.get(".menu-container").find("select").eq(1).select("age")
     cy.contains("Save").click()
     cy.get("thead th div").should($headers => {
       expect($headers).to.have.length(7)
@@ -114,10 +102,11 @@ context("Create a View", () => {
   })
 
   it("renames a view", () => {
-    cy.contains("[data-cy=table-nav-item]", "Test View")
-      .find(".ri-more-line")
+    cy.contains(".nav-item", "Test View")
+      .find(".actions")
+      .invoke("show")
       .click()
-    cy.contains("Edit").click()
+    cy.get("[data-cy=edit-view]").click()
     cy.get(".menu-container").within(() => {
       cy.get("input").type(" Updated")
       cy.contains("Save").click()
@@ -126,11 +115,11 @@ context("Create a View", () => {
   })
 
   it("deletes a view", () => {
-    cy.contains("[data-cy=table-nav-item]", "Test View Updated").click()
-    cy.contains("[data-cy=table-nav-item]", "Test View Updated")
-      .find(".ri-more-line")
+    cy.contains(".nav-item", "Test View Updated")
+      .find(".actions")
+      .invoke("show")
       .click()
-    cy.contains("Delete").click()
+    cy.get("[data-cy=delete-view]").click()
     cy.contains("Delete View").click()
     cy.contains("TestView Updated").should("not.be.visible")
   })

packages/builder/cypress/support/commands.js

@@ -31,9 +31,7 @@ Cypress.Commands.add("createApp", name => {
     .then($body => {
       if ($body.find("input[name=apiKey]").length) {
         // input was found, do something else here
-        cy.get("input[name=apiKey]")
-          .type(name)
-          .should("have.value", name)
+        cy.get("input[name=apiKey]").type(name).should("have.value", name)
         cy.contains("Next").click()
       }
     })
@@ -44,14 +42,10 @@ Cypress.Commands.add("createApp", name => {
 
       cy.contains("Next").click()
 
-      cy.get("input[name=username]")
-        .click()
-        .type("test")
-      cy.get("input[name=password]")
-        .click()
-        .type("test")
+      cy.get("input[name=username]").click().type("test")
+      cy.get("input[name=password]").click().type("test")
       cy.contains("Submit").click()
-      cy.contains("Create New Table", {
+      cy.get("[data-cy=new-table]", {
         timeout: 20000,
       }).should("be.visible")
     })
@@ -65,28 +59,22 @@ Cypress.Commands.add("createTestTableWithData", () => {
 
 Cypress.Commands.add("createTable", tableName => {
   // Enter table name
-  cy.contains("Create New Table").click()
+  cy.get("[data-cy=new-table]").click()
   cy.get(".modal").within(() => {
-    cy.get("input")
-      .first()
-      .type(tableName)
-    cy.get(".buttons")
-      .contains("Create")
-      .click()
+    cy.get("input").first().type(tableName)
+    cy.get(".buttons").contains("Create").click()
   })
   cy.contains(tableName).should("be.visible")
 })
 
 Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
   // Select Table
-  cy.contains(tableName).click()
+  cy.contains(".nav-item", tableName).click()
   cy.contains("Create New Column").click()
 
   // Configure column
   cy.get(".menu-container").within(() => {
-    cy.get("input")
-      .first()
-      .type(columnName)
+    cy.get("input").first().type(columnName)
     // Unset table display column
     cy.contains("display column").click()
     cy.get("select").select(type)
@@ -99,15 +87,11 @@ Cypress.Commands.add("addRow", values => {
 
   cy.get(".modal").within(() => {
     for (let i = 0; i < values.length; i++) {
-      cy.get("input")
-        .eq(i)
-        .type(values[i])
+      cy.get("input").eq(i).type(values[i])
     }
 
     // Save
-    cy.get(".buttons")
-      .contains("Create")
-      .click()
+    cy.get(".buttons").contains("Create").click()
   })
 })
 
@@ -116,20 +100,12 @@ Cypress.Commands.add("createUser", (username, password, accessLevel) => {
   cy.get(".toprightnav > .settings").click()
   cy.contains("Users").click()
 
-  cy.get("[name=Name]")
-    .first()
-    .type(username)
-  cy.get("[name=Password]")
-    .first()
-    .type(password)
-  cy.get("select")
-    .first()
-    .select(accessLevel)
+  cy.get("[name=Name]").first().type(username)
+  cy.get("[name=Password]").first().type(password)
+  cy.get("select").first().select(accessLevel)
 
   // Save
-  cy.get(".inputs")
-    .contains("Create")
-    .click()
+  cy.get(".inputs").contains("Create").click()
 })
 
 Cypress.Commands.add("addHeadlineComponent", text => {
@@ -149,19 +125,15 @@ Cypress.Commands.add("addButtonComponent", () => {
 })
 
 Cypress.Commands.add("navigateToFrontend", () => {
-  cy.contains("frontend").click()
+  cy.contains("design").click()
 })
 
 Cypress.Commands.add("createScreen", (screenName, route) => {
-  cy.contains("Create New Screen").click()
+  cy.get("[data-cy=new-screen]").click()
   cy.get(".modal").within(() => {
-    cy.get("input")
-      .eq(0)
-      .type(screenName)
+    cy.get("input").eq(0).type(screenName)
     if (route) {
-      cy.get("input")
-        .eq(1)
-        .type(route)
+      cy.get("input").eq(1).type(route)
     }
     cy.contains("Create Screen").click()
   })

packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte

@@ -11,7 +11,10 @@
 
 <div class="title">
   <h1>Automations</h1>
-  <i on:click={modal.show} class="ri-add-circle-fill" />
+  <i
+    on:click={modal.show}
+    data-cy="new-automation"
+    class="ri-add-circle-fill" />
 </div>
 <AutomationList />
 <Modal bind:this={modal}>

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -43,7 +43,7 @@
 </script>
 
 <div class="table-container">
-  <div class="title">
+  <div class="table-title">
     <h1>{title}</h1>
     {#if loading}
       <div transition:fade>
@@ -125,19 +125,19 @@
     gap: var(--spacing-l);
   }
 
-  .title {
+  .table-title {
     height: 24px;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
   }
-  .title h1 {
+  .table-title h1 {
     font-size: var(--font-size-m);
     font-weight: 500;
     margin: 0;
   }
-  .title > div {
+  .table-title > div {
     margin-left: var(--spacing-xs);
   }
 

packages/builder/src/components/backend/DataTable/popovers/RowPopover.svelte

@@ -36,11 +36,16 @@
 </div>
 <DropdownMenu bind:this={dropdown} {anchor} align="left">
   <DropdownContainer>
-    <DropdownItem icon="ri-edit-line" title="Edit" on:click={showModal} />
+    <DropdownItem
+      icon="ri-edit-line"
+      title="Edit"
+      on:click={showModal}
+      data-cy="edit-row" />
     <DropdownItem
       icon="ri-delete-bin-line"
       title="Delete"
-      on:click={showDelete} />
+      on:click={showDelete}
+      data-cy="delete-row" />
   </DropdownContainer>
 </DropdownMenu>
 <ConfirmDialog

packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte

@@ -1,10 +1,9 @@
 <script>
-  import { Heading, Body, Button, Select, Label } from "@budibase/bbui"
+  import { Select, Label } from "@budibase/bbui"
   import { notifier } from "builderStore/store/notifications"
   import { FIELDS } from "constants/backend"
   import api from "builderStore/api"
 
-  const BYTES_IN_KB = 1000
   const BYTES_IN_MB = 1000000
   const FILE_SIZE_LIMIT = BYTES_IN_MB * 1
 
@@ -70,8 +69,9 @@
     const fileArray = Array.from(evt.target.files)
     if (fileArray.some(file => file.size >= FILE_SIZE_LIMIT)) {
       notifier.danger(
-        `Files cannot exceed ${FILE_SIZE_LIMIT /
-          BYTES_IN_MB}MB. Please try again with smaller files.`
+        `Files cannot exceed ${
+          FILE_SIZE_LIMIT / BYTES_IN_MB
+        }MB. Please try again with smaller files.`
       )
       return
     }

packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte

@@ -29,11 +29,9 @@
 
   function showModal() {
     const screens = $store.screens
-    templateScreens = screens.filter(
-      (screen) => screen.autoTableId === table._id
-    )
+    templateScreens = screens.filter(screen => screen.autoTableId === table._id)
     willBeDeleted = ["All table data"].concat(
-      templateScreens.map((screen) => `Screen ${screen.props._instanceName}`)
+      templateScreens.map(screen => `Screen ${screen.props._instanceName}`)
     )
     hideEditor()
     confirmDeleteDialog.show()
@@ -57,7 +55,7 @@
     const tableName = evt.target.value
     if (
       originalName !== tableName &&
-      $backendUiStore.models?.some((model) => model.name === tableName)
+      $backendUiStore.models?.some(model => model.name === tableName)
     ) {
       error = `Table with name ${tableName} already exists. Please choose another name.`
       return
@@ -87,11 +85,16 @@
       </div>
     {:else}
       <DropdownContainer>
-        <DropdownItem icon="ri-edit-line" title="Edit" on:click={showEditor} />
+        <DropdownItem
+          icon="ri-edit-line"
+          data-cy="edit-table"
+          title="Edit"
+          on:click={showEditor} />
         <DropdownItem
           icon="ri-delete-bin-line"
           title="Delete"
-          on:click={showModal} />
+          on:click={showModal}
+          data-cy="delete-table" />
       </DropdownContainer>
     {/if}
   </DropdownMenu>

packages/builder/src/components/backend/TableNavigator/popovers/EditViewPopover.svelte

@@ -62,10 +62,15 @@
       </div>
     {:else}
       <DropdownContainer>
-        <DropdownItem icon="ri-edit-line" title="Edit" on:click={showEditor} />
+        <DropdownItem
+          icon="ri-edit-line"
+          data-cy="edit-view"
+          title="Edit"
+          on:click={showEditor} />
         <DropdownItem
           icon="ri-delete-bin-line"
           title="Delete"
+          data-cy="delete-view"
           on:click={showDelete} />
       </DropdownContainer>
     {/if}

packages/builder/src/components/common/Dropdowns/DropdownItem.svelte

@@ -5,7 +5,12 @@
   export let disabled
 </script>
 
-<div class="dropdown-item" class:disabled on:click class:big={subtitle != null}>
+<div
+  class="dropdown-item"
+  class:disabled
+  on:click
+  class:big={subtitle != null}
+  {...$$restProps}>
   {#if icon}<i class={icon} />{/if}
   <div class="content">
     <div class="title">{title}</div>

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

@@ -11,7 +11,7 @@
 </script>
 
 <div
-  class="container"
+  class="nav-item"
   class:border
   class:selected
   style={`padding-left: ${indentLevel * 18}px`}
@@ -42,22 +42,22 @@
 </div>
 
 <style>
-  .container {
+  .nav-item {
     border-radius: var(--border-radius-m);
     cursor: pointer;
     color: var(--grey-7);
   }
-  .container.border {
+  .nav-item.border {
     border-top: 1px solid var(--grey-1);
   }
-  .container.selected {
+  .nav-item.selected {
     background-color: var(--grey-2);
     color: var(--ink);
   }
-  .container:hover {
+  .nav-item:hover {
     background-color: var(--grey-1);
   }
-  .container:hover .actions {
+  .nav-item:hover .actions {
     display: flex;
   }
 

packages/builder/src/components/userInterface/FrontendNavigatePane.svelte

@@ -11,7 +11,7 @@
 
 <div class="title">
   <h1>Screens</h1>
-  <i on:click={modal.show} class="ri-add-circle-fill" />
+  <i on:click={modal.show} data-cy="new-screen" class="ri-add-circle-fill" />
 </div>
 <PagesList />
 <div class="nav-items-container">

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

@@ -13,7 +13,7 @@
     <slot />
   </div>
   {#if $automationStore.selectedAutomation}
-    <div class="nav">
+    <div class="nav setup">
       <SetupPanel />
     </div>
   {/if}