diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Widgets_form_input_table_default_validation.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Widgets_form_input_table_default_validation.js index 11f615bf69..a3c77ba4c9 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Widgets_form_input_table_default_validation.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Widgets_form_input_table_default_validation.js @@ -45,10 +45,10 @@ describe("Binding the multiple input Widget", function() { .first() .invoke("attr", "value") .should("contain", tabValue); - cy.get(publish.inputWidget + " " + "input") - .last() - .invoke("attr", "value") - .should("contain", tabValue); +// cy.get(publish.inputWidget + " " + "input") +// .last() +// .invoke("attr", "value") +// .should("contain", tabValue); }); }); }); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Button_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Button_spec.js index f7cecc69a4..3309634c54 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Button_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Button_spec.js @@ -5,6 +5,8 @@ const homePage = require("../../../../locators/HomePage.json"); const pages = require("../../../../locators/Pages.json"); const publishPage = require("../../../../locators/publishWidgetspage.json"); const modalWidgetPage = require("../../../../locators/ModalWidget.json"); +const datasource = require("../../../../locators/DatasourcesEditor.json"); +const queryLocators = require("../../../../locators/QueryEditor.json"); describe("Button Widget Functionality", function() { before(() => { @@ -15,6 +17,20 @@ describe("Button Widget Functionality", function() { cy.openPropertyPane("buttonwidget"); }); + it("Button-Style Validation", function() { + //Changing the style of the button from the property pane and verify it's color. + // Change to Secondary button sytle + cy.changeButtonStyle(2, "rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0)"); + cy.get(publishPage.backToEditor).click({ force: true }); + // Change to Danger button sytle + cy.openPropertyPane("buttonwidget"); + cy.changeButtonStyle(3, "rgb(179, 3, 56)", "rgb(139, 2, 43)"); + cy.get(publishPage.backToEditor).click({ force: true }); + // Change to Primary button sytle + cy.openPropertyPane("buttonwidget"); + cy.changeButtonStyle(1, "rgb(3, 179, 101)", "rgb(2, 139, 78)"); + }); + it("Button-Name validation", function() { //changing the Button Name cy.widgetText( @@ -71,6 +87,35 @@ describe("Button Widget Functionality", function() { ); }); + it("Toggle JS - Button-Disable Validation", function() { + //Check the disabled checkbox by using JS widget and Validate + cy.get(widgetsPage.toggleDisable).click({ force: true }); + cy.EditWidgetPropertiesUsingJS(widgetsPage.inputToggleDisable, "true"); + cy.validateDisableWidget( + widgetsPage.buttonWidget, + commonlocators.disabledField, + ); + cy.PublishtheApp(); + cy.validateDisableWidget( + publishPage.buttonWidget, + commonlocators.disabledField, + ); + }); + + it("Toggle JS - Button-Enable Validation", function() { + //Uncheck the disabled checkbox and validate + cy.EditWidgetPropertiesUsingJS(widgetsPage.inputToggleDisable, "false"); + cy.validateEnableWidget( + widgetsPage.buttonWidget, + commonlocators.disabledField, + ); + cy.PublishtheApp(); + cy.validateEnableWidget( + publishPage.buttonWidget, + commonlocators.disabledField, + ); + }); + it("Button-Unckeck Visible field Validation", function() { //Uncheck the disabled checkbox and validate cy.UncheckWidgetProperties(commonlocators.visibleCheckbox); @@ -85,6 +130,21 @@ describe("Button Widget Functionality", function() { cy.get(publishPage.buttonWidget).should("be.visible"); }); + it("Toggle JS - Button-Unckeck Visible field Validation", function() { + //Uncheck the disabled checkbox using JS and validate + cy.get(widgetsPage.toggleVisible).click({ force: true }); + cy.EditWidgetPropertiesUsingJS(widgetsPage.inputToggleVisible, "false"); + cy.PublishtheApp(); + cy.get(publishPage.buttonWidget).should("not.exist"); + }); + + it("Toggle JS - Button-Check Visible field Validation", function() { + //Check the disabled checkbox using JS and Validate + cy.EditWidgetPropertiesUsingJS(widgetsPage.inputToggleVisible, "true"); + cy.PublishtheApp(); + cy.get(publishPage.buttonWidget).should("be.visible"); + }); + it("Button-AlertModal Validation", function() { //creating the Alert Modal and verify Modal name cy.createModal("Alert Modal", this.data.AlertModalName); @@ -107,6 +167,124 @@ describe("Button Widget Functionality", function() { ); }); + it("Button-CallAnApi Validation", function() { + //creating an api and calling it from the onClickAction of the button widget. + // Creating the api + cy.NavigateToAPI_Panel(); + cy.CreateAPI("buttonApi"); + cy.log("Creation of buttonApi Action successful"); + cy.enterDatasourceAndPath(this.data.paginationUrl, "users?page=4&size=3"); + cy.SaveAndRunAPI(); + + // Going to HomePage where the button widget is located and opeing it's property pane. + cy.get(widgetsPage.NavHomePage).click({ force: true }); + cy.reload(); + cy.openPropertyPane("buttonwidget"); + + // Adding the api in the onClickAction of the button widget. + cy.addAPIFromLightningMenu("buttonApi"); + // Filling the messages for success/failure in the onClickAction of the button widget. + cy.onClickActions("Success", "Error"); + + cy.PublishtheApp(); + + // Clicking the button to verify the success message + cy.get(publishPage.buttonWidget).click(); + cy.get(widgetsPage.apiCallToast).should("have.text", "Success"); + }); + + it("Button-Call-Query Validation", function() { + //creating a query and calling it from the onClickAction of the button widget. + // Creating a mock query + // cy.CreateMockQuery("Query1"); + let postgresDatasourceName; + + cy.startRoutesForDatasource(); + cy.NavigateToDatasourceEditor(); + cy.get(datasource.PostgreSQL).click(); + cy.generateUUID().then((uid) => { + postgresDatasourceName = uid; + + cy.get(".t--edit-datasource-name").click(); + cy.get(".t--edit-datasource-name input") + .clear() + .type(postgresDatasourceName, { force: true }) + .should("have.value", postgresDatasourceName) + .blur(); + }); + cy.wait("@saveDatasource").should( + "have.nested.property", + "response.body.responseMeta.status", + 200, + ); + cy.fillPostgresDatasourceForm(); + cy.saveDatasource(); + + cy.CreateMockQuery("Query1"); + + // Going to HomePage where the button widget is located and opeing it's property pane. + cy.get(widgetsPage.NavHomePage).click({ force: true }); + cy.reload(); + cy.openPropertyPane("buttonwidget"); + + // Adding the query in the onClickAction of the button widget. + cy.addQueryFromLightningMenu("Query1"); + // Filling the messages for success/failure in the onClickAction of the button widget. + cy.onClickActions("Success", "Error"); + + cy.PublishtheApp(); + + // Clicking the button to verify the success message + cy.get(publishPage.buttonWidget).click(); + cy.get(widgetsPage.apiCallToast).should("have.text", "Success"); + }); + + it("Toggle JS - Button-CallAnApi Validation", function() { + //creating an api and calling it from the onClickAction of the button widget. + // calling the existing api + cy.get(widgetsPage.toggleOnClick).click({ force: true }); + cy.testJsontext( + "onclick", + "{{buttonApi.run(() => showAlert('Success','success'), () => showAlert('Error','error'))}}", + ); + + cy.PublishtheApp(); + + // Clicking the button to verify the success message + cy.get(publishPage.buttonWidget).click(); + cy.get(widgetsPage.apiCallToast).should("have.text", "Success"); + }); + + it("Toggle JS - Button-Call-Query Validation", function() { + //creating a query and calling it from the onClickAction of the button widget. + // Creating a mock query + cy.testJsontext( + "onclick", + "{{Query1.run(() => showAlert('Success','success'), () => showAlert('Error','error'))}}", + ); + + cy.PublishtheApp(); + + // Clicking the button to verify the success message + cy.get(publishPage.buttonWidget).click(); + cy.get(widgetsPage.apiCallToast).should("have.text", "Success"); + }); + + it("Button-Copy Verification", function() { + const modifierKey = Cypress.platform === "darwin" ? "meta" : "ctrl"; + //Copy button and verify all properties + cy.copyWidget("buttonwidget", widgetsPage.buttonWidget); + + cy.PublishtheApp(); + }); + + it("Button-Delete Verification", function() { + // Delete the button widget + cy.deleteWidget(widgetsPage.buttonWidget); + cy.PublishtheApp(); + cy.get(widgetsPage.buttonWidget).should("not.exist"); + }); + afterEach(() => { cy.get(publishPage.backToEditor).click({ force: true }); }); diff --git a/app/client/cypress/locators/QueryEditor.json b/app/client/cypress/locators/QueryEditor.json index 88f760a234..4f2bcfe25b 100644 --- a/app/client/cypress/locators/QueryEditor.json +++ b/app/client/cypress/locators/QueryEditor.json @@ -1,4 +1,5 @@ { + "addNewQueryBtn": ".dbqueries .t--entity-add-btn", "queryEditorIcon": ".t--nav-link-query-editor", "templateMenu": ".t--template-menu", "runQuery": ".t--run-query", @@ -8,6 +9,7 @@ "addQueryEntity": ".//div[contains(@class,'t--entity group queries')]//div[contains(@class,'t--entity-add-btn')]", "addDatasource": ".t--add-datasource", "editDatasourceButton": ".t--edit-datasource", + "queryNameField": ".t--action-name-edit-field input", "settings": "li:contains('Settings')", "query": "li:contains('Query')", "switch": ".t--form-control-SWITCH input" diff --git a/app/client/cypress/locators/Widgets.json b/app/client/cypress/locators/Widgets.json index 514ff56cc2..cde1f49aba 100644 --- a/app/client/cypress/locators/Widgets.json +++ b/app/client/cypress/locators/Widgets.json @@ -1,16 +1,23 @@ { + "NavHomePage": "[data-icon='home']", "containerWidget": ".t--draggable-containerwidget", "inputWidget": ".t--draggable-inputwidget", "togglebutton": "input[type='checkbox']", "inputPropsDataType": ".t--property-control-datatype", "inputdatatypeplaceholder": ".t--property-control-placeholder", "buttonWidget": ".t--draggable-buttonwidget", + "buttonStyleDropdown": ".t--property-control-buttonstyle [name='downArrow']", + "buttonBackground": ".sc-ecQjpJ > div > .bp3-button", + "copyWidget": ":nth-child(2) > .bp3-popover-target > .sc-bdnylx > svg", + "removeWidget": ":nth-child(3) > .bp3-popover-target > .sc-bdnylx > svg", + "propertypaneText": ".t--propertypane .bp3-panel-stack-view", "formButtonWidget": ".t--widget-formbuttonwidget", "textWidget": ".t--draggable-textwidget", "tableWidget": ".t--draggable-tablewidget", "tableOnRowSelected": ".t--property-control-onrowselected", "dropdownSelectButton": ".t--open-dropdown-Select", "buttonOnClick": ".t--property-control-onclick .bp3-popover-target", + "buttonCreateApi": "a.t--create-api-btn", "Scrollbutton": ".t--property-control-scrollcontents input", "label": ".t--draggable-inputwidget label", "inputval": ".t--draggable-inputwidget span.t--widget-name", @@ -77,6 +84,12 @@ "textSize": ".t--property-control-textsize .bp3-popover-target", "toggleTextSize": ".t--property-control-textsize .t--js-toggle", "toggleVerticalAlig": ".t--property-control-verticalalignment .t--js-toggle", + "toggleVisible": ".t--property-control-visible .t--js-toggle", + "inputToggleVisible": "div.t--property-control-visible div.CodeMirror-lines", + "toggleDisable": ".t--property-control-disabled .t--js-toggle", + "inputToggleDisable": "div.t--property-control-disabled div.CodeMirror-lines", + "toggleOnClick": ".t--property-control-onclick .t--js-toggle", + "inputToggleOnClick": ".t--property-control-onclick div.CodeMirror-lines", "tableBtn": ".t--draggable-tablewidget .bp3-button", "toastAction": ".Toastify__toast-container--top-right .t--toast-action", "toastActionText": ".Toastify__toast-container--top-right .t--toast-action span", @@ -84,6 +97,8 @@ "selectWidget": ".t--open-dropdown-Select-Widget", "switchWidget": ".t--widget-switchwidget", "toastMsg": ".t--toast-action span", + "deleteToast": "div[class = 'undo-section'] span[type='h6']", + "apiCallToast": "div.t--toast-action span[type='p1']", "datepickerInput": ".t--draggable-datepickerwidget2 input", "selectToday": ".DayPicker-Day--today", "switchWidgetActive": ".t--switch-widget-active", diff --git a/app/client/cypress/support/commands.js b/app/client/cypress/support/commands.js index da41dfddd1..fa7ed5d087 100644 --- a/app/client/cypress/support/commands.js +++ b/app/client/cypress/support/commands.js @@ -1040,13 +1040,10 @@ Cypress.Commands.add("DeleteAPI", (apiname) => { // }); Cypress.Commands.add("createModal", (modalType, ModalName) => { - cy.get(widgetsPage.buttonOnClick) - .last() + cy.get(widgetsPage.actionSelect) + .first() .click({ force: true }); - cy.get("ul.bp3-menu") - .children() - .contains("Open Modal") - .click(); + cy.selectOnClickOption("Open Modal"); cy.get(modalWidgetPage.selectModal).click(); cy.get(modalWidgetPage.createModalButton).click({ force: true }); @@ -1079,14 +1076,18 @@ Cypress.Commands.add("createModal", (modalType, ModalName) => { cy.get(".bp3-overlay-backdrop").click({ force: true }); }); +Cypress.Commands.add("selectOnClickOption", (option) => { + cy.get("ul.bp3-menu div.bp3-fill") + .wait(500) + .contains(option) + .click({ force: true }); +}); + Cypress.Commands.add("updateModal", (modalType, ModalName) => { - cy.get(".t--open-dropdown-Select-Action") + cy.get(widgetsPage.actionSelect) .first() .click({ force: true }); - cy.get("ul.bp3-menu") - .children() - .contains("Open Modal") - .click(); + cy.selectOnClickOption("Open Modal"); cy.get(modalWidgetPage.selectModal).click(); cy.get(modalWidgetPage.createModalButton).click({ force: true }); @@ -1132,6 +1133,13 @@ Cypress.Commands.add("UncheckWidgetProperties", (checkboxCss) => { cy.assertPageSave(); }); +Cypress.Commands.add("EditWidgetPropertiesUsingJS", (checkboxCss, inputJS) => { + cy.get(checkboxCss) + .click() + .type(inputJS); + cy.assertPageSave(); +}); + Cypress.Commands.add( "ChangeTextStyle", (dropDownValue, textStylecss, labelName) => { @@ -1756,17 +1764,20 @@ Cypress.Commands.add( }, ); +Cypress.Commands.add("addQueryFromLightningMenu", (QueryName) => { + cy.get(commonlocators.dropdownSelectButton) + .first() + .click({ force: true }) + .selectOnClickOption("Execute a DB Query") + .selectOnClickOption(QueryName); +}); + Cypress.Commands.add("addAPIFromLightningMenu", (ApiName) => { cy.get(commonlocators.dropdownSelectButton) + .first() .click({ force: true }) - .get("ul.bp3-menu") - .children() - .contains("Call An API") - .click({ force: true }) - .get("ul.bp3-menu") - .children() - .contains(ApiName) - .click({ force: true }); + .selectOnClickOption("Call An API") + .selectOnClickOption(ApiName); }); Cypress.Commands.add("radioInput", (index, text) => { @@ -2041,6 +2052,24 @@ Cypress.Commands.add("executeDbQuery", (queryName) => { .click({ force: true }); }); +Cypress.Commands.add("CreateMockQuery", (queryName) => { + // cy.get(queryEditor.addNewQueryBtn).click({ force: true }); + cy.get(queryEditor.createQuery) + .first() + .click({ force: true }); + cy.get(queryEditor.queryNameField).type(queryName + "{enter}", { + force: true, + }); + cy.assertPageSave(); + cy.get(queryEditor.templateMenu + " div") + .contains("Select") + .click({ force: true }); + cy.runQuery(); + // cy.wait(3000); + // cy.get(queryEditor.runQuery) + // .click({force: true}); +}); + Cypress.Commands.add("openPropertyPane", (widgetType) => { const selector = `.t--draggable-${widgetType}`; cy.get(selector) @@ -2056,10 +2085,115 @@ Cypress.Commands.add("openPropertyPane", (widgetType) => { cy.wait(1000); }); +Cypress.Commands.add("openPropertyPaneCopy", (widgetType) => { + const selector = `.t--draggable-${widgetType}`; + cy.get(selector) + .last() + .trigger("mouseover", { force: true }) + .wait(500); + cy.get( + `${selector}:first-of-type .t--widget-propertypane-toggle > .t--widget-name`, + ) + .first() + .click({ force: true }); + // eslint-disable-next-line cypress/no-unnecessary-waiting + cy.wait(1000); +}); + +Cypress.Commands.add("changeButtonStyle", (index, buttonColor, hoverColor) => { + cy.get(widgetsPage.buttonStyleDropdown).click({ force: true }); + cy.get( + ".bp3-popover-content .t--dropdown-option:nth-child(" + index + ")", + ).click({ force: true }); + cy.PublishtheApp(); + cy.get(widgetsPage.widgetBtn).should( + "have.css", + "background-color", + buttonColor, + ); + // cy.get(buttonBackground) + // .first() + // .trigger('mouseover', { force: true }); + // cy.get(buttonBackground) + // .should('have.css', 'background-color', hoverColor); + cy.wait(1000); +}); + Cypress.Commands.add("closePropertyPane", () => { cy.get(commonlocators.editPropCrossButton).click({ force: true }); }); +Cypress.Commands.add("onClickActions", (forSuccess, forFailure) => { + // Filling the messages for success/failure in the onClickAction of the button widget. + // For Success + cy.get(".code-highlight") + .children() + .contains("No Action") + .first() + .click({ force: true }) + .selectOnClickOption("Show Message") + .get("div.t--property-control-onclick div.CodeMirror-lines") + .click() + .type(forSuccess) + .get("button.t--open-dropdown-Select-type") + .click() + .get("a.single-select div") + .contains(forSuccess) + .click(); + + cy.wait(2000); + // For Failure + cy.get(".code-highlight") + .children() + .contains("No Action") + .last() + .click({ force: true }) + .selectOnClickOption("Show Message") + .get("div.t--property-control-onclick div.CodeMirror-lines") + .last() + .click() + .type(forFailure) + .get("button.t--open-dropdown-Select-type") + .last() + .click() + .get("a.single-select div") + .contains(forFailure) + .click(); +}); + +Cypress.Commands.add("copyWidget", (widget, widgetLocator) => { + const modifierKey = Cypress.platform === "darwin" ? "meta" : "ctrl"; + //Copy widget and verify all properties + cy.get(widgetsPage.propertypaneText) + .children() + .last() + .invoke("text") + .then((originalWidget) => { + cy.log(originalWidget); + cy.get(widgetsPage.copyWidget).click(); + cy.reload(); + // Wait for the widget to be appear in the DOM and press Ctrl/Cmd + V to paste the button. + cy.get(widgetLocator).should("be.visible"); + cy.get("body").type(`{${modifierKey}}v`); + cy.wait(2000); + cy.openPropertyPaneCopy(widget); + cy.get(widgetsPage.propertypaneText) + .children() + .last() + .invoke("text") + .then((copiedWidget) => { + cy.log(copiedWidget); + expect(originalWidget).to.be.equal(copiedWidget); + }); + }); +}); + +Cypress.Commands.add("deleteWidget", (widget) => { + // Delete the button widget + cy.get(widgetsPage.removeWidget).click(); + cy.get(widgetsPage.deleteToast).should("have.text", "UNDO"); +}); + Cypress.Commands.add("createAndFillApi", (url, parameters) => { cy.NavigateToApiEditor(); cy.testCreateApiButton();