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

test: updated tests for checkboxgroup (#26364)

Browse Source 
Added tests for checkbox group
https://github.com/appsmithorg/TestSmith/issues/2479
This commit is contained in:
NandanAnantharamu 2023-08-22 20:22:22 +05:30 committed by GitHub
parent 6e41ec8ec4
commit bec8337af9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 471 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

457
app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBoxGroupTest.ts Normal file
View File

@ -0,0 +1,457 @@
import {
agHelper,
locators,
deployMode,
entityExplorer,
propPane,
dataSources,
entityItems,
} from "../../../../../support/Objects/ObjectsCore";
describe("Checkbox Tests", function () {
before(() => {
entityExplorer.DragDropWidgetNVerify("checkboxgroupwidget", 550, 100);
});
it("1. Verify property visibility", function () {
const defaultProperties = ["options", "defaultselectedvalues"];
const labelProperties = ["text", "position"];
const generalProperties = [
"tooltip",
"visible",
"disabled",
"inline",
"selectalloptions",
"animateloading",
"height",
];
const eventsProperties = ["onselectionchange"];
const validationsProperties = ["required"];
const labelStylesProperties = ["fontcolor", "fontsize", "emphasis"];
const styleGeneralProperties = ["alignment"];
const styleColorProperties = ["accentcolor"];
entityExplorer.SelectEntityByName("CheckboxGroup1", "Widgets");
defaultProperties.forEach((defaultSectionProperty) => {
agHelper.AssertElementVisibility(
propPane._propertyPanePropertyControl(
"data",
`${defaultSectionProperty}`,
),
);
});
// Label Section properties
labelProperties.forEach((labelSectionProperty) => {
agHelper.AssertElementVisibility(
propPane._propertyPanePropertyControl(
"label",
`${labelSectionProperty}`,
),
);
});
// General Section properties
generalProperties.forEach((generalSectionProperty) => {
agHelper.AssertElementVisibility(
propPane._propertyPanePropertyControl(
"general",
`${generalSectionProperty}`,
),
);
});
// Events Section properties
agHelper.AssertElementVisibility(
propPane._propertyPanePropertyControl("events", `${eventsProperties}`),
);
// Validation Section properties
agHelper.AssertElementVisibility(
propPane._propertyPanePropertyControl(
"validations",
`${validationsProperties}`,
),
);
// Style Section properties
propPane.MoveToTab("Style");
// Label Style Section properties
labelStylesProperties.forEach((labelSectionProperty) => {
agHelper.AssertElementVisibility(
propPane._propertyPanePropertyControl(
"labelstyles",
`${labelSectionProperty}`,
),
);
});
// General Style Section properties
agHelper.AssertElementVisibility(
propPane._propertyPanePropertyControl(
"general",
`${styleGeneralProperties}`,
),
);
// Color Style Section properties
agHelper.AssertElementVisibility(
propPane._propertyPanePropertyControl("color", `${styleColorProperties}`),
);
});
it("2. Verify Renaming, duplication and deletion", () => {
// Rename and verify
entityExplorer.RenameEntityFromExplorer(
"CheckboxGroup1",
"NewCheckBox",
true,
);
agHelper.AssertElementVisibility(locators._widgetName("NewCheckBox"));
// Copy and paste widget using cmd+c and cmd+v
entityExplorer.CopyPasteWidget("NewCheckBox");
entityExplorer.AssertEntityPresenceInExplorer("NewCheckBoxCopy");
entityExplorer.DeleteWidgetFromEntityExplorer("NewCheckBoxCopy");
// Copy paste from property pane and delete from property pane
propPane.CopyPasteWidgetFromPropertyPane("NewCheckBox");
propPane.DeleteWidgetFromPropertyPane("NewCheckBoxCopy");
});
it("3. Verify Data can be added and deleted", () => {
entityExplorer.SelectEntityByName("NewCheckBox", "Widgets");
propPane.MoveToTab("Content");
agHelper.GetElementLength(propPane._placeholderName).then((len) => {
agHelper.GetNClick(propPane._addOptionProperty);
agHelper.RemoveCharsNType(propPane._placeholderName, -1, "Black", 3);
agHelper.RemoveCharsNType(propPane._placeholderValue, -1, "BLACK", 3);
// Verify option added
agHelper.AssertElementLength(propPane._placeholderName, len + 1);
// Preview mode
agHelper.GetNClick(locators._enterPreviewMode);
agHelper.AssertElementLength(propPane._checkbox, len + 1);
agHelper.GetNClick(locators._exitPreviewMode);
// Deploy mode
deployMode.DeployApp();
agHelper.AssertElementLength(propPane._checkbox, len + 1);
deployMode.NavigateBacktoEditor();
// Delete option
entityExplorer.SelectEntityByName("NewCheckBox", "Widgets");
agHelper.GetNClick(propPane._optionsDeleteButton, 3);
// Verify option deleted
agHelper.AssertElementLength(propPane._placeholderName, len);
// Preview mode
agHelper.GetNClick(locators._enterPreviewMode);
agHelper.AssertElementLength(propPane._checkbox, len);
agHelper.GetNClick(locators._exitPreviewMode);
// Deploy mode
deployMode.DeployApp();
agHelper.AssertElementLength(propPane._checkbox, len);
deployMode.NavigateBacktoEditor();
entityExplorer.SelectEntityByName("NewCheckBox", "Widgets");
});
});
it("4. 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("NewCheckBox", "Widgets");
agHelper.GetNClick(`${locators._adsV2Text}:contains('Top')`);
agHelper.AssertAttribute(locators._label, "position", "Top");
});
it("5. Verify tooltip", () => {
entityExplorer.DragDropWidgetNVerify("currencyinputwidget", 550, 300);
propPane.UpdatePropertyFieldValue("Default value", "1000");
entityExplorer.SelectEntityByName("NewCheckBox", "Widgets");
propPane.UpdatePropertyFieldValue("Tooltip", "{{CurrencyInput1.text}}");
agHelper.HoverElement(locators._checkboxHelpIcon);
agHelper.AssertPopoverTooltip("1,000");
// Preview mode
agHelper.GetNClick(locators._enterPreviewMode);
agHelper.HoverElement(locators._checkboxHelpIcon);
agHelper.AssertPopoverTooltip("1,000");
agHelper.GetNClick(locators._exitPreviewMode);
// Deploy mode
deployMode.DeployApp();
agHelper.HoverElement(locators._checkboxHelpIcon);
agHelper.AssertPopoverTooltip("1,000");
deployMode.NavigateBacktoEditor();
});
it("6. Verify onSelectionChange Navigat to", () => {
entityExplorer.AddNewPage();
entityExplorer.SelectEntityByName("Page1");
entityExplorer.SelectEntityByName("NewCheckBox", "Widgets");
propPane.SelectPlatformFunction("onSelectionChange", "Navigate to");
dataSources.ValidateNSelectDropdown("Choose page", "Select page", "Page2");
agHelper.Sleep(2000);
agHelper.GetNClick(propPane._checkbox, 1, true);
entityExplorer.VerifyIsCurrentPage("Page2");
entityExplorer.SelectEntityByName("Page1");
// Preview mode
agHelper.GetNClick(locators._enterPreviewMode);
agHelper.GetNClick(propPane._checkbox, 1, true);
entityExplorer.VerifyIsCurrentPage("Page2");
agHelper.GetNClick(locators._exitPreviewMode);
// Deploy mode
deployMode.DeployApp();
agHelper.GetNClick(propPane._checkbox, 1, true);
agHelper
.GetElement(`${locators._deployedPage}:contains("Page2")`)
.should("have.class", "is-active");
deployMode.NavigateBacktoEditor();
entityExplorer.SelectEntityByName("Page1");
entityExplorer.SelectEntityByName("NewCheckBox", "Widgets");
});
it("7. 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", "updateLayout", false);
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("NewCheckBox", "Widgets");
propPane.MoveToTab("Style");
// Verify Accent color
propPane.SelectColorFromColorPicker("accentcolor", 10);
agHelper.AssertAttribute(
`${locators._propertyControl}accentcolor ${propPane._roundCursorPointer}`,
"color",
"#b91c1c",
);
propPane.ToggleJSMode("accentcolor", true);
propPane.UpdatePropertyFieldValue(
"Accent color",
"{{appsmith.theme.colors.primaryColor}}",
);
propPane.ToggleJSMode("accentcolor", false);
agHelper.AssertAttribute(
`${locators._propertyControl}accentcolor ${propPane._roundCursorPointer}`,
"color",
"#553DE9",
);
// Verify full color picker for accent color
agHelper.AssertAttribute(propPane._colorPickerInput, "type", "text", 1);
propPane.TogglePropertyState("accentcolor", "On", "updateLayout", false);
agHelper.AssertAttribute(propPane._colorPickerInput, "type", "color", 1);
// Verify border
agHelper.GetNClick(propPane._segmentedControl("0px"));
agHelper.AssertAttribute(
`${propPane._checkbox} input`,
"borderradius",
"0px",
);
propPane.ToggleJSMode("borderradius", true);
propPane.UpdatePropertyFieldValue("Border radius", "0.375rem");
agHelper.AssertAttribute(
`${propPane._checkbox} input`,
"borderradius",
"0.375rem",
);
});
it("8. Verify checkbox properties by updating text widget", () => {
const options =
'[{"label":"Blue","value":"BLUE"},{"label":"Green","value":"GREEN"},{"label":"Red","value":"RED"}]';
entityExplorer.DragDropWidgetNVerify("textwidget", 550, 500);
propPane.UpdatePropertyFieldValue("Text", "{{NewCheckBox.isVisible}}");
agHelper.GetNAssertContains(
locators._widgetInDeployed("textwidget"),
"true",
);
// Preview mode
agHelper.GetNClick(locators._enterPreviewMode);
agHelper.GetNAssertContains(
locators._widgetInDeployed("textwidget"),
"true",
);
agHelper.GetNClick(locators._exitPreviewMode);
// Deploy mode
deployMode.DeployApp();
agHelper.GetNAssertContains(
locators._widgetInDeployed("textwidget"),
"true",
);
deployMode.NavigateBacktoEditor();
// Verify checkbox visible
entityExplorer.SelectEntityByName("NewCheckBox", "Widgets");
propPane.MoveToTab("Content");
propPane.TogglePropertyState("visible", "Off");
agHelper.GetNAssertContains(
locators._widgetInDeployed("textwidget"),
"false",
);
// Preview mode
agHelper.GetNClick(locators._enterPreviewMode);
agHelper.GetNAssertContains(
locators._widgetInDeployed("textwidget"),
"false",
);
agHelper.GetNClick(locators._exitPreviewMode);
// Deploy mode
deployMode.DeployApp();
agHelper.GetNAssertContains(
locators._widgetInDeployed("textwidget"),
"false",
);
deployMode.NavigateBacktoEditor();
entityExplorer.SelectEntityByName("NewCheckBox", "Widgets");
propPane.MoveToTab("Content");
propPane.TogglePropertyState("visible", "On");
// Verify checkbox disabled
entityExplorer.SelectEntityByName("Text1", "Widgets");
propPane.MoveToTab("Content");
propPane.UpdatePropertyFieldValue("Text", "{{NewCheckBox.isDisabled}}");
agHelper.GetNAssertContains(
locators._widgetInDeployed("textwidget"),
"false",
);
// Preview mode
agHelper.GetNClick(locators._enterPreviewMode);
agHelper.GetNAssertContains(
locators._widgetInDeployed("textwidget"),
"false",
);
agHelper.GetNClick(locators._exitPreviewMode);
// Deploy mode
deployMode.DeployApp();
agHelper.GetNAssertContains(
locators._widgetInDeployed("textwidget"),
"false",
);
deployMode.NavigateBacktoEditor();
entityExplorer.SelectEntityByName("NewCheckBox", "Widgets");
propPane.MoveToTab("Content");
propPane.TogglePropertyState("disabled", "On");
agHelper.GetNAssertContains(
locators._widgetInDeployed("textwidget"),
"true",
);
// Preview mode
agHelper.GetNClick(locators._enterPreviewMode);
agHelper.GetNAssertContains(
locators._widgetInDeployed("textwidget"),
"true",
);
agHelper.GetNClick(locators._exitPreviewMode);
// Deploy mode
deployMode.DeployApp();
agHelper.GetNAssertContains(
locators._widgetInDeployed("textwidget"),
"true",
);
deployMode.NavigateBacktoEditor();
entityExplorer.SelectEntityByName("NewCheckBox", "Widgets");
propPane.MoveToTab("Content");
propPane.TogglePropertyState("disabled", "Off");
// Verify selected value[All values selected]
entityExplorer.SelectEntityByName("Text1", "Widgets");
propPane.MoveToTab("Content");
propPane.UpdatePropertyFieldValue("Text", "{{NewCheckBox.selectedValues}}");
entityExplorer.ActionContextMenuByEntityName({
entityNameinLeftSidebar: "Page2",
action: "Delete",
entityType: entityItems.Page,
});
agHelper.GetNClick(locators._checkboxWidgetLabel, 1);
agHelper.GetNClick(locators._checkboxWidgetLabel, 2);
agHelper.GetNAssertContains(locators._textWidget, '"BLUE"');
agHelper.GetNAssertContains(locators._textWidget, '"GREEN"');
agHelper.GetNAssertContains(locators._textWidget, '"RED"');
// Preview mode
agHelper.GetNClick(locators._enterPreviewMode);
agHelper.GetNAssertContains(locators._textWidgetContaioner, '"BLUE"');
agHelper.GetNAssertContains(locators._textWidgetContaioner, '"GREEN"');
agHelper.GetNAssertContains(locators._textWidgetContaioner, '"RED"');
agHelper.GetNClick(locators._exitPreviewMode);
// Deploy mode
deployMode.DeployApp();
agHelper.GetNClick(locators._checkboxWidgetLabel, 1);
agHelper.GetNClick(locators._checkboxWidgetLabel, 2);
agHelper.GetNAssertContains(locators._textWidgetContaioner, '"BLUE"');
agHelper.GetNAssertContains(locators._textWidgetContaioner, '"GREEN"');
agHelper.GetNAssertContains(locators._textWidgetContaioner, '"RED"');
deployMode.NavigateBacktoEditor();
entityExplorer.SelectEntityByName("Text1", "Widgets");
propPane.MoveToTab("Content");
propPane.UpdatePropertyFieldValue("Text", "{{NewCheckBox.isValid}}");
agHelper.GetNAssertContains(
locators._widgetInDeployed("textwidget"),
"true",
);
// Preview mode
agHelper.GetNClick(locators._enterPreviewMode);
agHelper.GetNAssertContains(
locators._widgetInDeployed("textwidget"),
"true",
);
agHelper.GetNClick(locators._exitPreviewMode);
// Deploy mode
deployMode.DeployApp();
agHelper.GetNAssertContains(
locators._widgetInDeployed("textwidget"),
"true",
);
deployMode.NavigateBacktoEditor();
});
});

