Adding testing tags

.eslintignore

@@ -4,4 +4,6 @@ dist
 packages/server/builder
 packages/server/coverage
 packages/server/client
-packages/builder/.routify
+packages/builder/.routify
+packages/builder/cypress/support/queryLevelTransformerFunction.js
+packages/builder/cypress/support/queryLevelTransformerFunctionWithData.js

.github/workflows/budibase_ci.yml

@@ -43,4 +43,8 @@ jobs:
         verbose: true 
 
     # TODO: parallelise this
-    - run: yarn test:e2e:ci
+    - name: Cypress run
+      uses: cypress-io/github-action@v2
+      with:
+        install: false
+        command: yarn test:e2e:ci

.gitignore

@@ -95,3 +95,4 @@ hosting/.generated-nginx.dev.conf
 *.sublime-workspace
 
 bin/
+packages/builder/cypress.env.json

.prettierignore

@@ -6,4 +6,6 @@ packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
 packages/server/builder
 packages/server/coverage
 packages/server/client
-packages/builder/.routify
+packages/builder/.routify
+packages/builder/cypress/support/queryLevelTransformerFunction.js
+packages/builder/cypress/support/queryLevelTransformerFunctionWithData.js

packages/builder/cypress.json

@@ -1,9 +1,10 @@
 {
-  "baseUrl": "http://localhost:10001/builder/",
+  "baseUrl": "http://localhost:10001",
   "video": true,
   "projectId": "bmbemn",
   "env": {
     "PORT": "10001",
-    "JWT_SECRET": "test"
+    "JWT_SECRET": "test",
+    "HOST_IP": ""
   }
 }

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

