From 944ad016867618055f063c58975d528c11dd9dc5 Mon Sep 17 00:00:00 2001 From: Arsalan Yaldram Date: Fri, 21 Oct 2022 15:55:41 +0530 Subject: [PATCH] feat: slider widgets cypress test cases (#17467) * feat: cypress test cases for the slider widget. * fix: review changes completed. * fix: cypress use data-cy selector. * fix: remove range calculation from range slider stpSize validation. * fix: added range validation back for stepSize. --- .../fixtures/categorySliderWidgetDsl.json | 138 ++++++++++++ .../fixtures/numberSliderWidgetDsl.json | 135 ++++++++++++ .../fixtures/rangeSliderWidgetDsl.json | 182 ++++++++++++++++ .../Widgets/Sliders/CategroySlider_spec.ts | 78 +++++++ .../Widgets/Sliders/NumberSlider_spec.ts | 143 +++++++++++++ .../Widgets/Sliders/RangeSlider_spec.ts | 199 ++++++++++++++++++ app/client/cypress/locators/WidgetLocators.ts | 3 + .../cypress/support/Objects/CommonLocators.ts | 3 + .../cypress/support/Pages/AggregateHelper.ts | 6 + .../NumberSliderWidget/component/Thumb.tsx | 1 + .../widgets/RangeSliderWidget/validations.ts | 13 ++ 11 files changed, 901 insertions(+) create mode 100644 app/client/cypress/fixtures/categorySliderWidgetDsl.json create mode 100644 app/client/cypress/fixtures/numberSliderWidgetDsl.json create mode 100644 app/client/cypress/fixtures/rangeSliderWidgetDsl.json create mode 100644 app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Sliders/CategroySlider_spec.ts create mode 100644 app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Sliders/NumberSlider_spec.ts create mode 100644 app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Sliders/RangeSlider_spec.ts diff --git a/app/client/cypress/fixtures/categorySliderWidgetDsl.json b/app/client/cypress/fixtures/categorySliderWidgetDsl.json new file mode 100644 index 0000000000..74b9a2d180 --- /dev/null +++ b/app/client/cypress/fixtures/categorySliderWidgetDsl.json @@ -0,0 +1,138 @@ +{ + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 4896, + "snapColumns": 64, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 490, + "containerStyle": "none", + "snapRows": 125, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "version": 64, + "minHeight": 1292, + "dynamicTriggerPathList": [], + "parentColumnSpace": 1, + "dynamicBindingPathList": [], + "leftColumn": 0, + "children": [ + { + "widgetName": "CategorySlider1", + "displayName": "Category Slider", + "iconSVG": "/static/media/icon.cbd0db7a0bd317a6e4cbbd72417f8dee.svg", + "labelText": "Size", + "searchTags": [ + "range" + ], + "topRow": 2, + "bottomRow": 10, + "parentRowSpace": 10, + "labelWidth": 5, + "type": "CATEGORY_SLIDER_WIDGET", + "hideCard": false, + "defaultOptionValue": "md", + "animateLoading": true, + "parentColumnSpace": 10.046875, + "leftColumn": 9, + "dynamicBindingPathList": [ + { + "key": "accentColor" + } + ], + "shouldTruncate": false, + "labelPosition": "Left", + "options": [ + { + "label": "Extra Small", + "value": "xs" + }, + { + "label": "Small", + "value": "sm" + }, + { + "label": "Medium", + "value": "md" + }, + { + "label": "Large", + "value": "lg" + }, + { + "label": "Extra Large", + "value": "xl" + } + ], + "isDisabled": false, + "key": "0ncei6mrsr", + "labelTextSize": "0.875rem", + "isDeprecated": false, + "rightColumn": 51, + "widgetId": "nouzvw0a9g", + "accentColor": "{{appsmith.theme.colors.primaryColor}}", + "isVisible": true, + "sliderSize": "m", + "shouldScroll": false, + "version": 1, + "parentId": "0", + "labelAlignment": "left", + "renderMode": "CANVAS", + "isLoading": false, + "showMarksLabel": false + }, + { + "widgetName": "Text1", + "displayName": "Text", + "iconSVG": "/static/media/icon.97c59b523e6f70ba6f40a10fc2c7c5b5.svg", + "searchTags": [ + "typography", + "paragraph", + "label" + ], + "topRow": 17, + "bottomRow": 21, + "parentRowSpace": 10, + "type": "TEXT_WIDGET", + "hideCard": false, + "animateLoading": true, + "overflow": "NONE", + "fontFamily": "{{appsmith.theme.fontFamily.appFont}}", + "parentColumnSpace": 10.046875, + "dynamicTriggerPathList": [], + "leftColumn": 6, + "dynamicBindingPathList": [ + { + "key": "fontFamily" + }, + { + "key": "borderRadius" + }, + { + "key": "text" + } + ], + "shouldTruncate": false, + "truncateButtonColor": "#FFC13D", + "text": "{{CategorySlider1.value}}", + "key": "i6u1ginkdu", + "isDeprecated": false, + "rightColumn": 22, + "textAlign": "LEFT", + "widgetId": "aqfq6q14fn", + "isVisible": true, + "fontStyle": "BOLD", + "textColor": "#231F20", + "version": 1, + "parentId": "0", + "renderMode": "CANVAS", + "isLoading": false, + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "fontSize": "1rem" + } + ] + } +} diff --git a/app/client/cypress/fixtures/numberSliderWidgetDsl.json b/app/client/cypress/fixtures/numberSliderWidgetDsl.json new file mode 100644 index 0000000000..8ef5b92b5f --- /dev/null +++ b/app/client/cypress/fixtures/numberSliderWidgetDsl.json @@ -0,0 +1,135 @@ +{ + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 4896, + "snapColumns": 64, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 490, + "containerStyle": "none", + "snapRows": 125, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "version": 64, + "minHeight": 1292, + "dynamicTriggerPathList": [], + "parentColumnSpace": 1, + "dynamicBindingPathList": [], + "leftColumn": 0, + "children": [ + { + "widgetName": "NumberSlider1", + "defaultValue": 10, + "displayName": "Number Slider", + "iconSVG": "/static/media/icon.f122000eb591fcd1410a4775a54f9f0d.svg", + "tooltipAlwaysOn": false, + "labelText": "Percentage", + "searchTags": [ + "range" + ], + "topRow": 11, + "bottomRow": 19, + "parentRowSpace": 10, + "labelWidth": 8, + "type": "NUMBER_SLIDER_WIDGET", + "hideCard": false, + "animateLoading": true, + "min": "0", + "parentColumnSpace": 10.046875, + "dynamicTriggerPathList": [], + "leftColumn": 10, + "dynamicBindingPathList": [ + { + "key": "accentColor" + } + ], + "shouldTruncate": false, + "labelPosition": "Left", + "isDisabled": false, + "key": "uek2zpu25e", + "labelTextSize": "0.875rem", + "isDeprecated": false, + "rightColumn": 61, + "max": "100", + "widgetId": "f1rpukoj6a", + "accentColor": "{{appsmith.theme.colors.primaryColor}}", + "isVisible": true, + "marks": [ + { + "value": 25, + "label": "25%" + }, + { + "value": 50, + "label": "50%" + }, + { + "value": 75, + "label": "75%" + } + ], + "sliderSize": "l", + "shouldScroll": false, + "version": 1, + "parentId": "0", + "labelAlignment": "left", + "renderMode": "CANVAS", + "isLoading": false, + "step": 1, + "showMarksLabel": true + }, + { + "widgetName": "Text1", + "displayName": "Text", + "iconSVG": "/static/media/icon.97c59b523e6f70ba6f40a10fc2c7c5b5.svg", + "searchTags": [ + "typography", + "paragraph", + "label" + ], + "topRow": 28, + "bottomRow": 32, + "parentRowSpace": 10, + "type": "TEXT_WIDGET", + "hideCard": false, + "animateLoading": true, + "overflow": "NONE", + "fontFamily": "{{appsmith.theme.fontFamily.appFont}}", + "parentColumnSpace": 10.046875, + "dynamicTriggerPathList": [], + "leftColumn": 16, + "dynamicBindingPathList": [ + { + "key": "fontFamily" + }, + { + "key": "borderRadius" + }, + { + "key": "text" + } + ], + "shouldTruncate": false, + "truncateButtonColor": "#FFC13D", + "text": "{{NumberSlider1.value}}", + "key": "5xdwi352rj", + "isDeprecated": false, + "rightColumn": 32, + "textAlign": "LEFT", + "widgetId": "c4h96ty553", + "isVisible": true, + "fontStyle": "BOLD", + "textColor": "#231F20", + "version": 1, + "parentId": "0", + "renderMode": "CANVAS", + "isLoading": false, + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "fontSize": "1rem" + } + ] + } +} \ No newline at end of file diff --git a/app/client/cypress/fixtures/rangeSliderWidgetDsl.json b/app/client/cypress/fixtures/rangeSliderWidgetDsl.json new file mode 100644 index 0000000000..42b589d05c --- /dev/null +++ b/app/client/cypress/fixtures/rangeSliderWidgetDsl.json @@ -0,0 +1,182 @@ +{ + "dsl": { + "widgetName": "MainContainer", + "backgroundColor": "none", + "rightColumn": 4896, + "snapColumns": 64, + "detachFromLayout": true, + "widgetId": "0", + "topRow": 0, + "bottomRow": 490, + "containerStyle": "none", + "snapRows": 125, + "parentRowSpace": 1, + "type": "CANVAS_WIDGET", + "canExtend": true, + "version": 64, + "minHeight": 1292, + "dynamicTriggerPathList": [], + "parentColumnSpace": 1, + "dynamicBindingPathList": [], + "leftColumn": 0, + "children": [ + { + "widgetName": "RangeSlider1", + "displayName": "Range Slider", + "iconSVG": "/static/media/icon.8216245f04c391d4ae315397e9194dd4.svg", + "defaultStartValue": 10, + "tooltipAlwaysOn": false, + "labelText": "Percentage", + "topRow": 2, + "bottomRow": 10, + "parentRowSpace": 10, + "labelWidth": 8, + "type": "RANGE_SLIDER_WIDGET", + "hideCard": false, + "animateLoading": true, + "min": 0, + "parentColumnSpace": 10.046875, + "leftColumn": 10, + "dynamicBindingPathList": [ + { + "key": "accentColor" + } + ], + "labelPosition": "Left", + "shouldTruncate": false, + "isDisabled": false, + "defaultEndValue": 100, + "key": "szr1ppg9zq", + "labelTextSize": "0.875rem", + "isDeprecated": false, + "rightColumn": 48, + "max": 100, + "widgetId": "1ygo7et8xl", + "accentColor": "{{appsmith.theme.colors.primaryColor}}", + "isVisible": true, + "marks": [ + { + "value": 25, + "label": "25%" + }, + { + "value": 50, + "label": "50%" + }, + { + "value": 75, + "label": "75%" + } + ], + "sliderSize": "m", + "shouldScroll": false, + "version": 1, + "parentId": "0", + "labelAlignment": "left", + "renderMode": "CANVAS", + "isLoading": false, + "step": 1, + "showMarksLabel": true, + "minRange": 5 + }, + { + "widgetName": "Text1", + "displayName": "Text", + "iconSVG": "/static/media/icon.97c59b523e6f70ba6f40a10fc2c7c5b5.svg", + "searchTags": [ + "typography", + "paragraph", + "label" + ], + "topRow": 19, + "bottomRow": 23, + "parentRowSpace": 10, + "type": "TEXT_WIDGET", + "hideCard": false, + "animateLoading": true, + "overflow": "NONE", + "fontFamily": "{{appsmith.theme.fontFamily.appFont}}", + "parentColumnSpace": 10.046875, + "dynamicTriggerPathList": [], + "leftColumn": 5, + "dynamicBindingPathList": [ + { + "key": "fontFamily" + }, + { + "key": "borderRadius" + }, + { + "key": "text" + } + ], + "shouldTruncate": false, + "truncateButtonColor": "#FFC13D", + "text": "{{RangeSlider1.start}}", + "key": "guye7pnkor", + "isDeprecated": false, + "rightColumn": 21, + "textAlign": "LEFT", + "widgetId": "kf6pd7tq05", + "isVisible": true, + "fontStyle": "BOLD", + "textColor": "#231F20", + "version": 1, + "parentId": "0", + "renderMode": "CANVAS", + "isLoading": false, + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "fontSize": "1rem" + }, + { + "widgetName": "Text2", + "displayName": "Text", + "iconSVG": "/static/media/icon.97c59b523e6f70ba6f40a10fc2c7c5b5.svg", + "searchTags": [ + "typography", + "paragraph", + "label" + ], + "topRow": 19, + "bottomRow": 23, + "parentRowSpace": 10, + "type": "TEXT_WIDGET", + "hideCard": false, + "animateLoading": true, + "overflow": "NONE", + "fontFamily": "{{appsmith.theme.fontFamily.appFont}}", + "parentColumnSpace": 10.046875, + "dynamicTriggerPathList": [], + "leftColumn": 30, + "dynamicBindingPathList": [ + { + "key": "fontFamily" + }, + { + "key": "borderRadius" + }, + { + "key": "text" + } + ], + "shouldTruncate": false, + "truncateButtonColor": "#FFC13D", + "text": "{{RangeSlider1.end}}", + "key": "guye7pnkor", + "isDeprecated": false, + "rightColumn": 46, + "textAlign": "LEFT", + "widgetId": "a6rk9qet4e", + "isVisible": true, + "fontStyle": "BOLD", + "textColor": "#231F20", + "version": 1, + "parentId": "0", + "renderMode": "CANVAS", + "isLoading": false, + "borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}", + "fontSize": "1rem" + } + ] + } +} \ No newline at end of file diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Sliders/CategroySlider_spec.ts b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Sliders/CategroySlider_spec.ts new file mode 100644 index 0000000000..121a3e9b5e --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Sliders/CategroySlider_spec.ts @@ -0,0 +1,78 @@ +import { + getWidgetSelector, + WIDGET, +} from "../../../../../locators/WidgetLocators"; +import { ObjectsRegistry } from "../../../../../support/Objects/Registry"; + +const agHelper = ObjectsRegistry.AggregateHelper; +const ee = ObjectsRegistry.EntityExplorer; +const locator = ObjectsRegistry.CommonLocators; +const propPane = ObjectsRegistry.PropertyPane; + +describe("Category Slider spec", () => { + before(() => { + /** + * On the canvas we have a Category Slider + * and a Text widget with binding {{CategorySlider1.value}} + */ + cy.fixture("categorySliderWidgetDsl").then((dsl: string) => { + agHelper.AddDsl(dsl); + }); + }); + + it("1. Validates Default Value", () => { + // open the Property Pane + ee.SelectEntityByName("CategorySlider1", "Widgets"); + + propPane.UpdatePropertyFieldValue("Default Value", "mdx"); + + agHelper.VerifyEvaluatedErrorMessage( + "Default value is missing in options. Please update the value.", + ); + + propPane.UpdatePropertyFieldValue("Default Value", ""); + + agHelper.VerifyEvaluatedErrorMessage( + "Default value is missing in options. Please update the value.", + ); + + propPane.UpdatePropertyFieldValue("Default Value", "md"); + + agHelper.VerifyEvaluatedValue("md"); + }); + + it("2. Change Step Size and check if value changes", () => { + // Assert Text widget has value 10 + agHelper.GetText(getWidgetSelector(WIDGET.TEXT)).then(($label) => { + expect($label).to.eq("md"); + }); + + // open the Property Pane + ee.SelectEntityByName("CategorySlider1", "Widgets"); + + // Change the slider value + agHelper + .GetElement(locator._sliderThumb) + .focus() + .type("{rightArrow}"); + + // Assert the Text widget has value 20 + agHelper.GetText(getWidgetSelector(WIDGET.TEXT)).then(($label) => { + expect($label).to.eq("lg"); + }); + + // Change the slider value + agHelper + .GetElement(locator._sliderThumb) + .focus() + .type("{leftArrow}") + .type("{leftArrow}"); + + agHelper.Sleep(200); + + // Assert the Text widget has value 0 + agHelper.GetText(getWidgetSelector(WIDGET.TEXT)).then(($label) => { + expect($label).to.eq("sm"); + }); + }); +}); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Sliders/NumberSlider_spec.ts b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Sliders/NumberSlider_spec.ts new file mode 100644 index 0000000000..a4a30f6117 --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Sliders/NumberSlider_spec.ts @@ -0,0 +1,143 @@ +import { + getWidgetSelector, + WIDGET, +} from "../../../../../locators/WidgetLocators"; +import { ObjectsRegistry } from "../../../../../support/Objects/Registry"; + +const agHelper = ObjectsRegistry.AggregateHelper; +const ee = ObjectsRegistry.EntityExplorer; +const propPane = ObjectsRegistry.PropertyPane; +const locator = ObjectsRegistry.CommonLocators; + +describe("Number Slider spec", () => { + before(() => { + /** + * On the canvas we have a Number Slider + * and a Text widget with binding {{NumberSlider1.value}} + */ + cy.fixture("numberSliderWidgetDsl").then((dsl: string) => { + agHelper.AddDsl(dsl); + }); + }); + + it("1. Validates Min. Value", () => { + // open the Property Pane + ee.SelectEntityByName("NumberSlider1", "Widgets"); + + propPane.UpdatePropertyFieldValue("Min. Value", "110"); + + agHelper.VerifyEvaluatedErrorMessage( + "This value must be less than max value", + ); + + propPane.UpdatePropertyFieldValue("Min. Value", ""); + + agHelper.VerifyEvaluatedErrorMessage("This value is required"); + + propPane.UpdatePropertyFieldValue("Min. Value", "zero"); + + agHelper.VerifyEvaluatedErrorMessage("This value must be a number"); + + propPane.UpdatePropertyFieldValue("Min. Value", "0"); + + agHelper.VerifyEvaluatedValue("0"); + }); + + it("2. Validates Max. Value", () => { + propPane.UpdatePropertyFieldValue("Max. Value", "0"); + + agHelper.VerifyEvaluatedErrorMessage( + "This value must be greater than min value", + ); + + propPane.UpdatePropertyFieldValue("Max. Value", ""); + + agHelper.VerifyEvaluatedErrorMessage("This value is required"); + + propPane.UpdatePropertyFieldValue("Max. Value", "asd"); + + agHelper.VerifyEvaluatedErrorMessage("This value must be a number"); + + propPane.UpdatePropertyFieldValue("Max. Value", "100"); + + agHelper.VerifyEvaluatedValue("100"); + }); + + it("3. Validates Step Value", () => { + propPane.UpdatePropertyFieldValue("Step Size", "-10"); + + agHelper.VerifyEvaluatedErrorMessage("This value must be greater than 0.1"); + + propPane.UpdatePropertyFieldValue("Step Size", "110"); + + agHelper.VerifyEvaluatedErrorMessage("This value must be less than 100"); + + propPane.UpdatePropertyFieldValue("Step Size", "asd"); + + agHelper.VerifyEvaluatedErrorMessage("This value must be a number"); + + propPane.UpdatePropertyFieldValue("Step Size", "10"); + + agHelper.VerifyEvaluatedValue("10"); + }); + + it("4. Validates Default Value", () => { + propPane.UpdatePropertyFieldValue("Default Value", "-10"); + + agHelper.VerifyEvaluatedErrorMessage( + "This value must be greater than min value", + ); + + propPane.UpdatePropertyFieldValue("Default Value", "110"); + + agHelper.VerifyEvaluatedErrorMessage( + "This value must be less than max value", + ); + + propPane.UpdatePropertyFieldValue("Default Value", "asd"); + + agHelper.VerifyEvaluatedErrorMessage("This value must be a number"); + + propPane.UpdatePropertyFieldValue("Default Value", "10"); + + agHelper.VerifyEvaluatedValue("10"); + }); + + it("5. Change Step Size and check if value changes", () => { + // Assert Text widget has value 10 + agHelper.GetText(getWidgetSelector(WIDGET.TEXT)).then(($label) => { + expect($label).to.eq("10"); + }); + + // open the Property Pane + ee.SelectEntityByName("NumberSlider1", "Widgets"); + + // Change the Step Size to 10 + propPane.UpdatePropertyFieldValue("Step Size", "10"); + + // Change the slider value + agHelper + .GetElement(locator._sliderThumb) + .focus() + .type("{rightArrow}"); + + // Assert the Text widget has value 20 + agHelper.GetText(getWidgetSelector(WIDGET.TEXT)).then(($label) => { + expect($label).to.eq("20"); + }); + + // Change the slider value + agHelper + .GetElement(locator._sliderThumb) + .focus() + .type("{leftArrow}") + .type("{leftArrow}"); + + agHelper.Sleep(200); + + // Assert the Text widget has value 0 + agHelper.GetText(getWidgetSelector(WIDGET.TEXT)).then(($label) => { + expect($label).to.eq("0"); + }); + }); +}); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Sliders/RangeSlider_spec.ts b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Sliders/RangeSlider_spec.ts new file mode 100644 index 0000000000..a10e97624d --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Sliders/RangeSlider_spec.ts @@ -0,0 +1,199 @@ +import { + getWidgetSelector, + WIDGET, +} from "../../../../../locators/WidgetLocators"; +import { ObjectsRegistry } from "../../../../../support/Objects/Registry"; + +const agHelper = ObjectsRegistry.AggregateHelper; +const ee = ObjectsRegistry.EntityExplorer; +const propPane = ObjectsRegistry.PropertyPane; +const locator = ObjectsRegistry.CommonLocators; + +describe("Range Slider spec", () => { + before(() => { + /** + * On the canvas we have a Range Slider + * and a Text widget with binding {{RangeSlider1.value}} + */ + cy.fixture("rangeSliderWidgetDsl").then((dsl: string) => { + agHelper.AddDsl(dsl); + }); + }); + + it("1. Validates Min. Value", () => { + // open the Property Pane + ee.SelectEntityByName("RangeSlider1", "Widgets"); + + propPane.UpdatePropertyFieldValue("Min. Value", "110"); + + agHelper.VerifyEvaluatedErrorMessage( + "This value must be less than max value", + ); + + propPane.UpdatePropertyFieldValue("Min. Value", ""); + + agHelper.VerifyEvaluatedErrorMessage("This value is required"); + + propPane.UpdatePropertyFieldValue("Min. Value", "zero"); + + agHelper.VerifyEvaluatedErrorMessage("This value must be a number"); + + propPane.UpdatePropertyFieldValue("Min. Value", "0"); + + // agHelper.VerifyEvaluatedValue("0"); + }); + + it("2. Validates Max. Value", () => { + propPane.UpdatePropertyFieldValue("Max. Value", "0"); + + agHelper.VerifyEvaluatedErrorMessage( + "This value must be greater than min value", + ); + + propPane.UpdatePropertyFieldValue("Max. Value", ""); + + agHelper.VerifyEvaluatedErrorMessage("This value is required"); + + propPane.UpdatePropertyFieldValue("Max. Value", "asd"); + + agHelper.VerifyEvaluatedErrorMessage("This value must be a number"); + + propPane.UpdatePropertyFieldValue("Max. Value", "100"); + + // agHelper.VerifyEvaluatedValue("100"); + }); + + it("3. Validates Step Size", () => { + propPane.UpdatePropertyFieldValue("Step Size", "10"); + + agHelper.VerifyEvaluatedErrorMessage( + "This value must be less than or equal to minRange", + ); + + propPane.UpdatePropertyFieldValue("Step Size", ""); + + agHelper.VerifyEvaluatedErrorMessage("This value is required"); + + propPane.UpdatePropertyFieldValue("Step Size", "asd"); + + agHelper.VerifyEvaluatedErrorMessage("This value must be a number"); + + propPane.UpdatePropertyFieldValue("Step Size", "1"); + + // agHelper.VerifyEvaluatedValue("1"); + }); + + it("4. Validates Min Range", () => { + propPane.UpdatePropertyFieldValue("Min. Range", "0"); + + agHelper.VerifyEvaluatedErrorMessage("This value must be greater than 0.1"); + + propPane.UpdatePropertyFieldValue("Min. Range", "-10"); + + agHelper.VerifyEvaluatedErrorMessage("This value must be greater than 0.1"); + + propPane.UpdatePropertyFieldValue("Min. Range", "asd"); + + agHelper.VerifyEvaluatedErrorMessage("This value must be a number"); + + propPane.UpdatePropertyFieldValue("Min. Range", "110"); + + agHelper.VerifyEvaluatedErrorMessage("This value must be less than 100"); + + propPane.UpdatePropertyFieldValue("Min. Range", "10"); + + // agHelper.VerifyEvaluatedValue("10"); + }); + + it("5. Validates Default Start Value", () => { + propPane.UpdatePropertyFieldValue("Default Start Value", "-100"); + + agHelper.VerifyEvaluatedErrorMessage( + "This value must be greater than min value", + ); + + propPane.UpdatePropertyFieldValue("Default Start Value", "110"); + + agHelper.VerifyEvaluatedErrorMessage( + "This value must be less than defaultEnd value", + ); + + propPane.UpdatePropertyFieldValue("Default Start Value", "asd"); + + agHelper.VerifyEvaluatedErrorMessage("This value must be a number"); + + propPane.UpdatePropertyFieldValue("Default Start Value", "10"); + + // agHelper.VerifyEvaluatedValue("10"); + }); + + it("6. Validates Default End Value", () => { + propPane.UpdatePropertyFieldValue("Default End Value", "-10"); + + agHelper.VerifyEvaluatedErrorMessage( + "This value must be greater than defaultStart value", + ); + + propPane.UpdatePropertyFieldValue("Default End Value", "110"); + + agHelper.VerifyEvaluatedErrorMessage( + "This value must be less than max value", + ); + + propPane.UpdatePropertyFieldValue("Default End Value", "asd"); + + agHelper.VerifyEvaluatedErrorMessage("This value must be a number"); + + propPane.UpdatePropertyFieldValue("Default End Value", "100"); + + // agHelper.VerifyEvaluatedValue("100"); + }); + + it("7. Change Step Size and check if binding value changes", () => { + // Assert Text widget has value 10 + agHelper + .GetText(getWidgetSelector(WIDGET.TEXT), "text", 0) + .then(($label) => { + expect($label).to.eq("10"); + }); + + agHelper + .GetText(getWidgetSelector(WIDGET.TEXT), "text", 1) + .then(($label) => { + expect($label).to.eq("100"); + }); + + // Change the Step Size to 10 + propPane.UpdatePropertyFieldValue("Min. Range", "10"); + propPane.UpdatePropertyFieldValue("Step Size", "10"); + + agHelper + .GetElement(locator._sliderThumb) + .eq(0) + .focus() + .type("{rightArrow}"); + + // Assert the Text widget has value 20 + agHelper + .GetText(getWidgetSelector(WIDGET.TEXT), "text", 0) + .then(($label) => { + expect($label).to.eq("20"); + }); + + // Change the slider value + agHelper + .GetElement(locator._sliderThumb) + .eq(1) + .focus() + .type("{leftArrow}") + .type("{leftArrow}"); + + agHelper.Sleep(200); + + agHelper + .GetText(getWidgetSelector(WIDGET.TEXT), "text", 1) + .then(($label) => { + expect($label).to.eq("80"); + }); + }); +}); diff --git a/app/client/cypress/locators/WidgetLocators.ts b/app/client/cypress/locators/WidgetLocators.ts index cf5851f162..73dbf11c4d 100644 --- a/app/client/cypress/locators/WidgetLocators.ts +++ b/app/client/cypress/locators/WidgetLocators.ts @@ -26,6 +26,9 @@ export const WIDGET = { CAMERA: "camerawidget", FILEPICKER: "filepickerwidgetv2", DOCUMENT_VIEWER: "documentviewerwidget", + CATEGORY_SLIDER: "categorysliderwidget", + NUMBER_SLIDER: "numbersliderwidget", + RANGE_SLIDER: "rangesliderwidget", IFRAME: "iframewidget", } as const; diff --git a/app/client/cypress/support/Objects/CommonLocators.ts b/app/client/cypress/support/Objects/CommonLocators.ts index cc99d66dc2..a1fa7a6b87 100644 --- a/app/client/cypress/support/Objects/CommonLocators.ts +++ b/app/client/cypress/support/Objects/CommonLocators.ts @@ -111,6 +111,8 @@ export class CommonLocators { _codeMirrorValue = "//div[contains(@class,'CodeMirror-code')]//span/span"; _evaluatedCurrentValue = "div:last-of-type .t--CodeEditor-evaluatedValue > div:last-of-type pre"; + _evaluatedErrorMessage = + ".t--CodeEditor-evaluatedValue .t--evaluatedPopup-error"; _multiSelectOptions = (option: string) => "div[title='" + option + "'] input[type='checkbox']"; _divWithClass = (className: string) => @@ -147,6 +149,7 @@ export class CommonLocators { _deployedPage = `.t--page-switch-tab`; _hints = "ul.CodeMirror-hints li"; _cancelActionExecution = ".t--cancel-action-button"; + _sliderThumb = '[data-cy="slider-thumb"]'; _bottomPaneCollapseIcon = ".t--tabs-collapse-icon"; _dropDownMultiTreeValue = (dropdownOption: string) => "//span[@class='rc-tree-select-tree-title']/parent::span[@title='" + diff --git a/app/client/cypress/support/Pages/AggregateHelper.ts b/app/client/cypress/support/Pages/AggregateHelper.ts index 47c1b6ebf6..ffc667a019 100644 --- a/app/client/cypress/support/Pages/AggregateHelper.ts +++ b/app/client/cypress/support/Pages/AggregateHelper.ts @@ -770,6 +770,12 @@ export class AggregateHelper { }); } + public VerifyEvaluatedErrorMessage(errorMessage: string) { + cy.get(this.locator._evaluatedErrorMessage) + .should("be.visible") + .should("have.text", errorMessage); + } + public VerifyEvaluatedValue(currentValue: string) { this.Sleep(3000); cy.get(this.locator._evaluatedCurrentValue) diff --git a/app/client/src/widgets/NumberSliderWidget/component/Thumb.tsx b/app/client/src/widgets/NumberSliderWidget/component/Thumb.tsx index 97ada8b161..9d91c51bd8 100644 --- a/app/client/src/widgets/NumberSliderWidget/component/Thumb.tsx +++ b/app/client/src/widgets/NumberSliderWidget/component/Thumb.tsx @@ -98,6 +98,7 @@ export const Thumb = forwardRef( aria-valuemin={min} aria-valuenow={parseInt(tooltipValue)} color={color} + data-cy="slider-thumb" disabled={disabled} onBlur={() => { setFocused(false); diff --git a/app/client/src/widgets/RangeSliderWidget/validations.ts b/app/client/src/widgets/RangeSliderWidget/validations.ts index 55cc2355e3..693a52829b 100644 --- a/app/client/src/widgets/RangeSliderWidget/validations.ts +++ b/app/client/src/widgets/RangeSliderWidget/validations.ts @@ -259,6 +259,19 @@ export function minRangeValidation( }; } + const minValue = props.min; + const maxValue = props.max; + + const sliderRange = maxValue - minValue; + + if (defaultMinRange > sliderRange) { + return { + isValid: false, + parsed: undefined, + messages: [`This value must be less than ${sliderRange}`], + }; + } + if (defaultMinRange < 0.1) { return { isValid: false,