test: updated tests for checkboxgroup (#26364)

Added tests for checkbox group
https://github.com/appsmithorg/TestSmith/issues/2479

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();
+  });
+});

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:

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')]";
 }

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,8 +259,10 @@ export class PropertyPane {
         .should("not.be.checked");
     }
     this.agHelper.AssertAutoSave();
+    if (toValidateNetworkCall) {
       networkCall && this.assertHelper.AssertNetworkStatus(networkCall);
     }
+  }
 
   public MoveToTab(tab: "Content" | "Style") {
     this.agHelper.GetNClick(this._styleTabBtn(tab));