make tests less brittle

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

@@ -3,7 +3,7 @@ context('Create a workflow', () => {
     before(() => {
         Cypress.Cookies.preserveOnce('builder:token')
         cy.visit('localhost:4001/_builder')
-        // https://on.cypress.io/type
+
         cy.createApp('Workflow Test App', 'This app is used to test that workflows do in fact work!')
     })
 
@@ -18,11 +18,13 @@ context('Create a workflow', () => {
         cy.get('input').type('Add Record')
         cy.contains('Save').click()
 
+        // Add trigger
         cy.get('[data-cy=add-workflow-component]').click()
-        cy.contains('Actions').click()
+        cy.get('[data-cy=RECORD_SAVED]').click()
+        cy.get('.budibase__input').select('dog')
 
+        // Create action
         cy.get('[data-cy=SAVE_RECORD]').click()
-
         cy.get(':nth-child(2) > .budibase__input').type('goodboy')
         cy.get(':nth-child(3) > .budibase__input').type('11')
 
@@ -30,10 +32,16 @@ context('Create a workflow', () => {
         cy.get('[data-cy=save-workflow-setup]').click()
         cy.get('.workflow-button').click()
 
+        // Activate Workflow
+        cy.get('[data-cy=activate-workflow]').click()
+
     })
-    it('should be able to run', () => {
+    it('should add record when a new record is added', () => {
-        cy.contains('frontend').click()
+        cy.contains('backend').click()
-        cy.addButtonComponent()
+
+        cy.addRecord('bob', '15')
+
+        cy.contains('goodboy').should('have.text', 'goodboy')
 
     })
 })

packages/builder/cypress/support/commands.js

@@ -37,21 +37,20 @@ Cypress.Commands.add("createApp", (name, description) => {
 })
 Cypress.Commands.add("createModel", (modelName, firstField, secondField) => {
     // Enter model name
-    cy.get('.budibase__input')
+    cy.get('[data-cy=Name]').click()
         .type(modelName)
 
     // Add 'name' field
-    cy.get('.new-field')
+    cy.get('[data-cy=add-new-model-field]').click()
-        .click()
+    cy.get('[data-cy=Name]').click()
-    cy.get('.budibase__input').first()
         .type(firstField)
     cy.contains('Save').click()
 
 
     // Add 'age' field
-    cy.get('.new-field')
+    cy.get('[data-cy=add-new-model-field]').click()
-        .click()
+
-    cy.get('.budibase__input').first()
+    cy.get('[data-cy=Name]').click()
         .type(secondField)
     cy.get('select').select('number')
     cy.contains('Save').click()
@@ -64,7 +63,8 @@ Cypress.Commands.add("addRecord", (firstField, secondField) => {
     cy.contains('Create new record')
         .click()
 
-    cy.get(':nth-child(1) > .uk-input').type(firstField).get(':nth-child(2) > .uk-input').type(secondField)
+    cy.get('[data-cy=name-input]').click().type(firstField)
+    cy.get('[data-cy=age-input]').click().type(secondField)
 
     // Save
     cy.contains('Save').click()
@@ -75,9 +75,9 @@ Cypress.Commands.add("createUser", (username, password, level) => {
     cy.get('.nav-group-header > .ri-add-line')
         .click()
 
-    cy.get(':nth-child(2) > .uk-input').type(username)
+    cy.get('[data-cy=username]').type(username)
-    cy.get(':nth-child(3) > .uk-input').type(password)
+    cy.get('[data-cy=password]').type(password)
-    cy.get('.uk-select').select(level)
+    cy.get('[data-cy=accessLevel]').select(level)
 
     // Save
     cy.contains('Save').click()

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

@@ -13,6 +13,7 @@
   <label class="uk-form-label">{label}</label>
   <div class="uk-form-controls">
     <input
+      data-cy={label}
       class="budibase__input"
       class:uk-form-danger={hasError}
       on:change

packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte

@@ -54,7 +54,10 @@
     </div>
     <div class="table-controls">
       <span class="label">Fields</span>
-      <div class="hoverable new-field" on:click={() => (showFieldView = true)}>
+      <div
+        data-cy="add-new-model-field"
+        class="hoverable new-field"
+        on:click={() => (showFieldView = true)}>
         Add new field
       </div>
     </div>

packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte

@@ -29,15 +29,26 @@
     </div>
     <div class="uk-margin">
       <label class="uk-form-label" for="form-stacked-text">Username</label>
-      <input class="uk-input" type="text" bind:value={username} />
+      <input
+        data-cy="username"
+        class="uk-input"
+        type="text"
+        bind:value={username} />
     </div>
     <div class="uk-margin">
       <label class="uk-form-label" for="form-stacked-text">Password</label>
-      <input class="uk-input" type="password" bind:value={password} />
+      <input
+        data-cy="password"
+        class="uk-input"
+        type="password"
+        bind:value={password} />
     </div>
     <div class="uk-margin">
       <label class="uk-form-label" for="form-stacked-text">Access Level</label>
-      <select class="uk-select" bind:value={accessLevelId}>
+      <select
+        data-cy="accessLevel"
+        class="uk-select"
+        bind:value={accessLevelId}>
         <option value="" />
         <option value="POWER_USER">Power User</option>
         <option value="ADMIN">Admin</option>

packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte

@@ -32,6 +32,7 @@
 
 {#if type === 'select'}
   <select
+    data-cy="{label}-select"
     class={determineClassName(type)}
     bind:value
     class:uk-form-danger={errors.length > 0}>
@@ -41,6 +42,7 @@
   </select>
 {:else}
   <input
+    data-cy="{label}-input"
     class={determineClassName(type)}
     class:uk-form-danger={errors.length > 0}
     {checked}

packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte

@@ -50,6 +50,7 @@
         class:highlighted={!workflowLive}
         class:hoverable={!workflowLive}
         class="play-button hoverable"
+        data-cy="activate-workflow"
         on:click={() => setWorkflowLive(true)}>
         <i class="ri-play-fill" />
       </button>