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

test: added tests fo multiTreeSelect Regression tests (#27826)

Browse Source
This commit is contained in:
NandanAnantharamu 2023-10-07 20:12:33 +05:30 committed by GitHub
parent 8ea3884632
commit 36aec9863b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 704 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

485
app/client/cypress/e2e/Regression/ClientSide/Widgets/Multiselect/MultiTreeSelect_2_spec.ts Normal file
View File

@ -0,0 +1,485 @@
import {
agHelper,
locators,
deployMode,
entityExplorer,
propPane,
dataSources,
} from "../../../../../support/Objects/ObjectsCore";
describe("Multi Select widget Tests", function () {
before(() => {
agHelper.AddDsl("multiTreeSelectDsl");
});
it("1. Verify default options are present in dropdown and default selected value", function () {
agHelper.GetNClick(locators._dropDownMultiTreeSelect);
agHelper.GetNClick(locators._switcherIcon);
agHelper.AssertElementExist(locators._dropDownMultiTreeValue("Blue"));
agHelper.AssertElementExist(locators._dropDownMultiTreeValue("Dark Blue"));
agHelper.AssertElementExist(locators._dropDownMultiTreeValue("Light Blue"));
agHelper.AssertElementExist(locators._dropDownMultiTreeValue("Green"));
agHelper.AssertElementExist(locators._dropDownMultiTreeValue("Red"));
// Default selected value
agHelper.GetNAssertElementText(
locators._treeSelectedContent,
"Green",
"have.text",
);
propPane.UpdatePropertyFieldValue(
"Default selected values",
`[
"GREEN",
"RED"
]`,
);
agHelper.GetNAssertElementText(
locators._treeSelectedContent,
"Green",
"have.text",
);
agHelper.GetNAssertElementText(
locators._treeSelectedContent,
"Red",
"have.text",
1,
);
propPane.UpdatePropertyFieldValue(
"Default selected values",
`[
"GREEN"
]`,
);
});
it("2. Verify property visibility", function () {
const dataProperties = ["options", "defaultselectedvalues"];
const labelProperties = ["text", "position"];
const generalProperties = [
"tooltip",
"mode",
"placeholder",
"visible",
"disabled",
"animateloading",
"allowclearingvalue",
"expandallbydefault",
"height",
];
const eventsProperties = [
"onoptionchange",
"ondropdownopen",
"ondropdownclose",
];
const validationsProperties = ["required"];
const labelStylesProperties = ["fontcolor", "fontsize", "emphasis"];
const borderShadows = ["borderradius", "boxshadow"];
entityExplorer.SelectEntityByName("MultiTreeSelect1", "Widgets");
// Data section
dataProperties.forEach((dataSectionProperty) => {
agHelper.AssertElementVisibility(
propPane._propertyPanePropertyControl("data", `${dataSectionProperty}`),
);
});
// Label section
labelProperties.forEach((labelSectionProperty) => {
agHelper.AssertElementVisibility(
propPane._propertyPanePropertyControl(
"label",
`${labelSectionProperty}`,
),
);
});
// General section
generalProperties.forEach((generalSectionProperty) => {
agHelper.AssertElementVisibility(
propPane._propertyPanePropertyControl(
"general",
`${generalSectionProperty}`,
),
);
});
// Events section
eventsProperties.forEach((eventsSectionProperty) => {
agHelper.AssertElementVisibility(
propPane._propertyPanePropertyControl(
"events",
`${eventsSectionProperty}`,
),
);
});
// Validation Section properties
agHelper.AssertElementVisibility(
propPane._propertyPanePropertyControl(
"validations",
`${validationsProperties}`,
),
);
propPane.MoveToTab("Style");
labelStylesProperties.forEach((labelStyleSectionProperty) => {
agHelper.AssertElementVisibility(
propPane._propertyPanePropertyControl(
"labelstyles",
`${labelStyleSectionProperty}`,
),
);
});
borderShadows.forEach((borderShadowSectionProperty) => {
agHelper.AssertElementVisibility(
propPane._propertyPanePropertyControl(
"borderandshadow",
`${borderShadowSectionProperty}`,
),
);
});
});
it("3. Verify Renaming, duplication and deletion", () => {
// Rename and verify
entityExplorer.RenameEntityFromExplorer(
"MultiTreeSelect1",
"NewMultiTreeSelect",
true,
);
agHelper.AssertElementVisibility(
locators._widgetName("NewMultiTreeSelect"),
);
// Copy and paste widget using cmd+c and cmd+v
entityExplorer.CopyPasteWidget("NewMultiTreeSelect");
entityExplorer.AssertEntityPresenceInExplorer("NewMultiTreeSelectCopy");
entityExplorer.DeleteWidgetFromEntityExplorer("NewMultiTreeSelectCopy");
// Copy paste from property pane and delete from property pane
propPane.CopyPasteWidgetFromPropertyPane("NewMultiTreeSelect");
propPane.DeleteWidgetFromPropertyPane("NewMultiTreeSelectCopy");
entityExplorer.SelectEntityByName("NewMultiTreeSelect", "Widgets");
propPane.MoveToTab("Content");
});
it("4. Validate only selected options are reflected in widget area", () => {
agHelper.GetNClick(locators._dropDownMultiTreeSelect);
agHelper.GetNClick(locators._dropDownMultiTreeValue("Red"));
agHelper.GetNAssertElementText(
locators._treeSelectedContent,
"Red",
"have.text",
1,
);
agHelper.GetNClick(locators._dropDownMultiTreeValue("Red"));
agHelper.AssertElementAbsence(
`${locators._treeSelectedContent}:contains('Red)`,
);
agHelper.GetNClick(locators._switcherIcon);
agHelper.GetNClick(locators._dropDownMultiTreeValue("Dark Blue"));
agHelper.GetNAssertElementText(
locators._treeSelectedContent,
"Dark Blue",
"have.text",
1,
);
agHelper.GetNClick(locators._dropDownMultiTreeValue("Dark Blue"));
agHelper.AssertElementAbsence(
`${locators._treeSelectedContent}:contains('Dark Blue)`,
);
});
it("5. Verify changing Label text and position", () => {
propPane.UpdatePropertyFieldValue("Text", "New Label");
agHelper.AssertText(locators._label, "text", "New Label");
agHelper.GetNClick(`${locators._adsV2Text}:contains('Left')`);
agHelper.AssertAttribute(locators._label, "position", "Left");
// Preview mode
agHelper.GetNClick(locators._enterPreviewMode);
agHelper.AssertAttribute(locators._label, "position", "Left");
agHelper.GetNClick(locators._exitPreviewMode);
// Deploy mode
deployMode.DeployApp();
agHelper.AssertAttribute(locators._label, "position", "Left");
deployMode.NavigateBacktoEditor();
entityExplorer.SelectEntityByName("NewMultiTreeSelect", "Widgets");
agHelper.GetNClick(`${locators._adsV2Text}:contains('Top')`);
agHelper.AssertAttribute(locators._label, "position", "Top");
});
it("6. Verify tooltip", () => {
entityExplorer.SelectEntityByName("CurrencyInput1", "Widgets");
propPane.UpdatePropertyFieldValue("Default value", "1000");
entityExplorer.SelectEntityByName("NewMultiTreeSelect", "Widgets");
propPane.UpdatePropertyFieldValue("Tooltip", "{{CurrencyInput1.text}}");
agHelper.HoverElement(locators._tooltipIcon);
agHelper.AssertPopoverTooltip("1,000");
// Preview mode
agHelper.GetNClick(locators._enterPreviewMode);
agHelper.HoverElement(locators._tooltipIcon);
agHelper.AssertPopoverTooltip("1,000");
agHelper.GetNClick(locators._exitPreviewMode);
// Deploy mode
deployMode.DeployApp();
agHelper.HoverElement(locators._tooltipIcon);
agHelper.AssertPopoverTooltip("1,000");
deployMode.NavigateBacktoEditor();
});
it("7. Verify Mode options", () => {
entityExplorer.SelectEntityByName("NewMultiTreeSelect", "Widgets");
propPane.SelectPropertiesDropDown("Mode", "Display only parent items");
agHelper.GetNClick(locators._dropDownMultiTreeSelect);
agHelper.GetNClick(locators._switcherIcon);
agHelper.GetNClick(locators._dropDownMultiTreeValue("Dark Blue"));
agHelper.GetNClick(locators._dropDownMultiTreeValue("Light Blue"));
agHelper.GetNAssertElementText(
locators._treeSelectedContent,
"Blue",
"have.text",
1,
);
propPane.SelectPropertiesDropDown("Mode", "Display only child items");
agHelper.GetNAssertElementText(
locators._treeSelectedContent,
"Dark Blue",
"have.text",
1,
);
agHelper.GetNAssertElementText(
locators._treeSelectedContent,
"Light Blue",
"have.text",
2,
);
propPane.SelectPropertiesDropDown("Mode", "Display all items");
agHelper.GetNAssertElementText(
locators._treeSelectedContent,
"Blue",
"have.text",
1,
);
agHelper.GetNAssertElementText(
locators._treeSelectedContent,
"Dark Blue",
"have.text",
2,
);
agHelper.GetNAssertElementText(
locators._treeSelectedContent,
"Light Blue",
"have.text",
3,
);
});
it("8. Verify placeholder", function () {
agHelper.GetNClick(locators._dropDownMultiTreeSelect);
agHelper.GetNClick(locators._dropDownMultiTreeValue("Blue"));
agHelper.GetNClick(locators._dropDownMultiTreeValue("Green"));
propPane.UpdatePropertyFieldValue("Placeholder", "Select new option");
agHelper.AssertText(
locators._treeSelectPlaceholder,
"text",
"Select new option",
);
// Binding with Text widget
entityExplorer.SelectEntityByName("Text1", "Widgets");
propPane.UpdatePropertyFieldValue("Text", "Select value");
entityExplorer.SelectEntityByName("NewMultiTreeSelect", "Widgets");
propPane.UpdatePropertyFieldValue("Placeholder", "{{Text1.text}}");
agHelper.AssertText(
locators._treeSelectPlaceholder,
"text",
"Select value",
);
});
it("9. Validate visible and disabled toggle", () => {
entityExplorer.SelectEntityByName("NewMultiTreeSelect", "Widgets");
propPane.TogglePropertyState("visible", "Off");
// Preview mode
agHelper.GetNClick(locators._enterPreviewMode);
agHelper.AssertElementAbsence(
locators._widgetInDeployed("multiselecttreewidget"),
);
agHelper.GetNClick(locators._exitPreviewMode);
// Deploy mode
deployMode.DeployApp();
agHelper.AssertElementAbsence(
locators._widgetInDeployed("multiselecttreewidget"),
);
deployMode.NavigateBacktoEditor();
entityExplorer.SelectEntityByName("NewMultiTreeSelect", "Widgets");
propPane.TogglePropertyState("visible", "On");
// Preview mode
agHelper.GetNClick(locators._enterPreviewMode);
agHelper.AssertElementVisibility(
locators._widgetInDeployed("multiselecttreewidget"),
);
agHelper.GetNClick(locators._exitPreviewMode);
// Deploy mode
deployMode.DeployApp();
agHelper.AssertElementVisibility(
locators._widgetInDeployed("multiselecttreewidget"),
);
deployMode.NavigateBacktoEditor();
// Visible JS mode
entityExplorer.SelectEntityByName("NewMultiTreeSelect", "Widgets");
propPane.ToggleJSMode("Visible", true);
propPane.UpdatePropertyFieldValue("Visible", "false");
deployMode.DeployApp();
agHelper.AssertElementAbsence(
locators._widgetInDeployed("multiselecttreewidget"),
);
deployMode.NavigateBacktoEditor();
entityExplorer.SelectEntityByName("NewMultiTreeSelect", "Widgets");
propPane.ToggleJSMode("Visible", true);
propPane.UpdatePropertyFieldValue("Visible", "true");
propPane.ToggleJSMode("Visible", false);
// Disabled
entityExplorer.SelectEntityByName("NewMultiTreeSelect", "Widgets");
propPane.TogglePropertyState("disabled", "On");
agHelper.AssertAttribute(
locators._widgetInDeployed("multiselecttreewidget"),
"disabled",
"disabled",
);
// Preview mode
agHelper.GetNClick(locators._enterPreviewMode);
agHelper.AssertAttribute(
locators._widgetInDeployed("multiselecttreewidget"),
"disabled",
"disabled",
);
agHelper.GetNClick(locators._exitPreviewMode);
// Deploy mode
deployMode.DeployApp();
agHelper.AssertAttribute(
locators._widgetInDeployed("multiselecttreewidget"),
"disabled",
"disabled",
);
deployMode.NavigateBacktoEditor();
entityExplorer.SelectEntityByName("NewMultiTreeSelect", "Widgets");
propPane.TogglePropertyState("disabled", "Off");
});
it("10. Validate auto height with limits", function () {
propPane.SelectPropertiesDropDown("height", "Auto Height with limits");
agHelper.HoverElement(propPane._autoHeightLimitMin);
agHelper.AssertContains("Min-Height: 4 rows");
agHelper.HoverElement(propPane._autoHeightLimitMax);
agHelper.AssertContains("Max-Height: 13 rows");
propPane.SelectPropertiesDropDown("height", "Auto Height");
});
it("11. Validate events onOptionChange, onDropdownOpen and onDropdownClose", function () {
propPane.SelectPlatformFunction("onOptionChange", "Show alert");
agHelper.TypeText(
propPane._actionSelectorFieldByLabel("Message"),
"Option Changed",
);
agHelper.GetNClick(propPane._actionSelectorPopupClose);
agHelper.GetNClick(locators._dropDownMultiTreeSelect);
agHelper.GetNClick(locators._dropDownMultiTreeValue("Red"));
agHelper.ValidateToastMessage("Option Changed");
// onDropdownOpen
propPane.SelectPlatformFunction("onDropdownOpen", "Show alert");
agHelper.TypeText(
propPane._actionSelectorFieldByLabel("Message"),
"Dropdown Opened",
);
agHelper.GetNClick(propPane._actionSelectorPopupClose);
agHelper.GetNClick(locators._dropDownMultiTreeSelect);
agHelper.ValidateToastMessage("Dropdown Opened");
// Dropdown Close
propPane.SelectPlatformFunction("onDropdownClose", "Show alert");
agHelper.TypeText(
propPane._actionSelectorFieldByLabel("Message"),
"Dropdown Closed",
);
agHelper.GetNClick(propPane._actionSelectorPopupClose);
agHelper.GetNClick(locators._dropDownMultiTreeSelect);
agHelper.GetNClick(locators._dropDownMultiTreeSelect);
agHelper.ValidateToastMessage("Dropdown Closed");
});
it("12. 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("NewMultiTreeSelect", "Widgets");
propPane.MoveToTab("Style");
// Verify border
agHelper.GetNClick(propPane._segmentedControl("0px"));
agHelper.AssertCSS(".rc-tree-select-selector", "border-radius", "0px");
// Verify Box Shadow
agHelper.GetNClick(`${propPane._segmentedControl("0")}:contains('Large')`);
agHelper.AssertCSS(
".rc-tree-select-selector",
"box-shadow",
"rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px",
);
propPane.MoveToTab("Content");
});
});

