Merge pull request #5170 from appsmithorg/buttonUITestCases

Button UI test cases

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);
     });
   });
 });

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 });
   });

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"

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,13 +84,21 @@
     "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",
     "defaultColName": "[data-rbd-draggable-id='customColumn1'] input",
     "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",