test: Cypress - Rating widget (#25944)

1. Validate Max rating and Default rating
2. Validations on Tooltip values
3. Validations on readonly, disabled and visibility of rating widget
4. Validations on events - On change rating widget - alert and modal 
5. Validations on Rename, Copy, Delete - rating widget

app/client/cypress/e2e/Regression/ClientSide/Widgets/Button/Button_spec.js

@@ -212,7 +212,7 @@ describe("Button Widget Functionality", function () {
     _.agHelper.Sleep();
     _.entityExplorer.ExpandCollapseEntity("Widgets");
     _.entityExplorer.ExpandCollapseEntity("Container3");
-    _.propPane.CopyWidgetFromPropertyPane("Submitbutton");
+    _.propPane.CopyPasteWidgetFromPropertyPane("Submitbutton");
     //cy.copyWidget("buttonwidget", widgetsPage.buttonWidget);
     //_.deployMode.NavigateBacktoEditor();
     // Delete the button widget

app/client/cypress/e2e/Regression/ClientSide/Widgets/Chart/Custom_Chart_spec.js

@@ -120,7 +120,7 @@ describe("Chart Widget Functionality around custom chart feature", function () {
     cy.wait(1000);
     _.entityExplorer.ExpandCollapseEntity("Widgets");
     _.entityExplorer.ExpandCollapseEntity("Container3");
-    _.propPane.CopyWidgetFromPropertyPane("Test");
+    _.propPane.CopyPasteWidgetFromPropertyPane("Test");
     _.deployMode.DeployApp();
     //Chart-Delete Verification"
     _.deployMode.NavigateBacktoEditor();

app/client/cypress/e2e/Regression/ClientSide/Widgets/Datepicker/DatePickerV2_spec.js

@@ -136,7 +136,7 @@ describe("DatePicker Widget Property pane tests with js bindings", function () {
     _.propPane.UpdatePropertyFieldValue("Default Date", "2020-02-01");
     _.propPane.UpdatePropertyFieldValue("Max Date", "2020-02-10");
 
-    _.agHelper.AssertErrorTooltip("Date out of range");
+    _.agHelper.AssertPopoverTooltip("Date out of range");
   });
 
   it("7. Check isDirty meta property", function () {

app/client/cypress/e2e/Regression/ClientSide/Widgets/List/List4_1_spec.ts

@@ -165,7 +165,7 @@ describe("List Widget Functionality", function () {
 
   it("8. ListWidget-Copy & Delete Verification", function () {
     //Copy Chart and verify all properties
-    propPane.CopyWidgetFromPropertyPane("List1");
+    propPane.CopyPasteWidgetFromPropertyPane("List1");
     propPane.DeleteWidgetFromPropertyPane("List1Copy");
     deployMode.DeployApp();
     // Verify the copied list widget is deleted

app/client/cypress/e2e/Regression/ClientSide/Widgets/List/List4_2_spec.js

@@ -14,7 +14,7 @@ describe("Container Widget Functionality", function () {
 
   it("1. ListWidget-Copy & Delete Verification", function () {
     //Copy Chart and verify all properties
-    _.propPane.CopyWidgetFromPropertyPane("List1");
+    _.propPane.CopyPasteWidgetFromPropertyPane("List1");
     _.propPane.DeleteWidgetFromPropertyPane("List1Copy");
     _.deployMode.DeployApp();
     // Verify the copied list widget is deleted

app/client/cypress/e2e/Regression/ClientSide/Widgets/Rating/Rating_Widget_spec.ts

@@ -0,0 +1,165 @@
+import { RATING_WIDGET } from "../../../../../locators/RatingWidgetLocators";
+
+import {
+  agHelper,
+  fakerHelper,
+  draggableWidgets,
+  entityExplorer,
+  deployMode,
+  propPane,
+  locators,
+} from "../../../../../support/Objects/ObjectsCore";
+
+describe("Rating widet testcases", () => {
+  before(() => {
+    entityExplorer.DragDropWidgetNVerify(draggableWidgets.RATING);
+  });
+
+  it("1. Validate Max rating and Default rating", () => {
+    agHelper.AssertElementLength(RATING_WIDGET.star_icon, 10);
+    // assert error on decimal value in max rating
+    propPane.UpdatePropertyFieldValue("Max rating", "1.5");
+    agHelper.VerifyEvaluatedErrorMessage("Value should be a positive integer");
+    // assert error on text value in max rating
+    propPane.UpdatePropertyFieldValue(
+      "Max rating",
+      fakerHelper.GetRandomText(),
+    );
+    agHelper.VerifyEvaluatedErrorMessage(
+      "This value does not evaluate to type number",
+    );
+    // assert error on symbol value in max rating
+    propPane.UpdatePropertyFieldValue(
+      "Max rating",
+      fakerHelper.GetUSPhoneNumber(),
+    );
+    agHelper.VerifyEvaluatedErrorMessage(
+      "This value does not evaluate to type number",
+    );
+    // assert no error on using parse int function in max rating
+    propPane.UpdatePropertyFieldValue("Max rating", "{{parseInt(1)}}");
+    agHelper.AssertElementLength(RATING_WIDGET.star_icon, 2);
+    propPane.UpdatePropertyFieldValue("Max rating", "{{parseInt(2.5)}}");
+    agHelper.AssertElementLength(RATING_WIDGET.star_icon, 4);
+    // assert the no. of stars on increasing max rating value to 10
+    propPane.UpdatePropertyFieldValue("Max rating", "10");
+    agHelper.AssertElementLength(RATING_WIDGET.star_icon, 20);
+    // assert default no. of stars rated
+    agHelper.AssertElementLength(RATING_WIDGET.star_icon_filled(100), 3);
+    // change default no. of stars and assert the same
+    propPane.UpdatePropertyFieldValue("Default rating", "5");
+    agHelper.AssertElementLength(RATING_WIDGET.star_icon_filled(100), 5);
+    // change default no. of stars to decimal value and assert error
+    propPane.UpdatePropertyFieldValue("Default rating", "7.5");
+    agHelper.VerifyEvaluatedErrorMessage(
+      "This value can be a decimal only if 'Allow half' is true",
+    );
+    // turn on allow half stars and assert to be able to fill decimal value
+    propPane.TogglePropertyState("Allow half stars", "On");
+    propPane.UpdatePropertyFieldValue("Default rating", "7.9");
+    agHelper.AssertElementLength(RATING_WIDGET.star_icon_filled(100), 7);
+    agHelper.AssertElementLength(RATING_WIDGET.star_icon_filled(90), 1);
+
+    // turn off allow half stars and assert to not be able to fill decimal value
+    propPane.EnterJSContext("Allow half stars", "false");
+    propPane.UpdatePropertyFieldValue("Default rating", "1.1");
+    agHelper.VerifyEvaluatedErrorMessage(
+      "This value can be a decimal only if 'Allow half' is true",
+    );
+    // set default rating value greater than max rating and assert error
+    propPane.UpdatePropertyFieldValue("Max rating", "3");
+    propPane.UpdatePropertyFieldValue("Default rating", "4");
+    agHelper.VerifyEvaluatedErrorMessage(
+      "This value must be less than or equal to max count",
+    );
+  });
+
+  it("2. Validations on Tooltip values", () => {
+    propPane.UpdatePropertyFieldValue("Max rating", "10");
+    propPane.UpdatePropertyFieldValue("Default rating", "5");
+    // set list of string as values for tooltips in UpdatePropertyFieldValue
+    propPane.UpdatePropertyFieldValue("Tooltips", "[1,2,3]");
+    propPane.UpdatePropertyFieldValue("Tooltips", "Bad,Good,Neutral");
+    agHelper.VerifyEvaluatedErrorMessage(
+      "This value does not evaluate to type Array<string>",
+    );
+    propPane.UpdatePropertyFieldValue("Tooltips", '["Worse","Bad","Neutral"]');
+    // deploy app and check if able to click on stars
+    deployMode.DeployApp();
+    agHelper.GetNClick(RATING_WIDGET.star_icon, 12, true, 0);
+    agHelper.AssertElementLength(RATING_WIDGET.star_icon_filled(100), 7);
+    agHelper.HoverElement(RATING_WIDGET.star_icon, 4);
+    agHelper.AssertPopoverTooltip("Neutral"); // assert tooltip on hovering
+    deployMode.NavigateBacktoEditor();
+    agHelper.GetNClick(RATING_WIDGET.ratingwidget);
+  });
+
+  it("3. Verify readonly, disabled and visibility of rating widget", () => {
+    // update max rating and default rating for new case
+    propPane.UpdatePropertyFieldValue("Max rating", "15");
+    propPane.UpdatePropertyFieldValue("Default rating", "3");
+    // turn visible off
+    propPane.TogglePropertyState("Visible", "Off");
+    deployMode.DeployApp();
+    // assert rating widget is not present - since visbible is off
+    agHelper.AssertElementAbsence(RATING_WIDGET.ratingwidget);
+    deployMode.NavigateBacktoEditor();
+    agHelper.GetNClick(RATING_WIDGET.ratingwidget);
+    // turn visible on
+    propPane.TogglePropertyState("Visible", "On");
+    // make the widget read only
+    propPane.TogglePropertyState("Read only", "On");
+    deployMode.DeployApp();
+    agHelper.AssertElementVisible(RATING_WIDGET.ratingwidget);
+    // assert even after clicking on stars, the stars are not changed since its read only
+    agHelper.GetNClick(RATING_WIDGET.star_icon, 12, true, 0);
+    agHelper.AssertElementLength(RATING_WIDGET.star_icon_filled(100), 3);
+
+    deployMode.NavigateBacktoEditor();
+    agHelper.GetNClick(RATING_WIDGET.ratingwidget);
+    propPane.TogglePropertyState("Read only", "Off");
+  });
+
+  it("4. check events - On change rating widget", () => {
+    propPane.UpdatePropertyFieldValue("Default rating", "1");
+    // set an alert on clicking ratings
+    propPane.SelectPlatformFunction("onChange", "Show alert");
+    agHelper.TypeText(
+      propPane._actionSelectorFieldByLabel("Message"),
+      "Thanks for rating us!",
+    );
+    agHelper.GetNClick(propPane._actionSelectorPopupClose);
+    // deploy app and click on stars and assert the alert
+    deployMode.DeployApp();
+    agHelper.GetNClick(RATING_WIDGET.star_icon, 4, true, 0);
+    agHelper.ValidateToastMessage("Thanks for rating us!");
+
+    deployMode.NavigateBacktoEditor();
+    agHelper.GetNClick(RATING_WIDGET.ratingwidget);
+    // open a modal on clicking ratings
+    propPane.CreateModal("Thanks for rating us!", "onChange");
+    // deploy app and click on stars and close the modal
+    deployMode.DeployApp();
+    agHelper.GetNClick(RATING_WIDGET.star_icon, 5, true, 0);
+
+    deployMode.NavigateBacktoEditor();
+    agHelper.GetNClick(RATING_WIDGET.ratingwidget);
+    agHelper.ClickButton("Close");
+  });
+
+  it("5. Rename, Copy Delete - rating widget", () => {
+    // rename widget from property pane
+    propPane.RenameWidget("Rating1", "RateUs");
+    // copy widget from property pane and assert copied info
+    propPane.CopyPasteWidgetFromPropertyPane("RateUs");
+    agHelper.ValidateToastMessage("Copied RateUs");
+    // copy widget using keyboard and   assert copied info
+    entityExplorer.CopyPasteWidget("RateUs");
+    agHelper.ValidateToastMessage("Copied RateUs");
+    agHelper.AssertText(RATING_WIDGET.ratingWidgetName, "text", "RateUsCopy1");
+    // delete both widgets
+    propPane.DeleteWidgetFromPropertyPane("RateUsCopy");
+    propPane.DeleteWidgetFromPropertyPane("RateUs");
+    agHelper.AssertElementAbsence(RATING_WIDGET.ratingwidget);
+  });
+});

app/client/cypress/locators/RatingWidgetLocators.ts

@@ -0,0 +1,8 @@
+// export rating widget selectors
+export const RATING_WIDGET = {
+    ratingWidgetName : ".t--draggable-ratewidget .t--widget-name",
+    ratingwidget :"//*[contains(@data-testid,'t--centered-Rating1')]",
+    star_icon : ".bp3-icon-star",
+    star_icon_filled : (width: any) => `//span[contains(@style,'width: ${width}%')]`
+}
+

app/client/cypress/support/Objects/CommonLocators.ts

@@ -93,6 +93,8 @@ export class CommonLocators {
   _responseTab = "[data-testid=t--tab-response]";
   _modal = ".t--modal-widget";
   _closeModal = "button:contains('Close')";
+  _buttonText = (btnText: string) =>
+    "//*[contains(@class, 'bp3-button-text') and text()='" + btnText + "']";
   _entityProperties = (entityNameinLeftSidebar: string) =>
     "//div[text()='" +
     entityNameinLeftSidebar +
@@ -241,7 +243,7 @@ export class CommonLocators {
     `//button[contains(@class, 't--open-dropdown-${value}')]`;
   _fixedLayout = "#t--layout-conversion-cta:contains('fixed')";
   _forkAppToWorkspaceBtn = ".t--fork-app-to-workspace-button";
-  _errorToolTip = ".bp3-popover-content";
+  _popoverToolTip = ".bp3-popover-content";
   _selectedWidget = "div[data-testid='t--selected']";
   _appsmithWidget = (widgetId: string) => `.appsmith_widget_${widgetId}`;
   _selectionCanvas = (canvasId: string) => `#div-selection-${canvasId}`;

app/client/cypress/support/Pages/AggregateHelper.ts

@@ -143,9 +143,9 @@ export class AggregateHelper extends ReusableHelper {
     //cy.intercept("POST", "/api/v1/users/invite", (req) => { req.headers["origin"] = "Cypress";}).as("mockPostInvite");
   }
 
-  public AssertErrorTooltip(expectedError: string) {
+  public AssertPopoverTooltip(expectedText: string) {
-    this.GetText(this.locator._errorToolTip, "text").then(($error) =>
+    this.GetText(this.locator._popoverToolTip, "text").then(($tooltiptxt) =>
-      expect($error).to.eq(expectedError),
+      expect($tooltiptxt).to.eq(expectedText),
     );
   }
 

app/client/cypress/support/Pages/PropertyPane.ts

@@ -164,7 +164,7 @@ export class PropertyPane {
     //this.agHelper.AssertElementVisible(this._deleteWidget); //extra valisation, hence commenting!
   }
 
-  public CopyWidgetFromPropertyPane(widgetName: string) {
+  public CopyPasteWidgetFromPropertyPane(widgetName: string) {
     this.entityExplorer.SelectEntityByName(widgetName, "Widgets");
     this.agHelper.GetNClick(this._copyWidget);
     this.agHelper.Sleep(200);