@@ -1,14 +1,17 @@
-context("Add Multi-Option Datatype", () => {
-  before(() => {
-    cy.login()
-    cy.createTestApp()
-  })
+import filterTests from "../support/filterTests"
 
-  it("should create a new table, with data", () => {
-    cy.createTable("Multi Data")
-    cy.addColumn("Multi Data", "Test Data", "Multi-select", "1\n2\n3\n4\n5")
-    cy.addRowMultiValue(["1", "2", "3", "4", "5"])
-  })
+filterTests(['all'], () => {
+  context("Add Multi-Option Datatype", () => {
+    before(() => {
+      cy.login()
+      cy.createTestApp()
+    })
+
+    it("should create a new table, with data", () => {
+      cy.createTable("Multi Data")
+      cy.addColumn("Multi Data", "Test Data", "Multi-select", "1\n2\n3\n4\n5")
+      cy.addRowMultiValue(["1", "2", "3", "4", "5"])
+    })
 
   it("should add form with multi select picker, containing 5 options", () => {
     cy.navigateToFrontend()
@@ -39,6 +42,7 @@ context("Add Multi-Option Datatype", () => {
       cy.getComponent(componentId)
         .find(".spectrum-Picker-label")
         .contains("(5)")
+      })
     })
   })
 })

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

@@ -1,35 +1,39 @@
-context("Add Radio Buttons", () => {
-    before(() => {
-      cy.login()
-      cy.createTestApp()
-    })
+import filterTests from "../support/filterTests"
 
-it("should add Radio Buttons options picker on form, add data, and confirm", () => {
-    cy.navigateToFrontend()
-    cy.addComponent("Form", "Form")
-    cy.addComponent("Form", "Options Picker").then((componentId) => {
-        // Provide field setting
-    cy.get(`[data-cy="field-prop-control"]`).type("1")
-    // Open dropdown and select Radio buttons
-    cy.get(`[data-cy="optionsType-prop-control"]`).click().then(() => {
-        cy.get('.spectrum-Popover').contains('Radio buttons')
-        .wait(500)
-        .click()
-        })
-    const radioButtonsTotal = 3
-    // Add values and confirm total
-    addRadioButtonData(radioButtonsTotal)
-    cy.getComponent(componentId).find('[type="radio"]')
-    .should('have.length', radioButtonsTotal)
+filterTests(['all'], () => {
+    context("Add Radio Buttons", () => {
+        before(() => {
+        cy.login()
+        cy.createTestApp()
         })
-    })
-
-    const addRadioButtonData = (totalRadioButtons) => {
-        cy.get(`[data-cy="optionsSource-prop-control"]`).click().then(() => {
-            cy.get('.spectrum-Popover').contains('Custom')
+
+    it("should add Radio Buttons options picker on form, add data, and confirm", () => {
+        cy.navigateToFrontend()
+        cy.addComponent("Form", "Form")
+        cy.addComponent("Form", "Options Picker").then((componentId) => {
+            // Provide field setting
+        cy.get(`[data-cy="field-prop-control"]`).type("1")
+        // Open dropdown and select Radio buttons
+        cy.get(`[data-cy="optionsType-prop-control"]`).click().then(() => {
+            cy.get('.spectrum-Popover').contains('Radio buttons')
             .wait(500)
             .click()
+            })
+        const radioButtonsTotal = 3
+        // Add values and confirm total
+        addRadioButtonData(radioButtonsTotal)
+        cy.getComponent(componentId).find('[type="radio"]')
+        .should('have.length', radioButtonsTotal)
+            })
         })
-        cy.addCustomSourceOptions(totalRadioButtons)
-    }
+
+        const addRadioButtonData = (totalRadioButtons) => {
+            cy.get(`[data-cy="optionsSource-prop-control"]`).click().then(() => {
+                cy.get('.spectrum-Popover').contains('Custom')
+                .wait(500)
+                .click()
+            })
+            cy.addCustomSourceOptions(totalRadioButtons)
+        }
+    })
 })

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

@@ -0,0 +1,51 @@
+import filterTests from "../support/filterTests"
+
+filterTests(['smoke', 'all'], () => {
+    context("Auto Screens UI", () => {
+        before(() => {
+        cy.login()
+        cy.createTestApp()
+        })
+
+        it("should generate internal table screens", () => {
+            // Create autogenerated screens from the internal table
+            cy.createAutogeneratedScreens(["Cypress Tests"])
+            // Confirm screens have been auto generated
+            cy.get(".nav-items-container").contains("cypress-tests").click({ force: true })
+            cy.get(".nav-items-container").should('contain', 'cypress-tests/:id')
+            .and('contain', 'cypress-tests/new/row')
+        })
+
+        it("should generate multiple internal table screens at once", () => {
+            // Create a second internal table
+            const initialTable = "Cypress Tests"
+            const secondTable = "Table Two"
+            cy.createTable(secondTable)
+            // Create autogenerated screens from the internal tables
+            cy.createAutogeneratedScreens([initialTable, secondTable])
+            // Confirm screens have been auto generated
+            cy.get(".nav-items-container").contains("cypress-tests").click({ force: true })
+            // Previously generated tables are suffixed with numbers - as expected
+            cy.get(".nav-items-container").should('contain', 'cypress-tests-2/:id')
+            .and('contain', 'cypress-tests-2/new/row')
+            cy.get(".nav-items-container").contains("table-two").click()
+            cy.get(".nav-items-container").should('contain', 'table-two/:id')
+            .and('contain', 'table-two/new/row')
+        })
+
+        if (Cypress.env("TEST_ENV")) {
+            it("should generate data source screens", () => {
+                // Using MySQL data source for testing this
+                const datasource = "MySQL"
+                // Select & configure MySQL data source
+                cy.selectExternalDatasource(datasource)
+                cy.addDatasourceConfig(datasource)
+                // Create autogenerated screens from a MySQL table - MySQL contains books table
+                cy.createAutogeneratedScreens(["books"])
+                cy.get(".nav-items-container").contains("books").click()
+                cy.get(".nav-items-container").should('contain', 'books/:id')
+                .and('contain', 'books/new/row')
+            })
+        }
+    })
+})

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

@@ -0,0 +1,43 @@
+import filterTests from "../support/filterTests"
+
+filterTests(['all'], () => {
+  context("Change Application Icon and Colour", () => {
+      before(() => {
+        cy.login()
+      })
+
+      it("should change the icon and colour for an application", () => {
+          // Search for test application
+          cy.searchForApplication("Cypress Tests")
+          cy.get(".appTable")
+            .within(() => {
+              cy.get(".spectrum-Icon").eq(1).click()
+            })
+          cy.get(".spectrum-Menu").contains("Edit icon").click()
+          // 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)
+          // Confirm icon has changed from default
+          // Confirm colour has been applied - There is no default colour
+          cy.get(".appTable")
+            .within(() => {
+              cy.get('[aria-label]').eq(0).children()
+              .should('have.attr', 'xlink:href').and('not.contain', '#spectrum-icon-18-Apps')
+              cy.get(".title").children().children()
+              .should('have.attr', 'style').and('contains', 'color')
+            })
+      })
+  })
+})

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

@@ -1,8 +1,12 @@
-context("Create an Application", () => {
-  it("should create a new application", () => {
-    cy.login()
-    cy.createTestApp()
-    cy.visit(`localhost:${Cypress.env("PORT")}/builder`)
-    cy.contains("Cypress Tests").should("exist")
-  })
+import filterTests from '../support/filterTests'
+
+filterTests(['smoke', 'all'], () => {
+  context("Create an Application", () => {
+    it("should create a new application", () => {
+      cy.login()
+      cy.createTestApp()
+      cy.visit(`${Cypress.config().baseUrl}/builder`)
+      cy.contains("Cypress Tests").should("exist")
+    })
+  })  
 })

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

@@ -1,66 +1,69 @@
-context("Create a automation", () => {
-  before(() => {
-    cy.login()
-    cy.createTestApp()
-  })
+import filterTests from "../support/filterTests"
 
-  // https://on.cypress.io/interacting-with-elements
-  it("should create a automation", () => {
-    cy.createTestTableWithData()
-    cy.wait(2000)
-    cy.contains("Automate").click()
-    cy.get("[data-cy='new-screen'] > .spectrum-Icon").click()
-    cy.get(".modal-inner-wrapper").within(() => {
-      cy.get("input").type("Add Row")
-      cy.contains("Row Created").click({ force: true })
-      cy.wait(500)
-      cy.get(".spectrum-Button--cta").click()
+filterTests(['smoke', 'all'], () => {
+  context("Create a automation", () => {
+    before(() => {
+      cy.login()
+      cy.createTestApp()
     })
 
-    // Setup trigger
-    cy.contains("Setup").click()
-    cy.get(".spectrum-Picker-label").click()
-    cy.wait(500)
-    cy.contains("dog").click()
-    cy.wait(2000)
-    // Create action
-    cy.get(".block > .spectrum-Icon").click()
-    cy.get(".modal-inner-wrapper").within(() => {
-      cy.wait(1000)
-      cy.contains("Create Row").trigger('mouseover').click().click()
-      cy.get(".spectrum-Button--cta").click()
-    })
-    cy.contains("Setup").click()
-    cy.get(".spectrum-Picker-label").click()
-    cy.contains("dog").click()
-    cy.get(".spectrum-Textfield-input")
-    .first()
-    .type("{{ trigger.row.name }}", { parseSpecialCharSequences: false })
-    cy.get(".spectrum-Textfield-input")
-      .eq(1)
-      .type("11")
-    cy.contains("Finish and test automation").click()
+    it("should create a automation", () => {
+      cy.createTestTableWithData()
+      cy.wait(2000)
+      cy.contains("Automate").click()
+      cy.get("[data-cy='new-screen'] > .spectrum-Icon").click()
+      cy.get(".modal-inner-wrapper").within(() => {
+        cy.get("input").type("Add Row")
+        cy.contains("Row Created").click({ force: true })
+        cy.wait(500)
+        cy.get(".spectrum-Button--cta").click()
+      })
 
-    cy.get(".modal-inner-wrapper").within(() => {
-      cy.wait(1000)
+      // Setup trigger
+      cy.contains("Setup").click()
+      cy.get(".spectrum-Picker-label").click()
+      cy.wait(500)
+      cy.contains("dog").click()
+      cy.wait(2000)
+      // Create action
+      cy.get('[aria-label="AddCircle"]').eq(1).click()
+      cy.get(".modal-inner-wrapper").within(() => {
+        cy.wait(1000)
+        cy.contains("Create Row").trigger('mouseover').click().click()
+        cy.get(".spectrum-Button--cta").click()
+      })
+      cy.contains("Setup").click()
       cy.get(".spectrum-Picker-label").click()
       cy.contains("dog").click()
-      cy.wait(1000)
       cy.get(".spectrum-Textfield-input")
-        .first()
-        .type("automationGoodboy")
+      .first()
+      .type("{{ trigger.row.name }}", { parseSpecialCharSequences: false })
       cy.get(".spectrum-Textfield-input")
         .eq(1)
         .type("11")
-      cy.get(".spectrum-Textfield-input")
-        .eq(2)
-        .type("123456")
-      cy.get(".spectrum-Textfield-input")
-        .eq(3)
-        .type("123456")
-      cy.contains("Test").click()
+      cy.contains("Finish and test automation").click()
+
+      cy.get(".modal-inner-wrapper").within(() => {
+        cy.wait(1000)
+        cy.get(".spectrum-Picker-label").click()
+        cy.contains("dog").click()
+        cy.wait(1000)
+        cy.get(".spectrum-Textfield-input")
+          .first()
+          .type("automationGoodboy")
+        cy.get(".spectrum-Textfield-input")
+          .eq(1)
+          .type("11")
+        cy.get(".spectrum-Textfield-input")
+          .eq(2)
+          .type("123456")
+        cy.get(".spectrum-Textfield-input")
+          .eq(3)
+          .type("123456")
+        cy.contains("Test").click()
+      })
+      cy.contains("Data").click()
+      cy.contains("automationGoodboy")
     })
-    cy.contains("Data").click()
-    cy.contains("automationGoodboy")
   })
 })