From 48c604d0d0b67d2152fe6d814a2d3432b7550972 Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Tue, 9 Jun 2020 13:52:00 +0200 Subject: [PATCH 01/46] feat: adds cypress to the builder --- config.js | 13 + packages/builder/cypress.json | 4 + .../builder/cypress/fixtures/example.json | 5 + .../builder/cypress/fixtures/profile.json | 5 + packages/builder/cypress/fixtures/users.json | 232 ++++++++++++++++++ packages/builder/cypress/plugins/index.js | 21 ++ packages/builder/cypress/support/commands.js | 25 ++ packages/builder/cypress/support/index.js | 20 ++ packages/builder/package.json | 6 +- 9 files changed, 330 insertions(+), 1 deletion(-) create mode 100644 config.js create mode 100644 packages/builder/cypress.json create mode 100644 packages/builder/cypress/fixtures/example.json create mode 100644 packages/builder/cypress/fixtures/profile.json create mode 100644 packages/builder/cypress/fixtures/users.json create mode 100644 packages/builder/cypress/plugins/index.js create mode 100644 packages/builder/cypress/support/commands.js create mode 100644 packages/builder/cypress/support/index.js diff --git a/config.js b/config.js new file mode 100644 index 0000000000..7bc75c9fb2 --- /dev/null +++ b/config.js @@ -0,0 +1,13 @@ +module.exports = () => ({ + datastore: "local", + datastoreConfig: { + rootPath: "./.data", + }, + keys: ["secret1", "secret2"], + port: 4001, + latestPackagesFolder: ".", + extraMasterPlugins: {}, + dev: true, + customizeMaster: appDefinition => appDefinition, + useAppRootPath: true, +}) diff --git a/packages/builder/cypress.json b/packages/builder/cypress.json new file mode 100644 index 0000000000..477d0a6dc4 --- /dev/null +++ b/packages/builder/cypress.json @@ -0,0 +1,4 @@ +{ + "baseUrl": "http://localhost:4001/_builder/", + "video": false +} \ No newline at end of file diff --git a/packages/builder/cypress/fixtures/example.json b/packages/builder/cypress/fixtures/example.json new file mode 100644 index 0000000000..da18d9352a --- /dev/null +++ b/packages/builder/cypress/fixtures/example.json @@ -0,0 +1,5 @@ +{ + "name": "Using fixtures to represent data", + "email": "hello@cypress.io", + "body": "Fixtures are a great way to mock data for responses to routes" +} \ No newline at end of file diff --git a/packages/builder/cypress/fixtures/profile.json b/packages/builder/cypress/fixtures/profile.json new file mode 100644 index 0000000000..b6c355ca5c --- /dev/null +++ b/packages/builder/cypress/fixtures/profile.json @@ -0,0 +1,5 @@ +{ + "id": 8739, + "name": "Jane", + "email": "jane@example.com" +} \ No newline at end of file diff --git a/packages/builder/cypress/fixtures/users.json b/packages/builder/cypress/fixtures/users.json new file mode 100644 index 0000000000..79b699aa77 --- /dev/null +++ b/packages/builder/cypress/fixtures/users.json @@ -0,0 +1,232 @@ +[ + { + "id": 1, + "name": "Leanne Graham", + "username": "Bret", + "email": "Sincere@april.biz", + "address": { + "street": "Kulas Light", + "suite": "Apt. 556", + "city": "Gwenborough", + "zipcode": "92998-3874", + "geo": { + "lat": "-37.3159", + "lng": "81.1496" + } + }, + "phone": "1-770-736-8031 x56442", + "website": "hildegard.org", + "company": { + "name": "Romaguera-Crona", + "catchPhrase": "Multi-layered client-server neural-net", + "bs": "harness real-time e-markets" + } + }, + { + "id": 2, + "name": "Ervin Howell", + "username": "Antonette", + "email": "Shanna@melissa.tv", + "address": { + "street": "Victor Plains", + "suite": "Suite 879", + "city": "Wisokyburgh", + "zipcode": "90566-7771", + "geo": { + "lat": "-43.9509", + "lng": "-34.4618" + } + }, + "phone": "010-692-6593 x09125", + "website": "anastasia.net", + "company": { + "name": "Deckow-Crist", + "catchPhrase": "Proactive didactic contingency", + "bs": "synergize scalable supply-chains" + } + }, + { + "id": 3, + "name": "Clementine Bauch", + "username": "Samantha", + "email": "Nathan@yesenia.net", + "address": { + "street": "Douglas Extension", + "suite": "Suite 847", + "city": "McKenziehaven", + "zipcode": "59590-4157", + "geo": { + "lat": "-68.6102", + "lng": "-47.0653" + } + }, + "phone": "1-463-123-4447", + "website": "ramiro.info", + "company": { + "name": "Romaguera-Jacobson", + "catchPhrase": "Face to face bifurcated interface", + "bs": "e-enable strategic applications" + } + }, + { + "id": 4, + "name": "Patricia Lebsack", + "username": "Karianne", + "email": "Julianne.OConner@kory.org", + "address": { + "street": "Hoeger Mall", + "suite": "Apt. 692", + "city": "South Elvis", + "zipcode": "53919-4257", + "geo": { + "lat": "29.4572", + "lng": "-164.2990" + } + }, + "phone": "493-170-9623 x156", + "website": "kale.biz", + "company": { + "name": "Robel-Corkery", + "catchPhrase": "Multi-tiered zero tolerance productivity", + "bs": "transition cutting-edge web services" + } + }, + { + "id": 5, + "name": "Chelsey Dietrich", + "username": "Kamren", + "email": "Lucio_Hettinger@annie.ca", + "address": { + "street": "Skiles Walks", + "suite": "Suite 351", + "city": "Roscoeview", + "zipcode": "33263", + "geo": { + "lat": "-31.8129", + "lng": "62.5342" + } + }, + "phone": "(254)954-1289", + "website": "demarco.info", + "company": { + "name": "Keebler LLC", + "catchPhrase": "User-centric fault-tolerant solution", + "bs": "revolutionize end-to-end systems" + } + }, + { + "id": 6, + "name": "Mrs. Dennis Schulist", + "username": "Leopoldo_Corkery", + "email": "Karley_Dach@jasper.info", + "address": { + "street": "Norberto Crossing", + "suite": "Apt. 950", + "city": "South Christy", + "zipcode": "23505-1337", + "geo": { + "lat": "-71.4197", + "lng": "71.7478" + } + }, + "phone": "1-477-935-8478 x6430", + "website": "ola.org", + "company": { + "name": "Considine-Lockman", + "catchPhrase": "Synchronised bottom-line interface", + "bs": "e-enable innovative applications" + } + }, + { + "id": 7, + "name": "Kurtis Weissnat", + "username": "Elwyn.Skiles", + "email": "Telly.Hoeger@billy.biz", + "address": { + "street": "Rex Trail", + "suite": "Suite 280", + "city": "Howemouth", + "zipcode": "58804-1099", + "geo": { + "lat": "24.8918", + "lng": "21.8984" + } + }, + "phone": "210.067.6132", + "website": "elvis.io", + "company": { + "name": "Johns Group", + "catchPhrase": "Configurable multimedia task-force", + "bs": "generate enterprise e-tailers" + } + }, + { + "id": 8, + "name": "Nicholas Runolfsdottir V", + "username": "Maxime_Nienow", + "email": "Sherwood@rosamond.me", + "address": { + "street": "Ellsworth Summit", + "suite": "Suite 729", + "city": "Aliyaview", + "zipcode": "45169", + "geo": { + "lat": "-14.3990", + "lng": "-120.7677" + } + }, + "phone": "586.493.6943 x140", + "website": "jacynthe.com", + "company": { + "name": "Abernathy Group", + "catchPhrase": "Implemented secondary concept", + "bs": "e-enable extensible e-tailers" + } + }, + { + "id": 9, + "name": "Glenna Reichert", + "username": "Delphine", + "email": "Chaim_McDermott@dana.io", + "address": { + "street": "Dayna Park", + "suite": "Suite 449", + "city": "Bartholomebury", + "zipcode": "76495-3109", + "geo": { + "lat": "24.6463", + "lng": "-168.8889" + } + }, + "phone": "(775)976-6794 x41206", + "website": "conrad.com", + "company": { + "name": "Yost and Sons", + "catchPhrase": "Switchable contextually-based project", + "bs": "aggregate real-time technologies" + } + }, + { + "id": 10, + "name": "Clementina DuBuque", + "username": "Moriah.Stanton", + "email": "Rey.Padberg@karina.biz", + "address": { + "street": "Kattie Turnpike", + "suite": "Suite 198", + "city": "Lebsackbury", + "zipcode": "31428-2261", + "geo": { + "lat": "-38.2386", + "lng": "57.2232" + } + }, + "phone": "024-648-3804", + "website": "ambrose.net", + "company": { + "name": "Hoeger LLC", + "catchPhrase": "Centralized empowering task-force", + "bs": "target end-to-end models" + } + } +] \ No newline at end of file diff --git a/packages/builder/cypress/plugins/index.js b/packages/builder/cypress/plugins/index.js new file mode 100644 index 0000000000..aa9918d215 --- /dev/null +++ b/packages/builder/cypress/plugins/index.js @@ -0,0 +1,21 @@ +/// +// *********************************************************** +// This example plugins/index.js can be used to load plugins +// +// You can change the location of this file or turn off loading +// the plugins file with the 'pluginsFile' configuration option. +// +// You can read more here: +// https://on.cypress.io/plugins-guide +// *********************************************************** + +// This function is called when a project is opened or re-opened (e.g. due to +// the project's config changing) + +/** + * @type {Cypress.PluginConfig} + */ +module.exports = (on, config) => { + // `on` is used to hook into various events Cypress emits + // `config` is the resolved Cypress config +} diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js new file mode 100644 index 0000000000..ca4d256f3e --- /dev/null +++ b/packages/builder/cypress/support/commands.js @@ -0,0 +1,25 @@ +// *********************************************** +// This example commands.js shows you how to +// create various custom commands and overwrite +// existing commands. +// +// For more comprehensive examples of custom +// commands please read more here: +// https://on.cypress.io/custom-commands +// *********************************************** +// +// +// -- This is a parent command -- +// Cypress.Commands.add("login", (email, password) => { ... }) +// +// +// -- This is a child command -- +// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) +// +// +// -- This is a dual command -- +// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) +// +// +// -- This will overwrite an existing command -- +// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) diff --git a/packages/builder/cypress/support/index.js b/packages/builder/cypress/support/index.js new file mode 100644 index 0000000000..d68db96df2 --- /dev/null +++ b/packages/builder/cypress/support/index.js @@ -0,0 +1,20 @@ +// *********************************************************** +// This example support/index.js is processed and +// loaded automatically before your test files. +// +// This is a great place to put global configuration and +// behavior that modifies Cypress. +// +// You can change the location of this file or turn off +// automatically serving support files with the +// 'supportFile' configuration option. +// +// You can read more here: +// https://on.cypress.io/configuration +// *********************************************************** + +// Import commands.js using ES2015 syntax: +import './commands' + +// Alternatively you can use CommonJS syntax: +// require('./commands') diff --git a/packages/builder/package.json b/packages/builder/package.json index 8fe9ffd494..32f5cd823f 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -9,7 +9,10 @@ "test": "jest", "test:watch": "jest --watchAll", "dev:builder": "routify --routify-dir routify -c rollup", - "rollup": "rollup -c -w" + "rollup": "rollup -c -w", + "cy:setup": "node ../cli/bin/budi init -d ~/.budibase-cypress && node ../cli/bin/budi run -d ~/.budibase-cypress", + "cy:run": "dev:cypress run", + "cy:open": "cypress open" }, "jest": { "globals": { @@ -67,6 +70,7 @@ "@sveltech/routify": "1.7.11", "babel-jest": "^24.8.0", "browser-sync": "^2.26.7", + "cypress": "^4.8.0", "http-proxy-middleware": "^0.19.1", "jest": "^24.8.0", "ncp": "^2.0.0", From 0c9baf92f8410c5befd69c3f00774184fd86d138 Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Tue, 9 Jun 2020 13:52:19 +0200 Subject: [PATCH 02/46] adds test for creating budibase app --- .../cypress/integration/createApp.spec.js | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 packages/builder/cypress/integration/createApp.spec.js diff --git a/packages/builder/cypress/integration/createApp.spec.js b/packages/builder/cypress/integration/createApp.spec.js new file mode 100644 index 0000000000..d8f9331eec --- /dev/null +++ b/packages/builder/cypress/integration/createApp.spec.js @@ -0,0 +1,25 @@ +context('Create Application', () => { + + beforeEach(() => { + cy.visit('localhost:4001/_builder') + }) + + // https://on.cypress.io/interacting-with-elements + + it('should create a new application', () => { + // https://on.cypress.io/type + cy.get('.banner-button') + .click() + .get('input[name="name"]') + .type('My Cool Application').should('have.value', 'My Cool Application') + + cy.get('textarea[name="description"]') + .type('This is a description').should('have.value', 'This is a description') + + cy.contains('Save').click() + + cy.visit('localhost:4001/_builder') + + cy.contains('My Cool Application') + }) +}) From c46e43cf778a5282f3a054b4f818ce1aadcf4a5d Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Tue, 9 Jun 2020 15:39:50 +0200 Subject: [PATCH 03/46] setup commands to allow running tests from project root instead of just builder package --- CONTRIBUTING.md | 10 ++++++++++ package.json | 3 ++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ab2e7d597b..ac35a4277d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -166,6 +166,16 @@ rm -rf ~/.budibase ``` Follow from **Step 3. Install and Build** in the setup guide above. You should have a fresh Budibase installation. +### Running tests + +#### End-to-end Tests + +Budibase uses Cypress to run a number of E2E tests. To run the tests execute the following command: + +``` +yarn test:e2e +``` + ### Other Useful Information diff --git a/package.json b/package.json index 443c8cccc3..e4e4a3bd4e 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,8 @@ "test": "lerna run test", "lint": "eslint packages", "lint:fix": "eslint --fix packages", - "format": "prettier --write \"{,!(node_modules)/**/}*.{js,jsx,svelte}\"" + "format": "prettier --write \"{,!(node_modules)/**/}*.{js,jsx,svelte}\"", + "test:e2e": "lerna run cy:test" }, "dependencies": { "@material/icon-button": "4.0.0", From 5e1210723c91bb0263cf2537ad8229f01be530df Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Tue, 9 Jun 2020 15:40:00 +0200 Subject: [PATCH 04/46] update create app test --- packages/builder/cypress/integration/createApp.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/cypress/integration/createApp.spec.js b/packages/builder/cypress/integration/createApp.spec.js index d8f9331eec..a6e488baf6 100644 --- a/packages/builder/cypress/integration/createApp.spec.js +++ b/packages/builder/cypress/integration/createApp.spec.js @@ -20,6 +20,6 @@ context('Create Application', () => { cy.visit('localhost:4001/_builder') - cy.contains('My Cool Application') + cy.contains('My Cool Application').should('exist') }) }) From 8e685d07c1a4b37eb3a4abd515d49d9ee6714fd2 Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Tue, 9 Jun 2020 15:40:14 +0200 Subject: [PATCH 05/46] add tests to create model and record --- .../cypress/integration/createModel.spec.js | 74 +++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 packages/builder/cypress/integration/createModel.spec.js diff --git a/packages/builder/cypress/integration/createModel.spec.js b/packages/builder/cypress/integration/createModel.spec.js new file mode 100644 index 0000000000..50e523c598 --- /dev/null +++ b/packages/builder/cypress/integration/createModel.spec.js @@ -0,0 +1,74 @@ +context('Create Model', () => { + + beforeEach(() => { + cy.visit('localhost:4001/_builder') + }) + + // https://on.cypress.io/interacting-with-elements + + it('should create a new model', () => { + // https://on.cypress.io/type + cy.get('.banner-button') + .click() + .get('input[name="name"]') + .type('My Cool Application').should('have.value', 'My Cool Application') + + cy.get('textarea[name="description"]') + .type('This is a description').should('have.value', 'This is a description') + + cy.contains('Save').click() + + // Enter model name + cy.get('.budibase__input') + .type('dog') + + // Add new field + cy.get('.new-field') + .click() + + // Enter field name + cy.get('.budibase__input').first() + .type('name') + + // Save + cy.contains('Save').click() + + + // Add new field + cy.get('.new-field') + .click() + + // Enter field name + cy.get('.budibase__input').first() + .type('age') + + cy.get('select').select('number') + + // Save + cy.contains('Save').click() + + cy.contains('age').should('exist') + + // Save + cy.contains('Save').click() + + cy.get('.title').should('have.text', 'dog') + }) + it('should add a record', () => { + + // Open just created app + cy.get(':nth-child(1) > .card-footer > .app-button') + .click() + + // Open add record modal + cy.get('.button') + .click() + + cy.get(':nth-child(1) > .uk-input').type('bob').get(':nth-child(2) > .uk-input').type('15') + + // Save + cy.contains('Save').click() + + cy.contains('bob').should('have.text', 'bob') + }) +}) From f1d968ae883f10d7922bcfd30741b1979121e525 Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Tue, 9 Jun 2020 15:48:25 +0200 Subject: [PATCH 06/46] adds missing package.json commands --- packages/builder/package.json | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/builder/package.json b/packages/builder/package.json index 32f5cd823f..ebd30c31bd 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -10,9 +10,10 @@ "test:watch": "jest --watchAll", "dev:builder": "routify --routify-dir routify -c rollup", "rollup": "rollup -c -w", - "cy:setup": "node ../cli/bin/budi init -d ~/.budibase-cypress && node ../cli/bin/budi run -d ~/.budibase-cypress", - "cy:run": "dev:cypress run", - "cy:open": "cypress open" + "cy:setup": "rm -rf node ~/.budibase-cypress && ../cli/bin/budi init -d ~/.budibase-cypress && node ../cli/bin/budi run -d ~/.budibase-cypress", + "cy:run": "cypress run", + "cy:open": "cypress open", + "cy:test": "start-server-and-test cy:setup http://localhost:4001/_builder cy:run" }, "jest": { "globals": { @@ -87,6 +88,7 @@ "rollup-plugin-svelte": "^5.0.3", "rollup-plugin-terser": "^4.0.4", "rollup-plugin-url": "^2.2.2", + "start-server-and-test": "^1.11.0", "svelte": "3.23.x" }, "gitHead": "115189f72a850bfb52b65ec61d932531bf327072" From 3ee5111d6f28db4600c3a00988f083389bfc80d5 Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Thu, 11 Jun 2020 12:04:31 +0200 Subject: [PATCH 07/46] rework tests to use commands for DRYness --- .../cypress/integration/createApp.spec.js | 12 +--- .../cypress/integration/createModel.spec.js | 65 +++---------------- .../cypress/integration/createUser.spec.js | 19 ++++++ packages/builder/cypress/support/commands.js | 59 +++++++++++++++++ 4 files changed, 88 insertions(+), 67 deletions(-) create mode 100644 packages/builder/cypress/integration/createUser.spec.js diff --git a/packages/builder/cypress/integration/createApp.spec.js b/packages/builder/cypress/integration/createApp.spec.js index a6e488baf6..cbfbed06bb 100644 --- a/packages/builder/cypress/integration/createApp.spec.js +++ b/packages/builder/cypress/integration/createApp.spec.js @@ -8,18 +8,10 @@ context('Create Application', () => { it('should create a new application', () => { // https://on.cypress.io/type - cy.get('.banner-button') - .click() - .get('input[name="name"]') - .type('My Cool Application').should('have.value', 'My Cool Application') - - cy.get('textarea[name="description"]') - .type('This is a description').should('have.value', 'This is a description') - - cy.contains('Save').click() + cy.createApp('My Cool App', 'This is a description') cy.visit('localhost:4001/_builder') - cy.contains('My Cool Application').should('exist') + cy.contains('My Cool App').should('exist') }) }) diff --git a/packages/builder/cypress/integration/createModel.spec.js b/packages/builder/cypress/integration/createModel.spec.js index 50e523c598..ec447f07f9 100644 --- a/packages/builder/cypress/integration/createModel.spec.js +++ b/packages/builder/cypress/integration/createModel.spec.js @@ -1,73 +1,24 @@ context('Create Model', () => { - beforeEach(() => { + before(() => { cy.visit('localhost:4001/_builder') + // https://on.cypress.io/type + cy.createApp('Model App', 'Model App Description') }) // https://on.cypress.io/interacting-with-elements - it('should create a new model', () => { - // https://on.cypress.io/type - cy.get('.banner-button') - .click() - .get('input[name="name"]') - .type('My Cool Application').should('have.value', 'My Cool Application') - cy.get('textarea[name="description"]') - .type('This is a description').should('have.value', 'This is a description') - - cy.contains('Save').click() - - // Enter model name - cy.get('.budibase__input') - .type('dog') - - // Add new field - cy.get('.new-field') - .click() - - // Enter field name - cy.get('.budibase__input').first() - .type('name') - - // Save - cy.contains('Save').click() - - - // Add new field - cy.get('.new-field') - .click() - - // Enter field name - cy.get('.budibase__input').first() - .type('age') - - cy.get('select').select('number') - - // Save - cy.contains('Save').click() - - cy.contains('age').should('exist') - - // Save - cy.contains('Save').click() + cy.createModel('dog', 'name', 'age') + // Check if model exists cy.get('.title').should('have.text', 'dog') }) it('should add a record', () => { + // Page needs to be reloaded for some reason, cookie might be remove between tests? + cy.reload() - // Open just created app - cy.get(':nth-child(1) > .card-footer > .app-button') - .click() - - // Open add record modal - cy.get('.button') - .click() - - cy.get(':nth-child(1) > .uk-input').type('bob').get(':nth-child(2) > .uk-input').type('15') - - // Save - cy.contains('Save').click() + cy.addRecord('bob', '15') cy.contains('bob').should('have.text', 'bob') }) diff --git a/packages/builder/cypress/integration/createUser.spec.js b/packages/builder/cypress/integration/createUser.spec.js new file mode 100644 index 0000000000..5d46ec780b --- /dev/null +++ b/packages/builder/cypress/integration/createUser.spec.js @@ -0,0 +1,19 @@ +context('Create Model', () => { + + before(() => { + cy.visit('localhost:4001/_builder') + // https://on.cypress.io/type + cy.createApp('User App', 'This app is used to test user creation') + }) + + // https://on.cypress.io/interacting-with-elements + it('should create a user', () => { + // Close Model modal that shows up after creating an app + cy.get('.close').click() + + cy.createUser('bbuser', 'test', 'ADMIN') + + // Check to make sure user was created! + cy.contains('bbuser').should('have.text', 'bbuser') + }) +}) diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index ca4d256f3e..29a2e00673 100644 --- a/packages/builder/cypress/support/commands.js +++ b/packages/builder/cypress/support/commands.js @@ -23,3 +23,62 @@ // // -- This will overwrite an existing command -- // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) + +Cypress.Commands.add("createApp", (name, description) => { + cy.get('.banner-button') + .click() + .get('input[name="name"]') + .type(name).should('have.value', name) + + cy.get('textarea[name="description"]') + .type(description).should('have.value', description) + + cy.contains('Save').click() +}) +Cypress.Commands.add("createModel", (modelName, firstField, secondField) => { + // Enter model name + cy.get('.budibase__input') + .type(modelName) + + // Add 'name' field + cy.get('.new-field') + .click() + cy.get('.budibase__input').first() + .type(firstField) + cy.contains('Save').click() + + + // Add 'age' field + cy.get('.new-field') + .click() + cy.get('.budibase__input').first() + .type(secondField) + cy.get('select').select('number') + cy.contains('Save').click() + cy.contains(secondField).should('exist') + + // Save model + cy.contains('Save').click() +}) +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) + + // Save + cy.contains('Save').click() +}) + +Cypress.Commands.add("createUser", (username, password, level) => { + // Create User + cy.get('.nav-group-header > .ri-add-line') + .click() + + cy.get(':nth-child(2) > .uk-input').type(username) + cy.get(':nth-child(3) > .uk-input').type(password) + cy.get('.uk-select').select(level) + + // Save + cy.contains('Save').click() +}) \ No newline at end of file From 59aaf33278a44e65b2113710ec6bd12bf6f55e32 Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Thu, 11 Jun 2020 12:56:16 +0200 Subject: [PATCH 08/46] adds tests to add components and change props on them --- .../integration/createComponents.spec.js | 53 +++++++++++++++++++ packages/builder/cypress/support/commands.js | 12 +++++ .../src/components/common/Input.svelte | 2 + .../userInterface/PropertyControl.svelte | 3 +- 4 files changed, 69 insertions(+), 1 deletion(-) create mode 100644 packages/builder/cypress/integration/createComponents.spec.js diff --git a/packages/builder/cypress/integration/createComponents.spec.js b/packages/builder/cypress/integration/createComponents.spec.js new file mode 100644 index 0000000000..ad23566c0d --- /dev/null +++ b/packages/builder/cypress/integration/createComponents.spec.js @@ -0,0 +1,53 @@ +context('Create Model', () => { + + before(() => { + cy.visit('localhost:4001/_builder') + // https://on.cypress.io/type + cy.createApp('Model App', 'Model App Description') + cy.createModel('dog', 'name', 'age') + cy.addRecord('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 headline', () => { + cy.addHeadlineComponent('An Amazing headline!') + + getIframeBody().contains('An Amazing headline!') + }) + it('change the background color of the headline', () => { + cy.contains('Background').click() + cy.get('input[name="background"]') + .type('rgb(102, 51, 153)') + cy.contains('Design').click() + + getIframeBody().contains('An Amazing headline!').should('have.css', 'background-color', 'rgb(102, 51, 153)') + }) +}) + +const getIframeDocument = () => { + 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') +} + +const getIframeBody = () => { + // get the document + return getIframeDocument() + // automatically retries until body is loaded + .its('body').should('not.be.undefined') + // wraps "body" DOM element to allow + // chaining more Cypress commands, like ".find(...)" + .then(cy.wrap) +} \ No newline at end of file diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index 29a2e00673..ffe265a2a2 100644 --- a/packages/builder/cypress/support/commands.js +++ b/packages/builder/cypress/support/commands.js @@ -81,4 +81,16 @@ Cypress.Commands.add("createUser", (username, password, level) => { // Save cy.contains('Save').click() +}) + +Cypress.Commands.add("addHeadlineComponent", (text) => { + // Create User + cy.get('.switcher > :nth-child(2)').click() + + cy.contains('Text').click() + cy.contains('Headline').click() + cy.get('.tabs > :nth-child(2)').click() + cy.get('input[type="text"]') + .type(text) + cy.contains('Design').click() }) \ No newline at end of file diff --git a/packages/builder/src/components/common/Input.svelte b/packages/builder/src/components/common/Input.svelte index 82305be60a..5db342b2c8 100644 --- a/packages/builder/src/components/common/Input.svelte +++ b/packages/builder/src/components/common/Input.svelte @@ -2,6 +2,7 @@ import { onMount } from "svelte" import { buildStyle } from "../../helpers.js" export let value = "" + export let name = "" export let textAlign = "left" export let width = "160px" export let placeholder = "" @@ -25,6 +26,7 @@ handleChange(key, val)} onChange={val => handleChange(key, val)} - {...props} /> + {...props} + name={key} /> From b35fbe823c48b805d9346149f1ef56184fb660b6 Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Thu, 11 Jun 2020 13:20:13 +0200 Subject: [PATCH 09/46] update names for tests --- packages/builder/cypress/integration/createApp.spec.js | 2 +- packages/builder/cypress/integration/createComponents.spec.js | 2 +- packages/builder/cypress/integration/createModel.spec.js | 2 +- packages/builder/cypress/integration/createUser.spec.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/builder/cypress/integration/createApp.spec.js b/packages/builder/cypress/integration/createApp.spec.js index cbfbed06bb..07a8687ea8 100644 --- a/packages/builder/cypress/integration/createApp.spec.js +++ b/packages/builder/cypress/integration/createApp.spec.js @@ -1,4 +1,4 @@ -context('Create Application', () => { +context('Create an Application', () => { beforeEach(() => { cy.visit('localhost:4001/_builder') diff --git a/packages/builder/cypress/integration/createComponents.spec.js b/packages/builder/cypress/integration/createComponents.spec.js index ad23566c0d..299f6b8ad2 100644 --- a/packages/builder/cypress/integration/createComponents.spec.js +++ b/packages/builder/cypress/integration/createComponents.spec.js @@ -1,4 +1,4 @@ -context('Create Model', () => { +context('Create Components', () => { before(() => { cy.visit('localhost:4001/_builder') diff --git a/packages/builder/cypress/integration/createModel.spec.js b/packages/builder/cypress/integration/createModel.spec.js index ec447f07f9..061dadaa3d 100644 --- a/packages/builder/cypress/integration/createModel.spec.js +++ b/packages/builder/cypress/integration/createModel.spec.js @@ -1,4 +1,4 @@ -context('Create Model', () => { +context('Create a Model', () => { before(() => { cy.visit('localhost:4001/_builder') diff --git a/packages/builder/cypress/integration/createUser.spec.js b/packages/builder/cypress/integration/createUser.spec.js index 5d46ec780b..80d1a51d84 100644 --- a/packages/builder/cypress/integration/createUser.spec.js +++ b/packages/builder/cypress/integration/createUser.spec.js @@ -1,4 +1,4 @@ -context('Create Model', () => { +context('Create a User', () => { before(() => { cy.visit('localhost:4001/_builder') From 7cf81c063a33811f5616ae8ea2ed2e216751e114 Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Thu, 11 Jun 2020 16:40:07 +0200 Subject: [PATCH 10/46] adds some data-cy properties to a number of elements and starts work on workflow tests --- .../cypress/integration/createModel.spec.js | 4 +- .../integration/createWorkflow.spec.js | 39 +++++++++++++++++++ packages/builder/cypress/support/commands.js | 10 +++-- .../userInterface/CategoryTab.svelte | 1 + .../userInterface/ItemTab/Item.svelte | 6 ++- .../workflow/SetupPanel/SetupPanel.svelte | 5 ++- .../BlockList/WorkflowBlock.svelte | 5 ++- .../WorkflowPanel/WorkflowPanel.svelte | 2 + 8 files changed, 63 insertions(+), 9 deletions(-) create mode 100644 packages/builder/cypress/integration/createWorkflow.spec.js diff --git a/packages/builder/cypress/integration/createModel.spec.js b/packages/builder/cypress/integration/createModel.spec.js index 061dadaa3d..3d46316607 100644 --- a/packages/builder/cypress/integration/createModel.spec.js +++ b/packages/builder/cypress/integration/createModel.spec.js @@ -1,6 +1,7 @@ context('Create a Model', () => { before(() => { + Cypress.Cookies.preserveOnce('builder:token') cy.visit('localhost:4001/_builder') // https://on.cypress.io/type cy.createApp('Model App', 'Model App Description') @@ -15,9 +16,6 @@ context('Create a Model', () => { cy.get('.title').should('have.text', 'dog') }) it('should add a record', () => { - // Page needs to be reloaded for some reason, cookie might be remove between tests? - cy.reload() - cy.addRecord('bob', '15') cy.contains('bob').should('have.text', 'bob') diff --git a/packages/builder/cypress/integration/createWorkflow.spec.js b/packages/builder/cypress/integration/createWorkflow.spec.js new file mode 100644 index 0000000000..62f00e92d2 --- /dev/null +++ b/packages/builder/cypress/integration/createWorkflow.spec.js @@ -0,0 +1,39 @@ +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!') + }) + + // https://on.cypress.io/interacting-with-elements + it('should create a workflow', () => { + cy.createModel('dog', 'name', 'age') + cy.createUser('bbuser', 'test', 'ADMIN') + + + cy.contains('workflow').click() + cy.get('.new-workflow-button').click() + cy.get('input').type('Add Record') + cy.contains('Save').click() + + cy.get('[data-cy=add-workflow-component]').click() + cy.contains('Actions').click() + + 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') + + // Save + cy.get('[data-cy=save-workflow-setup]').click() + cy.get('.workflow-button').click() + + }) + it('should be able to run', () => { + cy.contains('frontend').click() + cy.addButtonComponent() + + }) +}) \ No newline at end of file diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index ffe265a2a2..7a3d276425 100644 --- a/packages/builder/cypress/support/commands.js +++ b/packages/builder/cypress/support/commands.js @@ -84,13 +84,17 @@ Cypress.Commands.add("createUser", (username, password, level) => { }) Cypress.Commands.add("addHeadlineComponent", (text) => { - // Create User cy.get('.switcher > :nth-child(2)').click() - cy.contains('Text').click() - cy.contains('Headline').click() + cy.get('[data-cy=Text]').click() + cy.get('[data-cy=Headline]').click() cy.get('.tabs > :nth-child(2)').click() cy.get('input[type="text"]') .type(text) cy.contains('Design').click() +}) +Cypress.Commands.add("addButtonComponent", (text) => { + cy.get('.switcher > :nth-child(2)').click() + + cy.get('[data-cy=Button]').click() }) \ No newline at end of file diff --git a/packages/builder/src/components/userInterface/CategoryTab.svelte b/packages/builder/src/components/userInterface/CategoryTab.svelte index 074839eca2..5f7c3e584e 100644 --- a/packages/builder/src/components/userInterface/CategoryTab.svelte +++ b/packages/builder/src/components/userInterface/CategoryTab.svelte @@ -7,6 +7,7 @@
{#each categories as category}
  • onClick(category)} class:active={selectedCategory === category}> {category.name} diff --git a/packages/builder/src/components/userInterface/ItemTab/Item.svelte b/packages/builder/src/components/userInterface/ItemTab/Item.svelte index e5b36d0183..4e2806b018 100644 --- a/packages/builder/src/components/userInterface/ItemTab/Item.svelte +++ b/packages/builder/src/components/userInterface/ItemTab/Item.svelte @@ -3,7 +3,11 @@ export let item -
    +
    diff --git a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte index 456505a4a8..eb88f6bb23 100644 --- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte +++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte @@ -96,7 +96,10 @@ {#if workflowBlock}
    - From 59442f18cbeaccdecebd5131ce32268a9c09bdaa Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Thu, 11 Jun 2020 17:59:11 +0200 Subject: [PATCH 13/46] adds script to run cypress tests --- packages/builder/.gitignore | 1 + packages/builder/cypress/setup.js | 15 +++++++++++++++ packages/builder/package.json | 5 +++-- 3 files changed, 19 insertions(+), 2 deletions(-) create mode 100644 packages/builder/cypress/setup.js diff --git a/packages/builder/.gitignore b/packages/builder/.gitignore index 94ba827047..49444a4fc0 100644 --- a/packages/builder/.gitignore +++ b/packages/builder/.gitignore @@ -5,4 +5,5 @@ package-lock.json yarn.lock release/ dist/ +cypress/screenshots routify diff --git a/packages/builder/cypress/setup.js b/packages/builder/cypress/setup.js new file mode 100644 index 0000000000..67ac005e49 --- /dev/null +++ b/packages/builder/cypress/setup.js @@ -0,0 +1,15 @@ +// What this script does: +// 1. Removes the old test folder if it exists (.budibase-cypress) +// 2. Initialises using `.budibase-cypress` +// 3. Runs the server using said folder + +const rimraf = require("rimraf"); +const homedir = require('os').homedir() + '/.budibase-cypress'; +const { exec } = require("child_process") + +rimraf(homedir, function (error) { + console.log('Error: ', error); +}) + +exec(`../../packages/cli/bin/budi init -d ${homedir}`) +exec(`../../packages/cli/bin/budi run -d ${homedir}`) \ No newline at end of file diff --git a/packages/builder/package.json b/packages/builder/package.json index 30674b0f9d..56ee5135e3 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -10,10 +10,10 @@ "test:watch": "jest --watchAll", "dev:builder": "routify --routify-dir routify -c rollup", "rollup": "rollup -c -w", - "cy:setup": "rm -rf node ~/.budibase-cypress && ../cli/bin/budi init -d ~/.budibase-cypress && node ../cli/bin/budi run -d ~/.budibase-cypress", + "cy:setup": "node ./cypress/setup.js", "cy:run": "cypress run", "cy:open": "cypress open", - "cy:test": "start-server-and-test cy:setup http://localhost:4001/_builder cy:open" + "cy:test": "start-server-and-test cy:setup http://localhost:4001/_builder cy:run" }, "jest": { "globals": { @@ -76,6 +76,7 @@ "jest": "^24.8.0", "ncp": "^2.0.0", "npm-run-all": "^4.1.5", + "rimraf": "^3.0.2", "rollup": "^1.12.0", "rollup-plugin-alias": "^1.5.2", "rollup-plugin-browsersync": "^1.0.0", From 5d84ceb7f6b241471e2e6ddf06a48ba217805caa Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Thu, 11 Jun 2020 18:10:53 +0200 Subject: [PATCH 14/46] update script to be sync rather than async --- packages/builder/cypress/setup.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/builder/cypress/setup.js b/packages/builder/cypress/setup.js index 67ac005e49..b737f3ef2e 100644 --- a/packages/builder/cypress/setup.js +++ b/packages/builder/cypress/setup.js @@ -5,11 +5,9 @@ const rimraf = require("rimraf"); const homedir = require('os').homedir() + '/.budibase-cypress'; -const { exec } = require("child_process") +const { execSync } = require("child_process") -rimraf(homedir, function (error) { - console.log('Error: ', error); -}) +rimraf.sync(homedir) -exec(`../../packages/cli/bin/budi init -d ${homedir}`) -exec(`../../packages/cli/bin/budi run -d ${homedir}`) \ No newline at end of file +execSync(`../../packages/cli/bin/budi init -d ${homedir}`) +execSync(`../../packages/cli/bin/budi run -d ${homedir}`) From 7a65da7899f8a1443d34db8095102ece4921a7d8 Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Thu, 11 Jun 2020 18:14:28 +0200 Subject: [PATCH 15/46] fix linting errors --- package.json | 3 +- packages/builder/cypress/plugins/index.js | 21 ---- packages/builder/cypress/setup.js | 4 +- packages/builder/cypress/support/commands.js | 107 ++++++++++--------- packages/builder/cypress/support/index.js | 2 +- packages/builder/package.json | 5 + yarn.lock | 9 +- 7 files changed, 74 insertions(+), 77 deletions(-) delete mode 100644 packages/builder/cypress/plugins/index.js diff --git a/package.json b/package.json index e4e4a3bd4e..8185d0bbb0 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "@rollup/plugin-json": "^4.0.2", "babel-eslint": "^10.0.3", "eslint": "^6.8.0", + "eslint-plugin-cypress": "^2.11.1", "eslint-plugin-prettier": "^3.1.2", "eslint-plugin-svelte3": "^2.7.3", "lerna": "3.14.1", @@ -31,4 +32,4 @@ "@material/icon-button": "4.0.0", "date-fns": "^2.10.0" } -} \ No newline at end of file +} diff --git a/packages/builder/cypress/plugins/index.js b/packages/builder/cypress/plugins/index.js deleted file mode 100644 index aa9918d215..0000000000 --- a/packages/builder/cypress/plugins/index.js +++ /dev/null @@ -1,21 +0,0 @@ -/// -// *********************************************************** -// This example plugins/index.js can be used to load plugins -// -// You can change the location of this file or turn off loading -// the plugins file with the 'pluginsFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/plugins-guide -// *********************************************************** - -// This function is called when a project is opened or re-opened (e.g. due to -// the project's config changing) - -/** - * @type {Cypress.PluginConfig} - */ -module.exports = (on, config) => { - // `on` is used to hook into various events Cypress emits - // `config` is the resolved Cypress config -} diff --git a/packages/builder/cypress/setup.js b/packages/builder/cypress/setup.js index b737f3ef2e..aca5ed627f 100644 --- a/packages/builder/cypress/setup.js +++ b/packages/builder/cypress/setup.js @@ -3,8 +3,8 @@ // 2. Initialises using `.budibase-cypress` // 3. Runs the server using said folder -const rimraf = require("rimraf"); -const homedir = require('os').homedir() + '/.budibase-cypress'; +const rimraf = require("rimraf") +const homedir = require("os").homedir() + "/.budibase-cypress" const { execSync } = require("child_process") rimraf.sync(homedir) diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index 8e8c31d798..ed19ba8233 100644 --- a/packages/builder/cypress/support/commands.js +++ b/packages/builder/cypress/support/commands.js @@ -25,76 +25,81 @@ // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) Cypress.Commands.add("createApp", (name, description) => { - cy.get('.banner-button') - .click() - .get('input[name="name"]') - .type(name).should('have.value', name) + cy.get(".banner-button") + .click() + .get('input[name="name"]') + .type(name) + .should("have.value", name) - cy.get('textarea[name="description"]') - .type(description).should('have.value', description) + cy.get('textarea[name="description"]') + .type(description) + .should("have.value", description) - cy.contains('Save').click() + cy.contains("Save").click() }) Cypress.Commands.add("createModel", (modelName, firstField, secondField) => { - // Enter model name - cy.get('[data-cy=Name]').click() - .type(modelName) + // Enter model name + cy.get("[data-cy=Name]") + .click() + .type(modelName) - // Add 'name' field - cy.get('[data-cy=add-new-model-field]').click() - cy.get('[data-cy=Name]').click() - .type(firstField) - cy.contains('Save').click() + // Add 'name' field + cy.get("[data-cy=add-new-model-field]").click() + cy.get("[data-cy=Name]") + .click() + .type(firstField) + cy.contains("Save").click() + // Add 'age' field + cy.get("[data-cy=add-new-model-field]").click() - // Add 'age' field - cy.get('[data-cy=add-new-model-field]').click() + cy.get("[data-cy=Name]") + .click() + .type(secondField) + cy.get("select").select("number") + cy.contains("Save").click() + cy.contains(secondField).should("exist") - cy.get('[data-cy=Name]').click() - .type(secondField) - cy.get('select').select('number') - cy.contains('Save').click() - cy.contains(secondField).should('exist') - - // Save model - cy.contains('Save').click() + // Save model + cy.contains("Save").click() }) Cypress.Commands.add("addRecord", (firstField, secondField) => { - cy.contains('Create new record') - .click() + cy.contains("Create new record").click() - cy.get('[data-cy=name-input]').click().type(firstField) - cy.get('[data-cy=age-input]').click().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() + // Save + cy.contains("Save").click() }) Cypress.Commands.add("createUser", (username, password, level) => { - // Create User - cy.get('.nav-group-header > .ri-add-line') - .click() + // Create User + cy.get(".nav-group-header > .ri-add-line").click() - cy.get('[data-cy=username]').type(username) - cy.get('[data-cy=password]').type(password) - cy.get('[data-cy=accessLevel]').select(level) + cy.get("[data-cy=username]").type(username) + cy.get("[data-cy=password]").type(password) + cy.get("[data-cy=accessLevel]").select(level) - // Save - cy.contains('Save').click() + // Save + cy.contains("Save").click() }) -Cypress.Commands.add("addHeadlineComponent", (text) => { - cy.get('.switcher > :nth-child(2)').click() +Cypress.Commands.add("addHeadlineComponent", text => { + cy.get(".switcher > :nth-child(2)").click() - cy.get('[data-cy=Text]').click() - cy.get('[data-cy=Headline]').click() - cy.get('.tabs > :nth-child(2)').click() - cy.get('input[type="text"]') - .type(text) - cy.contains('Design').click() + cy.get("[data-cy=Text]").click() + cy.get("[data-cy=Headline]").click() + cy.get(".tabs > :nth-child(2)").click() + cy.get('input[type="text"]').type(text) + cy.contains("Design").click() }) -Cypress.Commands.add("addButtonComponent", (text) => { - cy.get('.switcher > :nth-child(2)').click() +Cypress.Commands.add("addButtonComponent", () => { + cy.get(".switcher > :nth-child(2)").click() - cy.get('[data-cy=Button]').click() -}) \ No newline at end of file + cy.get("[data-cy=Button]").click() +}) diff --git a/packages/builder/cypress/support/index.js b/packages/builder/cypress/support/index.js index d68db96df2..a80764cb2c 100644 --- a/packages/builder/cypress/support/index.js +++ b/packages/builder/cypress/support/index.js @@ -14,7 +14,7 @@ // *********************************************************** // Import commands.js using ES2015 syntax: -import './commands' +import "./commands" // Alternatively you can use CommonJS syntax: // require('./commands') diff --git a/packages/builder/package.json b/packages/builder/package.json index 56ee5135e3..49331426b4 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -41,6 +41,11 @@ "/node_modules/(?!svelte).+\\.js$" ] }, + "eslintConfig": { + "extends": [ + "plugin:cypress/recommended" + ] + }, "dependencies": { "@beyonk/svelte-notifications": "^2.0.3", "@budibase/bbui": "^1.1.1", diff --git a/yarn.lock b/yarn.lock index bb8ac784f1..cd956d394d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1980,6 +1980,13 @@ escape-string-regexp@^1.0.5: resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= +eslint-plugin-cypress@^2.11.1: + version "2.11.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-cypress/-/eslint-plugin-cypress-2.11.1.tgz#a945e2774b88211e2c706a059d431e262b5c2862" + integrity sha512-MxMYoReSO5+IZMGgpBZHHSx64zYPSPTpXDwsgW7ChlJTF/sA+obqRbHplxD6sBStE+g4Mi0LCLkG4t9liu//mQ== + dependencies: + globals "^11.12.0" + eslint-plugin-prettier@^3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.2.tgz#432e5a667666ab84ce72f945c72f77d996a5c9ba" @@ -2526,7 +2533,7 @@ glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4: once "^1.3.0" path-is-absolute "^1.0.0" -globals@^11.1.0: +globals@^11.1.0, globals@^11.12.0: version "11.12.0" resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== From 47762bd0d56a51617560c1baf4a7c3cde63546df Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Thu, 11 Jun 2020 18:15:29 +0200 Subject: [PATCH 16/46] update instructions in contributing --- CONTRIBUTING.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ac35a4277d..9d473198b9 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -170,12 +170,14 @@ Follow from **Step 3. Install and Build** in the setup guide above. You should h #### End-to-end Tests -Budibase uses Cypress to run a number of E2E tests. To run the tests execute the following command: +Budibase uses Cypress to run a number of E2E tests. To run the tests execute the following command in the root folder: ``` yarn test:e2e ``` +Or if you are in the builder you can run `yarn cy:test`. + ### Other Useful Information From ce6ca5351d6c5f50bd1adfd70fe8e184b5820269 Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Thu, 11 Jun 2020 20:37:01 +0100 Subject: [PATCH 17/46] changed setup to require CLI modules directly --- packages/builder/cypress/setup.js | 12 ++++++++---- packages/cli/src/commands/init/initHandler.js | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/builder/cypress/setup.js b/packages/builder/cypress/setup.js index aca5ed627f..9682a07118 100644 --- a/packages/builder/cypress/setup.js +++ b/packages/builder/cypress/setup.js @@ -4,10 +4,14 @@ // 3. Runs the server using said folder const rimraf = require("rimraf") -const homedir = require("os").homedir() + "/.budibase-cypress" -const { execSync } = require("child_process") +const { join } = require("path") +const homedir = join(require("os").homedir(), ".budibase-cypress") +const init = require("../../cli/src/commands/init/initHandler") +const run = require("../../cli/src/commands/run/runHandler") rimraf.sync(homedir) -execSync(`../../packages/cli/bin/budi init -d ${homedir}`) -execSync(`../../packages/cli/bin/budi run -d ${homedir}`) +init({ dir: homedir }) +.then(() => { + run({ dir: homedir }) +}) diff --git a/packages/cli/src/commands/init/initHandler.js b/packages/cli/src/commands/init/initHandler.js index c0c4ad1b9e..3fe4134447 100644 --- a/packages/cli/src/commands/init/initHandler.js +++ b/packages/cli/src/commands/init/initHandler.js @@ -7,7 +7,7 @@ const Sqrl = require("squirrelly") const uuid = require("uuid") module.exports = opts => { - run(opts) + return run(opts) } const run = async opts => { From 19d132c6c24b35a185f5426ee681d0a50eb3c2db Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Fri, 12 Jun 2020 20:42:55 +0100 Subject: [PATCH 18/46] removal of appRoot - appId comes in cookie --- packages/builder/cypress/plugins/index.js | 21 +++ .../builder/src/builderStore/store/index.js | 56 ++---- .../builder/src/builderStore/storeUtils.js | 13 ++ .../common/Inputs/InputGroup.svelte | 7 +- .../AppPreview/CurrentItemPreview.svelte | 40 +++-- .../AppPreview/CurrentItemPreview.svelte.orig | 161 ++++++++++++++++++ .../AppPreview/iframeTemplate.js | 1 + .../ComponentPropertiesPanel.svelte | 26 +-- .../components/userInterface/PagesList.svelte | 4 +- .../userInterface/SettingsView.svelte | 40 +++++ .../userInterface/propertyCategories.js | 82 +++++++-- .../userInterface/temporaryPanelStructure.js | 12 ++ packages/client/src/api/index.js | 5 +- packages/client/src/createApp.js | 11 +- packages/client/src/index.js | 9 +- packages/client/src/render/getAppId.js | 5 + packages/client/src/render/screenRouter.js | 16 +- packages/client/src/state/bbComponentApi.js | 14 +- packages/client/src/state/eventHandlers.js | 3 +- packages/client/src/state/stateManager.js | 5 +- packages/client/tests/testAppDef.js | 9 +- .../src/Test/createApp.js | 8 +- packages/server/package.json | 2 +- packages/server/src/api/controllers/auth.js | 12 +- packages/server/src/api/controllers/model.js | 32 +++- packages/server/src/api/controllers/record.js | 11 +- packages/server/src/api/controllers/static.js | 30 +++- packages/server/src/api/index.js | 9 + packages/server/src/api/routes/auth.js | 2 +- packages/server/src/api/routes/index.js | 2 + packages/server/src/api/routes/model.js | 38 +---- packages/server/src/api/routes/record.js | 36 ++++ packages/server/src/api/routes/static.js | 5 +- .../src/api/routes/tests/couchTestUtils.js | 4 + .../server/src/api/routes/tests/model.spec.js | 47 ++++- .../src/api/routes/tests/record.spec.js | 24 +++ .../server/src/utilities/builder/buildPage.js | 6 +- .../src/utilities/builder/index.template.html | 8 +- packages/standard-components/components.json | 7 + .../public/clientAppDefinition.js | 1 - packages/standard-components/src/Embed.svelte | 5 + packages/standard-components/src/Login.svelte | 19 +-- .../standard-components/src/Test/createApp.js | 2 +- packages/standard-components/src/index.js | 1 + 44 files changed, 616 insertions(+), 235 deletions(-) create mode 100644 packages/builder/cypress/plugins/index.js create mode 100644 packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte.orig create mode 100644 packages/client/src/render/getAppId.js create mode 100644 packages/server/src/api/routes/record.js create mode 100644 packages/standard-components/src/Embed.svelte diff --git a/packages/builder/cypress/plugins/index.js b/packages/builder/cypress/plugins/index.js new file mode 100644 index 0000000000..aa9918d215 --- /dev/null +++ b/packages/builder/cypress/plugins/index.js @@ -0,0 +1,21 @@ +/// +// *********************************************************** +// This example plugins/index.js can be used to load plugins +// +// You can change the location of this file or turn off loading +// the plugins file with the 'pluginsFile' configuration option. +// +// You can read more here: +// https://on.cypress.io/plugins-guide +// *********************************************************** + +// This function is called when a project is opened or re-opened (e.g. due to +// the project's config changing) + +/** + * @type {Cypress.PluginConfig} + */ +module.exports = (on, config) => { + // `on` is used to hook into various events Cypress emits + // `config` is the resolved Cypress config +} diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index 9f91550bca..1f3ea9c0ef 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -5,7 +5,6 @@ import { writable, get } from "svelte/store" import api from "../api" import { DEFAULT_PAGES_OBJECT } from "../../constants" import { getExactComponent } from "components/userInterface/pagesParsing/searchComponents" -import { rename } from "components/userInterface/pagesParsing/renameScreen" import { createProps, makePropsSafe, @@ -24,6 +23,7 @@ import { saveCurrentPreviewItem as _saveCurrentPreviewItem, saveScreenApi as _saveScreenApi, regenerateCssForCurrentScreen, + renameCurrentScreen, } from "../storeUtils" export const getStore = () => { @@ -52,7 +52,6 @@ export const getStore = () => { store.createDatabaseForApp = backendStoreActions.createDatabaseForApp(store) store.saveScreen = saveScreen(store) - store.renameScreen = renameScreen(store) store.deleteScreen = deleteScreen(store) store.setCurrentScreen = setCurrentScreen(store) store.setCurrentPage = setCurrentPage(store) @@ -63,6 +62,7 @@ export const getStore = () => { store.addChildComponent = addChildComponent(store) store.selectComponent = selectComponent(store) store.setComponentProp = setComponentProp(store) + store.setPageOrScreenProp = setPageOrScreenProp(store) store.setComponentStyle = setComponentStyle(store) store.setComponentCode = setComponentCode(store) store.setScreenType = setScreenType(store) @@ -207,46 +207,6 @@ const deleteScreen = store => name => { }) } -const renameScreen = store => (oldname, newname) => { - store.update(s => { - const { screens, pages, error, changedScreens } = rename( - s.pages, - s.screens, - oldname, - newname - ) - - if (error) { - // should really do something with this - return s - } - - s.screens = screens - s.pages = pages - if (s.currentPreviewItem.name === oldname) - s.currentPreviewItem.name = newname - - const saveAllChanged = async () => { - for (let screenName of changedScreens) { - const changedScreen = getExactComponent(screens, screenName) - await api.post(`/_builder/api/${s.appId}/screen`, changedScreen) - } - } - - api - .patch(`/_builder/api/${s.appId}/screen`, { - oldname, - newname, - }) - .then(() => saveAllChanged()) - .then(() => { - _savePage(s) - }) - - return s - }) -} - const savePage = store => async page => { store.update(state => { if (state.currentFrontEndType !== "page" || !state.currentPageName) { @@ -400,6 +360,18 @@ const setComponentProp = store => (name, value) => { }) } +const setPageOrScreenProp = store => (name, value) => { + store.update(state => { + if (name === "name" && state.currentFrontEndType === "screen") { + state = renameCurrentScreen(value, state) + } else { + state.currentPreviewItem[name] = value + _saveCurrentPreviewItem(state) + } + return state + }) +} + const setComponentStyle = store => (type, name, value) => { store.update(state => { if (!state.currentComponentInfo._styles) { diff --git a/packages/builder/src/builderStore/storeUtils.js b/packages/builder/src/builderStore/storeUtils.js index d6aa4d0308..ff951e6b6f 100644 --- a/packages/builder/src/builderStore/storeUtils.js +++ b/packages/builder/src/builderStore/storeUtils.js @@ -45,6 +45,19 @@ export const saveScreenApi = (screen, s) => { .then(() => savePage(s)) } +export const renameCurrentScreen = (newname, state) => { + const oldname = state.currentPreviewItem.name + state.currentPreviewItem.name = newname + api.patch( + `/_builder/api/${state.appId}/pages/${state.currentPageName}/screen`, + { + oldname, + newname, + } + ) + return state +} + export const walkProps = (props, action, cancelToken = null) => { cancelToken = cancelToken || { cancelled: false } action(props, () => { diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte index e5fed68103..385623ca19 100644 --- a/packages/builder/src/components/common/Inputs/InputGroup.svelte +++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte @@ -19,9 +19,10 @@ onChange(_value) } - $: displayValues = value && suffix - ? value.map(v => v.replace(new RegExp(`${suffix}$`), "")) - : value || [] + $: displayValues = + value && suffix + ? value.map(v => v.replace(new RegExp(`${suffix}$`), "")) + : value || []
    diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte index 53450c2200..f97f91df6b 100644 --- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte @@ -21,7 +21,7 @@ return componentName || "element" } - const screenPlaceholder = { + const screenPlaceholder = { name: "Screen Placeholder", route: "*", props: { @@ -60,9 +60,8 @@ }, } - $: hasComponent = !!$store.currentPreviewItem - + $: { styles = "" // Apply the CSS from the currently selected page and its screens @@ -88,11 +87,10 @@ libraries: $store.libraries, page: $store.pages[$store.currentPageName], screens: [ - $store.currentFrontEndType === "page" - ? screenPlaceholder - : $store.currentPreviewItem, + $store.currentFrontEndType === "page" + ? screenPlaceholder + : $store.currentPreviewItem, ], - appRootPath: "", } $: selectedComponentType = getComponentTypeName($store.currentComponentInfo) @@ -102,20 +100,26 @@ : "" const refreshContent = () => { - iframe.contentWindow.postMessage(JSON.stringify({ - styles, - stylesheetLinks, - selectedComponentType, - selectedComponentId, - frontendDefinition, - })) + iframe.contentWindow.postMessage( + JSON.stringify({ + styles, + stylesheetLinks, + selectedComponentType, + selectedComponentId, + frontendDefinition, + appId: $store.appId, + }) + ) } - $: if(iframe) iframe.contentWindow.addEventListener("bb-ready", refreshContent, { once: true }) + $: if (iframe) + iframe.contentWindow.addEventListener("bb-ready", refreshContent, { + once: true, + }) - $: if(iframe && frontendDefinition) { - refreshContent() - } + $: if (iframe && frontendDefinition) { + refreshContent() + }
    diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte.orig b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte.orig new file mode 100644 index 0000000000..81c3624274 --- /dev/null +++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte.orig @@ -0,0 +1,161 @@ + + +
    + {#if hasComponent && $store.currentPreviewItem} +