diff --git a/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js b/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js new file mode 100644 index 0000000000..bc2619c53d --- /dev/null +++ b/packages/builder/cypress/integration/addMultiOptionDatatype.spec.js @@ -0,0 +1,41 @@ +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.wait(1000) + cy.getComponent(componentId).contains("Choose some options").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)") + }) + }) +}) diff --git a/packages/builder/cypress/integration/addRadioButtons.spec.js b/packages/builder/cypress/integration/addRadioButtons.spec.js new file mode 100644 index 0000000000..68d0a74d55 --- /dev/null +++ b/packages/builder/cypress/integration/addRadioButtons.spec.js @@ -0,0 +1,35 @@ +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/createTable.spec.js b/packages/builder/cypress/integration/createTable.spec.js index 876894e5aa..ccb9ae7929 100644 --- a/packages/builder/cypress/integration/createTable.spec.js +++ b/packages/builder/cypress/integration/createTable.spec.js @@ -37,7 +37,7 @@ context("Create a Table", () => { cy.get(".spectrum-Modal input").clear() cy.get(".spectrum-Modal input").type("RoverUpdated") 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 62d0740a39..e82ab67c0d 100644 --- a/packages/builder/cypress/integration/createView.spec.js +++ b/packages/builder/cypress/integration/createView.spec.js @@ -62,7 +62,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) @@ -123,7 +123,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() @@ -138,8 +138,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..47cb81a8a6 --- /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"]') + } + +}) diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index cbdaa27270..c8e01435aa 100644 --- a/packages/builder/cypress/support/commands.js +++ b/packages/builder/cypress/support/commands.js @@ -5,9 +5,13 @@ // *********************************************** // +Cypress.on('uncaught:exception', (err, runnable) => { + return false +}) + Cypress.Commands.add("login", () => { cy.visit(`localhost:${Cypress.env("PORT")}/builder`) - cy.wait(500) + cy.wait(2000) cy.url().then(url => { if (url.includes("builder/admin")) { // create admin user @@ -22,6 +26,7 @@ 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) }) } }) @@ -100,24 +105,32 @@ Cypress.Commands.add("createTable", tableName => { cy.contains(tableName).should("be.visible") }) -Cypress.Commands.add("addColumn", (tableName, columnName, type) => { - // Select Table - cy.selectTable(tableName) - cy.contains(".nav-item", tableName).click() - cy.contains("Create column").click() +Cypress.Commands.add( + "addColumn", + (tableName, columnName, type, multiOptions = null) => { + // Select Table + cy.selectTable(tableName) + cy.contains(".nav-item", tableName).click() + cy.contains("Create column").click() - // Configure column - cy.get(".spectrum-Modal").within(() => { - cy.get("input").first().type(columnName).blur() + // Configure column + cy.get(".spectrum-Modal").within(() => { + cy.get("input").first().type(columnName).blur() - // Unset table display column - cy.contains("display column").click({ force: true }) - cy.get(".spectrum-Picker-label").click() - cy.contains(type).click() + // Unset table display column + cy.contains("display column").click({ force: true }) + cy.get(".spectrum-Picker-label").click() + cy.contains(type).click() - cy.contains("Save Column").click() - }) -}) + // Add options for Multi-select Type + if (multiOptions !== null) { + cy.get(".spectrum-Textfield-input").eq(1).type(multiOptions) + } + + cy.contains("Save Column").click() + }) + } +) Cypress.Commands.add("addRow", values => { cy.contains("Create row").click() @@ -129,6 +142,21 @@ 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() @@ -147,7 +175,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("/") @@ -169,8 +199,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) => { @@ -193,3 +226,24 @@ 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 }) + }) +})