test: cypress- updated treeSelect tests (#27126)
This commit is contained in:
NandanAnantharamu
GitHub
parent
93acae0351
commit
76b5f73fca
|
|
@ -0,0 +1,331 @@
|
||||||
|
import {
|
||||||
|
agHelper,
|
||||||
|
locators,
|
||||||
|
deployMode,
|
||||||
|
entityExplorer,
|
||||||
|
propPane,
|
||||||
|
apiPage,
|
||||||
|
dataSources,
|
||||||
|
draggableWidgets,
|
||||||
|
} from "../../../../../support/Objects/ObjectsCore";
|
||||||
|
|
||||||
|
describe("Tree Select widget Tests", function () {
|
||||||
|
before(() => {
|
||||||
|
entityExplorer.DragDropWidgetNVerify("formwidget", 500, 100);
|
||||||
|
entityExplorer.DragDropWidgetNVerify("singleselecttreewidget", 350, 300);
|
||||||
|
entityExplorer.DragDropWidgetNVerify("buttonwidget", 450, 350);
|
||||||
|
});
|
||||||
|
|
||||||
|
let options = `[
|
||||||
|
{
|
||||||
|
"label": "Blue",
|
||||||
|
"value": "BLUE",
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"label": "Dark Blue",
|
||||||
|
"value": "DARK BLUE"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Light Blue",
|
||||||
|
"value": "LIGHT BLUE"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Green",
|
||||||
|
"value": "GREEN"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Red",
|
||||||
|
"value": "RED"
|
||||||
|
}
|
||||||
|
]`;
|
||||||
|
|
||||||
|
it("1. Verify required field", function () {
|
||||||
|
entityExplorer.SelectEntityByName("TreeSelect1", "Widgets");
|
||||||
|
propPane.TogglePropertyState("required", "On");
|
||||||
|
propPane.UpdatePropertyFieldValue("Default selected value", "");
|
||||||
|
agHelper.AssertElementEnabledDisabled(locators._buttonInDeployedMode, 1);
|
||||||
|
// Binding with Button
|
||||||
|
propPane.ToggleJSMode("required", true);
|
||||||
|
propPane.UpdatePropertyFieldValue(
|
||||||
|
"Required",
|
||||||
|
"{{Button3.isDisabled?false:true}}",
|
||||||
|
);
|
||||||
|
entityExplorer.SelectEntityByName("Button3", "Widgets");
|
||||||
|
propPane.TogglePropertyState("disabled", "On");
|
||||||
|
agHelper.AssertElementEnabledDisabled(
|
||||||
|
locators._buttonInDeployedMode,
|
||||||
|
1,
|
||||||
|
false,
|
||||||
|
);
|
||||||
|
propPane.TogglePropertyState("disabled", "Off");
|
||||||
|
agHelper.AssertElementEnabledDisabled(
|
||||||
|
locators._buttonInDeployedMode,
|
||||||
|
1,
|
||||||
|
true,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("2. Verify placeholder", function () {
|
||||||
|
entityExplorer.SelectEntityByName("TreeSelect1", "Widgets");
|
||||||
|
propPane.UpdatePropertyFieldValue("Options", "");
|
||||||
|
propPane.UpdatePropertyFieldValue("Placeholder", "Select new option");
|
||||||
|
agHelper.AssertText(
|
||||||
|
locators._treeSelectPlaceholder,
|
||||||
|
"text",
|
||||||
|
"Select new option",
|
||||||
|
);
|
||||||
|
// Binding with Text widget
|
||||||
|
entityExplorer.DragDropWidgetNVerify("textwidget", 550, 500);
|
||||||
|
propPane.UpdatePropertyFieldValue("Text", "Select value");
|
||||||
|
entityExplorer.SelectEntityByName("TreeSelect1", "Widgets");
|
||||||
|
propPane.UpdatePropertyFieldValue("Placeholder", "{{Text2.text}}");
|
||||||
|
agHelper.AssertText(
|
||||||
|
locators._treeSelectPlaceholder,
|
||||||
|
"text",
|
||||||
|
"Select value",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("3. Verify expand all by default", function () {
|
||||||
|
propPane.UpdatePropertyFieldValue("Options", options);
|
||||||
|
propPane.TogglePropertyState("expandallbydefault", "On");
|
||||||
|
agHelper.GetNClick(locators._widgetInDeployed(draggableWidgets.TREESELECT));
|
||||||
|
agHelper.AssertElementExist(locators._dropDownMultiTreeValue("Dark Blue"));
|
||||||
|
});
|
||||||
|
|
||||||
|
it("4. Verify Full color picker and font size", () => {
|
||||||
|
// Verify font color picker opens up
|
||||||
|
propPane.MoveToTab("Style");
|
||||||
|
agHelper.GetNClick(propPane._propertyControlColorPicker("fontcolor"));
|
||||||
|
agHelper.AssertElementVisibility(propPane._colorPickerV2Color);
|
||||||
|
// Verify full color picker
|
||||||
|
agHelper.AssertAttribute(propPane._colorPickerInput, "type", "text", 0);
|
||||||
|
propPane.TogglePropertyState("fontcolor", "On", "");
|
||||||
|
agHelper.AssertAttribute(propPane._colorPickerInput, "type", "color", 0);
|
||||||
|
// Font size
|
||||||
|
propPane.SelectPropertiesDropDown("fontsize", "L");
|
||||||
|
propPane.AssertPropertiesDropDownCurrentValue("fontsize", "L");
|
||||||
|
propPane.ToggleJSMode("fontsize", true);
|
||||||
|
propPane.UpdatePropertyFieldValue("Font size", "1rem");
|
||||||
|
propPane.ToggleJSMode("fontsize", false);
|
||||||
|
propPane.AssertPropertiesDropDownCurrentValue("fontsize", "M");
|
||||||
|
// Verify Emphasis
|
||||||
|
agHelper.GetNClick(propPane._emphasisSelector("BOLD"));
|
||||||
|
agHelper.AssertAttribute(locators._label, "font-style", "BOLD");
|
||||||
|
agHelper.GetNClick(propPane._emphasisSelector("BOLD"));
|
||||||
|
propPane.ToggleJSMode("emphasis", true);
|
||||||
|
propPane.UpdatePropertyFieldValue("Emphasis", "ITALIC");
|
||||||
|
agHelper.AssertAttribute(locators._label, "font-style", "ITALIC");
|
||||||
|
|
||||||
|
// Preview mode
|
||||||
|
agHelper.GetNClick(locators._enterPreviewMode);
|
||||||
|
agHelper.AssertAttribute(locators._label, "font-style", "ITALIC");
|
||||||
|
agHelper.GetNClick(locators._exitPreviewMode);
|
||||||
|
|
||||||
|
// Deploy mode
|
||||||
|
deployMode.DeployApp();
|
||||||
|
agHelper.AssertAttribute(locators._label, "font-style", "ITALIC");
|
||||||
|
deployMode.NavigateBacktoEditor();
|
||||||
|
|
||||||
|
// entityExplorer.SelectEntityByName("Form1");
|
||||||
|
entityExplorer.SelectEntityByName("TreeSelect1", "Form1");
|
||||||
|
propPane.MoveToTab("Style");
|
||||||
|
|
||||||
|
// Verify border
|
||||||
|
agHelper.GetNClick(propPane._segmentedControl("0px"));
|
||||||
|
agHelper.AssertCSS(".rc-tree-select", "border-radius", "0px");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("5. Verify Api binding", () => {
|
||||||
|
apiPage.CreateAndFillApi("https://mock-api.appsmith.com/users");
|
||||||
|
apiPage.RunAPI();
|
||||||
|
entityExplorer.SelectEntityByName("TreeSelect1", "Form1");
|
||||||
|
propPane.MoveToTab("Content");
|
||||||
|
propPane.UpdatePropertyFieldValue(
|
||||||
|
"Options",
|
||||||
|
`{{Api1.data.users.map((s)=>{return{"label":s.name,"value":s.name}})}}`,
|
||||||
|
);
|
||||||
|
agHelper.GetNClick(
|
||||||
|
`${locators._widgetInDeployed("singleselecttreewidget")}`,
|
||||||
|
);
|
||||||
|
agHelper.AssertElementExist(locators._treeSelectTitle);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("6. Verify onOptionChange with query", () => {
|
||||||
|
entityExplorer.DragDropWidgetNVerify("checkboxwidget", 300, 600);
|
||||||
|
entityExplorer.DragDropWidgetNVerify("inputwidgetv2", 500, 700);
|
||||||
|
entityExplorer.DragDropWidgetNVerify("iframewidget", 550, 800);
|
||||||
|
// Execute the query
|
||||||
|
let postgresDatasourceName: any;
|
||||||
|
dataSources.StartDataSourceRoutes();
|
||||||
|
agHelper
|
||||||
|
.GetElement(locators._newDataSourceBtn)
|
||||||
|
.last()
|
||||||
|
.click({ force: true });
|
||||||
|
dataSources.NavigateToDSCreateNew();
|
||||||
|
dataSources.CreatePlugIn("PostgreSQL");
|
||||||
|
agHelper.GenerateUUID();
|
||||||
|
cy.get("@guid").then((uid) => {
|
||||||
|
postgresDatasourceName = uid;
|
||||||
|
agHelper.GetNClick(locators._dsName);
|
||||||
|
agHelper.TypeText(locators._dsNameTxt, postgresDatasourceName);
|
||||||
|
dataSources.FillPostgresDSForm();
|
||||||
|
dataSources.SaveDatasource();
|
||||||
|
dataSources.NavigateFromActiveDS(postgresDatasourceName, true);
|
||||||
|
});
|
||||||
|
dataSources.RunQuery();
|
||||||
|
|
||||||
|
entityExplorer.SelectEntityByName("TreeSelect1", "Widgets");
|
||||||
|
propPane.UpdatePropertyFieldValue("Options", options);
|
||||||
|
propPane.SelectPlatformFunction("onOptionChange", "Execute a query");
|
||||||
|
agHelper.GetNClick(`${locators._dropDownValue("Query1")}`, 0, true);
|
||||||
|
agHelper.GetNClick(locators._callbackAddBtn, 0, true);
|
||||||
|
agHelper.GetNClick(locators._dropDownValue("Show alert"));
|
||||||
|
agHelper.TypeText(
|
||||||
|
propPane._actionSelectorFieldByLabel("Message"),
|
||||||
|
"Success",
|
||||||
|
);
|
||||||
|
agHelper.GetNClick(propPane._actionSelectorPopupClose);
|
||||||
|
deployMode.DeployApp();
|
||||||
|
agHelper.GetNClick(
|
||||||
|
`${locators._widgetInDeployed("singleselecttreewidget")}`,
|
||||||
|
);
|
||||||
|
agHelper.GetNClick(locators._dropDownMultiTreeValue("Green"));
|
||||||
|
agHelper.ValidateToastMessage("Success");
|
||||||
|
deployMode.NavigateBacktoEditor();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("7. Verify onOptionChange with Navigate To", () => {
|
||||||
|
// Navigate To
|
||||||
|
entityExplorer.SelectEntityByName("Form1", "Widgets");
|
||||||
|
entityExplorer.SelectEntityByName("TreeSelect1", "Form1");
|
||||||
|
propPane.ToggleJSMode("onOptionChange", true);
|
||||||
|
propPane.UpdatePropertyFieldValue(
|
||||||
|
"onOptionChange",
|
||||||
|
"{{navigateTo('www.yahoo.com', {}, 'SAME_WINDOW');}}",
|
||||||
|
);
|
||||||
|
deployMode.DeployApp();
|
||||||
|
agHelper.GetNClick(
|
||||||
|
`${locators._widgetInDeployed("singleselecttreewidget")}`,
|
||||||
|
);
|
||||||
|
agHelper.GetNClick(locators._dropDownMultiTreeValue("Red"));
|
||||||
|
agHelper.AssertURL("yahoo.com");
|
||||||
|
agHelper.BrowserNavigation(-1);
|
||||||
|
deployMode.NavigateBacktoEditor();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("8. Verify onOptionChange with Alert", () => {
|
||||||
|
// Alert
|
||||||
|
entityExplorer.SelectEntityByName("Form1", "Widgets");
|
||||||
|
entityExplorer.SelectEntityByName("TreeSelect1", "Form1");
|
||||||
|
propPane.UpdatePropertyFieldValue(
|
||||||
|
"onOptionChange",
|
||||||
|
"{{showAlert('Option Changed', '');}}",
|
||||||
|
);
|
||||||
|
deployMode.DeployApp();
|
||||||
|
agHelper.GetNClick(
|
||||||
|
`${locators._widgetInDeployed("singleselecttreewidget")}`,
|
||||||
|
);
|
||||||
|
agHelper.GetNClick(locators._dropDownMultiTreeValue("Green"));
|
||||||
|
agHelper.ValidateToastMessage("Option Changed");
|
||||||
|
deployMode.NavigateBacktoEditor();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("9. Verify onOptionChange with download", () => {
|
||||||
|
// Download
|
||||||
|
entityExplorer.SelectEntityByName("Form1", "Widgets");
|
||||||
|
entityExplorer.SelectEntityByName("TreeSelect1", "Form1");
|
||||||
|
propPane.UpdatePropertyFieldValue(
|
||||||
|
"onOptionChange",
|
||||||
|
`{{download('https://assets.codepen.io/3/kiwi.svg', 'kiwi.svg', 'image/svg+xml').then(() => {
|
||||||
|
showAlert('Download Success', '');
|
||||||
|
});}}`,
|
||||||
|
);
|
||||||
|
agHelper.GetNClick(
|
||||||
|
`${locators._widgetInDeployed("singleselecttreewidget")}`,
|
||||||
|
);
|
||||||
|
agHelper.GetNClick(locators._dropDownMultiTreeValue("Red"));
|
||||||
|
agHelper.ValidateToastMessage("Download Success");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("10. Verify onOptionChange with Reset", () => {
|
||||||
|
// Reset Widget
|
||||||
|
entityExplorer.SelectEntityByName("Form1", "Widgets");
|
||||||
|
entityExplorer.SelectEntityByName("TreeSelect1", "Form1");
|
||||||
|
propPane.UpdatePropertyFieldValue(
|
||||||
|
"onOptionChange",
|
||||||
|
'{{resetWidget("Checkbox1", true);}}',
|
||||||
|
);
|
||||||
|
deployMode.DeployApp();
|
||||||
|
agHelper.GetNClick(`${locators._widgetInDeployed("checkbox1")}`);
|
||||||
|
agHelper.AssertExistingCheckedState(
|
||||||
|
locators._checkboxInDeployedMode,
|
||||||
|
"false",
|
||||||
|
);
|
||||||
|
agHelper.GetNClick(
|
||||||
|
`${locators._widgetInDeployed("singleselecttreewidget")}`,
|
||||||
|
);
|
||||||
|
agHelper.GetNClick(locators._dropDownMultiTreeValue("Green"));
|
||||||
|
agHelper.AssertExistingCheckedState(locators._checkboxInDeployedMode);
|
||||||
|
deployMode.NavigateBacktoEditor();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("11. Verify onOptionChange with Modal", () => {
|
||||||
|
// Modal
|
||||||
|
entityExplorer.SelectEntityByName("Form1", "Widgets");
|
||||||
|
entityExplorer.SelectEntityByName("TreeSelect1", "Form1");
|
||||||
|
propPane.ToggleJSMode("onOptionChange", false);
|
||||||
|
propPane.SelectPlatformFunction("onOptionChange", "Show modal");
|
||||||
|
agHelper.GetNClick(propPane._actionOpenDropdownSelectModal);
|
||||||
|
agHelper.GetNClick(propPane._createModalButton);
|
||||||
|
agHelper.AssertElementVisibility(locators._modal);
|
||||||
|
agHelper.GetNClick(locators._closeModal, 0, true);
|
||||||
|
deployMode.DeployApp();
|
||||||
|
agHelper.GetNClick(
|
||||||
|
`${locators._widgetInDeployed("singleselecttreewidget")}`,
|
||||||
|
);
|
||||||
|
agHelper.GetNClick(locators._dropDownMultiTreeValue("Red"));
|
||||||
|
agHelper.AssertElementVisibility(locators._modal);
|
||||||
|
agHelper.GetNClick(locators._closeModal, 0, true);
|
||||||
|
agHelper.Sleep(3000);
|
||||||
|
agHelper.AssertElementAbsence(locators._modal);
|
||||||
|
deployMode.NavigateBacktoEditor();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("12. Verify onOptionChange with iframe", () => {
|
||||||
|
// Postmessage on iframe
|
||||||
|
entityExplorer.SelectEntityByName("Iframe1", "Widgets");
|
||||||
|
propPane.UpdatePropertyFieldValue(
|
||||||
|
"srcDoc",
|
||||||
|
`<div id="target"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.addEventListener('message', (event) => {
|
||||||
|
const tgt = document.querySelector("#target")
|
||||||
|
tgt.textContent = event.data
|
||||||
|
});
|
||||||
|
</script>`,
|
||||||
|
);
|
||||||
|
entityExplorer.SelectEntityByName("Form1", "Widgets");
|
||||||
|
entityExplorer.SelectEntityByName("TreeSelect1", "Form1");
|
||||||
|
propPane.ToggleJSMode("onOptionChange", true);
|
||||||
|
propPane.UpdatePropertyFieldValue(
|
||||||
|
"onOptionChange",
|
||||||
|
`{{postWindowMessage('Test', 'Iframe1', "*");}}`,
|
||||||
|
);
|
||||||
|
deployMode.DeployApp();
|
||||||
|
agHelper.GetNClick(
|
||||||
|
`${locators._widgetInDeployed("singleselecttreewidget")}`,
|
||||||
|
);
|
||||||
|
agHelper.GetNClick(locators._dropDownMultiTreeValue("Green"));
|
||||||
|
|
||||||
|
agHelper.GetElement('iframe[id="iframe-Iframe1"]').then(($iframe) => {
|
||||||
|
const iframe = $iframe.contents();
|
||||||
|
|
||||||
|
cy.wrap(iframe).find("#target").should("have.text", "Test");
|
||||||
|
});
|
||||||
|
deployMode.NavigateBacktoEditor();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -293,4 +293,10 @@ export class CommonLocators {
|
||||||
_alignment = (value: string) => `//*[@data-value='${value}']`;
|
_alignment = (value: string) => `//*[@data-value='${value}']`;
|
||||||
_borderRadius = (value: string) => `//*[@data-value='${value}']`;
|
_borderRadius = (value: string) => `//*[@data-value='${value}']`;
|
||||||
_textInside = ".bp3-ui-text span";
|
_textInside = ".bp3-ui-text span";
|
||||||
|
_buttonInDeployedMode = ".bp3-button";
|
||||||
|
_treeSelectPlaceholder = ".rc-tree-select-selection-placeholder";
|
||||||
|
_treeSelectTitle = ".rc-tree-select-tree-title";
|
||||||
|
_newDataSourceBtn = ".datasources .t--entity-add-btn";
|
||||||
|
_callbackAddBtn = ".action-callback-add .ads-v2-button";
|
||||||
|
_checkboxInDeployedMode = "//label[contains(@class, 'bp3-checkbox')]//input";
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -110,7 +110,7 @@ export class PropertyPane {
|
||||||
"')]//input[@class='rc-select-selection-search-input']/parent::span/following-sibling::span | //div[contains(@class, 't--property-control-" +
|
"')]//input[@class='rc-select-selection-search-input']/parent::span/following-sibling::span | //div[contains(@class, 't--property-control-" +
|
||||||
ddName.replace(/ +/g, "").toLowerCase() +
|
ddName.replace(/ +/g, "").toLowerCase() +
|
||||||
"')]//div[@class='selected-item']/div";
|
"')]//div[@class='selected-item']/div";
|
||||||
private _createModalButton = ".t--create-modal-btn";
|
public _createModalButton = ".t--create-modal-btn";
|
||||||
_pageName = (option: string) => "//a/div[text()='" + option + "']";
|
_pageName = (option: string) => "//a/div[text()='" + option + "']";
|
||||||
private isMac = Cypress.platform === "darwin";
|
private isMac = Cypress.platform === "darwin";
|
||||||
private selectAllJSObjectContentShortcut = `${
|
private selectAllJSObjectContentShortcut = `${
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user