From b6f8d74e010691c7707e3bc5a586a21da86a8713 Mon Sep 17 00:00:00 2001 From: Mitch-Budibase Date: Mon, 27 Sep 2021 18:19:25 +0100 Subject: [PATCH] Cypress Testing additions and changes -Changing baseurl to be the test env -Made a few updates to existing tests/commands --New commands also added -Add Radio Button Test -Add Multi Option Datatype test -Custom Theming Properties Test --Just the one so far, more to come --- packages/builder/cypress.json | 2 +- .../addMultiOptionDatatype.spec.js | 40 ++++++++++++ .../integration/addRadioButtons.spec.js | 39 ++++++++++++ .../cypress/integration/createApp.spec.js | 2 +- .../cypress/integration/createTable.spec.js | 2 +- .../cypress/integration/createView.spec.js | 13 ++-- .../customThemingProperties.spec.js | 61 +++++++++++++++++++ packages/builder/cypress/setup.js | 2 +- packages/builder/cypress/support/commands.js | 54 +++++++++++++--- 9 files changed, 200 insertions(+), 15 deletions(-) create mode 100644 packages/builder/cypress/integration/addMultiOptionDatatype.spec.js create mode 100644 packages/builder/cypress/integration/addRadioButtons.spec.js create mode 100644 packages/builder/cypress/integration/customThemingProperties.spec.js diff --git a/packages/builder/cypress.json b/packages/builder/cypress.json index 0908f2c839..cd63e19b01 100644 --- a/packages/builder/cypress.json +++ b/packages/builder/cypress.json @@ -1,5 +1,5 @@ { - "baseUrl": "http://localhost:10001/builder/", + "baseUrl": "https://test.budi.live/builder/", "video": true, "projectId": "bmbemn", "env": { diff --git a/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js b/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js new file mode 100644 index 0000000000..5d4860ccec --- /dev/null +++ b/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js @@ -0,0 +1,40 @@ +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() + cy.wait(500) + // Add data provider + cy.get(`[data-cy="category-Data Provider"]`).click() + cy.get('[data-cy="dataSource-prop-control"]').click() + cy.get(".dropdown").contains("Multi Data").click() + cy.wait(500) + // Add Form with schema to match table + cy.addComponent("Form", "Form") + cy.get('[data-cy="dataSource-prop-control"').click() + cy.get(".dropdown").contains("Multi Data").click() + cy.wait(500) + // Add multi-select picker to form + cy.addComponent("Form", "Multi-select Picker").then((componentId) => { + cy.get('[data-cy="field-prop-control"]').type("Test Data").type('{enter}') + cy.getComponent(componentId).click() + // Check picker has 5 items + cy.getComponent(componentId).find('li').should('have.length', 5) + // Select all items + for (let i = 1; i < 6; i++) { + cy.getComponent(componentId).find('li').contains(i).click() + } + // Check items have been selected + cy.getComponent(componentId).find('.spectrum-Picker-label').contains("(5)") + }) + }) +}) \ No newline at end of file diff --git a/packages/builder/cypress/integration/addRadioButtons.spec.js b/packages/builder/cypress/integration/addRadioButtons.spec.js new file mode 100644 index 0000000000..ef16a02137 --- /dev/null +++ b/packages/builder/cypress/integration/addRadioButtons.spec.js @@ -0,0 +1,39 @@ +context("Add Radio Buttons", () => { + before(() => { + cy.login() + cy.createTestApp() + }) + +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) + }) + }) + + const addRadioButtonData = (totalRadioButtons) => { + cy.get(`[data-cy="optionsSource-prop-control"]`).click().then(() => { + cy.get('.spectrum-Popover').contains('Custom') + .wait(500) + .click() + }) + cy.addCustomSourceOptions(totalRadioButtons) + } +}) + + + + diff --git a/packages/builder/cypress/integration/createApp.spec.js b/packages/builder/cypress/integration/createApp.spec.js index 34f152b540..21732b9f3a 100644 --- a/packages/builder/cypress/integration/createApp.spec.js +++ b/packages/builder/cypress/integration/createApp.spec.js @@ -2,7 +2,7 @@ context("Create an Application", () => { it("should create a new application", () => { cy.login() cy.createTestApp() - cy.visit(`localhost:${Cypress.env("PORT")}/builder`) + cy.visit(`https://test.budi.live/builder`) cy.contains("Cypress Tests").should("exist") }) }) diff --git a/packages/builder/cypress/integration/createTable.spec.js b/packages/builder/cypress/integration/createTable.spec.js index eda72ba36d..5be32e2a18 100644 --- a/packages/builder/cypress/integration/createTable.spec.js +++ b/packages/builder/cypress/integration/createTable.spec.js @@ -38,7 +38,7 @@ context("Create a Table", () => { cy.wait(1000) cy.get(".spectrum-Modal input").type("Updated") cy.contains("Save").click() - cy.contains("RoverUpdated").should("have.text", "RoverUpdated") + cy.contains("Updated").should("have.text", "Updated") }) it("deletes a row", () => { diff --git a/packages/builder/cypress/integration/createView.spec.js b/packages/builder/cypress/integration/createView.spec.js index 3aef927e8d..aab8845836 100644 --- a/packages/builder/cypress/integration/createView.spec.js +++ b/packages/builder/cypress/integration/createView.spec.js @@ -1,3 +1,7 @@ +Cypress.on('uncaught:exception', (err, runnable) => { + return false; +}); + context("Create a View", () => { before(() => { cy.login() @@ -57,6 +61,7 @@ context("Create a View", () => { }) it("creates a stats calculation view based on age", () => { + cy.wait(1000) cy.contains("Calculate").click() cy.get(".modal-inner-wrapper").within(() => { cy.get(".spectrum-Picker-label").eq(0).click() @@ -65,7 +70,7 @@ context("Create a View", () => { cy.get(".spectrum-Picker-label").eq(1).click() cy.contains("age").click({ force: true }) - cy.contains("Save").click() + cy.get(".spectrum-Button").contains("Save").click({ force: true }) }) cy.wait(1000) @@ -126,7 +131,7 @@ context("Create a View", () => { cy.contains(".nav-item", "Test View") .find(".actions .icon") .click({ force: true }) - cy.contains("Edit").click() + cy.get(".spectrum-Menu-itemLabel").contains("Edit").click() cy.get(".modal-inner-wrapper").within(() => { cy.get("input").type(" Updated") cy.contains("Save").click() @@ -141,8 +146,8 @@ context("Create a View", () => { .click({ force: true }) cy.contains("Delete").click() cy.contains("Delete View").click() - cy.wait(1000) - cy.contains("TestView Updated").should("not.be.visible") + cy.wait(500) + cy.contains("TestView Updated").should("not.exist") }) }) diff --git a/packages/builder/cypress/integration/customThemingProperties.spec.js b/packages/builder/cypress/integration/customThemingProperties.spec.js new file mode 100644 index 0000000000..f0004b1343 --- /dev/null +++ b/packages/builder/cypress/integration/customThemingProperties.spec.js @@ -0,0 +1,61 @@ +context("Custom Theming Properties", () => { + before(() => { + cy.login() + cy.createTestApp() + cy.navigateToFrontend() + }) + + // Default Values + // Button roundness = Large + // Primary colour = Blue 600 + // Primary colour (hover) = Blue 500 + // Navigation bar background colour = Gray 100 + // Navigation bar text colour = Gray 800 + it("should reset the color property values", () => { + // Open Theme modal and change colours + cy.get(".spectrum-ActionButton-label").contains("Theme").click() + cy.get(".spectrum-Picker").contains("Large").click() + .parents() + .get(".spectrum-Menu-itemLabel").contains("None").click() + changeThemeColors() + // Reset colours + cy.get(".spectrum-Button-label").contains("Reset").click({force: true}) + // Check values have reset + checkThemeColorDefaults() + }) + + const changeThemeColors = () => { + // Changes the theme colours + cy.get(".spectrum-FieldLabel").contains("Primary color") + .parent().find(".container.svelte-z3cm5a").click() + .find('[title="Red 400"]').click() + cy.get(".spectrum-FieldLabel").contains("Primary color (hover)") + .parent().find(".container.svelte-z3cm5a").click() + .find('[title="Orange 400"]').click() + cy.get(".spectrum-FieldLabel").contains("Navigation bar background color") + .parent().find(".container.svelte-z3cm5a").click() + .find('[title="Yellow 400"]').click() + cy.get(".spectrum-FieldLabel").contains("Navigation bar text color") + .parent().find(".container.svelte-z3cm5a").click() + .find('[title="Green 400"]').click() + } + + const checkThemeColorDefaults = () => { + cy.get(".spectrum-FieldLabel").contains("Primary color") + .parent().find(".container.svelte-z3cm5a").click() + .get('[title="Blue 600"]').children().find('[aria-label="Checkmark"]') + cy.get(".spectrum-Dialog-grid").click() + cy.get(".spectrum-FieldLabel").contains("Primary color (hover)") + .parent().find(".container.svelte-z3cm5a").click() + .get('[title="Blue 500"]').children().find('[aria-label="Checkmark"]') + cy.get(".spectrum-Dialog-grid").click() + cy.get(".spectrum-FieldLabel").contains("Navigation bar background color") + .parent().find(".container.svelte-z3cm5a").click() + .get('[title="Gray 100"]').children().find('[aria-label="Checkmark"]') + cy.get(".spectrum-Dialog-grid").click() + cy.get(".spectrum-FieldLabel").contains("Navigation bar text color") + .parent().find(".container.svelte-z3cm5a").click() + .get('[title="Gray 800"]').children().find('[aria-label="Checkmark"]') + } + +}) \ No newline at end of file diff --git a/packages/builder/cypress/setup.js b/packages/builder/cypress/setup.js index 1a6f1d5b2b..e636f6aeb9 100644 --- a/packages/builder/cypress/setup.js +++ b/packages/builder/cypress/setup.js @@ -16,7 +16,7 @@ process.env.PORT = MAIN_PORT process.env.JWT_SECRET = cypressConfig.env.JWT_SECRET process.env.COUCH_URL = `leveldb://${tmpdir}/.data/` process.env.SELF_HOSTED = 1 -process.env.WORKER_URL = "http://localhost:10002/" +process.env.WORKER_URL = "https://test.budi.live/" process.env.MINIO_URL = `http://localhost:${MAIN_PORT}/` process.env.MINIO_ACCESS_KEY = "budibase" process.env.MINIO_SECRET_KEY = "budibase" diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index ea6ca81e66..f977ec01ec 100644 --- a/packages/builder/cypress/support/commands.js +++ b/packages/builder/cypress/support/commands.js @@ -6,8 +6,8 @@ // Cypress.Commands.add("login", () => { - cy.visit(`localhost:${Cypress.env("PORT")}/builder`) - cy.wait(500) + cy.visit(`https://test.budi.live/builder`) + cy.wait(2000) cy.url().then(url => { if (url.includes("builder/admin")) { // create admin user @@ -22,15 +22,17 @@ Cypress.Commands.add("login", () => { cy.get("input").first().type("test@test.com") cy.get('input[type="password"]').type("test") cy.get("button").first().click() + cy.wait(1000) }) } }) }) Cypress.Commands.add("createApp", name => { - cy.visit(`localhost:${Cypress.env("PORT")}/builder`) + cy.visit(`https://test.budi.live/builder`) cy.wait(500) cy.contains(/Create (new )?app/).click() + cy.wait(500) cy.get(".spectrum-Modal") .within(() => { cy.get("input").eq(0).type(name).should("have.value", name).blur() @@ -43,9 +45,9 @@ Cypress.Commands.add("createApp", name => { }) Cypress.Commands.add("deleteApp", () => { - cy.visit(`localhost:${Cypress.env("PORT")}/builder`) + cy.visit(`https://test.budi.live/builder`) cy.wait(1000) - cy.request(`localhost:${Cypress.env("PORT")}/api/applications?status=all`) + cy.request(`https://test.budi.live/api/applications?status=all`) .its("body") .then(val => { console.log(val) @@ -80,7 +82,7 @@ Cypress.Commands.add("createTable", tableName => { cy.contains(tableName).should("be.visible") }) -Cypress.Commands.add("addColumn", (tableName, columnName, type) => { +Cypress.Commands.add("addColumn", (tableName, columnName, type, multiOptions = null) => { // Select Table cy.selectTable(tableName) cy.contains(".nav-item", tableName).click() @@ -95,6 +97,11 @@ Cypress.Commands.add("addColumn", (tableName, columnName, type) => { cy.get(".spectrum-Picker-label").click() cy.contains(type).click() + // Add options for Multi-select Type + if(multiOptions !== null){ + cy.get(".spectrum-Textfield-input").eq(1).type(multiOptions) + } + cy.contains("Save Column").click() }) }) @@ -109,6 +116,19 @@ Cypress.Commands.add("addRow", values => { }) }) +Cypress.Commands.add("addRowMultiValue", values => { + cy.contains("Create row").click() + cy.get(".spectrum-Form-itemField").click().then(() => { + cy.get(".spectrum-Popover").within(() => { + for (let i = 0; i < values.length; i++) { + cy.get(".spectrum-Menu-item").eq(i).click() + } + }) + cy.get(".spectrum-Dialog-grid").click('top') + cy.get(".spectrum-ButtonGroup").contains("Create").click() + }) +}) + Cypress.Commands.add("createUser", email => { // quick hacky recorded way to create a user cy.contains("Users").click() @@ -127,7 +147,9 @@ Cypress.Commands.add("addComponent", (category, component) => { if (category) { cy.get(`[data-cy="category-${category}"]`).click() } - cy.get(`[data-cy="component-${component}"]`).click() + if (component){ + cy.get(`[data-cy="component-${component}"]`).click() + } cy.wait(1000) cy.location().then(loc => { const params = loc.pathname.split("/") @@ -149,8 +171,11 @@ Cypress.Commands.add("getComponent", componentId => { }) Cypress.Commands.add("navigateToFrontend", () => { + // Clicks on Design tab and then the Home nav item cy.wait(1000) cy.contains("Design").click() + cy.get(".spectrum-Search").type("/") + cy.get(".nav-item").contains("Home").click() }) Cypress.Commands.add("createScreen", (screenName, route) => { @@ -173,3 +198,18 @@ Cypress.Commands.add("selectTable", tableName => { cy.expandBudibaseConnection() cy.contains(".nav-item", tableName).click() }) + +Cypress.Commands.add("addCustomSourceOptions", totalOptions => { + cy.get(".spectrum-ActionButton").contains("Define Options").click().then(() => { + for (let i = 0; i < totalOptions; i++) { + // Add radio button options + cy.get(".spectrum-Button").contains("Add Option").click({force: true}).then(() => { + cy.wait(500) + cy.get("[placeholder='Label']").eq(i).type(i) + cy.get("[placeholder='Value']").eq(i).type(i) + }) + } + // Save options + cy.get(".spectrum-Button").contains("Save").click({force: true}) + }) +}) \ No newline at end of file