From d019f5131336c7de06edb1e0bb13be11544adc14 Mon Sep 17 00:00:00 2001
From: Dishant Kaushik <dkaushik95@gmail.com>
Date: Fri, 21 Jun 2024 17:28:28 -0700
Subject: [PATCH] test(slider): add unit, avt, and e2e tests on slider for new
 behavior

- Avt, using tab and getting the value to show as medium
- Snapshot test
- Unit test to check the behavior for both single and two thumb variants
---
 e2e/components/Slider/Slider-test.avt.e2e.js  | 14 ++++++
 e2e/components/Slider/Slider-test.e2e.js      |  8 ++++
 .../src/components/Slider/Slider-test.js      | 46 +++++++++++++++++++
 .../src/components/Slider/Slider.stories.js   |  2 +-
 .../react/src/components/Slider/Slider.tsx    |  1 +
 5 files changed, 70 insertions(+), 1 deletion(-)

diff --git a/e2e/components/Slider/Slider-test.avt.e2e.js b/e2e/components/Slider/Slider-test.avt.e2e.js
index 8ae03d13663c..93aff6331c55 100644
--- a/e2e/components/Slider/Slider-test.avt.e2e.js
+++ b/e2e/components/Slider/Slider-test.avt.e2e.js
@@ -92,6 +92,20 @@ test.describe('@avt Slider', () => {
     await expect(page).toHaveNoACViolations('Slider-with-layer');
   });
 
+  test('@avt-advanced-states slider with custom format', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Slider',
+      id: 'components-slider--slider-with-custom-value-label',
+      globals: {
+        theme: 'white',
+      },
+    });
+
+    await page.keyboard.press('Tab');
+    await expect(page.getByRole('slider')).toHaveValue('Medium');
+    await expect(page).toHaveNoACViolations('Slider-with-custom-value-label');
+  });
+
   // Prevent timeout
   test.slow('@avt-keyboard-nav', async ({ page }) => {
     await visitStory(page, {
diff --git a/e2e/components/Slider/Slider-test.e2e.js b/e2e/components/Slider/Slider-test.e2e.js
index 49e8d4086eca..af64b6b973b8 100644
--- a/e2e/components/Slider/Slider-test.e2e.js
+++ b/e2e/components/Slider/Slider-test.e2e.js
@@ -37,6 +37,14 @@ test.describe('Slider', () => {
           theme,
         });
       });
+
+      test('slider with formatLabel @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Slider',
+          id: 'components-slider--slider-with-custom-value-label',
+          theme,
+        });
+      });
     });
   });
 });
diff --git a/packages/react/src/components/Slider/Slider-test.js b/packages/react/src/components/Slider/Slider-test.js
index 63409195b559..9f694b8d4ca6 100644
--- a/packages/react/src/components/Slider/Slider-test.js
+++ b/packages/react/src/components/Slider/Slider-test.js
@@ -466,6 +466,28 @@ describe('Slider', () => {
         expect(rangeLabels[0]).toHaveTextContent('0-min');
         expect(rangeLabels[1]).toHaveTextContent('100-max');
       });
+
+      it('supports custom formatting on the tooltip when input is hidden', () => {
+        const { container } = renderSlider({
+          min: 0,
+          max: 100,
+          value: 50,
+          formatLabel: (value) => `${value}%`,
+          hideTextInput: true,
+        });
+
+        const rangeLabels = container.querySelectorAll(
+          `.${prefix}--slider__range-label`
+        );
+
+        const valueLabel = container.querySelector(
+          `.${prefix}--popover-content.${prefix}--tooltip-content`
+        );
+
+        expect(rangeLabels[0]).toHaveTextContent('0%');
+        expect(rangeLabels[1]).toHaveTextContent('100%');
+        expect(valueLabel).toHaveTextContent('50%');
+      });
     });
 
     describe('Key/mouse event processing', () => {
@@ -744,6 +766,30 @@ describe('Slider', () => {
       expect(upperInput).toHaveAttribute('type', 'hidden');
     });
 
+    it('supports custom formatting on the tooltip when input is hidden', () => {
+      const { container } = renderTwoHandleSlider({
+        min: 0,
+        max: 100,
+        value: 50,
+        unstable_valueUpper: 70,
+        formatLabel: (value) => `${value}%`,
+        hideTextInput: true,
+      });
+
+      const rangeLabels = container.querySelectorAll(
+        `.${prefix}--slider__range-label`
+      );
+
+      const valueLabels = container.querySelectorAll(
+        `.${prefix}--popover-content.${prefix}--tooltip-content`
+      );
+
+      expect(rangeLabels[0]).toHaveTextContent('0%');
+      expect(rangeLabels[1]).toHaveTextContent('100%');
+      expect(valueLabels[0]).toHaveTextContent('50%');
+      expect(valueLabels[1]).toHaveTextContent('70%');
+    });
+
     it('allows user to set invalid value when typing in input field', async () => {
       const { type } = userEvent;
       renderTwoHandleSlider({
diff --git a/packages/react/src/components/Slider/Slider.stories.js b/packages/react/src/components/Slider/Slider.stories.js
index 7de0cd26c3e6..78934b90fb8b 100644
--- a/packages/react/src/components/Slider/Slider.stories.js
+++ b/packages/react/src/components/Slider/Slider.stories.js
@@ -67,7 +67,7 @@ export const SliderWithHiddenInputsAndFormatLabel = () => (
   />
 );
 
-export const SliderWithHiddenInputsAndCustomFormat = () => (
+export const SliderWithCustomValueLabel = () => (
   <Slider
     labelText="Slider label with low/medium/high"
     value={50}
diff --git a/packages/react/src/components/Slider/Slider.tsx b/packages/react/src/components/Slider/Slider.tsx
index eb74748e419c..ddb8277f5927 100644
--- a/packages/react/src/components/Slider/Slider.tsx
+++ b/packages/react/src/components/Slider/Slider.tsx
@@ -1529,6 +1529,7 @@ class Slider extends PureComponent<SliderProps> {
                       role="slider"
                       id={twoHandles ? undefined : id}
                       tabIndex={!readOnly ? 0 : -1}
+                      aria-valuetext={`${formatLabel(value, '')}`}
                       aria-valuemax={twoHandles ? valueUpper : max}
                       aria-valuemin={min}
                       aria-valuenow={value}