From 166e0fad86a05cb0b57926eaa83a4e87e1862566 Mon Sep 17 00:00:00 2001 From: sharanya-appsmith <135708039+sharanya-appsmith@users.noreply.github.com> Date: Tue, 8 Aug 2023 16:24:10 +0530 Subject: [PATCH] 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 --- .../Widgets/Others/Progress_spec.js | 92 +++++++++++++++---- app/client/cypress/locators/WidgetLocators.ts | 5 + app/client/cypress/locators/Widgets.json | 5 +- .../cypress/support/Pages/PropertyPane.ts | 2 +- 4 files changed, 83 insertions(+), 21 deletions(-) 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')";