Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Merge pull request #5170 from appsmithorg/buttonUITestCases

Browse Source 
Button UI test cases
This commit is contained in:
arslanhaiderbuttar 2021-06-21 13:23:30 +05:00 committed by GitHub
commit a9961f06ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 352 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Widgets_form_input_table_default_validation.js
View File

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

178
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/FormWidgets/Button_spec.js
View File

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

2
app/client/cypress/locators/QueryEditor.json
View File

@ -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"

15
app/client/cypress/locators/Widgets.json
View File

@ -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",

172
app/client/cypress/support/commands.js
View File

@ -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();