diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/Progress_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/Progress_spec.js index 1aeeff5a9e..15900d587a 100644 --- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Others/Progress_spec.js +++ b/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); + }); }); diff --git a/app/client/cypress/locators/WidgetLocators.ts b/app/client/cypress/locators/WidgetLocators.ts index ac9cf76032..037f00db22 100644 --- a/app/client/cypress/locators/WidgetLocators.ts +++ b/app/client/cypress/locators/WidgetLocators.ts @@ -66,3 +66,8 @@ export const getWidgetInputSelector = (widget: ValueOf) => `.t--widget-${widget} input`; export const modalWidgetSelector = ".t--modal-widget"; + +// export data-testid with user input +export const progressWidgetProgress = (input: any) => `[data-testid='${input}']` + + diff --git a/app/client/cypress/locators/Widgets.json b/app/client/cypress/locators/Widgets.json index 629bea1a71..e5e60b1307 100644 --- a/app/client/cypress/locators/Widgets.json +++ b/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']" } diff --git a/app/client/cypress/support/Pages/PropertyPane.ts b/app/client/cypress/support/Pages/PropertyPane.ts index 78bdd7367b..181aaaf610 100644 --- a/app/client/cypress/support/Pages/PropertyPane.ts +++ b/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')";