217
app/client/cypress/fixtures/multiTreeSelectDsl.json Normal file
View File

@ -0,0 +1,217 @@
{
"dsl": {
"widgetName": "MainContainer",
"backgroundColor": "none",
"rightColumn": 4896,
"snapColumns": 64,
"detachFromLayout": true,
"widgetId": "0",
"topRow": 0,
"bottomRow": 490,
"containerStyle": "none",
"snapRows": 124,
"parentRowSpace": 1,
"type": "CANVAS_WIDGET",
"canExtend": true,
"version": 86,
"minHeight": 1292,
"dynamicTriggerPathList": [],
"parentColumnSpace": 1,
"dynamicBindingPathList": [],
"leftColumn": 0,
"children": [
{
"boxShadow": "none",
"iconSVG": "/static/media/icon.3167ea09b141a0db57f2a78cfc022004.svg",
"labelText": "Label",
"topRow": 25,
"labelWidth": 5,
"type": "MULTI_SELECT_TREE_WIDGET",
"mode": "SHOW_ALL",
"defaultOptionValue": "[\n \"GREEN\"\n]",
"animateLoading": true,
"leftColumn": 2,
"dynamicBindingPathList": [
{
"key": "accentColor"
},
{
"key": "borderRadius"
}
],
"options": "[\n {\n \"label\": \"Blue\",\n \"value\": \"BLUE\",\n \"children\": [\n {\n \"label\": \"Dark Blue\",\n \"value\": \"DARK BLUE\"\n },\n {\n \"label\": \"Light Blue\",\n \"value\": \"LIGHT BLUE\"\n }\n ]\n },\n {\n \"label\": \"Green\",\n \"value\": \"GREEN\"\n },\n {\n \"label\": \"Red\",\n \"value\": \"RED\"\n }\n]",
"placeholderText": "Select option(s)",
"isDisabled": false,
"isRequired": false,
"dynamicHeight": "FIXED",
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"isVisible": true,
"version": 1,
"expandAll": false,
"tags": [
"Select"
],
"isLoading": false,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"mobileBottomRow": 35,
"widgetName": "MultiTreeSelect1",
"displayName": "Multi TreeSelect",
"searchTags": [
"dropdown",
"multiselecttree"
],
"bottomRow": 36,
"parentRowSpace": 10,
"hideCard": false,
"mobileRightColumn": 38,
"parentColumnSpace": 6.15625,
"dynamicTriggerPathList": [],
"labelPosition": "Top",
"key": "bbhhwszfum",
"labelTextSize": "0.875rem",
"isDeprecated": false,
"rightColumn": 61,
"widgetId": "ok7riyytar",
"minWidth": 450,
"parentId": "0",
"labelAlignment": "left",
"renderMode": "CANVAS",
"mobileTopRow": 28,
"responsiveBehavior": "fill",
"mobileLeftColumn": 18,
"maxDynamicHeight": 9000,
"allowClear": false,
"minDynamicHeight": 4
},
{
"boxShadow": "none",
"iconSVG": "/static/media/icon.950aa351208d9d9b2a695b3881ec3779.svg",
"topRow": 42,
"defaultCurrencyCode": "INR",
"labelWidth": 5,
"type": "CURRENCY_INPUT_WIDGET",
"animateLoading": true,
"resetOnSubmit": true,
"leftColumn": 9,
"dynamicBindingPathList": [
{
"key": "accentColor"
},
{
"key": "borderRadius"
}
],
"labelStyle": "",
"isDisabled": false,
"isRequired": false,
"dynamicHeight": "FIXED",
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
"showStepArrows": false,
"isVisible": true,
"allowCurrencyChange": false,
"version": 1,
"tags": [
"Inputs"
],
"isLoading": false,
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"mobileBottomRow": 50,
"widgetName": "CurrencyInput1",
"displayName": "Currency Input",
"searchTags": [
"amount",
"total"
],
"bottomRow": 49,
"parentRowSpace": 10,
"autoFocus": false,
"hideCard": false,
"mobileRightColumn": 41,
"parentColumnSpace": 10.078125,
"labelPosition": "Top",
"key": "7ohqpj6gcx",
"labelTextSize": "0.875rem",
"isDeprecated": false,
"rightColumn": 29,
"widgetId": "63ph31tykz",
"minWidth": 450,
"label": "Label",
"parentId": "0",
"labelAlignment": "left",
"renderMode": "CANVAS",
"mobileTopRow": 43,
"responsiveBehavior": "fill",
"mobileLeftColumn": 21,
"maxDynamicHeight": 9000,
"decimals": 0,
"iconAlign": "left",
"defaultText": "",
"minDynamicHeight": 4
},
{
"mobileBottomRow": 48,
"widgetName": "Text1",
"displayName": "Text",
"iconSVG": "/static/media/icon.a47d6d5dbbb718c4dc4b2eb4f218c1b7.svg",
"searchTags": [
"typography",
"paragraph",
"label"
],
"topRow": 44,
"bottomRow": 48,
"parentRowSpace": 10,
"type": "TEXT_WIDGET",
"hideCard": false,
"mobileRightColumn": 57,
"animateLoading": true,
"overflow": "NONE",
"fontFamily": "{{appsmith.theme.fontFamily.appFont}}",
"parentColumnSpace": 10.078125,
"leftColumn": 41,
"dynamicBindingPathList": [
{
"key": "truncateButtonColor"
},
{
"key": "fontFamily"
},
{
"key": "borderRadius"
},
{
"key": "text"
}
],
"shouldTruncate": false,
"truncateButtonColor": "{{appsmith.theme.colors.primaryColor}}",
"text": "Hello {{appsmith.user.name || appsmith.user.email}}",
"key": "5ejbjgp4n5",
"isDeprecated": false,
"rightColumn": 57,
"textAlign": "LEFT",
"dynamicHeight": "AUTO_HEIGHT",
"widgetId": "3vgn1hs2ig",
"minWidth": 450,
"isVisible": true,
"fontStyle": "BOLD",
"textColor": "#231F20",
"version": 1,
"parentId": "0",
"tags": [
"Suggested",
"Content"
],
"renderMode": "CANVAS",
"isLoading": false,
"mobileTopRow": 44,
"responsiveBehavior": "fill",
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
"mobileLeftColumn": 41,
"maxDynamicHeight": 9000,
"fontSize": "1rem",
"minDynamicHeight": 4
}
]
}
}

2
app/client/cypress/support/Objects/CommonLocators.ts
View File

@ -317,4 +317,6 @@ export class CommonLocators {
_richText_Text_Color = '[title="Text color"] .tox-split-button__chevron';
_richText_color = (value: string) => `[title='${value}']`;
_richText_line = "#tinymce p span";
_treeSelectedContent = ".rc-tree-select-selection-item-content";
_switcherIcon = ".switcher-icon";
}