From 4f70c70701f0232b8a2391470b38906e4e2a1caf Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pawan@appsmith.com>
Date: Mon, 29 Apr 2024 11:31:46 +0530
Subject: [PATCH] fix: number slider + category slider color spec fails
 (#32935)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes a spec for slider and cateogry widget where it fails when changing
and asserting the background color

/ok-to-test tags="@tag.Slider"<!-- This is an auto-generated comment:
Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8873791272>
> Commit: b7111f115b691aeb6e6ccc2eceb30c476b91e3a3
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8873791272&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->







<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Tests**
- Modified a specific test case to run exclusively, improving focus on
critical functionality during testing.
- **New Features**
- Enhanced color selection capabilities in the property control for a
more intuitive user interface.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
---
 .../ClientSide/Widgets/Sliders/CategorySlider_spec.ts        | 5 ++++-
 .../ClientSide/Widgets/Sliders/NumberSlider_spec.ts          | 5 ++++-
 app/client/cypress/support/Pages/PropertyPane.ts             | 2 ++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Sliders/CategorySlider_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Sliders/CategorySlider_spec.ts
index f6a609c091..41bd965b2e 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Sliders/CategorySlider_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Sliders/CategorySlider_spec.ts
@@ -286,7 +286,10 @@ describe(
         .GetWidgetCSSFrAttribute(locators._sliderThumb, "background-color")
         .then((sliderColor) => {
           agHelper
-            .GetWidgetCSSFrAttribute(propPane._fillColor, "background-color")
+            .GetWidgetCSSFrAttribute(
+              `${propPane._propertyControlSelectedColorButton("fillcolor")}`,
+              "background-color",
+            )
             .then((newColor) => {
               expect(sliderColor).to.eq(newColor);
             });
diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Sliders/NumberSlider_spec.ts b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Sliders/NumberSlider_spec.ts
index fec42f495e..51643b4155 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/Sliders/NumberSlider_spec.ts
+++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/Sliders/NumberSlider_spec.ts
@@ -377,7 +377,10 @@ describe("Number Slider spec", { tags: ["@tag.Widget", "@tag.Slider"] }, () => {
       .GetWidgetCSSFrAttribute(locators._sliderThumb, "background-color")
       .then((sliderColor) => {
         agHelper
-          .GetWidgetCSSFrAttribute(propPane._fillColor, "background-color")
+          .GetWidgetCSSFrAttribute(
+            `${propPane._propertyControlSelectedColorButton("fillcolor")}`,
+            "background-color",
+          )
           .then((newColor) => {
             expect(sliderColor).to.eq(newColor);
           });
diff --git a/app/client/cypress/support/Pages/PropertyPane.ts b/app/client/cypress/support/Pages/PropertyPane.ts
index 40d3e0883e..5a80cdd86d 100644
--- a/app/client/cypress/support/Pages/PropertyPane.ts
+++ b/app/client/cypress/support/Pages/PropertyPane.ts
@@ -139,6 +139,8 @@ export class PropertyPane {
   _dropdownOptionSpan = ".t--dropdown-option span";
   public _propertyControlColorPicker = (property: string) =>
     `.t--property-control-${property} .bp3-input-group input`;
+  public _propertyControlSelectedColorButton = (property: string) =>
+    `.t--property-control-${property} ${this._fillColor}`;
   _propertyText = ".bp3-ui-text span";
   _paneTitle = ".t--property-pane-title";
   _segmentedControl = (value: string) =>