test: Cypress - progress widget cases (#25981)

Added cases for: 

1. Check Progress, Number of steps, Counterclockwise Show result
elements disabled on infinite looping enablement
2. Check binding in Progress property 
3. Check progress widget visibility based on visible state
4. Assert expected error texts

app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/Progress_spec.js

@@ -1,17 +1,23 @@
-const explorer = require("../../../../../locators/explorerlocators.json");
+const widgets = require("../../../../../locators/Widgets.json");
+import {
+  agHelper,
+  deployMode,
+  draggableWidgets,
+  entityExplorer,
+  fakerHelper,
+  propPane,
+} from "../../../../../support/Objects/ObjectsCore";
+import { progressWidgetProgress } from "../../../../../locators/WidgetLocators";
 
 describe("Progress Widget", function () {
-  it("Add a new Progress widget and text widget", function () {
-    cy.get(explorer.addWidget).click();
-    cy.dragAndDropToCanvas("progresswidget", { x: 300, y: 300 });
-    cy.get(".t--widget-progresswidget").should("exist");
-    cy.dragAndDropToCanvas("textwidget", { x: 300, y: 500 });
-    cy.openPropertyPane("textwidget");
-    cy.updateCodeInput(".t--property-control-text", "");
+  before(() => {
+    entityExplorer.DragDropWidgetNVerify(draggableWidgets.PROGRESS);
+    entityExplorer.DragDropWidgetNVerify(draggableWidgets.TEXT, 500, 200);
+    propPane.UpdatePropertyFieldValue("Text", "");
   });
 
   // Linear progress
-  it("Property: isIndeterminate, Toggle infinite loading", function () {
+  it("1. Property: isIndeterminate, Toggle infinite loading", function () {
     cy.openPropertyPane("progresswidget");
     // enable infinite loading
     cy.togglebar(".t--property-control-infiniteloading input[type='checkbox']");
@@ -26,7 +32,7 @@ describe("Progress Widget", function () {
     // show determinate linear progress
     cy.get("[data-testid='50']").should("exist");
   });
-  it("Property: value, Change progress value", function () {
+  it("2.Property: value, Change progress value", function () {
     cy.updateCodeInput(".t--property-control-progress", "60");
     cy.wait("@updateLayout").should(
       "have.nested.property",
@@ -36,7 +42,7 @@ describe("Progress Widget", function () {
     // pass 60
     cy.get("[data-testid='60']").should("exist");
   });
-  it("Property: showResult, Toggle show result", function () {
+  it("3. Property: showResult, Toggle show result", function () {
     // enable show result
     cy.togglebar(".t--property-control-showresult input[type='checkbox']");
     // show label
@@ -48,7 +54,7 @@ describe("Progress Widget", function () {
     // does not show any label
     cy.get("[data-testid='60']").first().next().should("not.exist");
   });
-  it("Property: steps, Change steps", function () {
+  it("4. Property: steps, Change steps", function () {
     cy.updateCodeInput(".t--property-control-numberofsteps", "2");
     // show progress with steps
     cy.get("[data-testid='step']").should("have.length", 2);
@@ -58,12 +64,12 @@ describe("Progress Widget", function () {
   });
 
   // Circular progress
-  it("Property: type, Change type to Circular", function () {
+  it("5. Property: type, Change type to Circular", function () {
     // Switch to circular mode
     cy.get("[data-value='circular']").click({ force: true });
     cy.get("[data-testid='circular']").should("exist");
   });
-  it("Property: isIndeterminate, Toggle infinite loading", function () {
+  it("6. Property: isIndeterminate, Toggle infinite loading", function () {
     cy.openPropertyPane("progresswidget");
     // enable infinite loading
     cy.togglebar(".t--property-control-infiniteloading input[type='checkbox']");
@@ -81,7 +87,7 @@ describe("Progress Widget", function () {
       200,
     );
   });
-  it("Property: value, Change progress value", function () {
+  it("7. Property: value, Change progress value", function () {
     cy.updateCodeInput(".t--property-control-progress", "50");
     cy.wait("@updateLayout").should(
       "have.nested.property",
@@ -91,7 +97,7 @@ describe("Progress Widget", function () {
     // The path element with 50 should exist
     cy.get("[data-testvalue='50']").should("exist");
   });
-  it("Property: showResult, Toggle show result", function () {
+  it("8. Property: showResult, Toggle show result", function () {
     // enable show result
     cy.togglebar(".t--property-control-showresult input[type='checkbox']");
     // show label
@@ -103,7 +109,7 @@ describe("Progress Widget", function () {
     // does not show any label
     cy.get("[data-testid='circular-label']").should("not.exist");
   });
-  it("Property: steps, Change steps", function () {
+  it("9. Property: steps, Change steps", function () {
     cy.updateCodeInput(".t--property-control-numberofsteps", "2");
     // show circular progress with steps
     cy.get("[data-testid='separator']").should("have.length", 2);
@@ -111,7 +117,7 @@ describe("Progress Widget", function () {
     // does not show progress with steps
     cy.get("[data-testid='separator']").should("not.exist");
   });
-  it("Property: counterClockwise,Change counterclockwise", function () {
+  it("10. Property: counterClockwise,Change counterclockwise", function () {
     // enable counterclockwise
     cy.togglebar(
       ".t--property-control-counterclockwise input[type='checkbox']",
@@ -130,7 +136,7 @@ describe("Progress Widget", function () {
       .should("not.match", /-/);
   });
 
-  it("The binding property, progress should be exposed for an auto suggestion", function () {
+  it("11. The binding property, progress should be exposed for an auto suggestion", function () {
     cy.openPropertyPane("textwidget");
     cy.get(".t--property-control-text .CodeMirror textarea").type(
       "{{Progress1.",
@@ -138,4 +144,52 @@ describe("Progress Widget", function () {
     );
     cy.get("ul.CodeMirror-hints").contains("progress").should("exist");
   });
+
+  it("12. Check Progress, Number of steps, Counterclockwise, Show result disabled on infite looping enablement", function () {
+    //  on enabling infite loading assert the absence of elements
+    agHelper.GetNClick(widgets.progressWidget);
+    propPane.TogglePropertyState("Infinite loading", "On");
+    agHelper.AssertElementAbsence(propPane._labelContains("Progress"));
+    agHelper.AssertElementAbsence(propPane._labelContains("Number of steps"));
+    agHelper.AssertElementAbsence(propPane._labelContains("Counterclockwise"));
+    agHelper.AssertElementAbsence(propPane._labelContains("Show result"));
+    propPane.TogglePropertyState("Infinite loading", "Off");
+  });
+
+  it("13. Check binding in Progress ", function () {
+    agHelper.GetNClick(widgets.linearProgressWidget);
+    entityExplorer.DragDropWidgetNVerify(draggableWidgets.INPUT_V2, 600, 100);
+    agHelper.GetNClick(widgets.progressWidget);
+    // assert error texts in Progress property
+    propPane.UpdatePropertyFieldValue("Progress", "-1");
+    agHelper.VerifyEvaluatedErrorMessage("Minimum allowed value: 0");
+    propPane.UpdatePropertyFieldValue("Progress", fakerHelper.GetRandomText());
+    agHelper.VerifyEvaluatedErrorMessage(
+      "This value does not evaluate to type number Max: 100",
+    );
+    propPane.UpdatePropertyFieldValue("Progress", "101");
+    agHelper.VerifyEvaluatedErrorMessage("Maximum allowed value: 100");
+    // set input entered in text widget to progress
+    propPane.UpdatePropertyFieldValue("Progress", "{{Input1.text}}");
+    deployMode.DeployApp();
+    agHelper.EnterInputText("Label", "10");
+    // assert if the text in text widget is reflected in progress bar
+    agHelper.AssertElementExist(progressWidgetProgress("10"));
+    agHelper.EnterInputText("Label", "20", true);
+    agHelper.AssertElementExist(progressWidgetProgress("20"));
+    deployMode.NavigateBacktoEditor();
+  });
+
+  it("14. Check progress widget visibility based on visible state - Deploy mode", function () {
+    agHelper.GetNClick(widgets.progressWidget);
+    propPane.TogglePropertyState("Visible", "Off");
+    deployMode.DeployApp();
+    agHelper.AssertElementAbsence(widgets.progressWidget);
+    deployMode.NavigateBacktoEditor();
+    agHelper.GetNClick(widgets.progressWidget);
+    propPane.TogglePropertyState("Visible", "On");
+    deployMode.DeployApp();
+    agHelper.AssertElementExist(widgets.progressWidget);
+    agHelper.GetNClick(widgets.progressWidget);
+  });
 });

app/client/cypress/locators/WidgetLocators.ts

@@ -66,3 +66,8 @@ export const getWidgetInputSelector = (widget: ValueOf<typeof WIDGET>) =>
   `.t--widget-${widget} input`;
 
 export const modalWidgetSelector = ".t--modal-widget";
+
+// export data-testid with user input 
+export const progressWidgetProgress = (input: any) => `[data-testid='${input}']`
+
+

app/client/cypress/locators/Widgets.json

@@ -200,5 +200,8 @@
   "filepickerwidgetv2CloseModalBtn": "button.uppy-Dashboard-close",
   "codescannerwidget": ".t--widget-codescannerwidget",
   "widgetNameSpan": ".t--widget-propertypane-toggle > .t--widget-name",
-  "listWidgetv2": ".t--widget-listwidgetv2"
+  "listWidgetv2": ".t--widget-listwidgetv2",
+  "progressWidget":".t--widget-progresswidget",
+  "circularProgressWidget":"[data-value='circular']",
+  "linearProgressWidget": "[data-value='linear']"
 }

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

@@ -121,7 +121,7 @@ export class PropertyPane {
   _autoHeightLimitMin_div =
     "[data-testid='t--auto-height-overlay-handles-min'] div";
   _autoHeightLimitMax = "[data-testid='t--auto-height-overlay-handles-max']";
-  _labelContains = (value: string) => `label:Contains('${value}')`;
+  public _labelContains = (value: string) => `label:Contains('${value}')`;
   _showColumnButton = ".t--show-column-btn";
   _propertyPaneHeightLabel =
     ".t--property-pane-section-general .t--property-control-label:contains('Height')";