2
app/client/cypress/limited-tests.txt
View File

@ -1,5 +1,5 @@
# To run only limited tests - give the spec names in below format:
cypress/e2e/Regression/ClientSide/Templates/Fork_Template_spec.js
cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBoxGroupTest.ts
# For running all specs - uncomment below:

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

@ -277,6 +277,9 @@ export class CommonLocators {
public ds_editor_env_filter = (envName: string) =>
`[data-testid="t--ds-data-filter-${envName}"]`;
_textWidgetContaioner = ".t--text-widget-container span";
_label = ".bp3-label";
_checkboxHelpIcon = ".bp3-popover-target svg";
_checkboxWidgetLabel = ".t--checkbox-widget-label";
_buttonWidgetInForm =
"//*[contains(@class,'t--widget-buttonwidget')]//button[contains(@class,'bp3-button')]";
}

13
app/client/cypress/support/Pages/PropertyPane.ts
View File

@ -135,7 +135,7 @@ export class PropertyPane {
_addOptionProperty = ".t--property-control-options-add";
_optionContent = ".rc-select-item-option-content";
_dropdownOptionSpan = ".t--dropdown-option span";
private _propertyControlColorPicker = (property: string) =>
_propertyControlColorPicker = (property: string) =>
`.t--property-control-${property} .bp3-input-group input`;
_propertyText = ".bp3-ui-text span";
_paneTitle = ".t--property-pane-title";
@ -147,8 +147,12 @@ export class PropertyPane {
`${this.locator._widgetByName(widgetName)} ${this._propertyText}`;
_placeholderName = "[placeholder='Name']";
_placeholderValue = "[placeholder='Value']";
_sliderMark = ".slider-mark";
_optionsDeleteButton = "[orientation='HORIZONTAL'] .ads-v2-button";
_colorPickerInput = "[data-testid='t--color-picker-input']";
_emphasisSelector = (value: string) => `.t--button-group-${value}`;
_checkbox = ".bp3-checkbox";
_roundCursorPointer = ".rounded-full.cursor-pointer";
_sliderMark = ".slider-mark";
_styleSize = (size: string) => `.ads-v2-segmented-control-value-${size}`;
_themeColor =
"//h3[text()='Theme Colors']//..//div[contains(@class, 't--colorpicker-v2-color')]";
@ -241,6 +245,7 @@ export class PropertyPane {
propertyName: string,
toggle: "On" | "Off" = "On",
networkCall = "updateLayout",
toValidateNetworkCall = true,
) {
if (toggle == "On") {
this.agHelper
@ -254,7 +259,9 @@ export class PropertyPane {
.should("not.be.checked");
}
this.agHelper.AssertAutoSave();
networkCall && this.assertHelper.AssertNetworkStatus(networkCall);
if (toValidateNetworkCall) {
networkCall && this.assertHelper.AssertNetworkStatus(networkCall);
}
}
public MoveToTab(tab: "Content" | "Style") {