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")
+//       cy.get(publish.inputWidget + " " + "input")
-        .last()
+//         .last()
-        .invoke("attr", "value")
+//         .invoke("attr", "value")
-        .should("contain", tabValue);
+//         .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,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",

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)
+  cy.get(widgetsPage.actionSelect)
-    .last()
+    .first()
     .click({ force: true });
-  cy.get("ul.bp3-menu")
+  cy.selectOnClickOption("Open Modal");
-    .children()
-    .contains("Open Modal")
-    .click();
   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")
+  cy.selectOnClickOption("Open Modal");
-    .children()
-    .contains("Open Modal")
-    .click();
   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")
+    .selectOnClickOption("Call An API")
-    .children()
+    .selectOnClickOption(ApiName);
-    .contains("Call An API")
-    .click({ force: true })
-    .get("ul.bp3-menu")
-    .children()
-    .contains(ApiName)
-    .click({ force: true });
 });
 
 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();