From bec8337af9982ab457fe7cb8a707bcc6e5a30b47 Mon Sep 17 00:00:00 2001 From: NandanAnantharamu <67676905+NandanAnantharamu@users.noreply.github.com> Date: Tue, 22 Aug 2023 20:22:22 +0530 Subject: [PATCH] test: updated tests for checkboxgroup (#26364) Added tests for checkbox group https://github.com/appsmithorg/TestSmith/issues/2479 --- .../Widgets/Checkbox/CheckBoxGroupTest.ts | 457 ++++++++++++++++++ app/client/cypress/limited-tests.txt | 2 +- .../cypress/support/Objects/CommonLocators.ts | 3 + .../cypress/support/Pages/PropertyPane.ts | 13 +- 4 files changed, 471 insertions(+), 4 deletions(-) create mode 100644 app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBoxGroupTest.ts diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBoxGroupTest.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBoxGroupTest.ts new file mode 100644 index 0000000000..6550da1539 --- /dev/null +++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Checkbox/CheckBoxGroupTest.ts @@ -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(); + }); +}); diff --git a/app/client/cypress/limited-tests.txt b/app/client/cypress/limited-tests.txt index 4807f10528..19b75d8cfd 100644 --- a/app/client/cypress/limited-tests.txt +++ b/app/client/cypress/limited-tests.txt @@ -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: diff --git a/app/client/cypress/support/Objects/CommonLocators.ts b/app/client/cypress/support/Objects/CommonLocators.ts index b839f954b5..dae70004a2 100644 --- a/app/client/cypress/support/Objects/CommonLocators.ts +++ b/app/client/cypress/support/Objects/CommonLocators.ts @@ -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')]"; } diff --git a/app/client/cypress/support/Pages/PropertyPane.ts b/app/client/cypress/support/Pages/PropertyPane.ts index 4f82d0df30..a760afdb55 100644 --- a/app/client/cypress/support/Pages/PropertyPane.ts +++ b/app/client/cypress/support/Pages/PropertyPane.ts @@ -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") {